I'm trying to do a scroll to the top animation with my blog, http://goneintranslation.blogspot.ca with the home link and at the bottom. I think I have the proper coding here JSFiddle
I've read online you but the jQuery code before the < /head> tag in your HTML code
so this is what I did, I inserted the jQuery code within script tags and pasted this code before the < /head> tag in my HTML. After saving my code, the scroll to the top animation does not work. What am I doing wrong? I've read online you have to reference your script tags or something? If that's my mistake how do I reference my script tags or what is the reference to my script tags?
Many Thanks
<script>
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
</script>
I saw your html code in jsfiddle:
<div class='mobile-link-button' id='blog-pager-home-link'> <div class="test">
TOP
</div>
<a class='home-link' expr:href='data:blog.homepageUrl' value="go to top">Go to top</a>
</div>
Please change the link to:
<a class='home-link' href='#'>Go to top</a>
Try wrapping it in the ready function and make sure jquery is included,
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
});
</script>
You don't need to include the code above in the <head></head> you can add it at the bottom of the page before the </body> tag, what you read about adding jquery to the head was about the link to the jquery library your going to use.
see below for a basic page setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<!-- and the rest of your resource links -->
</head>
<body>
<header>
<!-- your header html in here -->
</header>
<content>
<!--
where all your main content is
with the images and text that is
displayed on your page
-->
<!-- under all your main content at the bottom add your button/link to scroll back to the top -->
Scroll To Top
</content>
<footer>
<!-- your footer html in here -->
</footer>
<!-- now add your javascript/jquery functions -->
<script>
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
</script>
</body>
</html>
There are lots of resources around to read up on and learn all this such as w3schools as well asand free online sites to learn code like codeacademy
hope this helps.
Related
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I have a little problem with jQuery Mobile and anchor link's by url.
When page is load, after jquery throw event's work fine, but then jquery execute code and move page to top of page.
*my problem is not linking anchor in same page, is link another page with anchor with url, for example: example_jquery.html#wopwop
I write a little example for see isn't work (you can test in any browser):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
</head>
<body>
<div data-role="page">
<h1>wopwop</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="wopwop"></a>
<h1>wopwop</h1>
</div>
</body>
I write a patch looking post's in stackoverflow:
<script type="text/javascript">
setTimeout(function(){
if(location.hash == "#wopwop"){
$.mobile.silentScroll($('#wopwop').get(0).offsetTop);
}
}, 700);
</script>
But i don't think is solution, do you know how to make this work?.
Thx.
Sorry for my poor english
The default behavior of jQuery Mobile when showing pages is to scroll to top upon showing a page. The value of scroll is always 0 and stored in $.mobile.defaultHomeScroll.
You need to override this value on any page event but before page is totally shown and transition is done.
if (location.hash == "#wopwop") {
$.mobile.defaultHomeScroll = $('#wopwop').offset().top;
}
This will force scrolling to wopwop div's offset in page without scrolling to top and then back to that div.
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#wopwop").offset().top }, 7000);
});
I have a master page Root.master and a page default.aspx . I want to display progress bar until whole default.aspx page is loaded .
I tried following code:-
<html>
<head><title>xx</title>
</head>
<body style="visibility:hidden;" onload="function(){document.body.visibility='visible'}">
<img src="xxxx.gif" style="visibility:visible !important">
</body>
</html>
But problem is that I do not have body on default.aspx , it is on root.master , if we put it on root.master, it apply all pages which inherit from root.master .
So there is another for it .
Please suggest me usable link or samples.
in your sample if you are using jQuery, you can use following re-factoring to your code
$(document).load(function(){
$('body').css('visibility','visible');
}
You can add a reference to jQuery and then do a little code something like:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(){ // Wait until the page has finished loading
if ($(".ProgressBar")) // Detect the element with class ProgressBar
{
$(".ProgressBar").hide(); // If found, set it to be display:none;
}
}
</script>
</head>
<body>
<div class="ProgressBar">
<img src="Whatever.gif" alt="Please wait..." />
</div>
</body>
</html>
Also doable without jQuery but it's just so much easier to use it ;)
That way the progress bar gif loads, and once the page is done it is set to invisible.
I hope that might help! Good luck.
You don't mention any libraries, so here is a pure js solution:
http://jsfiddle.net/TTU7v/
The idea is to put the script as close to the opening body tag (but after it!) as possible:
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>
Ok, I made 2 posts about this but somehow I can't get it into my little mind.
So I concluded that if we have something like this:
<script type="text/javascript" src="somefile.js"></script>
<script type="text/javascript">
func1();
</script>
and func1() is defined in somefile.js, it is guaranteed to run when browser reaches that inline .
However, what if I have a big page (not taking into account images etc, just html) that takes a few seconds to load and for DOM to become ready (as I understand the DOM becomes ready when the whole html code has been loaded and parsed) and I want some code to be executed and work on parts of the page that have been loaded while the rest of the big page is still loading?
For example something like:
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
^^ Does something like this exist?
I'm not certain what your question is, but a simple way to ensure DOM ready is to place your JavaScript at the bottom of the HTML, just in side the closing </body> tag.
<!doctype html>
<html>
<head>
<title>some title</title>
<!-- this script could go toward the bottom too, but it must be before -->
<!-- your script if your script relies on it -->
<script type="text/javascript" src="somefile.js"></script>
</head>
<body>
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<!-- your HTML -->
<!-- your HTML -->
<!-- your HTML -->
<!-- Place your script last -->
<!-- ...though it would be better to have it in a separate file -->
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
</body>
</html>
Because your code is after all the other elements, they will exist for manipulation when your code finally loads and runs.
Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css