0

Still learning basic php & jquery, but stuck a bit with one idea: i have two pages and on second page i have show/hide DIVs, here is jsfiddle demo:

$('.navLink').on('click', function(e){
e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
    $('.page').slideUp().delay(300);
    targetDiv.slideDown();
}else{
    $('.page').slideUp().delay(500);
} });

And i'd like to have a link from first page (page1.html) to second page (page2.html) so with option like page2.html#div1 it would open selected #div. I've tried to workout with jsfiddle:

window.addEventListener("hashchange", function(){    
var targetDiv = $(location.hash);    
if(!targetDiv.is(':visible')){$('.page').slideUp();targetDiv.slideDown();}
else{$('.page').slideUp();} }, false);

but it's not working properly when you're givitn that link to some one and not working on some chrome versions at all...

Is there better idea or?

Thanks in advance!

Huangism
  • 16,278
  • 7
  • 48
  • 74
JU1CY
  • 123
  • 1
  • 10
  • Both of your jsFiddle work fine on Chrome Version 37.0.2062.94 m – emerson.marini Aug 28 '14 at 13:01
  • first one works fine, there is no problem. As for second one. Not working in my chrome + sometime when you're giving some one links like domain.com/page2.html#div1 is not opening hidden DIV for first time. Once you try it second one... it works... – JU1CY Aug 28 '14 at 13:07
  • they work fine in Firefox 34 as well; can you maybe specify the (different?) browsers and browser versions you have trouble with? What does 'not working properly' mean in more detail? – retrovertigo Aug 28 '14 at 13:08
  • Is your code wrapped with a document ready event handler? – emerson.marini Aug 28 '14 at 13:13
  • here is example, (http://135.su/temp/shownhide.html#div3) when you're giving direct link to some one. Just tried in Firefox & Chrome (private) And direct links for the first time is not working. – JU1CY Aug 28 '14 at 13:13

1 Answers1

1

Define the hashchange handler somewhere you can call it, then call it if location.hash is not empty when the page loads. Something like this:

window.onhashchange=function(){    
    var targetDiv = $(location.hash);    
    if(!targetDiv.is(':visible')){$('.page').slideUp();targetDiv.slideDown();}
    else{$('.page').slideUp();}
};
if(window.hash!="") window.onhashchange();

http://jsfiddle.net/Lgyagand/2

vpzomtrrfrt
  • 483
  • 6
  • 16
  • Looks like what i need! One more question, is possible, if you're already on page and some of DIVs is open, how you can close it? Like in first demo (http://jsfiddle.net/kLjrxost/1/)? – JU1CY Aug 28 '14 at 13:40
  • Try keeping track of the last hash and registering the hash handler to also be the click handler: http://jsfiddle.net/Lgyagand/3/ – vpzomtrrfrt Aug 28 '14 at 13:47
  • Cheers! It's realy what i needed! – JU1CY Aug 28 '14 at 13:52