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>
Related
How do I get my div content inside slider jquery auto update when MySQL has changed or has a new row added?
I've tried with my code, But my slider doesn't work and can't slide any div content.
My code :
index.php
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick.css" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" />
<script type="text/javascript">
$(document).ready(function () {
$('.single-item').slick({
dots: false,
infinite: true,
speed: 700,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
setInterval(function () {
$('.single-item').load('item.php');
}, 3000);
});
</script>
<style type="text/css">
body {
background-color: darkturquoise;
}
</style>
</head>
<div class="single-item" style="width: 500px; height: 500px; margin: auto;">
</div>
</html>
item.php
<?php
include 'connect.php';
$sql = mysql_query("SELECT * FROM fm_product WHERE p_pined = 'PINED'") or die(mysql_error());
while($result = mysql_fetch_array($sql)){
echo '<div style="background-color: white; height: 200px;">'.$result['p_id'].'</div>';
}
?>
My code given output:
I'm unsure if this qualifies as a complete answer, but a main problem lies in your usage of .load and it's interaction (or lack thereof) with the slick slider plugin.
The order of events on your page is as follows:
The dom is loaded & ready.
Slick Slider is initialised on .single-item. The contents of .single-item (currently nothing) is replaced with slick slider's HTML to set up and render the slides, control buttons etc. properly.
This is important because .single-item is now full of a lot of different HTML elements. If you're unsure what it looks like, check the slick slider demo page - view the page source, then view the source using developer tools to see the change in how it looks.
Additionally, .single-item never had any content originally, so it will render zero slides. At this point, you've created an empty slider.
Your setInterval event is registered.
3 seconds pass.
Your setInterval event fires for the first time. An XHR is made to item.php, which responds with HTML - a bunch of styled divs containing data.
At this point, you can use your developer tools to confirm that item.php is returning the correct data by monitoring your network requests area.
Your script takes the request response (the HTML) and completely replaces single-item's contents with it.
Alarm bells should be ringing at this point, as this immediately causes a conflict between what used to be in this element (slick's HTML setup) and what it has replaced. If you look in your developer tools console, you might even spot some errors popping up from slick complaining about missing elements.
GOTO STEP4
What's happening is that your .load call is replacing the contents of an element containing a slick slider setup, totally breaking the slider.
What you need to do is change how you handle the AJAX. You should drop the .load and move towards using $.ajax for nicer callback control. Based on the slick docs you can either:
On each XHR request return - destroy the slick slider with $('.single-item').slick('unslick');, insert the contents into .single-item, then re-initialize the slider.
Keep track of the current slides. On each XHR return, detect which slides are present and which ones aren't, and remove/add them to the slider using .slick('slickAdd', HtmlOrDomNode) and .slick('slickRemove' slideIndex)
Hope this helps.
like you see in the code below, the jquery loads a page but it seems that all the .css styling inside the jquery waits until the jquery is loaded which can take some fraction of a second if the file is big. So if I have .css("display","none") it will not work for that time causing a flickering before the styling kicks in. I have this problem only with Mozilla. The code below its only an example and it works well because is small. Some ideas how to fix this?
$(document).ready(function() {
$(".rectangle").click(function() {
$("body").load("debugging2.html", function() {
$(".rectangle").css("display","none")
$(".rectangle").fadeIn(1000);
}) ;
});
})
.rectangle{
height: 200px;
width: 200px;
background-color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
<div class="rectangle"></div>
</div>
</body>
$(document).ready(function() {
$(".rectangle").click(function() {
$("head").append("<style>.rectangle{display:none;}</style>");
$("body").load("debugging2.html", function() {
$("rectangle").fadeIn(1000);
});
});
})
Since script tags are loaded synchronously (by default) they indeed block page rendering. It can result in blank unstyled page if HTML is not processed and styles are not loaded by that moment. Hence the common very simple solution is to move heavy script tags to the very end of the </body> and put necessary CSS style in the <head>.
As the result of above, CSS gets downloaded first, after HTML is loaded quickly, rendered and styled and only after that slow scripts get downloaded.
In code it will look something like this:
<head>
<link href="style.css" rel="text/css" type="stylesheet">
</head>
<body>
<div>
<div class="rectangle"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- some other scripts -->
</body>
As the bonus, you don't need to bind to document ready event anymore ($(document).ready(function() {});), since HTML is all loaded by default, when scripts are executed.
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.
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);
});
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