I am trying to make a div which blinks a certain colour at a time interval , which has a border that blinks at a different time interval.
$(document).ready(function() {
var promo = document.getElementById('blink');
var extraBlink = document.getElementById('extraBlink');
setInterval(function() {
promo.style.display = (promo.style.display == 'none' ? '' : 'none');
}, 1000);
setInterval(function() {
extraBlink.style.display = (extraBlink.style.display == 'none' ? '' : 'none');
}, 500);
});
#border {
border-style: solid;
border-color: rgb(61, 243, 61);
border-width: 10px;
}
#promotion {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: rgb(170, 7, 7);
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blink">
<div id="extraBlink">
<div id="border">
<footer id="promotion"> Half Price Today! </footer>
</div>
</div>
</div>
I can only manage to make it blink one colour instead of blinking two colours at the same time.
Since you are using JQuery, you should use it to get references to the elements in question as well as for toggling the styles (instead of setting the styles inline, set up classes that can simply be toggled).
Also, if I understand you correctly, you don't need all that HTML. You really just need the footer and a container element.
Lastly, your CSS needs to be more disbursed between the elements to create the right effect.
$(document).ready(function() {
// Your already using JQuery so also use it to get the DOM references
var $promo = $('#promotion');
var $border = $('#border');
setInterval(function() {
$promo.toggleClass("hidden"); // Toggles the show/hide aspect every 1.5 seconds
}, 1000);
setInterval(function() {
$border.toggleClass("border"); // Toggles the border every .5 seconds
}, 1000);
});
/* The container gets positioned and the child content will go for the ride. */
body {
margin:0;
}
#border {
box-sizing:border-box;
position:absolute;
bottom:0;
width:100%;
height:60px;
text-align:center;
}
#promotion {
box-sizing:border-box;
background:rgb(170, 7, 7);
width:calc(100% - 20px);
height:60px;
margin:10px;
}
.border {
border:10px solid rgb(61, 243, 61);
}
.hidden { visibility:hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="border">
<footer id="promotion"> Half Price Today! </footer>
</div>
The issue with your code is that once you hide the child the parent has no content and thus loses its background and when you hide the parent the child disappears too. You might be able to achieve this with visibility but when you hide the parent it will still hide the child but at least the reserved space when rendering does not disappear thus not jerking all around the surrounding text/html
I modified your code to use plain javascript as an alternative to jQuery class swapping highlighted by Scott Marcus.
self.onload = function(){
var promo = document.getElementById('blink');
var extraBlink = document.getElementById('extraBlink');
setInterval(function() {
promo.style.backgroundColor = promo.style.backgroundColor=="yellow"?"magenta":"yellow";
}, 1000);
setInterval(function() {
extraBlink.style.backgroundColor = extraBlink.style.backgroundColor=="red"?"blue":"red";
}, 500);
};
#blink{
border-style: solid;
padding:10px;
}
#extraBlink{
border-style: solid;
padding:10px;
}
.promotion {
width:100%;
height:60px;
text-align:center;
}
<div id="blink">
<div id="extraBlink">
<div id="border">
<footer class="promotion"> Half Price Today! </footer>
</div>
</div>
</div>
Related
I have multiple (only 2 in this example) divs overlapping with each other...
What I'd like to do is to add buttons that represents each div, which when clicked, should increase their respective div's z-index for 1000ms only, in order to stay on top of all the other overlapping divs. This is the only purpose of the increase in z-index.
I was able to do some part of this, however, on second round of clicking, the secondary divs keep hiding behind the originally-on-top div.
Please check and run the snippet below:
function increaseDivOne() {
const box = document.getElementById('Div1');
box.style.zIndex = '999';
setTimeout(function () {
box.style.zIndex = '1';
}, 1000);
}
function increaseDivTwo() {
const box = document.getElementById('Div2');
box.style.zIndex = '999';
setTimeout(function () {
box.style.zIndex = '1';
}, 1000);
}
#Div1 {
position: absolute;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
}
#Div2 {
position: relative;
top: 130px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
<button onclick="increaseDivTwo()">Increase Div 2</button>
<br><br>
<button onclick="increaseDivOne()">Increase Div 1</button>
<ul>Try this:</ul>
<li>Click "Increase Div 2"</li>
<li>Click "Increase Div 1"</li>
<li>Click "Increase Div 2" again and notice it will show up but will hide behind Div1 after 1s</li>
<p>My goal is to raise the z-index of a div for 1s, just enough to be on top of the other div and vice versa, but it should stay on top after the 1s set timeout. <br> Please note there's more Div in my actual project that will utilize this function.</p>
<div id="Div2">
<h1>Div 2</h1>
</div>
<div id="Div1">
<h1>Div 1</h1>
</div>
Thank you in advance for any help.
From the discussion in comments, I think it would be enough if you just reset the z-index for the currently on-top one, when a new one needs to be moved to the front - without any timers.
You could loop over all relevant div elements - or simply remember the previous one in a variable, and then reset z-index specifically for only that.
And then it would also be a bit nicer, if we did not manipulate inline styles for this, but simply set a class to apply the necessary z-index to the currently "active" element.
var previous = null;
function increaseDiv(num) {
if(previous) {
previous.classList.remove('active');
}
var div = document.getElementById('Div'+num);
div.classList.add('active');
previous = div;
}
#Div1 {
position: absolute;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
}
#Div2 {
position: relative;
top: 130px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
div.active {
z-index: 999;
}
<button onclick="increaseDiv('2')">Increase Div 2</button>
<br><br>
<button onclick="increaseDiv('1')">Increase Div 1</button>
<div id="Div2">
<h1>Div 2</h1>
</div>
<div id="Div1">
<h1>Div 1</h1>
</div>
if the divs got the same index, then the childnode order takes relay on priority of display, that's the problem here, to keep priority on the last div selected, you should then rewrite your function as the following :
function increaseDivOne() {
const box = document.getElementById('Div1');
box.style.zIndex = '999';
setTimeout(function () {
box.style.zIndex = '1';
var elms=document.querySelectorAll('div[id^="Div"]:not(#Div1)');
for (var p in elms) {
elms[p].style.zIndex=-1;
}
}, 1000);
}
I want to add a class to header after (gray)section scroll is over. And remove the same class when (gray)section reappers on scroll-up.
https://jsfiddle.net/tgLybw2e/1/
$(window).scroll(function(event){
didScroll = true;
});
You can use a window.onscroll function along with window.scrollY to detect when the screen has scrolled to the bottom of the gray element, then add a class.
This could be made more dynamic by using JS to get the height of the gray element so it doesn't need to be hardcoded to the same value as set in CSS.
window.onscroll = function() {
var header = document.getElementById('header');
if (window.scrollY > 630) {
header.classList.add('updated-class');
} else {
header.classList.remove('updated-class');
}
}
header{
height: 70px;
border-bottom: 1px solid #000;
position: fixed;
color: #fff;
left:0;
right:0;
text-align:center;
}
header.changeColor{
color: 000;
}
section{
height: 700px;
background: #cdcdcd;
}
section + section{
background: #fff;
}
.red{
background:red;
}
.updated-class {
background-color: red;
transition: background 1s linear;
}
<header id="header">
abcfdff
</header>
<section>
</section>
<section>
</section>
<section class="red">
</section>
Try this,
$(window).scroll(function(event){
if (window.scrollY > 700) {
$('header').addClass('changeColor');
}else
$('header').removeClass('changeColor');
});
jsFiddle for the same
https://jsfiddle.net/tgLybw2e/2/
step one1
On window load add class to header & count height of gray section
step 2
On event window scroll count scroll Y of window
step 3
create function to compare gray height = window scroll Y,
when its true, remove class from header.
Here is my Jquery code:
var img = function() {
$(".slider#1").delay(1000).fadeIn(1000);
$(".slider#1").delay(3000).fadeOut(1000);
$(".slider#2").delay(5000).fadeIn(2000);
$(".slider#2").delay(3000).fadeOut(1000);
$(".slider#3").delay(10000).fadeIn(2000);
$(".slider#3").delay(3000).fadeOut(1000);
$(".slider#4").delay(15000).fadeIn(2000);
$(".slider#4").delay(3000).fadeOut(1000, function() { img() });
};
Essentially what I am trying to do is when one image fades out I would like an image to almost be behind it and fade straight into that without being a blank space in between, is this possible?
You could use the jQuery fadeTo function.
Like
$(".slider#1").fadeTo(1000,1);
And make all your sliders overlap each other with opacity 0.
Edit :
You can try this fiddle :
http://jsfiddle.net/8cwA6/22/
It recursively changes the opacity. All the images are on top of each other, then it fades out Level 1, then Level 2, and then fades both of them back (because Level 3 is on the bottom). You'll probably understand better when you see the code.
JavaScript
var max = 3
var min = 1
var showTime = 1500
function fade(num) {
if (num > min) {
$('.' + num).delay(showTime).fadeTo("slow", 0, function() {
fade(num - 1);
});
} else {
$("div").delay(showTime).fadeTo("slow", 1, function() {
fade(max)
});
}
}
fade(3);
HTML
<div id="img1" class="1"></div>
<div id="img2" class="2"></div>
<div id="img3" class="3"></div>
CSS
#img1 {
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :1;
}
#img2 {
width:100px;
height:100px;
background-color:blue;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :2;
}
#img3 {
width:100px;
height:100px;
background-color:green;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :3;
}
You have to queue the animations, or they will get mixed up after some time, since your animations are running asynchronous;
I did stack all images, and all are visible (you could set z-index just to be certain).
Fading out the top most, the next one is showing up.
The bottom most, doesn't have to be faded. I fade in the first one again, before resetting/showing all the other images once again and resetting the recursion.
jsfiddle
http://jsfiddle.net/Drea/hkzbvew4/
js
var images = ['.slider1', '.slider2', '.slider3', '.slider4']; // .slider4 is always visible
var img = function (i, showtime, fadetime) {
$(images[i]).delay(showtime).fadeOut(fadetime).queue(function () {
i++;
if (i < images.length-1) { // run through images
img(i, showtime, fadetime);
$.dequeue(this);
} else { // reset animation
$(images[0]).delay(showtime).fadeIn(fadetime).queue(function () {
$(".slide").fadeIn(0);
img(0, showtime, fadetime);
$.dequeue(this);
});
$.dequeue(this);
}
});
};
img(0, 1000, 1000);
html
<div class="slide slider4"></div>
<div class="slide slider3"></div>
<div class="slide slider2"></div>
<div class="slide slider1"></div>
css
.slide {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
}
.slider1 {
background-color: black;
}
.slider2 {
background-color: green;
}
.slider3 {
background-color: blue;
}
.slider4 {
background-color: red;
}
I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.
Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}
To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/
I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div
I'm trying to achieve the effect of a sliding div using the jquery animate option. I'm able to "slide" the parent div up but I'm having issues with showing the div behind the slider.
I've created this jsfiddle to show my issue.
Try uncommenting the photoOptions div. I'm trying to hide this div so it's only revealed when the parent div is slid up.
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
Trigger
</div>
</div>
Code
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
Current CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
Any thoughts on how I can achieve this?
The browser renders elements based on there place in the DOM, if an element preceeds another element in the dom, it is rendered under it.
To change this default behaviour, you should use the CSS rule z-index, by defining a lower z-index on your .photoOptions div, it will be rendered below it.
as seen in this fiddle
Also be aware that z-index values may be handled differently for elements that are positioned absolute, due to the fact that they are not rendered in the normal flow.
Using the callback on .blindToggle() can achieve that effect but you're going to have to edit your CSS so that .photoCredits is visible and just start off with .photoOptions hidden:
$(document).ready(function () {
$(".trigger").click(function () {
$('.photoHolder').blindToggle('slow', function () {
$(".photoOptions").show();
});
});
});
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
display:hidden;
}