Log in

View Full Version : href="#thumb"


Atom
05-12-2011, 05:34 PM
I have this line of code which was provided by others.

<a class="thumbnail" href="#thumb"><img alt="" src="images/Thumb_ESGChtA.jpg" width="100px" height="66px" border="0" />

The word thumb is not defined anywhere else in the document by name. Does this mean it points to itself?
bluewalrus
05-12-2011, 05:44 PM
That is an anchor link it looks for the corresponding anchor name which should be else where on that page.


<a name="thumb"></a>
Atom
05-12-2011, 07:13 PM
That is an anchor link it looks for the corresponding anchor name which should be else where on that page.


<a name="thumb"></a>

The word thumb does not appear anywhere else on the page, nor does the word name.
Atom
05-12-2011, 07:34 PM
Here is the entire page.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}</style>
</head>
<body>
<div class="gallerycontainer">Mouse over thumbnail for full sized image. (UNDER CONSTRUCTION)</div>
<div class="gallerycontainer">&nbsp;</div>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img alt="" src="images/Thumb_ESGChtA.jpg" width="100px" height="66px" border="0" />
<span><img alt="" src="images/ESGChtA.jpg" /><br />
ESCombo</span></a>
<a class="thumbnail" href="#thumb"><img alt="" src="images/Thumb_ESGChtA.jpg" width="100px" height="66px" border="0" />
<span><img alt="" src="images/ESGChtB.jpg" /><br />
Alligator</span></a><br />
</div>
</body>
</html>
bluewalrus
05-12-2011, 07:50 PM
Oh, yes than the '#thumb' does nothing other than I think keep the page standard compliant.
Atom
05-12-2011, 08:03 PM
Oh, yes than the '#thumb' does nothing other than I think keep the page standard compliant.

So it really doesn't do anything?

I checked, and the page acts the same whether you use "thumb" or "xyz." I've had a very hard time finding any documentation of this.
jscheuer1
05-13-2011, 12:40 AM
That's:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

And what you've been saying is mostly correct. However, it has nothing to do with compliance. The a tag needs an href in order for the css to work in IE 6. Using a hash (#) for that suffices and generally does nothing else. However, in some cases (quite rare, only in older browsers or in all browsers if the page is hosted on certain hosts) it will reload the page if clicked. But in all browsers, it can - depending upon the layout and the scroll state of the page when and if the user clicks it, reposition the page. Because of this last I would recommend changing them from:


<a class="thumbnail" href="#thumb">

to:


<a class="thumbnail" href="javascript:void(0);" onclick="return false;">

That way it will still qualify as an anchor link for css purposes under IE 6, and will do absolutely nothing when clicked regardless of whether or not the user has javascript enabled, and/or has an older browser, and/or the page is hosted on certain hosts.
deathbycheese
05-13-2011, 11:34 PM
...
and if the user clicks it, reposition the page.
...


@jscheuer1,

Hi John. Your comment brings up an issue I've been trying to figure out. I have a very simple, straight-forward JS function that swaps divs on li click based upon <a href=#id. It, of course, repositions the page and I don't need it to. I just need the divs to swap.

Here's the basics of the code. Do you see a way I could alter this just enough without having to replace it with new code altogether?



<ul class="triggers_PrjLst">
<li class="triggerButton"><a href="#printProj" onclick="showPane('printProj')">PRINT</a></li> <!--1st trigger-->
<li class="triggerButton"><a href="#webProj" onclick="showPane('webProj')">WEB</a></li> <!--2nd trigger-->
<li class="triggerButton"><a href="#pptProj" onclick="showPane('pptProj')">SLIDE</a></li> <!--3rd trigger-->
<li class="triggerButton"><a href="#illProj" onclick="showPane('illProj')">CGI</a></li> <!--4th trigger-->
</ul>



<div id="thumbsContainer">
<div id="printProj" class="projThumbs"></div> <!--projThumbs 1st action-->
<div id="webProj" class="projThumbs"></div> <!--projThumbs 2nd action-->
<div id="pptProj" class="projThumbs"></div> <!--projThumbs 3rd action-->
<div id="illProj" class="projThumbs"></div> <!--projThumbs 4th action-->
</div>


<SCRIPT LANGUAGE="javascript">
function showPane(id) {
var e,i;
var PID = "thumbsContainer"; // the id of the parent element
var p = document.getElementById(PID); // parent element
// loop through each of the childNodes of the parent element
for (i=0; i<p.childNodes.length; i++) {
e = p.childNodes[i];
if (e.nodeType!=1) continue; // pass over non-element nodes
if (e.getAttribute("id") == id) {
e.style.display = "block";
}
else {
e.style.display = "none";
}
}
}
</SCRIPT>





Thanks in advance,
dbc
jscheuer1
05-14-2011, 02:07 AM
If your goal is to display the hash (#printProj, etc.) in the address bar, no. There's no way.

However, if you would be happy without that (the hash will still show in the status bar on hover of the link if the browser has that feature enabled), just have each onclick return false, example:


<a href="#printProj" onclick="showPane('printProj'); return false;">PRINT</a>

But, it looks like you're changing the display property of divisions. If so, this in and of itself can cause the page to jump around. To prevent that, thumbsContainer should have its dimensions set to a height equal to or greater than the maximum height of its content when everything that can be revealed within it is revealed, and if it's a factor, similarly with its width. You may already have dealt with that, you don't show the page's style. And all that part should only be a factor if there's content beside thumbsContainer and/or below it. Or possibly if it's the last thing on a page that's either taller or wider than the window.

It's possible I'm missing something, either misunderstanding the question, or not correctly visualizing what the code does/would do.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

And tell me what I need to do to see the problem.
deathbycheese
05-14-2011, 02:13 AM
Hooray! 'return false' did the trick. You're a freakin' god, dude!

dbc