Making an image visible/invisible depending on the scroll position - javascript

So, i have a little arrow in my page:
<img src="images/arrow_up.png">
I wanna make it invisible when the page is at the top and then, as the user scrolls down, to make it visible so the user can click to go back to the top of the page.
This Javascript doesn't seem to be working:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
I also have this css (which is working):
.scrollToTop{
padding: 1em;
color: #444;
position: fixed;
right: 0;
bottom: 0;
-webkit-transition: -webkit-transform .3s ease-in-out;
-ms-transition: -ms-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
z-index: 1;
}
.scrollToTop:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
I'd apreciate some help! :)

Not sure if your exact issue was this, but copying your code into a JS fiddle revealed that if the page was less than the window height, the arrow would always show.
A fix for this was to include a default display:none and then check window height on scroll. Checking it every time would allow the page to grow and shrink and still allow the arrow to only display when needed.
A working example can be seen at this JSFiddle.
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
ShowScroll();
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
function ShowScroll() {
if (window.innerHeight < $("body").height())
{
var elem = $(".scrollToTop");
if (elem.css("display") == "none") elem.css("display","inline");
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
} else {
$(".scrollToTop").css("display","none")
}
}

Related

div appear smoothly using jquery

my div should appears smoothly after a while, i think it needs a transition script code, this is my script that shows the div after 800 pixels scrolled down.
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 700) {
$('.menu').fadeIn();
} else {
$('.menu').fadeOut();
}
});
I don't know how to put transition in this code, sorry i don't know javascript at all
For a better experience use CSS transitions and not jQuery animations. The way to do it is to use your scroll function to add / remove classes from your menu element and than use css to create the fade in effect.
For example:
CSS
.menu {
opacity: 0;
visibility: hidden;
transition: all .4s ease-out;
-webkit-transition: all .4s ease-out;
}
.menu.show {
opacity: 1;
visibility: visible;
}
JS
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 700) {
$('.menu').addClass("show");
} else {
$('.menu').removeClass("show);
}
});

How can I animate a sticky navbar

My project has a sticky header after scrolling that uses this script:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 385) {
$('#nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 386) {
$('#nav').removeClass('navbar-fixed');
}
});
});
How can I animate this so that it looks better?
You can animate your fixed nav bar like this:
.navbar-fixed {
animation: mymove 0.2s ease-in-out;
#keyframes mymove {
from {
top: -20px;
}
to {
top: 0px;
}
}
}
Move the nav bar element from -20px to 0px top. The animation lasts for .2s seconds.
Hope this help you :)
You can also use jQuery animations. as you are already using jQuery
You can use CSS and key frames to animate to the class added and removed. Here below similar questions by using key frames for smooth scrolling
smooth scrolling sticky header

Jquery mobile 1.4.5 set panel height possible?

