I need a help with this auto-scrolling. Please help me to pause the scrolling when Hovering the Mouse over it. Thank you.
/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({
'overflow': 'hidden',
height: 'auto'
});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({
'overflow': 'hidden'
});
/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();
var scroll = function(resetY) {
//animate 기본 동작 변형 "swing" -> "linear"
$('.scroll-group').animate({
top: targetY * -1 + 'px'
}, 6000, "linear", function() {
$('.scroll-group').css({
top: 0
});
scroll();
});
}
scroll();
.scroll-wrap,
.scroll {
width: 100px;
height: 102px;
overflow-y: scroll;
margin: 0;
position: relative
}
.scroll-group {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>
Please use this fiddle.
I have added hover and mouseleave function to pause and resume the scrolling respectively.
/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({'overflow':'hidden',height:'auto'});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({'overflow':'hidden'});
/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();
var scroll = function(resetY){
//animate 기본 동작 변형 "swing" -> "linear"
$('.scroll-group').animate({top:targetY*-1+'px'},6000,"linear", function(){
$('.scroll-group').css({top:0});
scroll();
});
$('.scroll-group').hover(function() { //mouseenter
$('.scroll-group').stop(true, false);
});
$(".scroll-group").mouseleave(function(){
scroll();
});
}
scroll();
.scroll-wrap,.scroll {width:100px; height:102px;overflow-y:scroll; margin:0 ; position:relative }
.scroll-group {position:absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>
Related
I use this to position my div:
$(document).ready(function (){
$(window).resize(function (){
$('.classname').css({
position:'absolute',
left: ($(window).width() - $('.classname').outerWidth())/2,
});
});
$(window).resize();
});
but after scrolling down, i want to stick on the top, so withouth positioning I use this:
$(window).scroll(function(){
if($(document).scrollTop() > 150){
$('.class name').addClass('shrink');
}
else{
$('.class name').removeClass('shrink');
}
});
here is the css for shrink:
.shrink{
top: 0;
left: 0;
position: fixed;
width: 100%;
}
Can someone help me, how to merge the two scripts?
thanks
don't know if i understand you correctly, but you can try this:
CSS
.classname{
top: 0;
position: absolute;
}
.classname.shrink{
left: 0 !important;
position: fixed;
width: 100%;
}
JS
$(document).ready(function (){
$(window).resize(function (){
$('.classname').css({
left: ($(window).width() - $('.classname').outerWidth())/2,
});
});
$(window).scroll(function(){
if($(document).scrollTop() > 150){
$('.classname').addClass('shrink');
}
else{
$('.classname').removeClass('shrink');
}
});
$(window).resize();
});
HTML:
<div class="box">
content
</div>
<div class="box last">
content
</div>
jQuery:
$('.box').on('click', function (e) {
e.preventDefault()
$(this).stop(true, false).animate({
width: "+=100",
height: "+=100",
top: "-=50",
left: "-=50"
}, 300);
$(this).addClass('zoom')
});
I need to resize box back to original state (size and position), if click is happened on another box or somewhere outside (document body).
I have tried with this code, but code is executed as soon as i click on one of the boxes:
$(document).on('click', ".box.zoom", function () {
e.preventDefault()
$(this).stop(true, false).animate({
width: "-=100",
height: "-=100",
top: "+=50",
left: "+=50"
}, 300);
$(this).removeClass('zoom')
});
Current setup is located on: https://jsfiddle.net/3ftg4hmc/
At the very last of click event save current position using data() method of the box and on the next click restore previous position like following.
$('.box').on('click', function () {
var position = $(this).data('position'); //get saved position
if ($(this).hasClass('zoom')) {
$(this).stop(true, false).animate({
width: "-=100",
height: "-=100",
top: position.top, //use saved position
left: position.left //use saved position
}, 300);
$(this).removeClass('zoom');
} else {
$(this).stop(true, false).animate({
width: "+=100",
height: "+=100",
top: "-=50",
left: "-=50"
}, 300);
$(this).addClass('zoom')
}
$(this).data('position', $(this).offset());
});
UPDATED FIDDLE
$('.box').on('click', function(e) {
e.preventDefault();
$(this).stop(true, false).animate({
width: "+=100",
height: "+=100",
top: "-=50",
left: "-=50"
}, 300);
$(this).siblings().attr("style", ""); // new line added
});
you could just empty the attribute style of sibling div's by just using $(this).siblings().attr("style", "");
here is the working fiddle : https://jsfiddle.net/3ftg4hmc/3/
Hi I hope this helps you
Javascript
$('.box').on('click', function (e) {
e.preventDefault()
if ($(this).hasClass('zoom')) {
$(this).stop(true, false).animate({
width: "-=100",
height: "-=100",
top: "+=50",
left: "+=50"
}, 300);
$(this).removeClass('zoom');
}
else {
$(this).stop(true, false).animate({
width: "+=100",
height: "+=100",
top: "-=50",
left: "-=50"
}, 300);
$(this).addClass('zoom');
}
});
link https://jsfiddle.net/3ftg4hmc/1/
I have to apply animation on each "div". But it is applying just in first one not in all.
According to me "$("#viewport").each(appendTo(c));" this line is not working in javascript code.
HTML code:
<div id="viewport"></div>
<div id="viewport"></div>
<div id="viewport"></div>
Javascript code:
$(window).load(function(){
$(function () {
var a = 0;
for (; a < 15; a += 1) {
setTimeout(function b() {
var a = Math.random() * 1e3 + 5e3,
c = $("<div />", {
"class": "smoke",
css: {
opacity: 0,
left: Math.random() * 200 + 80
}
});
**$("#viewport").each(appendTo(c));**
$.when($(c).animate({
opacity: 1
}, {
duration: a / 4,
easing: "linear",
queue: false,
complete: function () {
$(c).animate({
opacity: 0
}, {
duration: a / 3,
easing: "linear",
queue: false
})
}
}), $(c).animate({
bottom: $("#viewport").height()
}, {
duration: a,
easing: "linear",
queue: false
})).then(function () {
$(c).remove();
b()
});
}, Math.random() * 3e3)
}
}());
});
Use more than one element with the same id is absolutely bad practice! Put "vieport" as class and use
$( ".viewport" )
The .each() function take a function as first argument and in that function context, the "this" variable will contain the element
$( ".viewport" ).each( function() {
$( this ).appendTo( c );
});
If I am not wrong. You want something like this:
HTML:
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
JS:
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns)
});
}());
CSS:
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
Please see demo here: http://jsfiddle.net/1rf31eyL/
You may check another example demo here: http://gettycreations.com/
first of all
add function in $.each
like
"$("#viewport").each(
function(){
$(this).appendTo(c);
}
);
and then try this,
$("[id=viewport]")
When you use
$("#viewport")
it selects only the first element with the given ID.
However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:
$("[id=viewport]")
I'm creating a page when you hover a div. That div will grow in size (width) and the other divs (siblings) will be smaller in size (width).
I use a mouseenter and a mouseleave. But I can't get the .stop() function working.
When you hover one and less than a sec another one. The old one will not stop.
Live example:
http://jsfiddle.net/5kyw9ya7/7/
Code:
Html:
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
Css:
body, html {
margin:0px;
overflow:hidden;
}
div {
float:left;
height:100vh;
top:0;
bottom:0;
}
.one {
background-color:orange;
}
.two {
background-color:yellow;
}
.three {
background-color:red;
}
.four {
background-color:purple;
}
.five {
background-color:green;
}
Jquery:
var breedte = $(window).width() / 5;
$("div").css("width", breedte);
$("div").stop()
.mouseenter(function () {
$(this).animate({
width: "+=100"
});
$(this).siblings().animate({
width: "-=25",
});
$(this).siblings().css(
"backgroundColor", "grey");
})
.stop().mouseleave(function () {
$(this).animate({
width: "-=100"
});
$(this).siblings().animate({
width: "+=25"
});
$(this).siblings().css(
"backgroundColor", "");
});
It works better if you put .stop() in the event handlers. You should also call it as .stop(true,true) in order for it to finish the animation. Otherwise, the sizes get all messed up. See the documentation.
var breedte = $(window).width() / 5;
$("div").css("width", breedte);
$("div").stop()
.mouseenter(function () {
$(this).stop(true,true).animate({
width: "+=100"
});
$(this).siblings().stop(true,true).animate({
width: "-=25",
});
$(this).siblings().css(
"backgroundColor", "grey");
})
.stop().mouseleave(function () {
$(this).stop(true,true).animate({
width: "-=100"
});
$(this).siblings().stop(true,true).animate({
width: "+=25"
});
$(this).siblings().css(
"backgroundColor", "");
});
Updated fiddle: http://jsfiddle.net/5kyw9ya7/10/
I trying to animate listfrom left to right and vice versa,now i want when mouse hover on div list animate left to right and when mouse leave that div than it list animate right to left , can anyone help me for this.
$('.ul_div').mouseover(function () {
$('.ul_div').css({ display: 'block' });
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
});
<div class="ul_div">Hover Me<div>
<ul id='ulEle'>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
Demo Here
jsFiddle Demo
CSS:
.ul_div ul {
position: absolute;
display: none
}
.ul_div {
border:2px solid Red;
position: relative;
}
Javascript:
$('.ul_div').hover(
function () {
$('.ul_div ul').css({
display: 'block'
});
$('.ul_div ul').animate({
left: '100px',
background: '#ccc'
}, 100);
},
function () {
$('.ul_div ul').animate({
left: '0',
background: '#ccc'
}, 100, function () {
$('.ul_div ul').css({
display: 'none'
});
});
});
You need to specify positioning on the ul element in order to use the CSS left and right properties.
Update your CSS as follows:
#ulEle {
position: absolute;
}
.ul_div {
border:2px solid Red;
position: relative;
}
You should then update your jQuery code to use the hover() function, and use the following code:
$('.ul_div').hover(function () {
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
}, function() {
$('.ul_div ul').animate({ left: '0px', background: '#ccc' }, 100);
});
Please see the updated jsFiddle for a demo.