PDA

View Full Version : Removing numbers from navigation boxes



designer_D
10-28-2011, 11:51 PM
Hello,

Is there a way to remove the numbers from the links in this script:

http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm

I'm not a Javascript expert or anything, but I'm trying to look at the code and am trying different things so the squares shows up but without numbers but with no success. I just want to be able to click the squares and have it go to a new image without a number showing. Is that possibles?


Thanks!

jscheuer1
10-29-2011, 09:57 PM
If I understand what you're after, yes. Find this function in the photogallery.js script:


photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
var instanceOfGallery=this
var navHTML=""
for (var i=0; i<this.pagecount; i++)
navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a> ' //build sequential nav links
pdiv.innerHTML=ptext[0]+' '+navHTML
var navlinks=pdiv.getElementsByTagName("a")
navlinks[0].className="current" //Select first link by default
this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
for (var i=0; i<navlinks.length; i++){
navlinks[i].onclick=function(){
instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
return false
}
}
}

See that red (i+1) there? That's where the numbers are coming from. The script doesn't need them though. They're just there so people looking at it will know which number 'page' they are clicking for. But I guess you don't really need them, it should be fairly obvious to folks that they're in order.

You can change it to '', or '&nbsp;' (an empty space that can't be ignored in the layout - a non-breaking space) or to anything really. I'd suggest using something. Leaving it completely blank could cause problems. So try replacing that highlighted line from above with:


navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+'&nbsp;'+'</a> ' //build sequential nav links

designer_D
10-31-2011, 07:36 PM
Thank you very much, that seems to have done the trick!

:D

designer_D
11-02-2011, 04:16 AM
Another question: I've set up the CSS so the links float to the right with the 'float:right' command. This, of course, has the first link float first and thus be on the right side.

Is there a way to reverse the order of the boxes? With the floating to the right they are "321," and I'd like it to be "123."

Side note: I do not have numbers but rather the 'active' box is darker and should go from left to the right.

Hope that makes sense. I know how to do this, but just not in the Javascript.

Thanks!

jscheuer1
11-02-2011, 06:53 AM
You could skip the float on the links and instead float and/or otherwise position/style their container element (which has a class name of 'photonavlinks') to get them where you want them to be.

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.