I have made a jQuery script in which you can hide or show one of divs (first one) on click of button hide
The code looks like this in script:
$('.hideButton').click( function() {
var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
$('.first').animate({ width: toggleWidth},200);
if ( $('.first').width() == 10 ){
$(".content").attr("hidden",false);
}
else if ( $('.first').width() == 100 ){
$(".content").attr("hidden",true);
}
});
HTML:
<div class="contain">
<div class="row">
<div class="navigation">
navigation
</div>
<div class="advert">
advert
</div>
</div>
<div class="row">
<div class="main">
main
<br/>
<button class="hideButton">hide</button>
<br/>
<div class="first">
1
</div>
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
}
.navigation{
height:100px;
background-color:orange;
width:400px;
display:inline-block;
}
.advert{
height:100px;
background-color:lime;
width:200px;
display:inline-block;
}
.main{
width:600px;
height: 300px;
background-color: magenta;
}
.first{
width:100px;
height:80%;
background-color: yellow;
display:inline-block;
}
.second{
width:100px;
height:80%;
background-color: blue;
display:inline-block;
}
.third{
width:100px;
height:80%;
background-color: red;
display:inline-block;
}
And best way is that you see it in jsfiddle: http://jsfiddle.net/dzorz/EhjeA/
Now I have a issue with other two divs. When I click the hide button and first div gets animated, other two divs on animation, both skip to the end of first div and when the animation is done they get back in place.. It is really annoying and I don't know how to solve it...
I just need that one div that gets hidden on click of button and that he does not affect anything else...
Is this example fixable or maybe you could suggest me some nice jQuery plugin that does the same?
Instead of displaying these 3 as inline-block, remove the display and float them left instead using float: left in your CSS.
JSFiddle Demo
.first{
width:100px;
height:80%;
background-color: yellow;
float: left;
}
.second{
width:100px;
height:80%;
background-color: blue;
float: left;
}
.third{
width:100px;
height:80%;
background-color: red;
float: left;
}
You can wrap the offending divs in a wrapper with a fixed width: http://jsfiddle.net/EhjeA/1/
.wrapper {
display: inline-block;
width: 100px;
}
<div class="wrapper">
<div class="first">
1
</div>
</div>
Try adding this to your CSS:
.first,.second,.third {
vertical-align: top;
}
During the animation, the overflow is set to overflow: hidden which causes the other inline elements to shift down. Adding the vertical-align: top should fix the issue.
Updated fiddle: http://jsfiddle.net/EhjeA/3/
Related
i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE
Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo
You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle
I just tried making a script that fades in a tooltip when you hover a link, image etc.. Everything works fine except the actual fading in of only one tooltip at a time. If it was not clear what i mean: I want to hover an image and show a tooltip right above the image, every other tooltip on the page should not be visible. I know what my mistake is (The hovering of an image fades all tooltips in, because they all have the same class) but i don't know how to fix it. I hope I explained my problem properly and would be very happy if someone could help me. (Please excuse me if my english isn't the best, it is obviously not my mother tongue)
Here is my Code:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});
.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}
<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>
And here is my Code in Action on jsfiddle.net:
https://jsfiddle.net/3y8pcv69/
You are selecting all .tooltips when you can just select the previous element from your button which IS the tooltip. So just do:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
Fiddle
Im trying to iterate through a div of children thats absolute positioned and have z-indexes. when a button is clicked i want the z-index to increase so it works like a loop almost. so on each click i want the current visible div to have a lower z index so only one div is visible at a time.
$(function() {
$('button').click(function(){
//.three sholed take the place of .one and .two should jump up one step. i want this to be repeatable.
});
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
}
.one {
background:red;
z-index:1;
}
.two {
background:green;
z-index:2;
}
.three {
background: blue;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="holder">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
Use jquery to add a class to the element that shall have the wanted index/ be visible on click
$("button").click(function(){
$(".current").removeClass("current").next().addClass("current")
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
If you want to loop it
$("button").click(function(){
if($(".holder >div:last-child").hasClass("current")){
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
}else{
$(".current").removeClass("current").next().addClass("current");
}
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
just using .css like this:
$("selector").css("z-index","1");
$(document).ready(function(){
var start = 2;
$('button').click(function(){
$('.holder > div').eq(start).hide();
start--;
$('.holder > div').eq(start).show();
if(start<0){start=2;}
});
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
}
.one {
background:red;
z-index:1;
}
.two {
background:green;
z-index:2;
}
.three {
background: blue;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
i did something like this to fake a gif with fading animations:
you could simply adjust it to your needs on an onclick handler instead of a setInterval
function fakeGif(container, speed) {
$(container).find('.active').css('z-index', 3);
setInterval(function() {
var $active = $(container).find('.active');
var $next = ($active.next().length > 0) ? $active.next() : $(container).find('.gif').first();
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1000,function(){//fade out the top image
$active.css('z-index',1).fadeIn(1000).removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}, speed);
}
$('.gif--container').each(function(){
var time = $(this).attr('data-gif-time');
var container = $(this);
$(this).find('.gif').first().addClass('active');
fakeGif(container,time);
});
and the Html for this is simple:
<div class="gif--container" data-gif-time="3000">
<div class="gif image:parent fl">
<img src="whatever1.jpg" />
</div>
<div class="gif image:parent fl">
<img src="whatever2.jpg" />
</div>
<div class="gif image:parent fl">
<img src="whatever3.jpg" />
</div>
</div>
I find always very usefull to make lots of different staff this simple jquery:
$(document).ready(function () {
$('.click-here').click(function () {
$('.box1').toggleClass("z-index")
});
});
You basically say that clicking in whatever element has the class "click-here" will add a class on whatever element you want (in this case "box1") (and remove the class on next click).
for your question here you have this fiddle that I hope it will help you
I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}