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
Related
is there any way to set parent background-color on the basis of child class using css?
here is my code
https://jsbin.com/bahodalila/edit?html,css,js,output
if child have red class parent should set background-color red.If child have yellow class parent should set background-color yellow.
<div class="par">
<div class="red">
helli
</div>
</div>
.par{
background-color:red;
}
.par{
background-color:yellow;
}
.par{
width:200px;
height:200px;
border:1px solid blue;
}
.red{
width:100px;
height:100px;
color:red;
border:1px solid;
background-color:green
}
will I use javascript in this case ? is there any way to using css ?
A pseudo element can simulate this:
.par {
width: 200px;
height: 200px;
border: 1px solid blue;
position:relative; /* here and not on child to make it relative to parent*/
z-index:0;
}
.red {
width: 100px;
height: 100px;
color: red;
border: 1px solid;
background-color: green;
}
.red::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
}
<div class="par">
<div class="red">
helli
</div>
</div>
<div class="par">
<div class="red" style="background:blue;">
helli
</div>
</div>
CSS and DIV do not use the parent-child methodology. You will need to create each variable in CSS and set each DIV to the CSS variable you want. I did an example using your code to show.
.par{
background-color:red;
width:200px;
height:200px;
border:1px solid blue;
}
.par-yellow{
background-color:yellow;
width:150px;
height:150px;
border:1px solid;
}
.red{
width:100px;
height:100px;
color:red;
border:1px solid;
background-color:green
}
<div class="par">
<div class="par-yellow">
<div class="red">
helli
</div>
</div>
</div>
Unfortunately there are no parent selectors on css. A workaround is only with JS posible. You could do something like:
var redElements = document.querySelectorAll(".red");
for(var i = 0; i < redElements.length; i++){
redElements[i].parentElement.style.backgroundColor = "red";
}
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 have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>
If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...
Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo
This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo
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}
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/