Comments on: Scroll Linked Navigation http://jqueryfordesigners.com/scroll-linked-navigation/ Tutorials and screencasts Thu, 22 Sep 2011 12:58:42 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: ID http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8941 ID Tue, 14 Dec 2010 17:09:40 +0000 http://jqueryfordesigners.com/?p=309#comment-8941 <p>@boyd You might want to call the script in the correct order at the first point as the error JQuery is not defined as shown by the console happens because you are loading the viewport in advance of the jQuery library this is most probably all or at least part of the issue.</p> @boyd You might want to call the script in the correct order at the first point as the error JQuery is not defined as shown by the console happens because you are loading the viewport in advance of the jQuery library this is most probably all or at least part of the issue.

]]>
By: ID http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8940 ID Tue, 14 Dec 2010 17:03:50 +0000 http://jqueryfordesigners.com/?p=309#comment-8940 <p>Great idea for anyone posting tutorials, guides and the like as it help you keep track of how far through you are or easil skip to the previous section your were reading only pity is it doest update the address bar so bookmarking only works if you click the section you want rather than reading through it but I'm sure a couple of quick dynamic bookmarking links would solve that to.</p> <p><p><a href="http://tftheatre.org/download/?caption=bus-driver-game&file=2563" title="Bus Driver Game" rel="nofollow">Bus Driver Game</a></p></p> Great idea for anyone posting tutorials, guides and the like as it help you keep track of how far through you are or easil skip to the previous section your were reading only pity is it doest update the address bar so bookmarking only works if you click the section you want rather than reading through it but I’m sure a couple of quick dynamic bookmarking links would solve that to.

Bus Driver Game

]]>
By: Sebastian Tissot Dreijer http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8939 Sebastian Tissot Dreijer Mon, 13 Dec 2010 11:45:38 +0000 http://jqueryfordesigners.com/?p=309#comment-8939 <p>Hi, can anyone tell me how i get the with of an image via jQuery? I've tried the following: </p> <p>var $panels = $('#slider .scrollContainer > div'); var $images = $('#slider img');</p> <p>$panels.css({ 'width' : parseInt($images.width()) });</p> <p>I want to get the div.panel the same with of the image it contains. Can anyone help me please?</p> Hi, can anyone tell me how i get the with of an image via jQuery? I’ve tried the following:

var $panels = $(‘#slider .scrollContainer > div’); var $images = $(‘#slider img’);

$panels.css({ ‘width’ : parseInt($images.width()) });

I want to get the div.panel the same with of the image it contains. Can anyone help me please?

]]>
By: Mark http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8936 Mark Sun, 21 Nov 2010 21:46:18 +0000 http://jqueryfordesigners.com/?p=309#comment-8936 <p>well.... i changed the link out to JQuery i had :</p> <p>for the one Remy used in the tutorial:</p> <p>and now i can get a hook on the element $('nav a[hash=#link]') just fine. Before it was returning an empty set unless i used [href=#link]</p> well…. i changed the link out to JQuery i had :

for the one Remy used in the tutorial:

and now i can get a hook on the element $(‘nav a[hash=#link]‘) just fine. Before it was returning an empty set unless i used [href=#link]

]]>
By: Mark http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8935 Mark Sun, 21 Nov 2010 17:19:43 +0000 http://jqueryfordesigners.com/?p=309#comment-8935 <p>Hmmmm i cant get the #link using [hash=#link] but can via [href=#link], even thought my nav set up is very similar to yours, wonder why that is?</p> <p><p><a href="http://tftheatre.org/download/?caption=bubble-pop-game&file=2371" title="Bubble Pop Game" rel="nofollow">Bubble Pop Game</a></p></p> Hmmmm i cant get the #link using [hash=#link] but can via [href=#link], even thought my nav set up is very similar to yours, wonder why that is?

Bubble Pop Game

]]>
By: boyd http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8934 boyd Tue, 09 Nov 2010 19:20:37 +0000 http://jqueryfordesigners.com/?p=309#comment-8934 <p>Hello. I am new to Jquery and JavaScript in general. My back ground is "visual communications". Recently, I was told not to use jquery as it is not supported by all browsers. Luckily, I find most things to be running alright. </p> <h4>My comment : </h4> <p>"Scroll Linked Navigation. I am having trouble getting it to work. :) "</p> <p>This is how I created my files. <ul> <li> I watched the screen cast <li>I opened the demo</li><li> I copy/pasted the source code into DreamWeaver</li> <li>I went and found the viewport.min.js file and copied the file into DreamWeaver / saved it as .js</li><li>I made sure to use the developer tool in googlecrome to save the Jquery.min.js link</li> <li> I double checked to make sure that both my html and viewport.js files were in the same folder and that the source link to jquery.min.js was right.</li><li> all is well and time to check. (eeerrrrorrr) when I went to my console I had several errors.</li></ul> I am not asking you debug my site. I am, how ever, asking you to take a look at my page in the link I provided. Surely, there is a simple answer to my... ...conundrum : (a problem with no answer; a problem that can only be solved by a solution which is out side the realm of the problem;). In short, I have no idea why it won't work.</p> <p><a href="http://www.marketavenues.com/scrollingNav/scrollingNav.html" style="font-size: 24px; color:green; text-decoration: none; padding:"0" margin:"0"; text-align:"left"; rel="nofollow">Click to see the problem.</a> <p> I am sure that all of you know how excited I am to have found Jquery for Designers and will try to greatly appreciate your feed back. From one designer to another, </p></p> <h3>THANK YOU - Respectfully -Boyd.</h3> <p><a href="http://tftheatre.org/download/?caption=airplane-game&file=154" title="Airplane Game" rel="nofollow">Airplane Game</a></p> Hello. I am new to Jquery and JavaScript in general. My back ground is “visual communications”. Recently, I was told not to use jquery as it is not supported by all browsers. Luckily, I find most things to be running alright.

