I would like to know if there is a way to change a div's style when the style of another div changes.
Let's say for example that we have a div (test1), that changes its z-index after 5 sec. I would like to change the css of another div (test2) when test1 has z-index=2.
I don't think there are built in events for that, but you could use a setInterval like this:
var divStyle = null;
setInterval(function () {
var newDivStyle = $("#myDiv").attr("style");
if (newDivStyle !== divStyle) {
divStyle = newDivStyle;
$("#myDiv").trigger("divStyleChange");
}
}, 50);
$("#myDiv").bind("divStyleChange", function () {
$("#myDiv2").css("background-color", "#"+((1<<24)*Math.random()|0).toString(16));
});
function ChangeColorOfOuterDiv() {
$('#myDiv').css('background-color','#'+((1<<24)*Math.random()|0).toString(16));
}
#myDiv {
width:100px;
height:100px;
background-color:red;
}
#myDiv2 {
width:50px;
height:50px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<div id="myDiv2"></div>
</div>
<button onClick="ChangeColorOfOuterDiv()">Change color of outer div</button>
Related
I am making a chrome extension that changes element background color, but after changing
the:hover selector doesn't work anymore.
I saw this question but in my case, I can't change the CSS rule to !important
is it possible to programmatically change element style without override:hover rules?
For example:
var div = document.querySelector("div");
div.onclick= function(){
div.style.background="red";
//after doing that the hover is not working anymore
}
div{
height:100px;
width:100px;
background:green;
}
div:hover{
background:blue;
}
<div>
I want the background to be red but to still have the blue on :hover.
We can use javascript mouse hover and mouse out like below
$("#id").mousehover
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "red");
})
$("p").mouseout(function(){
$("p").css("background-color", "");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<p> Change Background </p>
If you can't use !important you can get the :hover styles via document.styleSheets and use them with Javascript events:
function getElementHoverCssText(element){
var elementHoverCssText = "";
var docstyle = document.styleSheets;
var eltagregex= new RegExp(""+element.tagName+":hover","gi");
var idregex= new RegExp("#"+element.id+":hover","gi");
for(i = 0; i < docstyle.length; ++i){
for(j = 0; j < docstyle[i].cssRules.length; ++j){
if(eltagregex.test(docstyle[i].cssRules[j].selectorText)){
elementHoverCssText+=docstyle[i].cssRules[j].style.cssText;
}
element.classList.forEach(classn =>function(){
if((new RegExp("."+classn+":hover","gi")).test(docstyle[i].cssRules[j].selectorText)){
elementHoverCssText+=docstyle[i].cssRules[j].style.cssText;
}
});
if(idregex.test(docstyle[i].cssRules[j].selectorText)){
elementHoverCssText+=docstyle[i].cssRules[j].style.cssText;
}
}
}
return elementHoverCssText;
}
var originalCSSText = element.style.cssText;
function changeColor(el){
//el.style.backgroundColor="red"; uncomment for make the button red immediately after click
el.innerHTML="mouse out to see color change."
originalCSSText+="background-color: red;";
}
element.addEventListener("mouseover",function(){
originalCSSText=element.style.cssText;
element.style.cssText+=getElementHoverCssText(element);
});
element.addEventListener("mouseout",function(){
element.style.cssText=originalCSSText;
});
#element{
height:100px;
width:200px;
background-color:green;
}
#element:hover{
background-color:blue;
}
<div id="element" onclick="changeColor(this)">click to change color to red and still have hover</div>
I want to put this slider in the slideDown() function so that when the text is hovered the slider should come down.
I have given the code snippet that i was trying to work on, it includes the javascript, css, body.
<script>
var $ = function (id) {
return document.getElementById(id);
}
var swapImage = function (){
if($("image1").title=="image1")
{
$("image1").src="/static/img/new_desserts/two.jpg";
$("image1").title="image2";
}
else if($("image1").title=="image2")
{
$("image1").src="/static/img/new_desserts/teen.jpg";
$("image1").title="image3";
}
else if($("image1").title=="image3")
{
$("image1").src="/static/img/new_desserts/some.jpg";
$("image1").title="image4";
}
else if($("image1").title=="image4")
{
$("image1").src="/static/img/new_desserts/set.jpg";
$("image1").title="image5";
}
else if($("image1").title=="image5")
{
$("image1").src="/static/img/new_desserts/cake.jpg";
$("image1").title="image1";
}
setTimeout(swapImage, 5000);
}
window.onload = function () {
/* $("calculate=").onclick = function(){calculate();} */
swapImage();
}
$(document).ready(function(){
$("#prj_1").mouseover(function(){
$("#image").stop().slideDown("slow");
});
});
</script>
<style>
#prj_1{
position:absolute;
top:1%;
left:50%;
width:1230px;
height:200px;
font-family:Andalus;
font-size:20px;
color:gold;
}
#image{
position:absolute;
top:3%;
left:25%;
width:700px;
height:300px;
display:none;
background-color:red;
}
</style>
<body>
<div id="prj_1">AAA Laundry</div>
<div id="image">
<img id="image1" src="/static/img/new_desserts/glass.jpg" title="image1" />
</div>
</div>
</body>
if i remove the code for slideDown its working but otherwise it not.
please help.
I modified your code a little and used JQuery instead of Javascript,
also you used window.onload and $(document).ready which have almost the same purpose.
plz check this demo and see if that's what you wanted:-
http://jsfiddle.net/d3rtcyxn/
I Want to show div on click with slideup effect using javascript(not jquery).
Here is my HTML code:-
<div class="title-box">show text</div>
<div class="box"><span class="activity-title">our regions bla bla</span></div>
Kindly advise me asap.
The question states that the solution needs to be done with pure JavaScript as opposed to jQuery, but it does not preclude the use of CSS. I would argue that CSS is the best approach because the slide effect is presentational.
See http://jsfiddle.net/L9s13nhf/
<html><head>
<style type="text/css">
#d {
height: 100px;
width: 100px;
border: 1px solid red;
margin-top: -200px;
transition: margin-top 2s;
}
#d.shown {
margin-top: 100px;
}
</style>
</head>
<body>
<button id="b">Toggle slide</button>
<div id="d">Weeeeeeee</div>
<script type="text/javascript">
var b = document.getElementById('b');
var d = document.getElementById('d');
b.addEventListener('click', function() {
d.classList.toggle('shown');
});
</script>
</body></html>
The basic algorithm is to add a class to the element you want to slide in/out whenever some button or link is clicked (I'd also argue that a button is more semantically appropriate here than an anchor tag which is more for linking web pages).
The CSS kicks in automatically and updates the margin-top of the sliding element to be visible on-screen. The transition property of the element tells the browser to animate the margin-top property for two seconds.
You can try below code:
Working Demo
document.getElementById('bar').onclick = (function()
{
var that, interval, step = 20,
id = document.getElementById('foo'),
handler = function()
{
that = that || this;
that.onclick = null;
id = document.getElementById('foo');
interval =setInterval (function()
{
id.style.top = (parseInt(id.style.top, 10) + step)+ 'px';
if (id.style.top === '0px' || id.style.top === '400px')
{
that.onclick = handler;
clearInterval(interval);
if (id.style.top === '400px')
{
id.style.display = 'none';
}
step *= -1;
}
else
{
id.style.display = 'block';
}
},100);
};
return handler;
}());
You can refer following below:
<div class="title-box">
show text
</div>
<div class="box" id="slidedown_demo" style="width:100px; height:80px; background:#ccc; text-align:center;">
<span class="activity-title">our regions bla bla</span>
</div>
I have the following code which is supposed to show the content of a paragraph but it doesn't work:
jQuery
<script>
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$('.portfolio-text').addClass('portfolio-hover')
},
function () {
$('.portfolio-text').removeClass('portfolio-hover')
})
})
</script>
HTML
<div class="portfolio-img"> <img src="images/thumbnail.jpg"/>
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
CSS
.portfolio-hover {
display:block;
}
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
which is not working and I don't know why. Can you help?
All you need to do is changing your CSS declaration.
p.portfolio-text{
display:none;
}
p.portfolio-excerpt{
display:block;
height:30px;
width:auto;
}
p.portfolio-hover{
display:block;
}
Here is working page --> JSFIDDLE
You forgot about adding p before .portfolio-hover and just put it on the end of the styles. Thats all.
A couple of related things - it's your css.
Firstly the order:
.portfolio-hover {
display:block;
}
/* this comes later in the css, it will override the hover */
p.portfolio-text {
display:none;
}
So fix it as such:
p.portfolio-text {
display:none;
}
.portfolio-hover {
display:block;
}
However p.portfolio-text is more specific than .portfolio-hover so will still be overridden - final fix is thus:
p.portfolio-text {
display:none;
}
p.portfolio-hover {
display:block;
}
Include the p tag to up the specificity as .class is less specific than tag.class.
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
p.portfolio-hover {
display:block;
}
The other way is to remove the p from the others, if it's not needed.
In addition, you could update your CSS so it's a bit more specific (using multiple classes):
.portfolio-text.portfolio-hover {
display:block;
}
You could also "force" it by using important.
.portfolio-hover {
display:block !important;
}
If neither of those will work, reconsider your ordering (hey, some people hate important or .multi.classnames - I get that).
Finally, you can toggle the existing class using toggleClass.
$(this).next().toggleClass('portfolio-text');
Here's an example: http://jsfiddle.net/neknhp8p/
Try this:
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$(this).next().addClass('portfolio-hover')
},
function () {
$(this).next().removeClass('portfolio-hover')
})
})
or just use .show() and .hide():
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$(this).next().show();
},
function () {
$(this).next().hide();
})
})
Fiddle Demo
The problem is how CSS's styles are applied, in that the one class's definition isn't overriding the other. Change your styles like so:
.portfolio-hover {
display:block !important;
}
Alternatively, you can just be more specific with the selector's definition:
.portfolio-text.portfolio-hover {
display:block;
}
/** OR **/
p.portfolio-hover {
display:block;
}
Explanation:
Having an element where class="classA classB" where the css is:
.classA {
css-property: css-value1;
}
.classB {
css-property: css-value2;
}
Will result in classA's css-property taking precedence over classB's because of the ordering in the class property on the element. It's fixed by implementing the style in a way where one overrides the other. See here for more information on CSS precedence.
Please wrap the two paragraphs together with another div to unsure the disappear will be smooth.
toggle function changes display from none to block and from block to none to all p tags inside sss div.
HTML:
<div class="portfolio-img"> <img src="images/thumbnail.jpg"/>
<div class="sss">
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
</div>
JS:
<script>
$(document).ready(function () {
$('.sss').hover(function () {
$('.sss').children('p').toggle();
});
});
</script>
CSS:
<style>
.portfolio-hover, .portfolio-text {
display:block;
}
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
</style>
I need to have three elements that alternate with a fade transition. I have it working for the most part, but for some reason when it returns to the first element it skips the fade and just appears. I'm sure there is something fairly obvious I'm missing here, but I just don't see it.
Any help would be greatly appreciated.
Thanks!
jsfiddle link:
http://jsfiddle.net/hcarleton/qLNyt/
HTML
<body>
<div id='one' class='selection'>
<h3>ONE</h3>
</div>
<div id='two' class='selection'>
<h3>TWO</h3>
</div>
<div id='three' class='selection'>
<h3>THREE</h3>
</div>
<div id='console'>
</div>
</body>
CSS
div {
width:100px;
height:75px;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
#one {
background-color:#aabbcc;
}
#two {
background-color:#bbccaa;
}
#three {
background-color:#ccaabb;
}
#console {
width:500px;
position:absolute;
top:200px;
left:25px;
background-color:#dddddd;
}
.top {
z-index:20;
}
p {
margin:5px;
}
javascript/jQuery
$(document).ready(function() {
var fade = 1000;
var wait = 1000;
var $selection = $('.selection');
var selectionQty = $selection.length;
var c = 0;
$('.selection').fadeOut(0);
$('.selection').first().fadeIn(0);
setInterval(
function() {
c+=1;
if(c == selectionQty) {
c = 0;
}
$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);
},
fade+wait
);
$('#console').append('<p>-'+selectionQty+'</p>');
});
You can't use setInterval() and maintain a synchronous chain of events. Use setTimeout() within the callback functions of your animations.
You have three animations triggering simultaneously.
$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);
Which one finishes first/last? Generally, you'll want to use setTimeout() when the last one finishes (there are exceptions).