I'm in a bit of a bind. I've been searching for a way to scroll smoothly through divs and found this fiddle:
http://jsfiddle.net/Vk7gB/187/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://trevordavis.net/play/jquery-one-page-nav/jquery.scrollTo.js"></script>
<script type="text/javascript" src="http://trevordavis.net/play/jquery-one-page-nav/jquery.nav.min.js"></script>
<script type="text/javascript" src="http://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="scroll.js"></script>
The problem is that, while it works perfectly on the jsfiddle site, when i copy it exactly the same, without any changes, it stops working for some reason.
I've triple checked all external scripts and yet I can't find out what is the problem.
Here's the exact same code, copied directly from the fiddle and it does not work.
http://www.zero-blade.com/work/test2/
If anyone can point me in the right direction, I would greatly appreciate it.
Because in jsFiddle, the code runs inside the DOMReady event (look at the drop down under the jQuery version in the fiddle).
Wrap all your code inside
$(function(){
// you code here
});
You refer in your code to DOM elements, but they are not ready yet. Put all your <script> tags just before closing </body> tag.
The JavaScript in the fiddle is configured to execute when the DOM is ready. The JavaScript in your site (scroll.js) is being inserted and executed in the HEAD of your document, before the DOM elements exist, so no bindings are occurring.
All of your JavaScript should be at the end of the body, and moving scroll.js to the end of the body will solve the issue.
If you can't move the link to scroll.js, you can use jQuery's document.ready() in scroll.js to trigger the bindings to occur AFTER the DOM is ready, as follows:
scroll.js
var $current, flag = false;
$(function() {
// This code will be executed when the DOM is ready.
// This is a short version of $(document).ready(){...}
$('#nav').onePageNav();
$('body').mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current');
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
flag = true;
$('body').scrollTo($prev, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
flag = true;
$('body').scrollTo($next, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
Related
Would you please help me delay execution of my function until the content has loaded? I've streamlined my code to the essentials, bear with my typos:
function Phase1()
{
$(".Hidden").load("hidden.html");
$(window).load(Phase2());
/* I've also tried $(document).ready(Phase2()); */
/* and $(."Hidden").load("hidden.html",Phase2()); */
/* and window.onload... */
}
function Phase2()
{
var Loop;
var Source_Array = document.getElementsByClassName("Random");
for (Loop=0;Loop<Source_Array.length,Loop++)
{ alert(Source_Array[Loop].innerHTML; };
}
The Random class contains several items. On the first pass the alerts are never called (length is 0), on the 2nd iteration it's had time to load everything.
I see no errors in the console when executing.
I have a small and neat solution for your problem, all you need to do is,
Call a setInterval for very short span to check the element is present in DOM or not, if its not your interval will go on, once the element is present, trigger your functions and clear that interval.
code will look like this..
var storeTimeInterval = setInterval(function() {
if (jQuery('.yourClass').length > 0) {
//do your stuff here..... and then clear the interval in next line
clearInterval(storeTimeInterval);
}
}, 100);
The page will load the elements from top to bottom.
If you want your JS code to execute after all elements have loaded, you may try any of the following:
Move your script to the bottom of the page.
<html>
<head></head>
<body>
<!-- Your HTML elements here -->
<script>
// Declaring your functions
function Phase1()
{
$(".Hidden").load("hidden.html");
}
function Phase2()
{
var Loop;
var Source_Array = document.getElementsByClassName("Random");
for (Loop=0;Loop<Source_Array.length,Loop++)
{ alert(Source_Array[Loop].innerHTML; };
}
// Executing your functions in that order.
Phase1();
Phase2();
</script>
</body>
</html>
Bind your functions to document ready using Vanilla JS.
document.addEventListener("DOMContentLoaded", function() {
Phase1();
Phase2();
});
Bind your functions to document using jQuery.
$(document).ready(function() {
Phase1();
Phase2();
});
I have a /js/common.js file attached in the <head> of my webpage, and then the file for my page /about.aspx.
<script src='/js/common.js'></script>
<script src='/js/modernizr-custom.js'></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
I can hear how dumb this question is, and I do apologise, but it is annoying me as to why I can not figure it out.
This code here shows and hides the navigation:
var didScroll;
/* more variables .. */
$(window).scroll(function (event) {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
/* Rest of code */
}
And my common.js file has the following structure:
// Declarations
var pageLoaded = false;
var fontsLoaded = false;
// Wrapper
function wrapperWidth() {
return parseFloat(document.getElementById("wrapper").offsetWidth);
}
// And so on..
//-----------------------
// jQuery Initialisation
//-----------------------
$(document).ready(function () {
//Set variables on page load
$(window).load(function () {
pageLoaded = true;
fontsLoaded = true;
});
});
If I place my js to hide the menu on scroll within the external .js file common.js, the javascript does not work and I don't know why?
At present, I place it right before the closing </body> tag on each page.
I wish to be able to place my javascript in one place 1) so that it can be easily found for maintenance and 2) most importantly, to speed up load time, as the more <script></script> tags one has, will slow down page load.
Can someone please explain why my 'menu hide' javascript will not work when I place within my common.js file?
Check if you called properly your common.js and jquery min.js
Call it in below given order
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"> </script>
So I'm trying to clean up my code and currently the following scripts are in my HTML header
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript">
$(document).ready(function(){
TriggerClick2 = 0;
$("#hamburger").click(function(){
if(TriggerClick2==0){
TriggerClick2=1;
$("#navi").animate({width:'35%'}, 1000);
}else{
TriggerClick2=0;
$("#navi").animate({width:'0%'}, 1000);
};
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
TriggerClick = 0;
$("#hamburger").click(function(){
if(TriggerClick==0){
TriggerClick=1;
$(".content").animate({width:'65%'}, 1000);
}else{
TriggerClick=0;
$(".content").animate({width:'100%'}, 1000);
};
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".stayThere").mouseenter(function() {
$('.moveThere').animate({'margin-left': '0%'}, 1000);
}).mouseout(function() {
$('.moveThere').animate({'margin-left': '-100%'}, 1000);
});
});
</script>
I understand that this is quite redundant but I'm a beginner and am still learning. What I'm trying to do is move this code to the mobile/js linked at the very top of the code.
What I have inside the mobile.js right now looks as follows
//initializes each function.
function init() {
hideMenu();
scaleContent();
linkAnim1();
linkAnim2();
linkAnim3();
linkAnim4();
linkAnim5();
}
function hideMenu(){
TriggerClick2 = 0;
document.getElementById("hamburger").click(function(){
if(TriggerClick2==0){
TriggerClick2=1;
document.getElementById("navi").animate({width:'35%'}, 1000);
}else{
TriggerClick2=0;
document.getElementById("navi").animate({width:'0%'}, 1000);
};
});
};
function scaleContent(){
TriggerClick = 0;
document.getElementById("hamburger").click(function(){
if(TriggerClick==0){
TriggerClick=1;
document.getElementsByClassName("content").animate({width:'65%'}, 1000);
}else{
TriggerClick=0;
document.getElementsByClassName("content").animate({width:'100%'}, 1000);
};
});
};
function linkAnim1(){
document.getElementsByClassName("stayThere").mouseenter(function() {
document.getElementsByClassName('moveThere').animate({'margin-left': '0%'}, 1000);
}).mouseout(function() {
document.getElementsByClassName('moveThere').animate({'margin-left': '-100%'}, 1000);
});
};
//initializes the js functions above
window.onload = init;
sadly the moment I comment it out of the html document it stops doing anything altogether. To explain the functions, the first two are for mobile, bringing in the navigation while resizing the content, the other 5 are for each link Hover to animate a background image.
I'd really appreciate if someone could help me with this as I need it for January 4th, until which my teachers are unavailable.
Thanks again and happy coding
Ok I going to help you the best I can with out doing all of the work for you.
To begin you need only one document ready function for your script.
So take all of the JavaScript Code inside of the document ready functions and place it inside of a single document ready function.
Once you do that link to the JavaScript file by using the script tag right before your closing </body> tag in your html file.
Example(link to external JavaScript File):
<script src="myjavascriptfile.js"></script>
Note: The html code below assumes that your html file is in the same directory as the JavaScript.
Example(External JavaScript File Content):
$(document).ready(function(){//begin document closure
TriggerClick2 = 0;
$("#hamburger").click(function(){
if(TriggerClick2==0){
TriggerClick2=1;
$("#navi").animate({width:'35%'}, 1000);
}else{
TriggerClick2=0;
$("#navi").animate({width:'0%'}, 1000);
};
});
TriggerClick = 0;
$("#hamburger").click(function(){
if(TriggerClick==0){
TriggerClick=1;
$(".content").animate({width:'65%'}, 1000);
}else{
TriggerClick=0;
$(".content").animate({width:'100%'}, 1000);
};
});
$(".stayThere").mouseenter(function() {
$('.moveThere').animate({'margin-left': '0%'}, 1000);
}).mouseout(function() {
$('.moveThere').animate({'margin-left': '-100%'}, 1000);
});
});//end document closure
Now with that being said there is a lot of things that may be going wrong with your code. Posting your markup(HTML) will help with troubleshooting.
You are using global variables for your TriggerClick2, and TriggerClick one variables. Prefix them using the var keyword and place them at the top of the script inside of the document ready function.
You should try and get in the habit of using === instead of ==. Using === evaluates to exactly equals(matches value and type) where == matches the value. So if you want to make sure your matches the value and the variable type(number and string for example) then use === to prevent any potential headaches in the future.
Example:
var TriggerClick2 = 0;
var TriggerClick = 0;
Keep in mind that variables are scoped at the function level in JavaScript. So any variable that is declared inside of a function can not be accessed outside of the function it is declared in unless it returned by called a function that returns that variables value.
I have in a javascript file code, but it isn't encapsulate in a function, specifically is an event, so I need to know how can I call this event in my html file.
$(window).scroll(function() {
if ($(window).scrollTop() > 164) {
$("ticky-nav").show();
}
else {
$("ticky-nav").hide();
}
});
and I include that like this
<script type="text/javascript" src="static/js/GD.js"></script>
Thanks for your answers
You need to make sure it is either encapsulated in a $(document).ready() handler or after the DOM has loaded
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 164) {
$("ticky-nav").show();
} else {
$("ticky-nav").hide();
}
});
});
$("ticky-nav") is an invalid selector also since there is no element type of ticky-nav you are most likely looking for $("#ticky-nav") which is an element with id ticky-nav
Also make sure to include
<script type="text/javascript" src="static/js/GD.js"></script>
underneath your jQuery script tag
If you want to execute the function without the scroll event, you can create it like this:
var doScroll = function() {
if ($(window).scrollTop() > 164) {
$("ticky-nav").show();
}
else {
$("ticky-nav").hide();
}
};
And then call doScroll(); from somewhere :)
i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});