Why is div box not animating? - javascript

$(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/

Related

How to scroll on click of a button to a certain element/div on the bottom of the page with jQuery?

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.

Angular cannot scroll top in modal

I have the following form in my Angular project (I added jquery import to the ts file):
<style>
body .ui-dialog .ui-dialog-content {
overflow-y:scroll; /* I made the scrollbar of modal visible */
}
</style>
<div id="createForm" class="ui-g-12">
<div class="ui-g form-group p-justify-between">
<!-- other stuff -->
</div>
</div>
I tried to use the following approach that I had used in my previous projects without any problem. I tried to trigger this method via a button but it does not make any sense:
scrollTop() {
//when I use this it works but scroll the body behind the popup instead of popup
$('html, body').animate({ scrollTop: $(document).height() }, 'slow');
//this does not work
$('html, body').animate({ scrollTop: $('#createForm').offset().top }, 'slow');
}
Is there anything that I should do for Angular?

Move from a <div> to another <div> on scroll

I want my #logo-page div to move smoothly to #content div on scroll and also when clicked on FontAwesome icon. How do I do that using jQuery?
<div class="english-container" id="logo-page">
<div class="title">
<h1>Mean Design.</h1>
<img class="img-responsive" id="logo" src="MeanDesignLogo.png">
<h3>ui/ux • web design • graphic design • illustration</h3>
</div> <!-- title -->
<i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="english-container" ></div>
I found a trick on how to do that at this page:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Here are two demos:
https://css-tricks.com/examples/SmoothPageScroll/
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
This is the example of the second demo:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Click Me to Smooth Scroll to Section 2 Below
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
You guys completely ignored his question. His question was he wants to scroll from one div to another div when on scroll not on click.
window.addEventListener('scroll', () => {
document.querySelector('#mission').scrollIntoView({
behavior: 'smooth'
});
})
This will help if you want to scroll to the div with the id name "mission"
You can use following code for scrolling smoothly to #logo-page div on click of .fa-arrow-circle-down:
$(".fa-arrow-circle-down").on("click", function(e){
$("html, body").animate({'scrollTop': $("#logo-page").offset().top }, 1000 );
});//click

Scroll to top of an element without using animate

HOw can I scroll to top of an element without using animate()? I googled, but all answers are with animate().
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I just want to instantly go to the top of an element. In my case, the animate() is not necessary.
Use .scrollTop()
$("#button").click(function() {
$('html, body').scrollTop( $("#elementtoScrollToID").offset().top);
});
.dummy {
height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Test</button>
<div class="dummy"></div>
<div id="elementtoScrollToID">elementtoScrollToID</div>
You can do it just passing an anchor, pure HTML:
go to top
and you just add an <a name="top"></a> on the top of your website :)
You achieve the same affect without jQuery by using Window.scroll()
document.getElementById("button").onclick = function() {
window.scroll(0,document.getElementById("elementtoScrollToID").offsetTop);
};
<button id="button">Button</button>
<div id="elementtoScrollToID" style="margin: 800px 0;">
Scroll to here...
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jquery scroll to element only if not already visible

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);
}

Categories

Resources