1

I'm using curtain.js and would like to keep a DIV (which holds navigation) visible at all times except for when the user is looking at the very first panel, i.e. at the top of the page.

Currently the DIV resides within panel two

I'm thinking perhaps of using the hash change as you scroll through the page to trigger an append to the body. Curtain.js creates an individual URL for each panel and the URL changes each time a panel is brought into view.

I can append the div to the body (below) but I need to work out when to do this but I am unsure how? Could anyone help me out?

$("body").append($('.nav-wrap'));
egr103
  • 3,858
  • 15
  • 68
  • 119

3 Answers3

1

you can use onhashchange event:

The hashchange event fires when a window's hash changes

$(window).bind('hashchange', function() {
   $("body").append($('.nav-wrap'));
})
Ram
  • 143,282
  • 16
  • 168
  • 197
  • Thanks for your quick response. Unfortunately this doesn't work for me. In fact nothing happens at all. – egr103 Jul 12 '12 at 15:16
  • @egr103 you are welcome, sorry a typo, event should be `hashchange`. – Ram Jul 12 '12 at 15:17
  • Unfortunately that updated code doesn't work either. Not sure why to be honest. I wonder if the curtain.js plugin does anything to override it? – egr103 Jul 12 '12 at 15:19
  • @egr103 which browser do you use? – Ram Jul 12 '12 at 15:22
  • @egr103 this event is supported by the two browsers, as you say maybe the plugin overrides the handler. – Ram Jul 12 '12 at 15:24
  • Is there perhaps a workaround in which jQuery can detect when a panel becomes visible in the browser window? So if panel ID 'two' is in browser window, append nav-wrapper to body else don't do anything. – egr103 Jul 12 '12 at 15:27
  • yes, you can try [`:visible`](http://api.jquery.com/visible-selector/) selector `if ($('#two').is(':visible')) { // do something here}` – Ram Jul 12 '12 at 15:29
  • Unfortunately that doesn't work either. Not sure how i'm going to get around this – egr103 Jul 12 '12 at 15:34
  • @egr103 why don't you use a click handler? which fires with each scroll effect? – Ram Jul 12 '12 at 15:40
  • I've nearly cracked it and I will post my answer in a minute but in order for it to fully work I need to hide .nav-wrapper when it hits the bottom of the first panel #section-one, would you know how to detect this? – egr103 Jul 12 '12 at 16:02
  • Currently I'm fading it in and out but need it to fade out at the same point no matter what the height of the panel. Any ideas? – egr103 Jul 12 '12 at 16:03
  • @egr103 you can use `scroll` event, but this is an another question, you can post it as a new question. – Ram Jul 12 '12 at 17:44
  • 1
    Nudge. ;) http://stackoverflow.com/questions/11458066/fade-out-a-div-when-scroller-hits-bottom-of-another-div – egr103 Jul 12 '12 at 18:17
0

You can use JQuery to bind the Event

$(window).bind('hashchange', function(){ ... });

And add some workarounds for when it doesn't have the onhashchange event. jQuery - hashchange event

Community
  • 1
  • 1
pdjota
  • 3,163
  • 2
  • 23
  • 33
0

Ok well instead of using some hacky solution, after much digging around in the plugin's file, I just added:

$("body").append($('.nav-wrap'));

to the setHash function on line 491. Works a treat.

Ram
  • 143,282
  • 16
  • 168
  • 197
egr103
  • 3,858
  • 15
  • 68
  • 119