JavaScript - Javascript Powered Navigation, Alter Html Code On Clicked Links

Hello all,

Looking for some help to alter a gallery script, very kindly provided for use he http://monc.se/kitchen/80/lightweigh...ith-thumbnails

At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed.

Here is the javascript:

Code:

var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});

Here is the HTML, which I have enclosed within a div box positioned absolutely on the page:

Code:

<ul id="gallery">
<li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li>
<li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li>
<li><img src="images/cd_2.jpg" alt="CD Cover 2"></li>
<li><img src="images/cd_1.jpg" alt="CD Cover 1"></li>
<li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li>
<li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li>
<li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
<li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li>
<li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>

And here is the CSS:

Code:

/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
#capt 

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->

I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received.

I have a WebHelp framework created by chmProcessor whereby index.htm calls frameset.html that references a left frame "treeFrame" and right frame "frameCont". The treeFrame has javascript to change the icons from selected to not selected and high light the selected topic.

I have a need to have links in the right frame. And when I click on the link in the right frame, I want the right frame to display the topic but I also want the treeFrame navigation to open the navigation to the newly selected topic.

How would I go about implementing this? In the tree.html, the tree navigation gets created with this code:

Code:

contentTree.create( document.getElementById( "contentsTree" ) , window.parent.document.getElementById( "frameCont" ) , window.parent.parent.location.href );

Here is the tree.js
Code:

/************************************
(C) Toni Bennasar 2007
http://chmprocessor.sf.net
Under GPL license.

Functions to create a content tree for many web pages.

*************************************/

var contentTree = new Object();

contentTree.pageloaded = function() {

    // Get the title of the loaded page:
    
    pageRelativeUrl = getPageTitle( contentTree.frame.contentWindow.document.location.href )
    
    // Search the link to this page
    node = contentTree.seachLinkByHref( pageRelativeUrl );
    if( node == "" ) {
        // Try to search by the page title, without internal reference:
        idx = pageRelativeUrl.indexOf( "#" )
        if( idx >= 0 )
            pageRelativeUrl = pageRelativeUrl.substring( 0 , idx );
        
        node = contentTree.seachLinkByFileTitle( pageRelativeUrl );
    }
    
    if( node != "" ) {
        // If its found, select it over the tree:
        contentTree.selectLink( node , true , false );
    }
}

// Initializes the tree.
// tree : UL element that contains the tree
// frame: The frame that will contain the topic pages.
// url: Input URL of the page.
contentTree.create = function( tree , contentFrame , url ) {

	// Store ref to tree elements:
	contentTree.frame = contentFrame;
	contentTree.tree = tree;
	contentTree.selectedLink = "";

	// Change the links to open his ref into the iframe
	contentTree.links = tree.getElementsByTagName("a");

	// Create click events for the links:
	for (var i=0; i<contentTree.links.length; i++) {
		contentTree.links[i].onclick = function(e){
			contentTree.frame.src = this.href;
			contentTree.selectLink( this , false , true );
			//e.stopPropagation();
			stopEvent(e);
			return false;
		}
	}

	// Prepare all the submenus
	var submenus = tree.getElementsByTagName("ul");
	
	for( var i=0; i< submenus.length; i++ ) {
		var sb = submenus[i];
		sb.parentNode.className="submenu";
		sb.setAttribute("status", "closed");

		// click open the submenu:
		
		sb.parentNode.onclick = function(e) {
			var ulChild=this.getElementsByTagName("ul")[0];
			if( ulChild.getAttribute("status") == "closed" ) {
				contentTree.openUlElement( ulChild );
			}
			else if( ulChild.getAttribute("status") == "open" ) {
				ulChild.style.display="none";
				ulChild.setAttribute("status", "closed");
				
				this.style.backgroundImage="url(1g.gif)";
			}
			//e.stopPropagation();
			stopEvent(e);
		}
		// To avoid events when the submenu items are pressed.
		sb.onclick=function(e){
			//e.stopPropagation();
			stopEvent(e);
		}
	}

	// Load the default page, or the selected topic page:
	
	var topic = getURLParam( url , "topic");
	
	var topicLink = "";
	if( topic != "" )
		topicLink = contentTree.seachLinkByTitle( topic );
	if( topicLink != "" )
		contentTree.selectLink( topicLink , true , true );
	else if( contentTree.links.length > 0 )
		contentTree.selectLink( contentTree.links[0] , true , true );

    // When an internal link is clicked follow the selection at the tree:
    contentFrame.onload_1 = function(){ contentTree.pageloaded(); }
    
}

contentTree.openUlElement = function( ulElement ) {
	if( ulElement.getAttribute("status") == "closed" ) {
		ulElement.style.display="block";
		ulElement.setAttribute("status", "open");
		ulElement.parentNode.style.backgroundImage="url(2g.gif)";
	}
}

contentTree.selectUrl = function( url ) {
    var lnk = contentTree.seachLinkByHref( url );
    if( lnk == "" )
        // URL not found
        contentTree.frame.src = url
    else
        contentTree.selectLink( lnk , true , true );
}

contentTree.selectLink = function( lnkObject , expandTree , loadContentFrame ) {

	if( contentTree.selectedLink != "" )
		contentTree.selectedLink.style.backgroundColor = contentTree.notSelectedBg ;
	else
		contentTree.notSelectedBg = lnkObject.style.backgroundColor;
		
	if( loadContentFrame )
	    contentTree.frame.src = lnkObject.href;
	
	contentTree.selectedLink = lnkObject;
	lnkObject.style.backgroundColor = "#33CC66" ;

	if( expandTree ) {
		var ulElement = lnkObject.parentNode.parentNode;
		while( ulElement != contentTree.tree ) {
			contentTree.openUlElement( ulElement );
			ulElement = ulElement.parentNode.parentNode;
		}
	}
}