I am making a jqm project mobile only.
I have two panels one set to push the other is overlay. One is in the left corner and the other is top right corner.
My question is it possible to set the right panel to 100% width (which I've done) and set the height to 10-20% (40px-50px).
Can this be done without breaking any functionality? Can it be done in Css? I'm able to set width but unable to set height.
Thanks in advance!!
Customizing a right or left panel you will need to change 3 CSS classes set by JQM. The animation, the panel, and the inner part of the panel which is were the content is in. An easier way is to create custom overlay box.
Demo
https://jsfiddle.net/bz649m86/
Html
<div class="box"><a class="close">Close</a></div>
CSS
.box {
position:fixed; // a fixed position is used for the box
top:0; // placed at the top of the screen
right:-100%; // with a minus position setting on the right side of the screen so its hidden from view
background-color: blue;
width: 100%; //with a width of the whole screen, but it can be any width
display: block; //displayed in block format
z-index: 999999; // above the header when in view
overflow: hidden; // if you don't require scrolling within the box
height:40px; // the height size required
//the transition settings are not needed but makes the animation of the panel much smoother.
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
Jquery
// animate on click to bring the box in to view
$(document).on("click", ".pannel", function () {
$('.box').animate({
'right': "0%"
}, 300);
})
// and out of view when closed
$(document).on("click", ".close", function () {
$('.box').animate({
'right': "-100%"
}, 300);
})
As a side note, with this method you can have a custom panel (overlayed) displayed anywhere on the screen.
In this demo the box comes from top of the screen
https://jsfiddle.net/Lqxp2ewb/
As mentioned:
$(document).on("click", ".pannel", function () {
$('.box').animate({
'top': "0%"
}, 200);
return false;
})
$(document).on("click", ".close", function () {
$('.box').animate({
'top': "-100%"
}, 200);
return false;
})
Not sure is if return false is better than preventDefault and stopPropagation. Tried both, either way, very smooth on mobile devices.
The .ui-panel CSS from jQueryMobile.css defines a min-height attribute of min-height: 100%
So you have to override the min-height attribute.
Since your height value is lower than the min-height value of 100% it has no effect.
In my case i want to set the panel under a fixed header bar, so i use:
top: 38.4px;
min-height: calc(100% - 38.4px);

Using jQuery, how can I change the size of a div as I scroll?

I have a div that is 500px wide in a container that is 3500px high, and I want the 500px div to slowly decrease in width to half its original width as I scroll down the page. Everything I've tried with .scroll in jQuery is making the width change as soon as the page loads instead of as the page is scrolled down.
EDIT I'd like the width to scale up and down as the page is scrolled up and down.
Here's an example of what I started with, I know it's obviously not correct:
$(document).ready(function() {
$('#box').scroll(function() {
$('#box').css('width', '250px');
});
});
Here is working fiddle, that dynamically changes it's width http://jsfiddle.net/CWe9t/1/
$(document).ready(function () {
var initialWidth = $("#box").width();
var minWidth = 250;
$(document).scroll(function () {
var x = initialWidth - (minWidth * ($(window).scrollTop()) / $("#box").height());
$('#box').css('width', x);
});
});
$(window).scroll(function() {
$( "#box" ).animate({
width: '250px'
}, 5000, function() {
// Animation complete.
});
});
Are you calling scroll function on your box scrolling? No, it's window you are calling scroll function
$(document).ready(function() {
$( **window** ).scroll(function() {
$('#box').css('width', '250px');
});
});
and about slowly decrease size apply this css3 properties on your box
#box
{
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
apply css3 animation as it is more smoother to animate if many animations on same page same time and Jquery animation if that's only one simple animation as told by #daguru.

JavaScript animated smooth-scroll

By default when you have fragment links like this:
some text
the browser just, scrolls down to that fragment instantly. How do i program it to smoothly move down to that fragment with standard JS?
Here's an example:
Example (To see the working example, just click on the 3 arrows inside the 3 circles and watch the smooth animated scrolling)
okay, i think i found my answer, posting it here to help others with the similar doubt:
<html>
<head>
<script type="text/javascript">
var singleton = {};
var timeout = singleton;
window.onscroll = windowScroll;
function windowScroll ()
{
var toTop = document.getElementById('toTop');
toTop.style.display = ((window.scrollY > 0) ? "block" : "none");
}
function scrollStep ()
{
var y1 = window.scrollY - 1000;
window.scrollTo(0, y1);
if (y1 > 0)
{
timeout = window.setTimeout(scrollStep, 100);
}
else if (timeout != singleton)
{
window.clearTimeout(timeout);
}
}
</script>
<style type="text/css">
#toTop {
display: block;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 48px;
}
#toTop {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
opacity: 0.5;
display: none;
cursor: pointer;
}
#toTop:hover {
opacity: 1;
}
</style>
</head>
<body>
<p id="top">your text here</p>
<a href="#top" onclick="scrollStep(); return false" id="toTop"
><img src="images/go-to-top.png" alt="Go to top" title="Go to top"></a>
</body>
</html>
Well you should try something like this
$('html,body').animate({
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_Conten
tPlaceHolder1_txtcomment").offset().top
},'slow');
where *#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment* is the id where you want to move or scroll
another approch is to put this in a function
function scrollme() {
$('html,body').animate({
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment").offset().top
},'slow');
} <a onclick="javascript:scrollme();">some text</a>
I hope this will help you.
Regards..:)
[Updated]
A URI hash is a great way to make JavaScript/AJAX pages with dynamic
content bookmarkable. It can be used in a manner similar to query
strings, but changes will not cause a new page request. This allows
you to store data in the URI which can be read and changed by
JavaScript without ever reloading the page.
For the uninitiated, a URI location hash is everything after the #
sign in the URI:
http://domain.com/page.html#i-am-a-hash A side note: URI hashes are
not transferred back to the server, you can only access them
client-side.
check this blog
http://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings/

Categories