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.
Related
I've created a modal that slides up and down on click using CSS and jQuery.
When viewed on the desktop, it looks "OK" ish but when viewed on mobile devices, its jerky. Especially when the modal goes down.
What I am tryingt o achieve is a very smooth slide up and down. I did come across quite a few similar questions but I don't see any difference between what I am doing and what was suggested to other people to fix this issue.
The main purpose of this modal is to be used in a hybrid mobile app in phonegap. And this modal should look similar to YouTube player on iPhones.... So if you open YouTube on your mobile device, and play a video, on the top left, you will see an arrow that's pointing down. If you click/tap on that, you will see that YouTube player will get minimise. That is the sort of animation that I am trying to achieve.
This is what I have so far:
https://jsfiddle.net/zshk3nex/1/
$(document).on('click', '.tol', function() {
if ($('.hid-box').hasClass("easout")) {
$('.hid-box').removeClass("easout");
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
} else {
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
}
});
$(document).on('click', '.minifyBtn', function() {
if ($('.hid-box').hasClass("easin")) {
$('.hid-box').removeClass("easin");
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
} else {
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
}
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
}
.easin {
transition: all 0.2s ease-in;
}
.easout {
transition: all 0.6s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
Could someone please advice on this issue?
Absolute properties such at top and bottom aren't great for animations. Instead you could use transform. transform performs far better in animations and transitions.
When using percentages in transform the percentage is based on the elements box, rather than the parent, like with almost all other css values.
Another thing that could help improve performs is to narrow down your transition property. In your case you have selected to transition all properties. You could set it to only transition the properties you need. In this case that would be transition: transform 0.2s ease-in. While this won't necessarily.
Let's clean up your code a little bit.
$(document).on('click', '.tol', function() {
$('.hid-box').toggleClass("active")
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
transition: transform 200ms;
}
.hid-box.active {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
I've removed the vast majority of the jQuery you used, only toggling a single class now. I've moved the transition to the main element. I've also added a active class which simply sets the transform property to translateY(-100%). This means it will move it -100% of the elements height.
All of this should make it perform better on mobile. However at the end of the day it will also depend on the strength of your device. If it is somewhat older it might not perform as well.
I hope that helps!
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/
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/
want to assign 2 functions to a button when using the click event of jQuery, it will work like this: I have a div that is hidden behind another div when click the button that slides up div with jQuery to animate ... this #show ID shows the div, and the ID #hide hides the div, how can I assign 2 different IDs for the same button? I have done this using the ID attribute and attr ... is changed to #hide, but the function linked to this ID is not performedry
http://jsfiddle.net/dca2b/1/
HTML:
<div class="content"></div>
<div class="footer"></div>
<div class="hiddendiv">
show
</div>
CSS:
.content {
height: 400px;
}
.footer {
display: inline-table;
background: #ff8;
width: 100%;
height: 80px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
.hiddendiv {
width: 500px;
height: 300px;
background: #252525;
position: relative;
z-index: 1;
top: -120px;
margin: 0 auto;
}
.hiddendiv a {
color: #000;
font-size: 15px;
font-family: sans-serif;
text-decoration: none;
padding-top:5px;
padding-bottom:5px;
padding-left: 20px;
padding-right: 20px;
background: #eee;
border-radius: 10px;
box-shadow: inset 0px 1px 20px 0px #333;
}
.hiddendiv a:hover {
color: #f0f;
}
JQUERY:
$("#show").click(function () {
$(".hiddendiv").animate({
top: "-=250"
}, "slow");
$("#show").attr("id", "hide");
});
$("#hide").click(function () {
$(".hiddendiv").animate({
top: "+=250"
}, "slow");
$("#hide").attr("id", "show");
});
So there are a couple of parts to my answer, bear with me:
(1) The reason it isn't working right now is because when you run $("#hide").click(function() { ..., there aren't yet any elements on the page with the hide id, so the function doesn't get set to run anywhere. One method you can use to get around this is to do the following:
$(".hiddendiv").on('click', '#hide', function() {
...
});
By attaching the click event handler instead to the parent div, whenever the parent sees that the event occurred in a child div with the id of hide, it will run the function on that child div.
(2) You shouldn't be using IDs here. If at some point you have more than one button that needs this functionality on you're page, you'll be in trouble, since an ID should only be used once per page. A class would work much better in this scenario. Then you can do something like:
$(".hiddendiv").on('click','.show', function () {
$(".hiddendiv").animate({
top: "-=250"
}, "slow");
$(".show").addClass('hide').removeClass('show');
});
(3) Finally, it works! But, if we add another hiddendiv to the page, we find that when we click one, it updates all of them. We can fix that by using this. When the function is triggered, the this keyword will refer to the element that you clicked (either with the show or hide class. We can take advantage of that and do the following:
$(".hiddendiv").on('click','.show', function () {
$(this).parent().animate({
top: "-=250"
}, "slow");
$(this).addClass('hide').removeClass('show');
});
$(".hiddendiv").on('click','.hide', function () {
$(this).parent().animate({
top: "+=250"
}, "slow");
$(this).addClass('show').removeClass('hide');
});
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;
}