Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Difficult CSS/Javascript Navigation Question

    I am trying to make simple links stay highlighted when clicked on until another link is selected. The 4 columns below the image area is the links/navigation I am referring to.

    Also, at the bottom right hand corner of the image you will see Next and Previous links and I need these to scroll through the links that correspond to each image.

    I am not sure why this is posing to be so difficult but I have posted this same question to 5 different forums out there and no-one seems to know how. The URL is:
    http://manhattanwest.com/media-center/video-images.php

    Is there anyone here that can help?

    Thanks a ton!!

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey. It's difficult to test because you have the AJAX stuff going on, but you might want to change the onclick events to this:
    Code:
    onclick="ajaxpage('images/index.php', 'catHolder', this);"
    and then change this:
    Code:
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    to this:
    Code:
    function ajaxpage(url, containerid, el){
    var as=document.getElementById('vidtabs').getElementsByTagName('a');
    for (i=0; i<as.length; i++) {
    as[i].className="";
    }
    el.className="on";
    
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    You'll also need to change this:
    Code:
    <ul class="vidtabs">
    to this:
    Code:
    <ul id="vidtabs">
    and add something like this to your CSS:
    Code:
    .on {
    border:1px solid red;
    }
    I hope that helps (and I haven't missed anything important).

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Man you are a NINJA!!!!!!!!!!!!!!!!!!!!!!!

    Thanks so much!

    I hate to ask but maybe you could help with this question???

    I made a second JS file for the 4 columns of links below the image (the navigation that changes the images out) but they will not work the same as the other top "Images Video Radio" links. Also when you click the bottom image nav links it changes the top 3 links.....I really really appreciate your help and am going to go take some JS classes ASAP!!!

    Thanks again BonRouge!!!!

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind.....I forgot to change something and I figured it out....thanks a ton again!

    LOL....if possible would you know how I can get the Next and Previous links on the bottom right of the image to rotate through the 4 columns of links below??

    If not its okay you have already helped me a TON!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •