I'm coding some jQuery to animate all the .linkbox to increase in height and it works great except that the element that I'm clicking on is slower than the other two elements (so it's like it's slower on hover), how do I make all the three elements animate the exact same way, shouldn't they already do that? Also they are animating from the bottom is it possible to tell it to animate it from the top?
Here's a link with all the code: http://jsbin.com/fihes/2/edit?html,css,js,output
Thanks in advance!
html:
<body>
<div class="linkbox"><div class="text">Om mig</div></div>
<div class="linkbox"><div class="text">Portfolio</div></div>
<div class="linkbox"><div class="text">Kontakt</div></div>
</body>
CSS:
body{
background:black;
background-attachment:fixed;
width: 102%;
margin: 0px;
padding: 0px;
}
.linkbox{
opacity: 0.5;
width:33%;
height: 200px;
background-color: #ffffff;
padding: 0px;
margin: -2px;
display:inline-block;
margin-top: 35%;
}
.linkbox:hover{
opacity: 1;
transition: all 0.4s ease;
}
.text{
text-align:center;
font-family: Helvetica;
font-size: 42px;
padding: 74px;
}
jQuery:
$(document).ready(function(){
$('.linkbox').click(function(){
$('.linkbox').animate({height:"400px"}, "slow", "swing");
});
$('.text').click(function(){
$('.text').fadeTo("fast", 0);
});
});
Your click code is slower because you have "slow" , you can change it to "fast" instead, like so:
$('.linkbox').click(function(){
$('.linkbox').animate({height:"400px"}, "fast", "swing");
});
To answer your second question, I don't believe it's possible with just .animate() to have it slide from the top down. However, there is the .slideDown() effect.
The .slideDown() method animates the height of the matched elements.
This causes lower parts of the page to slide down, making way for the
revealed items
http://api.jquery.com/slidedown/
Related
I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!
A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>
this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start menu popping up from the button, the entire start menu bar would slide up exposing the entire div.
What I'm doing now (forgive me as I have just learned JS and jQuery from codecademy) is using the slideUp function. However, this is causing the div to slide down out of sight instead of up, exposing the entire div. The goal is that when you click the button the div slides up, and if you click the button again (or anywhere outside the div) it'll slide back down leaving the top 60px exposed like before.
Here's my JS/jQuery code:
$('#start').click(function() {
$('#nav').slideUp('slow');
});
My HTML
<div id="nav" class="nav">
<img id="start" src="img/btn_start.png">
</div>
My CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
font-family: Helvetica;
}
.nav {
width: 100%;
min-width: 100%;
height: 500px;
background: #000;
color: #fff;
position: absolute;
bottom: -440px;
text-align: center;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}
.nav ul li {
display: inline;
}
.nav li {
padding: 20px;
margin-top: 80px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#start {
float: left;
}
Thanks, and I hope this isn't too ridiculous.
Instead of slideUp you should use
$('#start').click(function() {
$('#nav').animate({bottom: "0px"}, 1200);
});
...which will smoothly animate from the current location until the bottom is at 0px (i.e. aligned with the bottom of the containing element).
For even smoother results, checkout velocity.js (http://julian.com/research/velocity/), which does even smoother animation by synchronising with browser frame updates.
JsFiddle here: http://jsfiddle.net/11r46jnm/
You can also do this with CSS transitions instead. For stuff like this I like to hook my CSS into data attributes on the HTML:
<div id="nav" class="nav" data-nav-state="collapsed">
<img id="start" src="img/btn_start.png">
</div>
...use javascript to change the attributes...
$('#start').click(function() {
//toggle the nav element between two states
var currentState = $('#nav').attr("data-nav-state");
var newState = "collapsed";
if ( currentState === "collapsed" ) {
newState = "expanded";
}
$('#nav').attr("data-nav-state", newState);
});
Finally we use CSS to set the positions of the two states, and to ensure that transition is smooth. CSS transitions have much better performance than jQuery, so I recommend using them if you can:
#nav[data-nav-state=collapsed] {
bottom: -440px;
}
#nav[data-nav-state=expanded] {
bottom: 0px;
}
#nav {
transition: bottom 1.2s ease;
}
See this jsFiddle for a demo: http://jsfiddle.net/Lv2saepy/1/
Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.
I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.
Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.
I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}
I am trying to use a div that is set to 100% of the initial browser window, with the Backstretch plug-in applied to it, and have it animate on a click to resize to a smaller dimension, while another div underneath it resizes as well, allowing them to share the screen. All the functionality seems to work, accept that the div will resize and the backstretch will go with it initially, but after the animate function is over, the backstretch will snap back to 100 percent of the window. Even weirder is that when the entire browser is resized by the user, the backstretch will snap into the correct position, and remain there.
I put this into a jsfiddle and the problem works exactly the same way that it does in my code. The click function resizes the div, and the backstretch snaps out of it until the browser is resized. Normally I love trying to figure this kind of thing out, however I think this might be over my head, and I have a hard and fast deadline coming up and this problem has been holding me up for 2 weeks. Any insight would be tremendously helpful.
Heres the code I'm working with:
HTML
<div id="fullbleed">
<div class="button">CLICK</div></div>
<div id="article"></div>`
CSS
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
.button{
width: 70px;
height: 30px;
background-color: fuchsia;
bottom: 190px;
position: absolute;
cursor: pointer;
font-family: 'Open Sans' sans-serif;
font-weight: bold;
text-align: center;
padding: 3px;
font-size: 21px;
left: 41px;
}
#fullbleed{
position:inherit;
top:0;
left:0;
height:100%;
width:100%;
}
#article {
height:0px;
overflow: hidden;
margin-top: 30px;
background-color:aqua;
}
JS
$("#fullbleed").backstretch("http://dl.dropbox.com/u/515046/www/coffee-light.jpg");
$(".button").click(function() {
$("#fullbleed").animate({
height: "200px",
}, 1000);
$(".button").css({
"visibility": "hidden"
});
});
$(".button").click(function() {
$("#article").animate({
height: 5000,
}, 1000);
});
Okay, so what I'm trying to do is have a user click on a link and have a box slide down ontop.
I have the main things done, but the box seems to be a bit weird. If you click on the specified box (in this case, "About the Blogger"), the box slides down. Then if you click anywhere in the area below the navigation, the box also slides down. How do I stop this?
Relevant coding:
CSS:
.panel_button {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
}
.panel_button a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
position: relative;
top: -160px;
font-size: 255%;
width: 50%;
height: 160px;
text-decoration: none;
}
.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}
#toppanel {
margin-top: 0px;
margin-left: 48%;
position: absolute;
width: 48%;
left: 0px;
z-index: 25;
text-align: center;
}
#panel {
width: 100%;
position: relative;
top: 1px;
height: 0px;
margin-left: auto;
margin-right: auto;
z-index: 10;
overflow: hidden;
text-align: left;
}
#panel_contents {
background: #fff;
height: 700px;
width: 100%;
position: absolute;
z-index: -1;
}
Header.php
<div id="container">
<ul id="navigation1">
<li>NIU</li>
</ul>
<ul id="navigation2">
<li>SKETCH/<br>PHOTO<br>BLOG</li>
</ul>
<div class="panel_button" style="display: visible;">ABOUT<br>THE<br>BLOGGER</div>
<ul id="navigation4">
<li>LINKS<br>OUT</li>
</ul>
</div>
<div id="toppanel">
<div id="panel">
<div id="panel_contents">and jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhere </div>
<div class="panel_button1" id="hide_button" style="display: visible;">Hide </div>
</div></div>
I honestly doubt it's the jQuery issue, but I'm not familiar with jQuery, so why not:
$(document).ready(function() {
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "430px"
})
.animate({
height: "400px"
}, "fast");
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "fast");
});
});
If you want to look at it, my website is at Niu-Niu.org.
Thank you for looking!
Because its also div.panel_button. You should redefine your selector in the jQuery.
use the actual anchor element to trigger the animation instead of the whole panel :
$('#panel').click
instead of
$("div.panel_button").click
a bit off topic, but you should improve your animation by stoping any previous animations in progress :
$("div#panel").stop().animate(/* ... */);
div.panel_button is twice as big as the embedded a. This should fix the problem:
$("div.panel_button a").click(function(){
When you click an element, your click is propagated (bubbled) up the DOM tree, so all parents receive the click event as well, and all their handlers are executed.
This presents a problem when you have a clickable element inside another clickable element, since the inner element will handle the click event but then pass the event on to its parent, which will then also handle it.
The usual way to fix this is to prevent the default behavior whenever you catch a click event, like this:
$("div.panel_button").click(function(ev){
$("div#panel").animate({
height: "430px"
})
.animate({
height: "400px"
}, "fast");
ev.preventDefault();
});
$("div#hide_button").click(function(ev){
$("div#panel").animate({
height: "0px"
}, "fast");
ev.preventDefault();
});
(update) aww. the selector is the main problem. use $("#panel")
the problem is the bouncing effect.
this may solve your problem:
var show = false;
$("div.panel_button").click(function(e){
if (show) return;
$("div#panel").animate({
height: "430px"
})
.animate({
height: "400px"
}, "fast");
show = true;
e.preventDefault();
});
$("div#hide_button").click(function(e){
if(!show) return;
$("div#panel").animate({
height: "0px"
}, "fast");
show = false;
e.preventDefault();
});
If you want to use more creative easing effect you should use the .slideDown() function with easing argument.
Easing
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
For a great easing extension visit this site.
according to other asnwers, you should also use event.preventDefault to stop the event bubbling through the DOM.