Jump to content

Popup window

satimis

By satimis
in HTML/XHTML

Recommended Posts

satimis Newbie

satimis

Posted
  • Author
Posted

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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

#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 comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
#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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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 comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
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 comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
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
Link to comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
Not forgot. Misplaced. The closing brace appears after the #tooltip1 a:hover span rule. Just move it to the location that DD pointed out.
Deleted the double "closing brace". Result is same as reported previously.satimis
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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.
Link to comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
- 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 comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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.
Link to comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
- 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
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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 comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
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 comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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 comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted
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 comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
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 comment
Share on other sites
satimis Newbie

satimis

Posted
  • Author
Posted
That stuff is just for XML. You're not using XML.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.
Advice noted. Thankssatimis
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...