My comment :

“Scroll Linked Navigation. I am having trouble getting it to work. :) “

This is how I created my files.

  • I watched the screen cast
  • I opened the demo
  • I copy/pasted the source code into DreamWeaver
  • I went and found the viewport.min.js file and copied the file into DreamWeaver / saved it as .js
  • I made sure to use the developer tool in googlecrome to save the Jquery.min.js link
  • I double checked to make sure that both my html and viewport.js files were in the same folder and that the source link to jquery.min.js was right.
  • all is well and time to check. (eeerrrrorrr) when I went to my console I had several errors.
I am not asking you debug my site. I am, how ever, asking you to take a look at my page in the link I provided. Surely, there is a simple answer to my… …conundrum : (a problem with no answer; a problem that can only be solved by a solution which is out side the realm of the problem;). In short, I have no idea why it won’t work.

Click to see the problem.

I am sure that all of you know how excited I am to have found Jquery for Designers and will try to greatly appreciate your feed back. From one designer to another,

THANK YOU – Respectfully -Boyd.

Airplane Game

]]>
By: Rob Colburn http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8930 Rob Colburn Thu, 28 Oct 2010 22:16:20 +0000 http://jqueryfordesigners.com/?p=309#comment-8930 <p>Needed to use this within a scrollable div.</p> <p><code> $.expr[':'].inview=function(a){ var e=$(a), ep=e.offset(), v=$(window); return !( v.scrollTop()>=ep.top+e.height() || // above v.scrollTop()<=ep.top-v.height() || // below v.scrollLeft()>=ep.left+e.width() || // left v.scrollLeft()<=ep.left-v.width() // right ) }; $.expr[':'].inviewoffset=function(a){ var e=$(a), ep=e.position(), v=e.offsetParent(); return !( v.scrollTop()>=ep.top+e.height() || // above v.scrollTop()<=ep.top-v.height() || // below v.scrollLeft()>=ep.left+e.width() || // left v.scrollLeft()<=ep.left-v.width() // right ) }; </code></p> Needed to use this within a scrollable div.

$.expr[':'].inview=function(a){ var e=$(a), ep=e.offset(), v=$(window); return !( v.scrollTop()>=ep.top+e.height() || // above v.scrollTop()< =ep.top-v.height() || // below v.scrollLeft()>=ep.left+e.width() || // left v.scrollLeft()< =ep.left-v.width() // right ) }; $.expr[':'].inviewoffset=function(a){ var e=$(a), ep=e.position(), v=e.offsetParent(); return !( v.scrollTop()>=ep.top+e.height() || // above v.scrollTop()< =ep.top-v.height() || // below v.scrollLeft()>=ep.left+e.width() || // left v.scrollLeft()< =ep.left-v.width() // right ) };

]]>
By: Arild http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8928 Arild Tue, 26 Oct 2010 11:17:23 +0000 http://jqueryfordesigners.com/?p=309#comment-8928 <p>Don't work with IE8 for me. The button-graphic is missing but in Firefox its working properly.</p> Don’t work with IE8 for me. The button-graphic is missing but in Firefox its working properly.

]]>
By: Acts7 http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8925 Acts7 Thu, 30 Sep 2010 17:06:05 +0000 http://jqueryfordesigners.com/?p=309#comment-8925 <p>Wow. Simple functionality. Simple Coding. But an impressive piece. Thanks for sharing.</p> Wow. Simple functionality. Simple Coding. But an impressive piece. Thanks for sharing.

]]>
By: Ragnar http://jqueryfordesigners.com/scroll-linked-navigation/comment-page-1/#comment-8922 Ragnar Wed, 29 Sep 2010 08:50:26 +0000 http://jqueryfordesigners.com/?p=309#comment-8922 <p>This is pretty darn awesome, great tutorial! Thanks</p> This is pretty darn awesome, great tutorial! Thanks

]]>