Jump to content

Recommended Posts

2 out of 3 is good! Now for the remaining change of behavior. For several years, a bit of code has produced a pop-up box containing a footnote or reference when a link was hovered. It still works, but now if the pop-up box overlaps an image, the text avoids the image below. You can see problem if you paste the attached code into the Try It Editor at

 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain

 

and hover on 'paradigm'.

 

Something in <style> needs to be changed (apparently to keep up with bug fixes in html), but I can't find it. It seems to me that z=1 should make the presence of an image at z=0 irrelevant. It used to!

 

(Immediate edit: I didn't see the attachment, so I changed the file from RTF to plain text and reattached...)

Still no attachment visible, and it keeps saying 'No file chosen', so in case it means it, here is what the attachment would have said:

---------------------------------------------------------------

 

<!DOCTYPE html><html>
<style>
a span {
display : none ; }
/* Author or dagger: blue, no underline */
a.n {
color : blue ;
text-decoration : none ;
}
/* Hover to display Reference or Note in popup box */
a.n:hover span {
position : relative ;
top : 0px ; /* Place box 1 line below anchor */
right : 10px ; /* Keep edge of box on screen */
display : block ;
z-index : 1 ;
color : black ;
text-decoration : none ;
font-size : .90em ;
background-color: #ffd ;
text-indent : 0 ;
outline : 2px solid blue ;
padding : 3px ;
}
.fl {
float : left ;
margin : 4px 16px 4px 0px;
}
</style>
<body>
<h2>Spectacular Mountain</h2>
<figure>
<img class="fl" src="pic_mountain.jpg" alt="Mountain View"
style="width:50%">
<figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices.
</figcaption></figure>
<p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users.
</p>
</body>
</html>
Edited by ferren
Link to post
Share on other sites

Worth a try. I added charset and title to the <head>, and put a picture where the code could find it, and it validated. Code now reads:

 

-----------------------

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Test11</title>
<style>
a span {
display : none ; }
/* Author or dagger: blue, no underline */
a.n {
color : blue ;
text-decoration : none ;
}
/* Hover to display Reference or Note in popup box */
a.n:hover span {
position : relative ;
top : 0px ; /* Place box 1 line below anchor */
right : 10px ; /* Keep edge of box on screen */
display : block ;
z-index : 1 ;
color : black ;
text-decoration : none ;
font-size : .90em ;
background-color: #ffd ;
text-indent : 0 ;
outline : 2px solid blue ;
padding : 3px ;
}
.fl {
float : left ;
margin : 4px 16px 4px 0px;
}
</style>
<body>
<h2>Spectacular Mountain</h2>
<figure>
<img class="fl" src="http://electromontis.net/evoligion/_C/C-Images/pic.mountain.jpg" alt="Mountain View"
style="width:50%">
<figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices.
</figcaption></figure>
<p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users.
</p>
</body>
</html>
---------------------
but the pop-up box still doesn't work the way it used to.
I was pleased to see that the Nu validator does not fuss about 'width:50%;' for images. (How else do you keep an image proportional to page width as width is changed?)
Link to post
Share on other sites

Afterthought. Same code works at

 

http://www.electromontis.net/evoligion/_C/Test11.html

 

Added in edit: In its first working incarnation, the pop-up box did not displace the z=0 text as it now does. It simply hid it, which is acceptable. This suggests a major change in the behavior of the z-stacking algorithm, not entirely smoothed out yet.

 

It might have been more useful if I had mentioned all this when behavior first changed, because it really looks like an HTML edit that did more than necessary. But--as always--I assumed it was something I had done, and in any case, I was focussed on writing rather than programming.

Edited by ferren
Link to post
Share on other sites

The z-index only decides whether an element goes above or below another. Since the span is still within the page flow, it is still affected by the <img> element. To remove the span from the page flow you would need to set its position to absolute rather than relative. Floating the span left or right would also prevent the <img> from affecting it.

Link to post
Share on other sites

</head> is now in place; Nu missed that one.

 

Thanks for the suggestions:

 

absolute puts the box somewhere the reader (who is presumably looking at the cursor) isn't looking: not good.

 

overflow:hidden; stays within the width of the caption and makes a cramped box if the image is wide, as it sometimes is. References often don't fold gracefully, and do better in long boxes.

 

overflow:hidden AND float:left; sometimes breaks the caption at the anchor and puts the remainder below the image. Not good.

float:left; puts a wide box below the image, or for the rare image at 100% with caption beneath, just below the anchor (where it should be). This appears to be as close to the desired original behavior as we can get these days.

 

All things considered, I liked the old behavior better: overlap the image, text in box runs over image. Alas. (Who thought what needed fixing?)

 

Tutorials still tell me that the box model permits boxes to overlap. Why, if its enclosing box overlaps the image, can't the text of the <span> be persuaded overlap it? ... Suppose I wanted to position the pop-up relative to the cursor, obscuring whatever lay below, in the manner of a tool tip? Do we have any control over tool tips? I will look into this further.

 

I found a suggestion using <abbr> which might work--except that none of my browsers know about it:

 

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

 

TOR kept getting resets. Safari , iCab, Opera, Omniweb, Aviator, Vivaldi, Chrome and Chromium ignore it. Firefox at least underdotted WHO, but I presume that the expected hovering behavior is to display the unabbreviated title. I might make this work, if browsers cooperated .... (In any case, I'm already using underdots to go the glossary for neologism and jargon.)

Link to post
Share on other sites

If you use position: absolute, you need to wrap the element inside a parent with position: relative and then set the top, left, width and height properties to put the box where you want it to go.

Link to post
Share on other sites

Remove float, apply position: relative to figure outer container element, use position: absolute; on span and DO NOT specify top property, it then naturally position itself beneath the link text and stretched full width and overlaps image, tested in IE, FF, Chrome, Opera, and Safari.

 

Even if you shrink browser window and cause the link to move to second or third line it remains just below link.

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Test11</title>        <style>            .fig_popup_outer {                position: relative;            }            .fig_popup_outer figcaption {                color:brown;            }            .fig_popup_outer a span   {                display: none;            }            /* Author or dagger: blue, no underline	*/            .fig_popup_outer a.n{                color: blue;                text-decoration: none;            }            /* Hover to display Reference or Note in popup box */            .fig_popup_outer a.n:hover span{                position: absolute;                /* top		        : 0px   ;  Place box 1 line below anchor */                right: 10px; /* Keep edge of box on screen */                display: block;                z-index: 1;                color: black;                text-decoration: none;                font-size: .90em ;                background-color: #ffd;                text-indent: 0;                outline: 2px solid blue;                padding: 3px;            }            .fl {                float: left ;                margin: 4px 16px 4px 0px;            }        </style>    </head>    <body>        <h2>Spectacular Mountain</h2>        <figure class="fig_popup_outer">            <img class="fl" src="http://electromontis.net/evoligion/_C/C-Images/pic.mountain.jpg" alt="Mountain View"                 style="width:45%">            <figcaption>Continually syndicate client-centered resources vis-a-vis covalent  <a class="n">paradigms<span>Um lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue. In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue. Od lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue.</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices.            </figcaption></figure>        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>        <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users.        </p>    </body></html>
Link to post
Share on other sites

That'll keep me busy for a while! Thanks for the hand-holding!

 

I just noticed related behavior

Link to post
Share on other sites

in a table: the pop-up box has no problem hiding adjacent boxes where it overlaps a bit, but it still tries to stay inside its <td> box. I shall work on the <img> problem first.

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...