Jump to content

Popup window


Recommended Posts

There are a couple ways. Do you want to use JavaScript? It can be done with or without it. With JavaScript might be just slightly easier, but without it isn't so bad either.

Link to post
Share on other sites

Hi Shadow and Deirdre,I expect to have a not-too-difficult solution. I'm not experienced on webpage design and scripting. Google search brought me;1)jQuery Drop Down Menu Tutorial, Easy to Style http://www.queness.com/post/1047/easy-to-s...n-menu-tutorial2)Hover popupshttp://www.wickham43.net/hoverpopups.php(without javascript tooltips or jQuery tooltips)2) above is quite interesting. It meets my expectation. However I couldn't resolve "dropdownmenu.php" etc.. Is it the script written in PHP by the author? But I can't discover it.Advice would be appreciated. TIAB.R.satimis

Link to post
Share on other sites

#2 does look good, especially the "simple tooltip." PHP has nothing to do with the popup. It is all done with the CSS and HTML they is printed on the page you looked at. Copy and paste it and change the dimensions/color/etc to suit your task.

Link to post
Share on other sites
#2 does look good, especially the "simple tooltip." PHP has nothing to do with the popup. It is all done with the CSS and HTML they is printed on the page you looked at. Copy and paste it and change the dimensions/color/etc to suit your task.
It looks a little bid complicate to me. Please advise whether copy the entire content on;http://www.wickham43.net/tutorial.cssI'll play around with their code first before adjusting the content to suit my need.satimis
Link to post
Share on other sites

I was thinking of this:CSS

	#tooltip1 { position: relative; }	#tooltip1 a span { display: none; color: #FFFFFF; }	#tooltip1 a:hover span { display: block; position: absolute; width: 250px; background-color: #aaa; height: 50px; left: 100px; top: -10px; color: #FFFFFF; padding: 5px; }

HTML

	<p id="tooltip1"><a href="introduction.php">Introduction<span>Introduction to HTML and CSS: tooltip with extra text</span></a></p>

Link to post
Share on other sites
I was thinking of this:CSS
	#tooltip1 { position: relative; }	#tooltip1 a span { display: none; color: #FFFFFF; }	#tooltip1 a:hover span { display: block; position: absolute; width: 250px; background-color: #aaa; height: 50px; left: 100px; top: -10px; color: #FFFFFF; padding: 5px; }

HTML

	<p id="tooltip1"><a href="introduction.php">Introduction<span>Introduction to HTML and CSS: tooltip with extra text</span></a></p>

Tried following coding but it didn't work.
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">	<head>	  <style type="text/css" title="Default-Style">		body {	background-image: url("Hibiskus.jpg");	background-position: center center;	background-repeat: no-repeat;	background-attachment: fixed;		margin: 12em 5em;	padding: 0;		font-family: "tahoma", Arial, Helvetica, sans-serif;		font-size: 25px;		#tooltip1 { position: relative; }		#tooltip1 a span { display: none; color: #FFFFFF; }		#tooltip1 a:hover span { display: block; position: absolute; width: 250px; background-color: #aaa; height: 50px; left: 100px; top: -10px; color: #FFFFFF; padding: 5px; }		}		h1 {color: red;text-align:center;}		h2 {color: blue;text-align:center;}	h3 {color: green;text-align:center;}	  </style>	  <meta http-equiv="Default-Style" content="Default-Style" />	  <meta name="generator" content="I am proud to have created my own page from scratch in Notepad." />	  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />	  <title>Testing!</title>	</head>  <body>  <div id="popup">  <p id="tooltip1"><a href="dropdownmenus.php">Dropdown menus<span>Further information:-<br> Only one link can be opened (the one on the menu button), no links are possible in this panel.<br> Use dropdown menus for several dropdown links.</span></a>  </div></p>   </body>  </html>

All text printed on the screensatimis

Link to post
Share on other sites
You forgot to close a ruleset at the end of this line.
Not forgot. Misplaced. The closing brace appears after the #tooltip1 a:hover span rule. Just move it to the location that DD pointed out. Edited by ShadowMage
Link to post
Share on other sites
You forgot to close a ruleset at the end of this line. Add a brace } font-size: 25px;
Oh, I see. Thanks.The code works with following result.- "Dropdown menus" in one line- the popup window hides "menus" which becomes invisible.- all text on the window in one paragraphHow to rectify them?Edit:lower part of the popup window is transparent (taking up 80% of the window)satimis Edited by satimis
Link to post
Share on other sites
The code works with following result.- "Dropdown menus" in one line- the popup window hides "menus" which becomes invisible.- all text on the window in one paragraphHow to rectify them?
Not really sure what we're trying to rectify.- How is "Dropdown menus" supposed to look if it's not supposed to be on one line?- All you have to do is adjust the left and top properties in the #tooltip1 a:hover span rule to position the popup. If you want to make it bigger/smaller just adjust width and height- What do you mean all text is in one paragraph? You have your closing </p> tag in the wrong place. It should come before the closing </div> tag since the <p> is inside the div.EDIT:Oh, and one more thing. This isn't going to affect your page at the moment, but you should consider changing your DTD to Strict instead of Transitional. It'll provide better cross-browser compatibility in the long run. Edited by ShadowMage
Link to post
Share on other sites
- How is "Dropdown menus" supposed to look if it's not supposed to be on one line?
On "Hover popups" page "Dropdown menus" breaking into 2 lines, The word "Dropdown" above "menus". How they made it?
- All you have to do is adjust the left and top properties in the #tooltip1 a:hover span rule to position the popup. If you want to make it bigger/smaller just adjust width and height
The window size is OK. But it covers the word "menus". Therefore the latter can't be seen when the window popup. How to make the popup window moving to the right?
- What do you mean all text is in one paragraph? You have your closing </p> tag in the wrong place. It should come before the closing </div> tag since the <p> is inside the div.
It is OK now after making adjustment as advised. Now the text looks as
Further information:Only one link can be opened (the one on the menu button), no links are possible in this panel.Use dropdown menus for several dropdown links.

