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
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Simple Question Regarding Jquery Nav and Active Page

    First of all I should say I know very little about jquery and web dev in general. The little I do know is in thanks to this wonderful site.

    I am using a few different freebie snippets from around the net that i tried to hack as much as possible. I think I have a simple question.

    My site is http://www.samuelorf.com/?page_id=233#

    What I want is the animated triangle used in the nav to remain in place on whichever the active link is. Currently it just snaps back to starting position no matter what page I am on.

    Here is the CSS I used and modified from the interwebs. Let me know if I am missing something you geniuses might need.

    All I modified was the #animated-tab

    #minislide {
    float: left;
    margin: 0;
    padding: 0px 26px 0px 10px;
    position:relative;
    z-index:2;
    }

    #minislide li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    display: inline;
    list-style: none;
    position:relative;
    }

    #minislide a:link, #minislide a:visited {
    float: left;
    line-height: 19px;
    font-weight: 300;
    margin: 0 10px 0px 10px;
    text-decoration: none;
    color: #fff;
    }

    #minislide a.active:link, #minislide a.active:visited {
    border-bottom: 5px solid #fff;
    padding-bottom: 1px;
    color: #fff;
    }

    #minislide a:hover {
    border-bottom: 5px solid #fff;
    padding-bottom: 1px;
    color: #fff;
    }

    #animated-tab {
    position: absolute;
    z-index: 1;
    /*font-size: 85%;*/
    line-height: 40px;
    margin-bottom: 17px;

    background: transparent url(images/icon-uparrowsmallwhite2.png) bottom no-repeat;
    width:100%;
    }

    br
    {
    clear:both;
    }

    Thank you sooooo much.
    Sam

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This is the script I use

    JS Script:


    /*

    Minislide
    Code derived from the original idea by Stephen Clark (http://www.sgclark.com/sandbox/minislide/)
    Updated JS to enable active link indicator to "snap back' derived from Rob L Glazebrook (http://www.rootarcana.com/test/smartmini/)

    */

    var minislide = {
    currentTab: 0,
    activeTab: 0,
    destX: 0,
    destW: 0,
    t: 0,
    b: 0,
    c: 0,
    d: 20,
    animInterval: null,
    sliderObj: null,
    aHeight: 0,
    ul: [],
    liArr: [],
    aArr: [],

    init: function() {
    if(!document.getElementById || !document.getElementById("minislide")) return;

    minislide.ul = document.getElementById("minislide");
    minislide.liArr = minislide.ul.getElementsByTagName("li");
    minislide.aArr = minislide.ul.getElementsByTagName("a");

    for(var i = 0, li; li = minislide.liArr[i]; i++) {
    li.onmouseover = minislide.aArr[i].onfocus = function(e) {
    var pos = 0;
    var elem = this.nodeName == "LI" ? this : this.parentNode;
    while(elem.previousSibling) {
    elem = elem.previousSibling;
    if(elem.tagName && elem.tagName == "LI") pos++;

    }
    minislide.initSlide(pos);
    }
    }

    minislide.ul.onmouseout = function(e) {
    minislide.initSlide(minislide.currentTab);
    };

    for(var i = 0, a; a = minislide.aArr[i]; i++) {
    if(a.className.search("active") != -1) {
    minislide.activeTab = minislide.currentTab = i;
    }
    a.style.borderBottom = "0px";
    a.style.paddingBottom = "6px";
    }

    minislide.slideObj = minislide.ul.parentNode.appendChild(document.createElement("div"));
    minislide.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
    minislide.slideObj.id = "animated-tab";
    minislide.slideObj.style.top = (minislide.ul.offsetTop + minislide.liArr[minislide.activeTab].offsetTop + minislide.aArr[minislide.activeTab].offsetTop) + "px";
    minislide.slideObj.style.left = (minislide.ul.offsetLeft + minislide.liArr[minislide.activeTab].offsetLeft + minislide.aArr[minislide.activeTab].offsetLeft) + "px";
    minislide.slideObj.style.width = minislide.aArr[minislide.activeTab].offsetWidth + "px";
    minislide.aHeight = minislide.ul.offsetTop + minislide.liArr[minislide.activeTab].offsetTop + minislide.aArr[minislide.activeTab].offsetTop;

    minislide.initSlide(minislide.activeTab, true);

    var intervalMethod = function() { minislide.slideIt(); }
    minislide.animInterval = setInterval(intervalMethod,10);
    },

    cleanUp: function() {
    clearInterval(minislide.animInterval);
    minislide.animInterval = null;
    },

    initSlide: function(pos, force) {
    if(!force && pos == minislide.activeTab) return;
    minislide.activeTab = pos;
    minislide.initAnim();
    },

    initAnim: function() {

    minislide.destX = parseInt(minislide.liArr[minislide.activeTab].offsetLeft + minislide.liArr[minislide.activeTab].getElementsByTagName("a")[0].offsetLeft + minislide.ul.offsetLeft);
    minislide.destW = parseInt(minislide.liArr[minislide.activeTab].getElementsByTagName("a")[0].offsetWidth);
    minislide.t = 0;
    minislide.b = minislide.slideObj.offsetLeft;
    minislide.c = minislide.destX - minislide.b;

    minislide.bW = minislide.slideObj.offsetWidth;
    minislide.cW = minislide.destW - minislide.bW;

    minislide.slideObj.style.top = (minislide.ul.offsetTop + minislide.liArr[minislide.activeTab].offsetTop + minislide.aArr[minislide.activeTab].offsetTop) + "px";
    },

    slideIt:function() {

    // Has the browser text size changed?
    if(minislide.aHeight != minislide.ul.offsetTop + minislide.liArr[minislide.activeTab].offsetTop + minislide.aArr[minislide.activeTab].offsetTop) {
    minislide.initAnim();
    minislide.aHeight = minislide.ul.offsetTop + minislide.liArr[minislide.activeTab].offsetTop + minislide.aArr[minislide.activeTab].offsetTop
    };

    if(minislide.t++ < minislide.d) {
    var x = minislide.animate(minislide.t,minislide.b,minislide.c,minislide.d);
    var w = minislide.animate(minislide.t,minislide.bW,minislide.cW,minislide.d);

    minislide.slideObj.style.left = parseInt(x) + "px";
    minislide.slideObj.style.width = parseInt(w) + "px";
    } else {
    minislide.slideObj.style.left = minislide.destX + "px";
    minislide.slideObj.style.width = minislide.destW +"px";
    }
    },

    animate: function(t,b,c,d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
    }
    }

    window.onload = minislide.init;
    window.onunload = minislide.cleanUp;

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out.

    It was an easy one. I am disappointed in you guys.

  • #4
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    You cannot expect to receive an answer when you have posted in the wrong forum. Java is not the same as Javascript.
    Moving from Java to Javascript Frameworks.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 


  •  

    Posting Permissions

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