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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Initiate a function from anchor link? Append class to anchored div on page load?

    Hi, I've got a basic open/close system where you have a persons picture, you click on it and their bio slides open below their image. The JS basically just adds an .active class to each divs button thats clicked on. On the page, everything works as it should. What I'm trying to do is have anchor links going from other pages to specific profiles which I'm able to do fine but then I want the profile to actually be open on page load. I'm wondering how I can go about doing something like this.

    I'm not sure the code that controls the open/close stuff will be that helpful as what I'm trying to do is append the .active class to the anchored div on page load so that the .box is open but I'm attaching the code anyways.

    Code:
    jQuery('.slide-boxes>.box').each(function(){
    		var box = jQuery(this);
    		var hoverClass = 'hover';
    		var imageHolder = box.find('.image');
    		var icon = box.find('.opener .icon');
    		var cloneImage = imageHolder.children('.clone');
    		var animSpeed = 400;
    		box.openClose({
    			activeClass: 'active',
    			opener: '.opener',
    			slider: '.slide',
    			animSpeed: animSpeed,
    			effect: 'slide',
    			animStart: function(obj){
    				if(obj){
    					icon.stop().transition({ rotate: '-45deg' });
    					if(!imageHolder.hasClass(hoverClass)) cloneImage.stop().animate({opacity: 1},{duration: animSpeed});
    				} else {
    					icon.stop().transition({ rotate: 0 });
    					if(!imageHolder.hasClass(hoverClass)) cloneImage.stop().animate({opacity: 0},{duration: animSpeed});
    				}
    			}
    		});

  • #2
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    I'm not sure how you are applying anchor linking to the desired profile from another page and getting the profile you want. but if that is working and they are unique, is there a way you can update your links from the previous page with hashtags? if that's the case then you could do a hash check on page load, for that hash and add your active class that way.

    Code:
    if(window.location.hash) {
      // add your active class to the specific element somehow
    }

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ah, Something like this might work... the general structure of code is as follows, with 'slide' being what opens and closes. Typically how it works is the box div is repeated per person, when you click the opener an active class would be added to box, then the slide div would get a display:block style added to it. when you close the opener, the active class on box is removed, and the slide div display is changed to done, and a js-hidden class is added. I could sure use some help sorting out the JS. I started something that seems like it will work if i can work it some more. Here's the html structure...

    Code:
    <a id="person-name"></a>
    <div class="box">
        <a href="#" class="opener">
            <div class="image">
                <img src="image.jpg">
            </div>
            <div class="holder">
                <header class="heading"><h2>Person Name</h2></header>
            </div>
        </a>
        <div class="slide">
            <p>Long Text</p>
        </div>
    </div>
    and the JS i've got so far

    Code:
    function initHash() {
    	if(window.location.hash) { 
           var thehash = window.location.hash;
           if (thehash == "#person-name"){
              jQuery('#person-name').find('.slide').attr('style', 'display: block');
           }
        }
    }

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up

    hey, i think i kind of have this working here. i moved the person-name id down to the box div for now because i was having a difficult time targeting the box div with jquery using the person-name id as the source. if anyone has any ideas about that that would be cool but for now here is what i have which does work. i took a different approach and just triggered a click on the button (.opener) which would normally activate this whole thing which is way easier.

    Code:
    function initHash() {
    	if(window.location.hash) { 
           var thehash = window.location.hash;
           if (thehash == "#person-name"){
              jQuery('#person-name>.opener').trigger('click');
           }
        }
    }
    Now there are two challenges. One being the first one I mentioned with targeting the box div from an a tag outside of the div. The other is that this anchor is dynamic... it's generated in php and injected into the code like id="'.$anchor.'". I'm wondering if there is a way to do this where it could just look for the # and then whatever is after it? like #* or whatever wildcard would be or something. That way it can just pull the anchor name from whatever the URL is.

    Thanks for pointing me in this direction. Really helped.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by wyclef View Post
    I'm wondering if there is a way to do this where it could just look for the # and then whatever is after it?
    .

    If you page loads with a hash .. you could get just the info after the hash.
    Code:
     var hash = window.location.hash.replace("#","");
    Say you come from your other page
    Code:
     http://www.example.com/people/person.html
    and your link that you clicked on to take you to your list is like:

    Code:
     http://www.example.com/people/list.html#thisUserId
    on your new page load, you would be anchored to that part, which you said you have working, then using the hash info trigger your active class.
    Code:
     if(window.location.hash) {
     var hash = window.location.hash.replace("#",""); 
    $('#' + hash).trigger('click');
    }

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    What am I doing wrong here... pretty sure it's probably the syntax I've got messed up.

    Code:
    function initHash() {
    	if(window.location.hash) { 
           var thehash = window.location.hash.replace('#',''); 
           if (thehash == ('#' + thehash)){
              jQuery('#' + thehash + '>.opener').trigger('click');
           }
        }
    }

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    your check is wrong ..
    you variable 'thehash' equals what ever is after the hash. .. so if your URL is blahblah.html#wyclef

    your variable gives you 'wyclef'
    so get rid of that check. and just try this.
    Code:
     if(window.location.hash) {
     var hash = window.location.hash.replace("#",""); 
    $('#' + hash + ' > .opener').trigger('click');
    }
    i don't remember if window.location.hash gives you the hash in it or not .. so you might not even need to replace # with '' .. so if you take off the replace and console.log(hash) it might give you the hash so you would just need to do $(hash +' > .opener') as your selector.

    and you might wanna throw a check in there for a hash and if the element exists. like
    Code:
    if(window.location.hash) {
     var hash = window.location.hash.replace("#",""); 
    if ($('#' + hash).length){
    $('#' + hash + ' > .opener').trigger('click');
    }
    Last edited by joanzn; 12-05-2013 at 03:28 PM. Reason: more info

  • Users who have thanked joanzn for this post:

    wyclef (12-05-2013)

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks! This works perfect. Now for the finishing touches, currently I'm targeting div#hash > .opener for testing purposes but what I really need to do is target an a tag outside of the div... like

    Code:
    <a id="#hash-name"></a>
    <div class="box">
        <a href="#" class="opener"></a>
    </div>
    <a id="#second-hash-name"> </a>
    <div class="box">
        <a href="#" class="opener"></a>
    </div>
    <a id="#third-hash-name"> </a>
    <div class="box">
        <a href="#" class="opener"></a>
    </div>
    I could just leave the #hash-name with the box div BUT... needs to be with the a tag really. I'm not clear on how I would do this. Something like...

    Code:
    jQuery('#' + hash').next(' > .opener').trigger('click');
    ???

    Obviously that didn't work. lol.

    tried this also...

    Code:
    jQuery('#' + hash).children('.opener').trigger('click');
    Last edited by wyclef; 12-05-2013 at 05:47 PM.

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    your .opener isn't a child of the #hash-name .. so .. if you want to target the #hash-name only then something else > .opener won't work > = direct child.

    SO your HTML:
    Code:
    <a id="#third-hash-name"> </a>  
    <div class="box"> -----> sibling of #third-hash-name
        <a href="#" class="opener"></a> -----> child of .box
    </div>
    might wanna try:
    Code:
    $('#' + hash').sibling('.box').children('.opener').trigger('click');
    or some cleaner combination of that

    Code:
    $('#' + hash + '+ .box').children('.opener').trigger('click');
    Code:
    $('#' + hash + '+ .box > .opener').trigger('click'); // idk bout this one lol
    .. just for simplicity tho .. use the 1st one..

    some stuff if you wanted a nice bookmark reminder I use it all the time cause my memory suucckksss hehe http://www.w3.org/TR/CSS2/selector.html
    Last edited by joanzn; 12-05-2013 at 06:07 PM.

  • Users who have thanked joanzn for this post:

    wyclef (12-05-2013)

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    perfect. thanks. i'm using the 2nd one... seems to work. thanks for your help!


  •  

    Posting Permissions

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