Jquery issue when two functions are used - javascript

Hey guys I am new to web design and making a site for the family business.
Both of these jquery functions work when the other isn't present in the code but when both are used the first (scroll to) fails to work.
Scroll to location function:
<script type="text/javascript">
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
</script>
Scroll to new page on user scroll function:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
css3: true
});
});
</script>
any advice would be appreciated thanks

You should call the first block of code inside of the $(document).ready(); call in the second block. Basically you're setting up an event listener (in this case, a button click) on an element (the button) that may not exist yet because the page is still loading. Setting up the listener inside of $(document).ready(); makes it wait until the page is loaded.
Your code should probably look like this:
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
$('#fullpage').fullpage({
sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
css3: true
});
});
</script>

Related

Asp.net Core JQuery scroll to div on page load not working

I have run up against a little problem. I am trying to get the page to scroll to a specific point on page load but I'm not getting anywhere. The code I have used is below. For some reason it doesn't seem to be running at all.
<script type="text/javascript">
// scroll past header on page load
function scrollToDiv() {
$(document).ready(function () {
var ele = $('html, body').animate({ scrollTop: $('#tree').position().top }, 500, 'linear');
});
};
scrollToDiv();
</script>
If you have any suggestions as to why it is not working I would certainly appreciate it.
I am building using ASP.NET Core. The above jQuery code worked on an old webforms project so I have no idea why it isn't working now.
To do this with jQuery:
<script>
$(function(){
const top = $('#tree').position().top;
$('html, body').animate({ scrollTop: top }, 500, 'linear');
});
</script>
However, you don't need jQuery for this:
<script>
window.addEventListener('DOMContentLoaded', () => {
const target = document.getElementById('tree');
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
</script>
Window: DOMContentLoaded event - Web APIs | MDN
Element.scrollIntoView() - Web APIs | MDN

Load and scroll javascript code don't work together on webpage

I've built a HTML webpage with some JavaScript code for a smooth user experience. However, the scroll JavaScript function does not work anymore if I add the load JavaScript function to my webpage.
The load script is just below the body tag. I've tried placing the scroll script inside the head tag and in the body tag but doesn't seem to work anywhere is the scroll script present.
Scroll script:
<script type="text/javascript">
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 600, function(){
window.location.hash = hash;
});
}
});
});
</script>
Load script:
<div class="se-pre-con"></div>
<script type="text/javascript">
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
</script>
You probably upgraded from jQuery 2.x to 3.x
change
$(window).load(function() {
to
$(window).on("load", function (e) {
and you should be fine.

Scrolling to a specific div after using location.reload()

I have a JQuery function where I want to reload my web page and scroll it to a specific div afterward.
I did this
$(document).ready(function() {
$('#mybutton').click(function(e) {
location.reload();
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
})
})
When I run my script, my page reloads very well but the scroll script doesn't run afterward like I want.
Please help
I guess we can use a cookie to make it work as we wish.. Im adding a small sample code .. Please check it out.. Please comment if you need more help.. If this solves ur problem then up voting this as answer will be much appreciated..
Thanks
$(document).ready(function() {
$('#mybutton').click(function(e) {
//$.cookie("reload", 1); // you can use this type of cookie if u have a jquery cookie plugin how ever i have added both type ..
document.cookie=1; // I know this is the absurd way to use cookies. just thought of solving your problem. if you need precise result then either use a jquery cookie plugin or use setCookie function.
reload=true;
location.reload();
})
console.log(document.cookie);
if(document.cookie==1) //if($.cookie("reload")==1)
{
document.cookie="0";
console.log(document.cookie);
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
//$.cookie("reload", 0);
}
})
$(document).ready(function() {
$('#mybutton').click(function(e) {
location.reload();
});
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
});
if you didn't want reload the page then on click it will work properly for that needs some modifiacation in code
$(document).ready(function() {
$('#mybutton').click(function(e) {
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
});
});
try my solution
inside your div add this type of link
<a name="exactline">Linking Directly to a Specific Location</a>
and when you call window reload do it this way
window.location.replace("http://yuorsite/yourCurentPage.html#exactline");

Hide hash from URL when page jump

I have a link on my menu that targets to an anchor on another page.
<a href="http://www.mylink.com.br/mylink/#anchor">
And I want to hide the #anchor from URL.
I've tried another solution, look:
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/";
});
and then, I need to activate a script to scroll to the div after the page loads:
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#divtoscroll").offset().top }, 2500);
});
but I don't know how to attach that event to the previous. The way it is, everytime the page loads, it scrolls to the div.
Any help?
I did it!
I added "contato" on the final of the URL to differentiate it from the other links.
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/contato";
});
And used it to recognize the URL and activate the document ready function.
var url = "www.mysite.com/mysite/contato";
if (location.href==url) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 2500);
});
}
else {
}
Works perfectly! Thanks for the help.
As far as I am aware it is not possible to do this, as it is what tells the browser which section of the page to jump to.
You may be able to do this using the amount of pixels and javascript, but it would not work for all cases.
Example:
window.scrollBy(0, 500);
You could use jQuery to scroll to a specific element ID on a page, but this would require a trigger on that page, such as a click, or even page load. Example below uses click.
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2500);
});

Fade effect with .hide() .show() in JQuery

I found a nice method to split large post, on blogger, into multiple pages here: http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/
I'm trying to add a fade effect when switching pages, but i don't know how to do this, i have no experience when it comes to jquery...
I managed so far to make the page scroll back to the top, and added some animations using time values, but it's not looking quite right.
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').show(2000);
jQuery('.content2').hide(1000);
jQuery('.content3').hide(1000);
jQuery('.content4').hide(1000);
jQuery('.content5').hide(1000);
So basically what i want is the current "page" to fade out and the next "page" to fade in...
Use below code
below javascript will add effect fadeIn-fadeOut on page while switching the pages.
<script type="text/javascript">
$(document).ready(function() {
$("body").fadeIn(800);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(400, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Put above code into <head> tag in your Html page
Add this code
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').fadeIn(2000);
jQuery('.content2').fadeOut(1000);
jQuery('.content3').fadeOut(1000);
jQuery('.content4').fadeOut(1000);
jQuery('.content5').fadeOut(1000);

Categories