I'm working on a jQuery animation that expands the height of a div.panel on mouse-in and contracts it back to normal on mouse-out.
The animation works for the selected div.panel, but the problem is relative at the nearby elements that moves down from their initial location when the mouse is over the div.panel.panel-big.
Here's a fiddle.
I presume you want the <li>s to expand, not the entire panel. The problem is that you're selecting .panel, which applies to the whole thing.
fiddle
JavaScript:
$(document).ready(function () {
$("li", this).hover(function () {
$(this).animate({
"height": "+=25px"
}, "fast");
}, function () {
$(this).animate({
"height": "-=25px"
}, 300);
});
});
Note the change from $(".panel", this).hover(…) to $("li", this).hover(…. This causes those pieces to properly expand/contract on mouse-in and mouse-out.
Tell me if this was not the intended behavior.
The problem is that in css, you have set the vertical align of the ".panel" to middle.
So when the ".panel-big" enlarges, the parent div (".row") also enlarges causing the panel-small to go down a little to remain centered vertically. Maybe you should set the vertical-align of the .panel to "top" and just put a margin-top for the panel-small.
.panel {
color: #ffffff;
margin: 10px 5px;
text-align: center;
font-size: 13pt;
vertical-align: top;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
}
.panel-small {
background-color: #bfbfbf;
width: 250px;
height: 450px;
max-height: 475px;
margin-top: 50px;
}
Here is your fiddle which i tweaked:
http://jsfiddle.net/2zgXC/4/
Related
I've been playing with "marginLeft: "100%"" but that only moves the div off the screen entirely. I want the div, onClick, to float:right against the edge of the right side of the screen.
JSFiddle:
https://jsfiddle.net/487r8qza/
HTML
<div id="footer">
<one id="one">
</one>
<two id="two">
</two>
<three id="three">
</three>
</div>
JavaScript
$("#footer").click(function(){
$("#one").animate({
marginLeft: "+=900px",
}, 2000 );
$("#two").animate({
marginLeft: "+=900px",
}, 800 );
$("#three").animate({
marginLeft: "+=900px",
}, 333 );
});
$("#three").click(function() {
$("#three").animate({
marginLeft: "100%"} , 1000
);
});
CSS
#footer {
margin: 0;
padding: 0;
float: left;
width: 100%;
max-width: 100%;
height: 115px;
background-color: #4a4a4a;
}
one {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #070707;
height: 115px;
margin-left: -900px;
}
one,two,three {
text-align: center;
color: white;
font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 115px;
}
one:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
three:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #1a1a1a;
height: 115px;
margin-left: -900px;
}
three {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #2c2c2c;
height: 115px;
margin-left: -900px;
}
Sorry if it took this long, something came up. Right, so I got it working. Hope this helps
JSFIDDLE
As for CSS, I kept it as simple as possible. The trick here is to make your DIVs display inline-block, so that at the very start, they are neatly stacked next to each other. You will also want to have them all be float right.
CSS:
.box-container{
width: 100%;
height: 115px;
position: relative;
overflow: hidden;
}
.box-item{
width: 300px;
height: 115px;
position: relative;
display: inline-block;
float: right;
cursor: pointer;
}
.b0{
background: #7888D9;
}
.b1{
background: #76D54E;
}
.b2{
background: #DF7B41;
}
Next, in your HTML, you need to give each DIVs the same classname, which will simplify the Jquery click event. Finally, we will also give our first DIV a classname of "current". This will control which DIV must move and which DIV must wait and stay idle as long as the one beside him hasn't moved. You'll understand soon enough.
HTML:
<div class="box-container">
<div class="box-item b0 current">
Box 1
</div>
<div class="box-item b1">
Box 2
</div>
<div class="box-item b2">
Box 3
</div>
</div>
Finally, as for the Jquery, this is where it gets a bit complicated, I'll try to explain the best I can. Bare in mind that math is not quite my forte. Since our DIVS all float right in the CSS, well, they will all be stacked to the right (of course). To counter that and position them to the left, we need to give each DIV a right position. This position will be some kind of offset. To get this number, we need to multiply the width of a DIV by the total number of DIVs. After that, we must subtract this number to the total width of our DIVs' container (basically the browser width).
As for the click event, we must first check if the DIV we clicked has our "current" classname. If it does, we move it, if not, we don't. The easy part is moving them. By resetting a DIV's right value to 0, each one will slide accordingly to the right with our animate event. Once this is done, we switch the "current" classname to the next DIV. We then increment a counter. This will help to see if all DIVs has been moved.
Once all DIVs have been moved to the right, there is an IF statement that will check our counter and see if it is greater than our total number of DIVs. If it is, the sliding motion is inverted and all DIV's will return to the left. In the same manner, if the clicked element is not the current DIV, it will not move. if it is, it will move back to the left. When all DIV's have been move back in default position, ou counter is reset and our "current" classname is reassigned to the very first DIV.
The resize function is not optimal, but it deals with any responsive issue you could face. It will reset all DIVs to the left and recalculate the offset, so that each DIV never slide offscreen. Needs a little work, but it's better than nothing for now.
JQUERY:
var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;
$(function () {
$boxWidth = $('.box-item').width();
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').css('right',$offsetRight);
$('.box-item').click(function(event) {
if($(this).hasClass('current')){
if($count < $('.box-item').length){
$(this).animate({
right: "0px",
}, 2000, function(){
$count++;
$(this).removeClass('current');
if($count < $('.box-item').length){
$(this).next().addClass('current');
}
else{
$(this).addClass('current');
}
});
}
else{
$(this).animate({
right: $offsetRight,
}, 2000, function(){
$count++;
$(this).removeClass('current');
console.log($count);
if($count < ($('.box-item').length*2)){
$(this).prev().addClass('current');
}
else{
$(this).addClass('current');
$count = 0;
}
});
}
}
});
window.onresize = myResize;
myResize();
});
function myResize(){
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').each(function(){
$(this).css('right',$offsetRight);
});
$('.box-item').eq(0).addClass('current');
$count = 0;
}
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/
I'm working on a hobby project of mine -- it's something of a glorified RSS feed reader/grabber. I've been able to get most things working, but for some reason I cannot get the text in a certain span to be drawn above an animated div.
When a feed is grabbed, certain operations are performed before displaying the results. During this time, I keep track of the progress and display them in an animated "progress bar" div. All of the sub-operations each have their own progress bars, and they all work correctly (text on top of bar), but the final progress bar (overall progress) does not layer the text correctly.
I created a simple mock-up in JSFiddle to give an example of my problem.
$('#progress-total-box').bind('click', draw);
function draw() {
if (($('#progress-totalbar-fill').css('width')) == "0px") {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() {
var description = document.createElement('span');
$(description).attr('id', '#progress-total-text');
$(description).html('100%');
$('#progress-totalbar-empty').append(description);
$('#progress-total-box').bind('click', draw);
});
}
else {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: 0}, 2000, function() {
document.getElementById('progress-totalbar-empty').innerHTML = '';
$('#progress-total-box').bind('click', draw);
});
}
}
The style/position/etc is purely for sake of demonstration. In this example, when the grey loading bar div is clicked, it animates its width from 0% to 100% (or vice-versa). When the animation is complete, a new child span is created and appended to the 'empty bar' background div, wherein the total percentage is displayed (100%, in this case).
This span element is intentionally removed when the bar is reset.
Do you guys have any ideas as to what's going wrong, and how I can fix it?
I have encountered this error is present in both Chrome and Firefox.
Thanks in advance!
There are multiple problems here.
First off, you need to remove the # from this line
$(description).attr('id', 'progress-total-text');
The new span, was never getting the css it was supposed.
Second, you need to either change your markup or your css.
In this case, I updated the CSS, but the id name don't make sense anymore
body {
width: 100%;
height: 125px;
margin: 0;
}
#progress-category-box {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
background-color: red;
}
#progress-total-box {
position: relative;
width: 100%;
height: 40px;
top: 32.5%;
float: right;
text-align: center;
background-color: #515A5C;
}
#progress-totalbar-empty {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #97b0b1;
background-color: transparent;
z-index: 3;
}
#progress-totalbar-fill {
position: relative;
width: 0%;
height: 100%;
top: -42px;
border-left: 1px solid #97b0b1;
border-top: 1px solid #97b0b1;
border-bottom: 1px solid #97b0b1;
background-color: #00FF00;
z-index: 2;
}
#progress-total-text {
position: relative;
color: black;
top: 30%;
font-size: 15px;
z-index: 3;
}
Thing is, you were showing the animated div over the text.
So I put the text over the animation and put a transparent background behind it.
I applied the grey background to the container instead. I also changed it's height and applied height:100% to it's children.
Here's a full fiddle
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}