EDIT:Oh, and one more thing. This isn't going to affect your page at the moment, but you should consider changing your DTD to Strict instead of Transitional. It'll provide better cross-browser compatibility in the long run.
Could you please explain more of "DTD to Strict instead of Transitional"? Thank.Finally why the lower portion of the popup window is transparent?B.R.satimis
Link to post
Share on other sites
On "Hover popups" page "Dropdown menus" breaking into 2 lines, The word "Dropdown" above "menus". How they made it?
Either adjust the width of the tooltip or use a <br />I recommend adjusting the width.
The window size is OK. But it covers the word "menus". Therefore the latter can't be seen when the window popup. How to make the popup window moving to the right?
I told you how to move it. Adjust the top and/or left properties.
Could you please explain more of "DTD to Strict instead of Transitional"? Thank.
http://w3schools.com/html/html_doctype.aspUse one of the strict DTDs listed there. Probably the strict XHTML since you are currently using the transitional XHTML. A DTD tells the browser how to render a page.
Finally why the lower portion of the popup window is transparent?
:)What? Please explain. Edited by ShadowMage
Link to post
Share on other sites
- snip -http://w3schools.com/html/html_doctype.aspUse one of the strict DTDs listed there. Probably the strict XHTML since you are currently using the transitional XHTML. A DTD tells the browser how to render a page.
Changed following line
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Do I need making change on following line?

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">

:)What? Please explain.
On the popup window about 20% area on top it has a solid background in grey color. The rest part, 80%, is transparent and the text is displayed on the background image.Edit-1:SOLVEDincreasing the height:50px to height:260px (after background-color:#aaa on tooltip1)Other issue fixed. ThankssatimisEdit-2Furthermore:If I expect adding a link on the popup window on clicking a phrase/word on the text it'll evoke the link. Would it be possible? If YES, then HOW? TIA Edited by satimis
Link to post
Share on other sites
Changed following line<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">to<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Do I need making change on following line?<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
I think you need to remove the xmlns and xml:lang attributes.
If I expect adding a link on the popup window on clicking a phrase/word on the text it'll evoke the link. Would it be possible? If YES, then HOW? TIA
It'll take some changes to your HTML and CSS. Try one of the example's on the website you found: http://www.wickham43.net/dropdownmenus.php
Link to post
Share on other sites
I think you need to remove the xmlns and xml:lang attributes.
Yes. What is that line for?
It'll take some changes to your HTML and CSS. Try one of the example's on the website you found: http://www.wickham43.net/dropdownmenus.php
That is dropdown menu. I'll start testing it as mentioned in another thread started by me. Whether you meant trying following section;Positioning of popups shown in vertical dropdown menu.?I wonder whether I should continue on popup window or move to dropdown menu. Because my test has not yet been finished. My next step is adding sound on the popup window:-1) backgound music2) narration-reading the text on the popup window. If I'm not wrong I came across such software before which can read the textB.R.satimis
Link to post
Share on other sites
Yes. What is that line for?
That stuff is just for XML. You're not using XML.
I wonder whether I should continue on popup window or move to dropdown menu.
Depends on whether you just want an informational popup or an interactive popup. If you want an interactive popup, you need to use the dropdown menus.
Link to post
Share on other sites
Hi folks,How to create a popup frame with short explanation while the mouse pointer is placed over a short phrase/words on webpage? TIAB.R.satimis
If you are looking for the equivalent of a tool tip, have you looked into the TITLE attribute? See discussion on this website.
Link to post
Share on other sites
If you are looking for the equivalent of a tool tip, have you looked into the TITLE attribute? See discussion on this website.
Hi,Thanks for your link. Just tried the syntax. It works as well. Now my questions are;1)How can I change the background color of the popup window?2)How can I break the text content to para?<br><p></p>don't work. TIAB.R.satimis
Link to post
Share on other sites
1)How can I change the background color of the popup window?2)How can I break the text content to para?
Neither of those are possible with the title attribute. The title attribute is for simple, short explanations or "reminders" to what an element's purpose is.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...