homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jquery toggle
open from outside link
xboxingman




msg:4439314
 8:29 pm on Apr 10, 2012 (gmt 0)

I am using a pretty simple toggle to open/close a div


<script type="text/javascript">
$(".titlebar").click(function(){
$(this).next(".boxes").toggle(1200);
})
.toggle( function() {
$(this).children("span").text("-");
}, function() {
$(this).children("span").text("+");
});
</script>

<div class="titlebar">This Div<span>+</span></div>
<div id="thisdiv" class="boxes">
<div id="one">content</div>
<div id="two">content</div>
</div>
<div class="titlebar">This Div2<span>+</span></div>
<div id="thisdiv2" class="boxes">
<div id="three">content</div>
<div id="four">content</div>
</div>


I wanted to know if there is a way to open the div from an external link
say I want to go to the /page.php#three I would want #thisdiv2 to be displayed open.

Would really appreciate some incite.

Thank you,
Mike

 

xboxingman




msg:4439378
 12:39 am on Apr 11, 2012 (gmt 0)

I got it to work sort of. Using php and js
using a switch to get the $load var


$(document).ready(function() {
$("<?php echo $load ?>").toggle(1200);
});


the only problem is it doesn't bring me to the div I need to be at.. say I do page.php#four
it should go to the bottom of the page, but it doesn't, it opens the main div, but doesn't go to the selected id

enigma1




msg:4440384
 9:48 am on Apr 13, 2012 (gmt 0)

Use the name attribute of the <a> tag for internal navigation
<a name="four">Page-4</a>

Or if you don't want to use the internal link navigation, you can get the hash part from the request and navigate to it directly and dynamically.

if( window.location.hash.length ) {
var offset = $(window.location.hash).offset();
$('html, body').offset({ top: offset.top, left: offset.left});
}


and put in the the document ready section

xboxingman




msg:4440608
 6:59 pm on Apr 13, 2012 (gmt 0)

Thanks a lot, the name attribute was the fix I needed.

I tried to use the hash request so I didn't have to go back and name 60 elements but it did some funky stuff.. it loaded the page strange, a page of white and offset everything.

Thanks a lot for the tip.
Mike

xboxingman




msg:4440654
 9:18 pm on Apr 13, 2012 (gmt 0)

Okay so I just added the name tag to all the divs.

Maybe I didn't understand what you mean using the name attribute in the anchor tag? the links are like this:

page one
<a href="pagetwo.php?d=2#four

then the toggled div on page two would be open but the #four doesn't go to <div name="four">

I thought this method would work when I tried it on just one, but once I finished and I clicked an external link to the page it didn't work.

So I need some help trying to figure out how to make the hash part do its job correctly?

enigma1




msg:4440679
 10:50 pm on Apr 13, 2012 (gmt 0)

The name tag was not for the divs it was for the <a> tags. If you want to use the <div> with ids use the offset method. You shouldn't need to change the html. The part I do not understand is about the "funky stuff". You can debug this just put an alert on the offset.top and offset.left and check the values.

xboxingman




msg:4440688
 11:10 pm on Apr 13, 2012 (gmt 0)

I tried putting the name tags on the <a> tags but it didn't do anything.

I added the alerts for the offsets and they give some numbers that don't really mean much to me but do show they are working in the sense that it gives a different location for each link.

The 'funky stuff' I'm referring to is that the page loads horrible. Instead of loading the div at the offset the page starts its load there, meaning if the offset top is 300, then header is pushed down 300.

I thought it might be something about the $(html,body) but am not sure how to go about fixing that.

Thanks

enigma1




msg:4440769
 8:14 am on Apr 14, 2012 (gmt 0)

meaning if the offset top is 300, then header is pushed down 300.

Can you first setup a simple html document to test the code? It's possible there are ID conflicts. Make sure identifiers are unique
<div id=four">content</div>
id="four" should be unique throughout the document. If you still see the problem post the whole html code you test.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved