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);
});
Related
i have problem with scroll. Its working fine, but i want to make it instantly without any animation, just then page refreshing be the same place as before without scrolling to the place.
my js code.
<script type = "text/javascript">
$(function() {
$(window).scrollTop( $("#col-6").offset().top)
});
</script>
My project structure for example.
First including css and html
<?php
include(html/css.php);
some code....
<div class=col-6>
some code....
</div>
include(footer.php);
?>
so in footer php after
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5fbb5e690d.js" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
i use my js code.
And after page load its scrolling to col-6 div. But, i want instantly without any animation or scrolling be in what place.
What i try
<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).( $("#col-6").offset().top)
});
</script>
any1 have solution for it ?
Since you use jQuery, your can use .animate() with an animation delay of zero milliseconds (instantaneous).
That is .animate([property], [delay], [callback]).
To make sure to hide the very quick scroll effect, you can hide the whole page (using the CSS opacity at zero), then after the scroll has completed, restore the opacity.
Documentation
$(document).ready(function() {
// hide the whole page
$("html").css({opacity:0})
// scroll and unhide the page using the complete callback
$("html").animate({
scrollTop: $("#scroll_to_me").offset().top
}, 0, ()=>$("html").css({opacity:1}))
})
.space {
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space"></div>
<div id="scroll_to_me">HERE</div>
<div class="space"></div>
I am using the code shown below to load a webpage into a DIV using the navigation menu. I found it elsewhere on this site on a closed post.
<html>
<head>
<title>Website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function () {
$('#mySidenav a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
});
});
</script>
</head>
<body>
<div id="nav">
Page 1
Page 2
Page 3
</div>
<div id="content">Use the menu to navigate website. </div>
</body>
</html>
It works perfectly and is exactly what I need, but my question is can I somehow link directly to this page from somewhere else, but somehow send the pagex.html in the URL also? If I just link directly to pagex.html I don't get the navigation page around it.
You can with hash:
mydomain.com/#pagex.html
if (location.hash) {
$('#content').load(location.hash.replace('#', ''));
}
Or with querystring:
mydomain.com/?url=pagex.html
if (location.search) {
$('#content').load(location.search.replace('?url=', ''));
}
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.
how to refresh/reload only once after the page is loaded in jquery mobile. because am using wow slider and when it is loaded the data is getting dynamically but the ui is not correctly getting once the page is refreshed it is getting. Can someone help me for this thanks.
I found this... This works for me. May be it will work for you also. Just include this script in your 'data-role="page" div' available in your mobile jquery page.
Below is test1.html:
<body>
test <!--This link redirects to test.html but you will see 'test.html#' at address bar that means you page is reloaded once -->
</body>
test.html:
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(location.hash != 'test1.html'){
location = 'test.html#';
}
});
</script>
</body>
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