I have a div that looks like this:
<div id="ProductPriceWrap" class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="">
<span class="Label">MSRP:</span>
<strike>$249.00</strike>
<span class="YouSave" style=""> (You save <span class="YouSaveAmount">$174.00</span>)</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em id="ProductPrice" class="ProductPrice VariationProductPrice" style="color: black; ">$75.00</em>
</div>
</div>
</div>
And I made this script to help customers see when the option chosen has changed the price:
$(document).ajaxSuccess(function(){
var currentPrice = $.trim($("#ProductPrice").text());
if(currentPrice == "%%GLOBAL_ProductPrice%%")
{
$("#ProductPrice").css('color','black');
$("#ProductPrice").removeClass("PriceChanged")
}
else
{
$("#ProductPrice").css('color','red');
$('html, body').animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
$("#ProductPriceWrap").animate({backgroundColor: "#ff0000" });
$("#ProductPriceWrap").animate({backgroundColor: "#ffffff" });
$( "#ProductPrice" ).addClass( "PriceChanged" );
}
});
</script>
I want to change the function that scrolls to #ProductPriceWrap so that it will only scroll to that element if they have scrolled passed it. Meaning don't scroll to that element if it is already visible. I am pretty new to JS and JQ, and don't even know where to start on this one. Any input is greatly appreciated! Thanks!
Seems you are looking for selector :visible and function .animate().
At the end you will have something like:
if ($("#ProductPriceWrap:not(:visible)")) {
$("html, body").animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
}
Related
I have tried different variations of this and it still does not work for me. I am trying to add an animation so that when I click in the button, it scrolls down to the certain element on the page.
Here's my code:
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("#nav-projects").click(function() {
$("html, body").animate({
scrollTop: $(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</script>
An alternative way with CSS without jQuery ($('#yourelement').offset().top;) or Javascript would be:
html {
scroll-behavior: smooth;
}
Goto A
Goto B
Goto C
<hr>
<div id="A" style="height:500px;">Section A</div>
<div id="B" style="height:500px;">Section B</div>
<div id="C" style="height:500px;">Section C</div>
Try this:
<script>
$(document).ready(function() {
$("#nav-projects").click(function() {
$("html, body").animate({
scrollTop: $(
#id).height()
}, 2000);
});
});
</script>
Replace id with the id of the element to which you wish to scroll to and adjust the height accordingly.
I use this code frequently and it makes my website slowly load.
$('#start').click(function() {
$('html,body').animate({
scrollTop : $('.scroll').offset().top
},1500);//end animate
});//end click
I used to change the #start and .scroll everytime. Any tips?
Wrap it in a function.
function foo(startElem, scrollElem) {
$(startElem).click(function() {
$('html,body').animate({
scrollTop : $(scrollElem).offset().top
},1500);//end animate
});
}
Then call it when you need it.
foo('#start', '.scroll');
Read more here.
Yeah it is with passing some parameters
Refer this example
function scrollCommon(startElem, scrollElem) {
$(startElem).click(function() {
$('html,body').animate({
scrollTop : $(scrollElem).offset().top
},1500);//end animate
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<ul>
<li>One</li>
<li>Two</li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="one">
<b>One</b><br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
</div>
<div class="two">
<b>Two</b>
<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>
</div>
</div>
Besides the question wether this really has an Impact to your loading time, here another way to set this thing up, using event delegation:
$(document).on('click', '[data-scroll-target]', function(e){
$('html,body').animate({
scrollTop: $( this.dataset.scrollTarget ).offset().top
});
});
#start has now become obsolete, every node with a data-scroll-target-attribute will have this functionality
<div data-scroll-target=".scroll">#start</div>
...
<div class="scroll"> target </div>
https://jsfiddle.net/dsx8o04u/
$(document).ready(function() {
$("#myPortfolioPage").hide();
$("#contactMeBox").hide();
$("#gameBox").hide();
$("#gameScrollButton").hover(function() {
$("#gameScrollButton").addClass("pointer");
});
$("#gameScrollButton").click(function() {
if (!($("#gameBox").hasClass("open"))) {
$("#gameBox").fadeIn(1000);
$("#gameBox").addClass("open");
} else {
$("#gameBox").fadeOut(1000);
$("gameBox").removeClass("open");
}
});
$(".contact").click(function() {
if (!($("#contactMeBox").hasClass("open"))) {
$("#contactMeBox").fadeIn(300);
$("#contactMeBox").addClass("open");
$('html, body').animate({
scrollTop: 0
}, 0);
} else {
$("#contactMeBox").fadeOut(300);
$("#contactMeBox").removeClass("open");
}
});
$(".contact").hover(function() {
$(".contact").addClass("pointer");
});
//My portfolio
$("#myPort").hover(function() {
$("#myPort").addClass("pointer");
});
$("#myPort").click(function() {
/*$("#contactMeBox").fadeOut(100);
$("#contactMeBox").removeClass("open"); */
$("#myPortfolioPage").fadeIn(750);
$('html, body').animate({
scrollTop: 0
}, 0);
/* Will edit out this error $("html,").animate({
"left": "-1375px"
}, "slow"); */
$("#homePage").animate({"left":"-1375px"},"slow");
//Code above in question ^^^^^^^ Thanks
});
//BackHome
$(".goHome").hover(function() {
$(".goHome").addClass("pointer");
});
$(".goHome").click(function() {
$("body").animate({
"left": "0px"
}, 1000);
$("#myPortfolioPage").fadeOut(500);
});
});
<body>
<div id=headerBoxAfter style="border-style:solid;margin-top:-20px;height:80px;width:100%;margin-left:-3px;background-color:black;text-align:left;">
<!-- <img id=gameScrollButton src=down56.png alt=downButton style=float:left;margin-left:12px;margin-top:3px -->
<h1 id=myName style=font-family:st;font-size:40px;margin-top:30px;margin-left:20px;> <span style=background-color:white;border-style:solid;padding:10px;>My</span> <span style=background-color:red;border-style:solid;padding:10px;margin-left:-35px;>Name</span> <span id=myPort style=color:white;> My Portfolio </span> </h1>
</div>
<div id=homePage style=boder-style:solid;height:100%;padding-bottom:20px;> <!-- homePage begins -->
<div id=bodyBox style=height:100%;width:100%;border-style:solid;margin-left:0px;
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="RyanTTSchultz.js"></script>
</body>
I would like my whole homepage to move left when a user clicks a navigation button.
I have given my div box an id="homePage"
I have referenced it in my js as so:
$("#homePage").animate({"left":"-1375px"},"slow");
The above line worked with "html,body", but I decided I wanted to keep my header universal and just animate the things below.
Thank you.
I think you need to add position:relative; in your CSS to #homePage.
This markup is atrocious though - you should not have inline CSS in your HTML code, and you should be wrapping your HTML attributes in quote marks. You have unclosed <div> tags and seem to be adding a pointer class to any hovered items - you shouldn't need to add a class for this, you just target them in your CSS by using: #myId:hover { /*Add styles*/}.
On top of which your JS is invalid, as you have a comma after $('html,'). I put this in a fiddle for you, and cleaned it up a little, but I would urge you to look around at some best practice for HTML and CSS.
http://jsfiddle.net/t4bp4qqm/
I have read similar questions and researched scrollspy, but I don't believe it will do quite what I'm looking for, since as far as I can tell it can only use bootstrap style highlighting. (If it can do more please let me know!)
I have a 4-tab navbar (usually fixed top) and a single-page site. Each tab corresponds to a different section of the page, and each section has a different background color. What I'd like to do is change the tab color to be the same as the corresponding section's background color whenever that region is scrolled to (so it will only change color once the new section's top reaches the navbar's bottom.) I have achieved this effect only when the tab is clicked, triggering a scroll event and adding an active class, however the active tab will then remain if clicking is not used, creating the problem.
Is there a way to change a variable based off the current scroll location? I have tried what I can think of but it hasn't worked yet.
JS
$(window).on('scroll', function () {
if ($(window).scrollTop() >= $('#homeContainer').height()) {
$('.menuDiv').addClass('fixed');
} else {
$('.menuDiv').removeClass('fixed');
}
});
$("#menuHomeButton").click(function(e){
$('html, body').animate({
scrollTop: $('#homeContainer').offset().top
}, 'slow');
});
$("#menuAboutButton").click(function(e){
$('html, body').animate({
scrollTop: $('#aboutContainer').offset().top + 1
}, 'slow');
});
$("#menuPortfolioButton").click(function(e){
$('html, body').animate({
scrollTop: $('#portfolioContainer').offset().top - $('.menuDiv').height() + 1
}, 'slow');
});
$("#menuContactButton").click(function(e){
$('html, body').animate({
scrollTop: $('#contactContainer').offset().top - $('.menuDiv').height() + 1
}, 'slow');
});
HTML
<div class="mainContainer">
<div class="container blue" id="homeContainer">
</div>
<div class="menuDiv"><!--
--><div class="menuItem" id="menuHomeButton" ng-class="{'active':selectedTab === 'home'}" ng-click="selectedTab = 'home'">
<div class="menuTextDiv"><p>Home</p></div><div class="menuItemColor blue"></div>
</div><!--
--><div class="menuItem" id="menuAboutButton" ng-class="{'active2':selectedTab === 'about'}" ng-click="selectedTab = 'about'">
<div class="menuTextDiv"><p>About</p></div><div class="menuItemColor blue2"></div>
</div><!--
--><div class="menuItem" id="menuPortfolioButton" ng-class="{'active3':selectedTab === 'portfolio'}" ng-click="selectedTab = 'portfolio'">
<div class="menuTextDiv"><p>Portfolio</p></div><div class="menuItemColor blue3"></div>
</div><!--
--><div class="menuItem" id="menuContactButton" ng-class="{'active4':selectedTab === 'contact'}" ng-click="selectedTab = 'contact'">
<div class="menuTextDiv"><p>Contact</p></div><div class="menuItemColor blue4"></div>
</div><!--
--></div>
<div class="container blue2" id="aboutContainer">
</div>
<div class="container blue3" id="portfolioContainer">
</div>
<div class="container blue4" id="contactContainer">
</div>
<div class="container">
</div>
</div>
Here is a fiddle, but for some reason I couldn't get the ng-click and ng-class to work on it, which changes the tab color.
Here are some images of what it looks like not on js fiddle:
What I want and have:
http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png
http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png
What I don't want but still also have:http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png
If anyone has a solution I'd be extremely greatful! Thank you!
Get the distance of the div from top:
distance = $("div").scrollTop()
note: do not use var when declaring distance because than you can't access it inside a function
Then check if div has reached the top and add class:
$(window).on('scroll', function () {
if(distance - $("div").scrollTop() >= distance ){
//do something
}
});
I'm having trouble getting a simple jquery code to work. I want a button to scroll the page down to another div.
The code is in here: http://jsfiddle.net/utm6d/
html:
<div class="jumbotron">
<div class="container text-center">
<h1>Scroll down!</h1>
<a type="button" id="helloclick" class="btn btn-default">scroll!</a>
</div>
</div>
<div class="container text-center" id="second">
<p> come here </p>
</div>
js:
$('#helloclick').click(function(){
$('html, body').ScrollTo("#second");
});
You need to use the scrollTop() method with an offset() of your target object.
$(function() {
$('#helloclick').click(function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $("#second").offset().top
}, 500);
});
});
EDIT: Code needed to be wrapped in $(function() {...});, to ensure #helloclick & #second are loaded before being executed.
See it working on JSFiddle
Try this:
$('#helloclick').click(function(){
$('html, body').animate({
scrollTop: $('#second').offset().top
}, 500);});
Working Demo
jQuery does not have .ScrollTo() method.
In your case, you need to use .scrollTop():
$('#helloclick').click(function(){
$('html,body').animate({ scrollTop: $('#second').offset().top });
});
Fiddle Demo