I'm trying to make horizontal scrolling effect using two buttons, left and right. But I can't sort it out. I managed to scroll to next element but then scrolling stops and I can't scroll to another element.
$(document).ready(function(){
$("#left").click(function(){
$(".wrap").animate({scrollLeft: 0}, 1000);
return false;
});
var item_width = $('.label').outerWidth();
$("#right").click(function(){
$(".wrap").animate({scrollLeft: item_width}, 1000);
return false;
});
});
You need to keep track of your current index. You have shifted right once (the width of item_width), but the second time you need to animate scrollLeft: item_width*2, the third item_width*3, etc.
set a variable in your document ready that starts at 0, and its incremented or decremented when you click on either right or left, and then change 0 and item_width to item_width * index
Uhm i'm not sure you can use "{scrollLeft: item_width}" for element different to body o window... but if you can do this change part your script:
{scrollLeft: item_width}
to
{scrollLeft: "+="+item_width}
JS:
$(document).ready(function(){
var item_width = $('.label').css("width");
$("#left").on("click",function(){
if(parseInt($(".wrap").css("margin-left")) == 0) return;
$(".wrap").animate({marginLeft: "+="+item_width}, 1000);
return false;
});
$("#right").on("click",function(){
$(".wrap").animate({marginLeft: "-="+item_width}, 1000);
return false;
});
});
For example you can use this
html:
<div id="right">></div>
<div id="left"><</div>
<div class="wrap">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
css:
body{
margin:0;
padding:0;
}
.wrap{
overflow:hidden;
float:left;
width:903px;
height:200px;
position:relative;
}
.label{
display:block;
float:left;
width:300px;
background-color:red;
border-left:solid 1px black;
position:relative;
height:200px;
}
#right,#left{
position:absolute;
background-color:purple;
color:white;
top:100px;
width:20px;
height:20px;
margin-top:-10px;
text-align:center;
line-height:20px;
display:block;
z-index:2;
cursor:pointer
}
#right{
right:0;
}
see the example here:
http://jsfiddle.net/u3hB8/4/
Related
Well I am very new with javascript, have always loved to work on my own codes as it is easier to edit.
I am working on making a website which animates on scroll.
By seeing many tutorials I am able to make the div animation on a particular scroll from top
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate").className = "boxl1";
} else {
document.getElementById("animate").className = "";
}
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate1").className = "boxl2";
} else {
document.getElementById("animate1").className = "";
}
}
#main{
width:1000px; height:2000px; float:left; background-color:#000;
}
#left{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
.boxl1{
width:100px;
height:100px;
float:left;
background-color:#FFF;
background-image:url(gif/1.png);
transform:scaleX(-1);
animation-name:lefty;
animation-duration:5s;
}
#keyframes lefty{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(270deg);
}
}
#right{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
.boxl2{
width:100px;
height:100px;
background-color:#FFF;
background-image:url(gif/1.png);
float:right;
animation-name:travel;
animation-duration:5s;
}
#keyframes travel{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(360deg);
}
}
#leftd{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
#rightd{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
<div id="main">
<div style="margin-top:400px;">
<div id="left">
<div id="animate"></div>
</div>
<div id="right">
<div id="animate1"></div>
</div>
<div id="leftd">
</div>
<div id="rightd">
</div>
</div>
</div>
Now all i want into this is that it should not complete the animation until i scroll down and reverse it when i scroll up.
the method i think is, i can create many boxes in css (like boxl1, boxl2,boxl3,...n) with different margins, and make a switch statement, but as i am too new to this, can you help me how does it works? I saw many tutorials they all show day and date, or names nothing for class and divs
Many answers here ask to get a js library and stuff, but i want to write it myself, if you can help, it would be great, thanks in advance!
I have a website menu bar that has two separate divs that a site visitor can toggle between just by tapping. Here's the fiddle and the actual code:
HTML:
<div id="container">
<div id="div">
<div id="next1">MENU 1</div>
<div id="next2">MENU 2</div>
</div>
</div>
CSS
#container{
height:100px;
width:50%;
position:relative;
overflow:hidden;
}
#div{
height:100px;
width:100%;
position:relative;
}
#next1{
height:100px;
width:100%;
top:0;
left:0;
background:green;
position:absolute;
}
#next2{
height:100px;
width:100%;
top:0;
left:100%;
background:orange;
position:absolute;
}
JavaScript
$("#next1").click(function () {
targetLeft = "-100%";
$("#div").animate({left: targetLeft},400);
});
$("#next2").click(function () {
targetLeft = "0";
$("#div").animate({left: targetLeft},400);
});
The code works well, but I'd like to do this without JQuery, and am wondering if anyone knows how this could be done? (If it can be done without JavaScript as well, that would be ideal but I'm not sure that's possible.)
Thanks for reading!
You could use CSS3 transitions instead:
Example Here
document.getElementById('next1').addEventListener('click', function () {
document.getElementById('div').style.left = '-100%';
});
document.getElementById('next2').addEventListener('click', function () {
document.getElementById('div').style.left = '0%';
});
#div {
height:100px;
width:100%;
position:relative;
left: 0;
transition: left 400ms ease-in-out;
}
How can i have a smooth slide down jQuery when I scroll down the page?
Like on this page:
https://www.behance.net/gallery/8571121/JobEngine-WordPress-Theme-By-Engine-Themes
I am using this code, it works but it's not smooth, it's not sliding down, it just appears with no effect:
var bar = $('div.navbar');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
bar.stop().addClass('navbar-fixed-top').animate({'top' : '0px'}, 500);
} else {
bar.stop().removeClass('navbar-fixed-top').animate({'top' : top}, 500);
}
});
try to set the top value negative and animate it to 0px.
bar.stop().addClass('navbar-fixed-top').css('top','-50px').animate({'top' : '0px'}, 500);
watch my fiddle:
http://jsfiddle.net/mjGRr/
One way of Accomplishing this is by first keeping the height of the element 0px and then increasing the height as required.
check this fiddle :http://jsfiddle.net/FuH2p/ - I have done the same effect using css. I guess you have wont be having any trouble converting it to javascript!!!
HTML
<div class="outer">
<div class="inner">
<div>
</div>
CSS
.outer{
widht:100%;
height:300px;
background:#ddd;
border:5px solid #343434;
}
.inner{
position:relative;
top:0px;
width:100%;
height:0px;
background:green;
-webkit-transition:all .4s ease-in-out;
}
.outer:hover > .inner{
height:30px;
}
OR
here you go ( something like this)
keep a duplicate nav bar fixed on top with height 0px;
.duplicateNavbar{
display:fixed;
top:0px;
height:0px;
}
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('.duplicateNavbar').animate({'height' : '56px'}, 500);
} else {
$('.duplicateNavbar').animate({'height' : '0px'}, 500);
}
});
I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.
How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.
HTML
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<p>Hover over red div please!!</p>
</body>
</html>
CSS
.wrapper{
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
margin-top:200px;
color:white;
}
jquery
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){ $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
and here is the fiddle http://jsfiddle.net/qGVfp/
There's 2 changes you need to make. First adjust the stylesheet so the moving div is off to the left instead of the bottom:
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
left:-200px;
color:white;
}
And then change the javascript to react to clicks, be based on width and modify the left property. Note, there is a toggle method that behaves a lot like hover, but it's getting removed from jQuery, so you have to have a boolean that tracks state.
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
Here's an updated fiddle: http://jsfiddle.net/qGVfp/30/
.wrapper2{
background-color:blue;
width:400px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner2{
width:200px;
height:200px;
position:absolute;
background-color:black;
margin-left:400px;
color:white;
}
$(".wrapper2").hover(function(){
$(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
},function(){
$(".inner2").stop().animate({marginLeft:400},1000);
});
});
http://jsfiddle.net/bighostkim/vJrJh/
You are basically there just need to change a few things around.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<button id="btn">click</button>
</body>
</html>
CSS
.wrapper {
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner {
width:200px;
height:100px;
position:absolute;
background-color:black;
left:200px;
color:white;
}
SCRIPT
var hidden = true;
$(document).ready(function(){
$("#btn").click(function() {
if(hidden) {
$(".inner").stop().animate({left:0}, 1000);
hidden = false;
}
else {
$(".inner").stop().animate({left:200},1000);
hidden = true;
}
});
});
Here is a fiddle to show this: http://jsfiddle.net/qGVfp/31/
this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.
Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)