// Search a link into the tree by his text:
contentTree.seachLinkByTitle = function( strTitle ) {
    var strTitleLower = strTitle.toLowerCase()
	for (var i=0; i<contentTree.links.length; i++) {
	
	    // Get the text of the link, without return carriages
	    var linkText = contentTree.links[i].innerHTML.toLowerCase();
	    linkText = linkText.replace(/\n/," ");
	    linkText = linkText.replace(/\r/,"");
	    
		if( linkText == strTitleLower )
			return contentTree.links[i];
	}
	return "";
}

// Search a link into the tree by his href:
contentTree.seachLinkByHref = function( strHref ) {
	for (var i=0; i<contentTree.links.length; i++) {
	    //var aux = unescape( contentTree.links[i].href );
	    var aux = contentTree.links[i].href;
        if( aux == strHref || endsWith( aux , "/" + strHref ) )
			return contentTree.links[i];
    }
	return "";
}

contentTree.seachLinkByFileTitle = function( strFile ) {
	for (var i=0; i<contentTree.links.length; i++) {
	
	    //var aux = getPageTitle( unescape( contentTree.links[i].href ) );
	    var aux = getPageTitle( contentTree.links[i].href );
	    
        if( aux == strFile )
			return contentTree.links[i];
        else {
            idx = aux.indexOf( "#" )
            if( idx >= 0 ) {
                aux = aux.substring( 0 ,  idx );
                if( aux == strFile )
			        return contentTree.links[i];
			}
        }
    }
	return "";
}


// Search links that contains
contentTree.searchByContent = function( strSearch , idList , idTopicsList ) {

    var list = document.getElementById( idList );
	list.options.length=0;
	if( strSearch == "" )
		return;
	var topicsList = document.getElementById( idTopicsList );
    //var strLower = strSearch.toLowerCase();
    var strLower = normalizeString( strSearch );
    for (var i=0; i<topicsList.options.length; i++) {
		if( normalizeString( topicsList.options[i].text ).indexOf( strLower ) >= 0 ) {
			var opt = new Option( topicsList.options[i].text );
			opt.value = topicsList.options[i].value ;
			list.options[ list.options.length ] = opt;
		}
	}
	list.ondblclick = function(e) {
		if( list.selectedIndex >= 0 )
			contentTree.selectUrl( list.options[ list.selectedIndex ].value );
	}
}

Simple enough, one would think, but I'm rusty and haven't done this kind of thing in years.

All I need to do is take the current page's url and replace/add a bit into the URL at the appropriate place.

For Example, if this is the Current Page URL:
Code:

http://www.mysite.com/section/main.php?p=1

I want to be able to use the bookmarklet to change it to:
Code:

http://www.mysite.com/section2/main.php?p=1

This is all I've got for it so far. Probably botched that up too.
Code:

javascript:(function(){var%20a=document.URL.split("/section/");var%20newURL="www.mysite.com/section2/"+a;})

Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.

Here is the code relevant to my issue:

HTML:
Code:

<div id="faqBox">
	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
	 <ul>
		 <li><a href="#" onclick="">What is the purpose of this website?</a></li>
		 <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
		 <li><a href="#">Why was this award created?</a></li>
		 <li><a href="#">How do we nominate somebody?</a></li>
		 <li><a href="#">How are people presented with this award?</a></li>
	 </ul>
</div>
<div id="faqInfoBox">
	 <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>

CSS:
Code:

#faqInfoBox {width: 40%;
             border: 5px ridge;
			 height: 310px;
			 background: #606626;
			 float: right;
			 margin-right: 3%;}
			 
#faqBox ul li{font-family: trebuchet ms;
              line-height: 30px;
			  list-style-type: square;}

JS:
Code:

var imgArray = new Array(4);

     imgArray[0] = 'images/content1.png';
     imgArray[1] = 'images/content2.png';
     imgArray[2] = 'images/content3.png';
     imgArray[3] = 'images/content4.png';
     imgArray[4] = 'images/content5.png';
	 
	 var currIndex = 0;
 
     function imgChange(that)
     {
	 if(currIndex < myImages.length - 1) {
         that.src = myImages[++currIndex];
         }else {
         currIndex = 0;
         that.src = myImages[currIndex];
         }
     }

The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look.

I don't want to be fed the answer but just some pointers/tips on what I could do.

I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created).

I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me.

Thank you very much in advance if anyone can help.

Regards,

LC.

Hi, I have an "offline" html demo of 50+page - so it needs to run on standard html/javascripts...

I'm trying to do this:

Page A
Code:

<a href="pageb.html?endpage=pageD.html">Page B.html</a>
<a href="pageb.html?endpage=pageE.html">Page B.html</a>
<a href="pageb.html?endpage=pageF.html">Page B.html</a>

Page B
Code:

<a href="PageC.html?endpage=(the parameter of page A)">Page C</a>
<a href="(the parameter of page A)">End Page</a>

Page C
Code:

<a href="(the parameter of page A)">End Page</a>

I've searched for a couple of hours already and I just can't seem to find this... I'm not that great at javascripts... Thanks a lot!