http://jsfiddle.net/HGCaF/6/
I am trying to make my div move more smoother when moving down the page and back up, it's hard to describe but if you take a look at the link you will begin to understand what I mean,
Here is a sample structure of the webpage:
<div id="window">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
Here's one way of doing that:
CSS:
#window{
width:400px;
border:solid 1px;
position:absolute;
}
JavaScript:
$("#button").click(function(){
$("#box").slideToggle();
if($(this).html() == "-"){
$(this).html("+");
setTimeout(function() {
$('#window').css('top', 'auto');
$('#window').animate({ 'bottom': '0' }, 500);
}, 500);
}
else{
$(this).html("-");
setTimeout(function() {
$('#window').animate({ 'top': '0' }, 500);
$('#window').css('bottom', 'auto');
}, 500);
}
});
Works in FF, I haven't tested other browsers.
Related
A jQuery code snippet isn't working upon page load. It should replace 'frame--layout-vertical' with 'frame--layout-horizontal' and padding-bottom: 56.25% with padding-bottom: 100% when the screen width is greater than 641. By default, its frame--layout-vertical and padding-bottom: 56.25% (given the html below).
Its working perfectly when I resize the screen a bit after page-load. 'load' isn't working.
Here is the jQuery:
<script type="text/javascript">
$(window).on('load, resize', function frame() {
var viewportWidth = $(window).width();
if (viewportWidth < 641) {
$(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom' : '56.25%'});
} else {
$(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom': '100%'});
}
});
</script>
<div class="frame frame--policy frame--layout-vertical">
<div class="frame__hover-area">
<div class="frame__main-content">
<div class="frame__image-wrapper">
<div class="image image--placeholder frame__image wow fadeIn animated" data-wow-duration="1s" data-wow-delay="0s" style="padding-bottom: 56.25%; visibility: visible; animation-duration: 1s; animation-delay: 0s; animation-name: fadeIn;">
<img class="image__inner" src="http://redspark/upload/content/1/2017/03/11-58bd7aaf35385_thumbnail.jpg" role="presentation">
</div>
</div>
<div class="frame__content">
<span>
<a class="section-button section-button--policy" href="/content/blog/category/9/" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Sex</a>
<a class="article-component__link" href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html">
<h2 class="headline headline--article">7 Vegetarian Recipes That Are Better in a Bowl</h2>
</a>
<div class="byline">
<a class="author-link" href="">author</a>
<time class="byline__date" datetime="2017-03-11T04:31:06.000Z" title="2017-03-11 04:31">15 days ago</time>
</div>
</span>
</div>
</div>
<div class="frame__border"></div>
<div class="frame__border frame__border--hover"></div>
</div>
</div>
EDIT: When I am using a auto load pagination. The my jQuery code isn't working since the browser isn't loaded. Can you please give me a suggestion? How can I call jQuery code with auto pagination?
Here is the autoloading snippet.
<script language="Javascript" type="text/javascript">
$(function () {
$('div.sponsor-articles.sponsor-section').infinitescroll({
debug: true,
navSelector: 'div.appPaginatorContainer', // selector for the paged navigation
nextSelector: 'div.appPaginatorContainer span.next a', // selector for the NEXT link (to page 2)
itemSelector: 'div.sponsor-articles div.frame', // selector for all items you'll retrieve
bufferPx: 40,
debug:true,
columnWidth: function (containerWidth) {
return containerWidth / 5;
},
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif',
msgText: 'Loading more posts'
}
});
});
</script>
You write wrong
$(window).on('load resize', function frame() {})
there should be no ,
You can use the document ready pattern.
EDIT: Added an initial call for page loaded.
function frame() {
var viewportWidth = $(window).width();
if (viewportWidth < 641) {
$(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom' : '56.25%'});
} else {
$(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom': '100%'});
}
$( document ).ready(function() {
frame();
$(window).on('resize', frame);
});
I built a basic Jquery Slider for myself and had a few problems with it.
The automatic slide itself works perfectly, but when I try to navigate with my arrows, for example switching left and right, the whole system doesn't work. I hope someone can understand it.
Here's the index.html:
<div id="slider">
<div id="no">
<div class="slide active-slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
<div id="arrow-left" class="btn"><</div>
<div id="arrow-right" class="btn">></div>
<div id="loader"><div id="bar"></div></div>
</div>
Script:
$('#slider').hover(function(){
$('.btn').fadeIn(300);
}, function(){
$('.btn').fadeOut(300);
});
startSlide();
function startSlide() {
var currentSlide = $('.active-slide')
$('#bar').css('width', '0');
$('#bar').animate({width:'100%'}, 4000, function(){
if($('.active-slide').next().hasClass('slide')) {
$('.active-slide').removeClass('active-slide').next().addClass('active-slide');
startSlide();
} else {
$('.active-slide').removeClass('active-slide');
$('.slide').first().addClass('active-slide');
startSlide();
}
});
$('#arrow-right').click(function(){
$('#bar').stop();
if($('.active-slide').next().hasClass('slide')) {
$('.active-slide').removeClass('active-slide').next().addClass('active-slide');
startSlide();
} else {
$('.active-slide').removeClass('active-slide');
$('.slide').first().addClass('active-slide');
startSlide();
}
});
$('#arrow-left').click(function(){
$('#bar').stop();
if($('.active-slide').prev().hasClass('slide')) {
currentSlide.removeClass('active-slide');
currentSlide.prev().addClass('active-slide');
startSlide();
} else {
currentSlide.removeClass('active-slide');
$('.slide').last().addClass('active-slide');
startSlide();
}
});
}
I need to set a easeOutBounce for a webpage back-to-top button .
I have below code for .scrollTop but unable to add
{
duration: 2000,
easing: "easeOutBounce"
}
Existing .js:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
});
});
Like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900, 'easeOutElastic');
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Or, like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate(
{scrollTop: 0},
{
easing: 'easeOutElastic',
duration: 1500
}
);
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Useful sites:
http://easings.net/ (usage examples at bottom)
http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Install just the easings to get around requirement for jQueryUI
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
I am using jQuery code from http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/ to scroll to a Div within a Wrapper.
The code provided animates the body (Scrolls the body down onClick) I am trying to animate the scroll inside a div, not body.
My code below:
HTML:
Scroll Down
<div class="Wrapper" style="height:400px; width:600px; overflow:hidden;">
<div id="Div1" style="height:200px; width:600px;"></div>
<div id="Div2" style="height:200px; width:600px;"></div>
<div id="Div3" style="height:200px; width:600px;"></div>
</div>
jQuery
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
I know it has something to do with $('html, body').animate({ }) but im not sure how to change it.
Thanks
JSFiddle http://jsfiddle.net/3Cp5w/1/
Animate the wrapper instead of the body:
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
http://jsfiddle.net/robbyn/qU6F7/1/
Try the following Code
<body>
Scroll Down
<div class="Wrapper" style="height:200px; width:600px; overflow:scroll;">
<div id="Div1" style="height:200px; width:600px;background-color:red;" ></div>
<div id="Div2" style="height:200px; width:600px;background-color:green;" ></div>
<div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
</script>
i think you want div3 to scroll down inside Wrapper
you need to first specify the height of Wrapper to a small number so that scroll is visible
&
as you guessed change html,body to .Wrapper
do ask for help
Add the jQuery updated file reference
<script src="http://code.jquery.com/jquery-1.10.2.js" />