When the page loads, I want to use Javascript/Jquery to automatically take the user to the 500px downwards. But it has to seem natural.
How can that be done?
Just Javascript: window.scrollBy(0,500);
You can use the jquery scrollto plugin. It's very easy.
http://plugins.jquery.com/scrollTo/
Is there a lighter version? Just using javascript?
You could consider calling window.location.hash during onload. Have an element with an ID at about 500px down and just do
window.onload = function() {
window.location.hash = '#foo';
}
Oh, the # is mandatory for IE compatibility ;)
use the jquery one Jourkey suggested. Cross platform easy to use etc. There is pure JavaScript one you can try, though YMMV on browsers other than IE
"scrollTo Method
Scrolls the window to the specified x- and y-offset. "
http://msdn.microsoft.com/en-us/library/ms536731(VS.85).aspx
$().scrollTop(500);
What about navigating to some predefined link inside the page. Foe example see URL pointing to the location inside the page http://en.wikipedia.org/wiki/Uniform_Resource_Locator#cite_note-0
Related
i have a WordPress site and problems with anchors. i have a page with several anchors which are linked to in the main menu. when i am on the page itself, all anchors work fine, but if I'am on any other page, they don't work, at least not in all browsers and the anchors are ignored.
As being informed it is a chrome bug, ive found this solution:
<script type="text/javascript">
jQuery(window).load(function(){
var hashNum = 0;
if (window.location.hash != ''){
hashNum = window.location.hash.replace("#oneofmanyanchors", "");
console.log('hashNum: ' + hashNum);
};
hashMenu = jQuery('[data-q_id="#oneofmanyanchors"]').offset().top;
jQuery('html,body').animate({
scrollTop: hashMenu
}, 0);
});
</script>
above code is working and fixes the issues i had in chrome and ff.
however i need this added functionality: At the moment it is addressing only one specific anchor, but i need it to work with any anchors in the page url, not just the one above (anchors are referenced with the data-q_id attribute).
so the code needs to be updated that it grabs any given anchor from the page URL and go to / scroll to that anchor (once) via jquery after first page load.
How do i achieve this?
Thanks in advance!
PS: The problem is caused by theme incompatibility with a certain plugin i need...
I think this should work in every browser - what happens to be the problem?
In order to achieve this in jquery you should scroll to the element/anchor with javascript as soon as the document is loaded.
So like this:
$(function() {
location.hash = "#" + hash;
});
I still think you should find out what went wrong and why the linken from another page doesn't work in some browser before using a workaround for the problem. Your code will just ged more and more messy like that.
How to scroll HTML page to given anchor using jQuery or Javascript?
and here
$(document).ready shorthand
With jQuery Mobile, I can manually prefetch an external page like so:
$.mobile.loadPage(
"content.html",
{ showLoadMsg: true }
);
But ow do I manually remove that page from the memory; in a sense, "unload" it?
Thanks
on your jqm-page if there's a id specified, you can do this.
$('#page2').remove();
example
another way is to use $.fn.jqmData(), $.fn.jqmRemoveData()
refer here
I want to change my browser's width and height using JavaScript and/or jQuery, is this possible?
http://cybertext.com.au/tips_HTML_window_size.htm
In the head section:
<script>
function changeScreenSize(w,h){
window.resizeTo( w,h )
}
</script>
In the body tag
<body onload="changeScreenSize(500,300)">
It's not that simple as you think. You should not generally try to resize user window, FF has an option to disable Javascript from resizing the browser window. Resizing the browser is not a good thing to do.
If you need a window of a specific size, open one of that size with the options to window.open().
Still if you need to do it, use window.resizeTo().
Hope this helps.
You can use:
window.resizeTo(800, 600);
For more information: https://developer.mozilla.org/en/DOM/window.resizeTo
Basically I did a rollover in css but i want it in javascript instead. Also I want,once my page is loaded one of the pictures would be automatically selected. I tried this code for that but its not working.. any ideas? for some reason its not calling the function. ps: the id is called clicked3 as well in my html
<script type="text/javascript">
window.onLoad=function(){
clicked3();
}
function clicked3(){
document.getElementById("clicked3").style.backgroundPosition = "-198px top";
}
</script>
Do yourself a favor and use a javascript library, such as jQuery...
1) Javascript is case sensitive, so window.onLoad isn't the same as window.onload (correct sintax)
2) If your image is exactly 198px wide (you're hiding the image), you may have forgot to add background-repeat:no-repeat; in your css, making you see a copy of that image
Anyway, your sintax for changing background position is correct, see it in action here:
http://jsfiddle.net/zszB4/
The real reason your code isn't working is because you're assigning your function to a non-existent event handler onLoad. window.onload is the correct syntax, notice it's all lower case.
http://jsfiddle.net/9Kh8f/3/
You dont need the window.onload=function.. you can just call...
window.onload=clicked3();
Working demo here for you :)
http://jsfiddle.net/9Kh8f/
I have some JavaScript that can appear on many different pages. Sometimes those pages have been accessed via a URL containing an anchor reference (#comment-100, for instance). In those cases I want the JavaScript to delay executing until after the window has jumped. Right now I'm just using a delay but that's pretty hackish and obviously doesn't work in all cases. I can't seem to find any sort of DOM event that corresponds to the window "jump".
Aside from the simple delay, the only solution I've come up with is to have the JS look for the anchor in the URL and, if it finds one, watch for changes in scrollTop. But that seems buggy, and I'm not 100% sure that my script will always get fired before the scrolling happens so then it would only run if the user manually scrolled the page. Anyhow, I don't really like the solution and would prefer something more event driven. Any suggestions?
Edit to clarify:
I'm not trying to detect a hash change. Take the following example:
Page index.php contains a link to post.php#comment-1
User clicks the link to post.php#comment-1
post.php#comment-1 loads
$(document).ready fires
Not long later the browser scrolls down to #comment-1
I'm trying to reliably detect when step 5 happens.
You can check window.onhashchange in modern browsers. If you want cross compatible, check out http://benalman.com/projects/jquery-hashchange-plugin/
This page has more info on window.onhashchange as well.
EDIT: You basically replace all anchor names with a similar linking convention, and then use .scrollTo to handle the scrolling:
$(document).ready(function () {
// replace # with #_ in all links containing #
$('a[href*=#]').each(function () {
$(this).attr('href', $(this).attr('href').replace('#', '#_'));
});
// scrollTo if #_ found
hashname = window.location.hash.replace('#_', '');
// find element to scroll to (<a name=""> or anything with particular id)
elem = $('a[name="' + hashname + '"],#' + hashname);
if(elem) {
$(document).scrollTo(elem, 800,{onAfter:function(){
//put after scroll code here }});
}
});
See jQuery: Scroll to anchor when calling URL, replace browsers behaviour for more info.
Seems like you could use window.onscroll. I tested this code just now:
<a name="end" />
<script type="text/javascript">
window.onscroll = function (e) {
alert("scrolled");
}
</script>
which seems to work.
Edit: Hm, it doesn't work in IE8. It works in both Firefox and Chrome though.
Edit: jQuery has a .scroll() handler, but it fires before scrolling on IE and doesn't seem to work for Chrome or Firefox.
To detect when the element appears on the screen, use the appear plugin:
$('#comment-1').appear(function() {
$(this).text('scrolled');
});