Is there any plugin available for jquery to animate the scroll? Say I have few scrollbars in the window. I want that whenever user is scrolling the scrollbar should animate and not appear instantaneously.
To get an exact idea of what I am trying to achieve, see this:
http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/
This is in Silverlight.
See how it scrolls in fluid manner. I want to achieve the same effect but using jquery. Is this possible?
Thanks.
Use jQuery UI: http://jqueryui.com/demos/slider/#default.
Insert code into the ready handler as shown here:
var width = $('#scrollable').width() - $('#wrapper').width();
$('#slider')
.slider( { max: width })
.bind('slide', function(event, ui) {
$('#scrollable').stop().animate(
{
right: ui.value
},
1000
);
});
HTML:
<div id="wrapper">
<div id="scrollable"><!-- bla bla --></div>
<div id="slider"></div>
</div>
Don't forget to hide the scrollbar:
#wrapper {
text-align: left;
width: 900px;
height: 600px;
margin: 0 auto;
border: 1px solid black;
overflow: hidden;
position: relative;
}
Some thing like this might help.
$("html, body").animate({
scrollTop: 0
}, "slow");
You could make your own custom "sliders" using jQuery UI, and then upon change, do what "userD" suggested. One slider would be horizontal, one vertical (of course).
Then you'd want to hide the browsers actual scroll bars for the particular div by using css ("overflow: hidden;")
Here's was #userD suggested....
$("html, body").animate({
scrollTop: 0
}, "slow");
You would of course change that to "#myDiv" instead of "html, body".
A nice light plugin jQuery .scrollTo. Found here: Arial Fiesler Blog
sytanx is easy $('div').scrollTo(#anchorindiv,{duration:1000});
Related
I have a DIV that has an overflow-y set to scroll.
.scrolling-div {
width: 85%;
height: 200px;
overflow-y: scroll;
}
Assuming that I have a bunch of content inside this div, I want it to scroll all the way to the bottom of the div on pageload. I actually want to see the animation of the scroll (so the div would start at the top, but then I want to see it scroll to the bottom).
How do I create this with either Javascript, Jquery, or just pure CSS? I also want to be able to control the speed of the scroll animation.
You can use jquery's animate:
$('.scrolling-div').animate({
scrollTop: $('.scrolling-div').prop('scrollHeight')
}, 1000);
See a working example here.
$(function() {
var wtf = $('#scroll');
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
});
#scroll {
width: 200px;
height: 300px;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll">
I'm working onepage website, what i'm trying to do is to disable scorlling on webpage and only and make transitions between sections using the navbar links to id. for that i have use this jquery code
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 1000;
$('html, body').animate( { scrollTop: $(page).offset().top }, speed );
return false;
});
});
and this on CSS
html, body {margin: 0; height: 100%; overflow: hidden}
everything work fine except one issue is that when im in a specific section that have a big content i can't scroll within in, what im trying to figure out is: how to enable scrolling within section itself without scrolling all the webpage
If I've understood your question correctly, what you can do in this case is add an overflow-y:scroll to the wrapping div of the content you wish to be scrollable.
For example, say we have a div#test with some content:
<div id="test">
... Some content
</div>
We can then simply apply the styles:
#test {
height: 300px;
width: 300px;
overflow-y: scroll;
background: #ff1000;
}
Here is it in action: http://codepen.io/anon/pen/RRYERR
You can add css to your div :-
yourDiv:hover { overflow: auto; height:desired height }
I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.
<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has completed?
You can see what I have so far here.
Click on the printables button to see what I'm talking about.
I also created a jsFiddle of the basic functionality, jsfiddle.
$('a').click(function(event){
event.preventDefault();
$(element).slideToggle(250, function(){
window.location.hash = "#content";
});
});
Should work.
Piggybacking off of Robert's answer, you could clean it up a bit by not using hashes.
$('a').click(function(event){
event.preventDefault();
$a = $(this);
$(element).slideToggle(250, function(){
$(window).scrollTop($a.offset().top);
});
});
The two answers provided by Chad and Robert are both valid, however, I like to write it a bit differently.
Below is an example based on your jsFiddle. The JS is the part you need.
$(function() {
$( "#button" ).on( "click", function() { //Click
$( "#content" ).slideToggle( "slow", function(){
if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
$('html,body').animate({ //animate the scroll
scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
}, "slow")
}
});
return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
});
});
/* This is for the example */
#button{
display: block;
margin: auto;
margin-top:130px;
height: 50px;
width: 180px;
background-color: #ccc;
}
#content{
display: none;
margin: 0 auto;
height: 1200px;
width: 170px;
background-color: blue;
}
<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to expand content
<div id="content">
</div>
I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.
What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/
Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!
You don't need JS for that, just use css3 transitions.
So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.