I'm trying to create an efect that's change de background color from left to right.
I have created this: http://jsfiddle.net/kT95d/58/
<style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>
But, i want the text in horizontal and how you can see, this is vertical and after the effect go to horizontal.
I don't know if this is the best way to do this. Can help me?
Thanks!!
Here you go. I believe this is what you want:
http://jsfiddle.net/WVWKE/
Change is here:
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
The problem before was that the text was inside your zero width div, so it was breaking onto multiple lines to try to fit. Then when you animated the width back to 200, the text had room to expand again.
Here we move the text out of the animated background div and into the parent div, then we give it a position:absolute to take it out of the flow so it doesn't take up space. You can of course move that inline style to your CSS, and probably should.
<style>
#div1{
margin-top: -200px;
height:200px;
width:200px;
background-color:green;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
</style>
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="text">
That was amazing!
</div>
<div id="div1">
<div id="back">
</div>
</div>
Related
I've got a simple toggle plus sign that should trigger a div to appear and rotate into an X which can then be clicked to close the div.
Everything works as planned except there is no smooth transition in the rotation of the plus, it just appears already rotated.
If I remove the display:none from the #showbox div and remove $("#showbox").show(), the animation/transition works. It's only if the div is hidden and then shown with .show() that it just rotates without animating.
I'm sure I can think of a workaround, I'm just wondering if anyone can explain why this might be happening
$("#togglebox").click(function() {
$("#showbox").show();
$("#showbox .toggleplus").toggleClass("togglex");
});
#showbox {
background: #000;
width: 500px;
height: 200px;
display: none;
}
.toggleplus {
width: 30px;
height: 30px;
transition: all .5s;
color:#111;
}
#showbox .toggleplus {
color:#FFF;
}
.togglex {
transform: rotate(-46deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
<p>LEARN MORE</p>
<div class="toggleplus">+</div>
</div>
<div id="showbox">
<div class="toggleplus">+</div>
<p>Blah Blah Blah</p>
</div>
The issue is that the UI updates in a different thread than the JavaScript executes in and that UI thread executes faster than the JS.
You can fix this by adding a short delay, which forces the UI not to update until the function is complete.
$("#togglebox").click(function(){
$("#showbox").show();
setTimeout(function(){
$("#showbox .toggleplus").toggleClass("togglex");
},20);
});
#showbox {
background:#fff;
width:500px;
height:200px;
display:none;
}
.toggleplus {
float:right;
width:30px;
height:30px;
transition:all .5s;
}
.togglex {
transform: rotate(-46deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
<p>LEARN MORE</p>
<div class="toggleplus"></div>
</div>
<div id="showbox">
<div class="toggleplus">+</div>
<p>Blah Blah Blah</p>
</div>
Another way to accomplish this with JQuery is to have the addition of the rotation class code added as a callback to the show() method:
$("#togglebox").click(function(){
// Passing a function to the show method sets it up as a callback to
// be executed after the show() animation is complete.
$("#showbox").show(function(){
$("#showbox .toggleplus").toggleClass("togglex");
});
});
#showbox {
background:#fff;
width:500px;
height:200px;
display:none;
}
.toggleplus {
float:right;
width:30px;
height:30px;
transition:all .5s;
}
.togglex {
transform: rotate(-46deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
<p>LEARN MORE</p>
<div class="toggleplus"></div>
</div>
<div id="showbox">
<div class="toggleplus">+</div>
<p>Blah Blah Blah</p>
</div>
What i want to happen is when i hover around the left side of the div, i want to display a previous button only, then when i hover around the right side it will display the next button only. how do i do that using CSS or jQuery?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container{
background-color:black;
width:400px;
height:200px;
z-index:-1;
}
#leftbutton, #rightbutton{
background-color:#0F9;
width:50px;
height:50px;
position:absolute;
top:75px;
text-align:center;
}
#rightbutton{
left:351px;
}
#leftbutton{
left:13px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbutton">Previous</div>
<div id="rightbutton">Next</div>
</div>
</body>
</html>
this is my sample code: http://jsfiddle.net/twish/NKg24/
thanks in advance! :D
One way is to wrap the actual buttons in a parent element and hide the buttons but not the parent. When you hover over the parent, you set the button to be visible.
http://jsfiddle.net/NKg24/1/
<div id="container">
<div id="leftbutton">
<span>Previous</span>
</div>
<div id="rightbutton">
<span>Next</span>
</div>
</div>
#leftbutton, #rightbutton{
width:50px;
height:50px;
position:absolute;
top:75px;
text-align:center;
/*display:none*/
}
#leftbutton span, #rightbutton span {
display:none;
width:100%;
height:100%;
text-align:center;
background-color:#0F9;
}
#leftbutton:hover span, #rightbutton:hover span {
display:block;
}
sorry if the context already exists in other SO thread. I didnt found anyone, so I am posting it.
I have two elements(tabs) in the container(body) both are overflowing. when I try to scroll one tab, the hidden tab content also scrolling. I think, this is because both elements bound to the window.
<div class="header">
<ul>
<li data-tabid="tab1" class="tab">Tab1</li>
<li data-tabid="tab2" class="tab">Tab2</li>
</ul>
</div>
<div class="tabContainer">
<div class="tab1 tabpanel">
<!-- overflowing content -->
</div>
<div class="tab2 tabpanel">
<!-- overflowing content -->
</div>
</div>
CSS
body{
height:100%;
overflow-x:auto;
}
.header{
position:fixed;
top:0px;
height:50px;
}
.tabpanel{
position:absolute;
top:50px;
}
Demo
How to prevent scrolling on hidden element?
Here is a working demo, the solution is come up with setting both ends fixed and scrolling content. This should give effect like bound to the container.
.tabpanel{
position:absolute;
top:0px;
bottom:0px;
display:none;
min-height:100%;
height:auto;
width:100%;
overflow:auto;
}
.tabpanel .inner{
width:100%;
height:150%;
margin-top:60px;
}
http://jsfiddle.net/kongaraju/P6XWH/2/
Bascially you didnt set the height of your tabs, and neither did you apply an overflow to it. Doing that would solve the issue.
If you prefer to have the tabs 100% height, you would need a div within a div. In the outer div set your 100% height, in the inner div set a top padding of the height of the tab-selection.
Like this:
<div class="tab">
<div class="inner">
* tab content *
</div>
</div>
With css
.tab { height:100%; }
.inner { margin-top:20px; overflow:auto; }
I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?
Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.
<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?
<div id="main">
<div id="left">
news feed goes here
</div>
<div id="right">
another news feed ges here
</div>
<div style="clear:both;"></div>
</div>
Suppose I have a container "main", and I have 2 columns. Both columns are float:left;.
When people click "load more" on the left news feed column, of course it will expand the height of that column because we load more content. But I want the right column to also expand with it. In other words, I want the "right" column to be 100% height of main, always.
How can I do that? Do I se the "right" column's height to be 100%? or what?
duplicate or not.. here's a fiddle to give you an idea how you could do this
http://jsfiddle.net/pixelass/uAur5/
HTML
<span class="more">load more</span>
<div class="main">
<div class="left">this is a left box</div>
<div class="full">this is the right box</div>
</div>
CSS
.left {
background:#666;
margin:10px;
width:130px;
height:80px;
float:left;
padding:10px;
}
.full {
width:130px;
background:#eee;
float:right;
height:80px;
padding:10px;
margin:10px;
}
.main {
width:500px;
background:#000;
height:140px;
margin:20px 10px;
}
.more{
border:#000 1px solid;
padding:3px;
background:#222;
color:#aaa;
margin:20px;
cursor:pointer;
}
jQuery
$('.more').click(function(){
$('.main').append('<div class="left">this is a left box</div>');
$('.full').css('height', '+=120px');
$('.main').css('height', '+=120px');
});
If you mean you want to change height of div, then;
document.getElementById("yourRightDivsId").style.height = yourNewHeight;