I wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?
Style:
.box-style_img2 {
background-image: url(img.png);
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
}
Thanks in advance.
P.S. Just beginning to learn Javascript.
It is always better to do things in CSS if you can avoid Javascript
Try using :hover property of css. For animation use transition property
<div class="box-style_img2">
</div>
.box-style_img2 {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
transition: all 1s ease;
}
.box-style_img2:hover {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #000000;
transition: all 1s ease;
}
Also you can check this fiddle
function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}
function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}
Your HTML:
<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>
Or you can use addEventListener if you dont want to write javascript inline
document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);
Note:This task can also be done using plain css also.
.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}
Related
I'm trying to change the background image using javascript. I've set the background up like this;
body {
background: black;
overflow-x: hidden;
overflow-y: hidden;
}
body:before {
overflow-x: hidden;
overflow-y: hidden;
content: "";
position: absolute;
background: url('http://www.dafont.com/forum/attach/orig/1/6/166803.jpg');
background-size: cover;
z-index: -1; /* Keep the background behind the content */
height: 100%; width: 100%; /* Using Glen Maddern's trick /via #mente */
transform: scale(1);
filter: blur(13px);
}
I'm using the above CSS to create a background image with a blur that does not affect elements placed above it. This works. My issue is I would like to change the background image at random intervals. I am unable to do so. I have used;
document.body.style.backgroundImage
$('body').css( 'background-image', artUrl );
document.getElementById('body')
All have failed, I think the issue maybe due to the fact the image is set in body:before. Is there anyway to change the background image using javascript and still be able to have a blur without effecting elements above it? Any help would be appreciated.
You are correct that it has something to do with the pseudo element. Unfortunately there isn't a way to manipulate this with JavaScript. You could, however, use JavaScript to create a style tag that would have a higher specificity.
var css = 'body:before { background: url(\'dblogo_150.png\') }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
You can just create new classes with attached pseudo elements to do this, and use Javascript to switch between them. For example your CSS might look like:
.background--first:before {
background: url(first.jpg);
}
.background--second:before {
background: url(second.jpg);
}
.background--third:before {
background: url(third.jpg);
}
Use a separate element that you'll blur;
don't use body neither body:before or :after, why complicate, right?!
Use several child elements, hide all but first, set a transition and a .show in CSS, handle (actually toggle) that class using JS (jQuery in our case)
/**
* BACKGROUND FADER
*/
(function(){
var $slides = $("#background").children(),
tot = $slides.length, // how many slides
c = 0, // simple counter
itv;
function anim() {
c = ++c % tot; // c = random? Do what you like
$slides.removeClass("show").eq( c ).addClass("show");
}
itv = setInterval(anim, 3000); // Start loop!
}());
/*QuickReset*/ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
body{
color:#fff;
background: black;
}
#background{
position: fixed;
top:0; left:0;
height: 100%; width: 100%;
z-index: -999;
filter: blur(10px);
overflow:hidden;
}
#background > div{
position: absolute;
top:0; left:0;
height: 100%; width: 100%;
background: none 50% / cover;
transition: 1s; -webkit-transition: 1s;
}
#background > div + div{ /* all but first one */
opacity: 0;
}
#background > div.show{ /* class handled by jQuery */
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background">
<div style="background-image:url(http://placehold.it/800x600/0bf/fff?text=0);"></div>
<div style="background-image:url(http://placehold.it/800x600/f0b/fff?text=1);"></div>
<div style="background-image:url(http://placehold.it/800x600/0fb/fff?text=2);"></div>
</div>
<!-- put other page content here. -->
<h1>Hello world</h1>
Edited : There is no way to select the pseudo element, but you can add style to the page like this:
try change this:
$('body').css( 'background-image', artUrl );
To
$('body').append('<style>body:before{background: url(' + src + ')}</style>');
The style appends to the page will override the one in css file.
var src = 'https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif';
$('body').append('<style>body:before{background: url(' + src + ')}</style>');
body {
background: black;
overflow-x: hidden;
overflow-y: hidden;
}
body:before {
overflow-x: hidden;
overflow-y: hidden;
content: "";
position: absolute;
background: url('https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
background-size: cover;
z-index: -1;
height: 100%; width: 100%;
transform: scale(1);
filter: blur(13px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head></head>
<body></body>
</html>
I'm making a very unique progress bar that visually looks like a glass orb filling up with liquid. Unfortunately, because of the rounded shape, the traditional method of modifying the height doesn't work so well (as demonstrated with this fiddle https://jsfiddle.net/usuwvaq5/2/).
As you can see, having the div height "slide up" is not the desired visual. I have also tried playing a bit with css clip, but was unable to get it to work for me. How can I create the visual effect of the glass "filling" with the second image?
Simply add background-position:bottom; to #inner-progress:
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
background-position:bottom;
width: 100%;
overflow: hidden;
position: absolute;
bottom: 0;
height: 0%;
}
JSFiddle Demo
Jacob Gray probably has the best answer, but here's an alternative:
Fiddle
This approach uses css for the animation, instead of javascript. JS is only used here to trigger the animation, the rest is css.
This uses the css transition property to "animate" the height as it changes from 100% to 0%. The only notable change in the html is that I swapped the background of the inner with the outer.
Perhaps this answer will be a better solution to a future reader of this thread - depending on their implementation and/or preferences.
$(document).ready(function() {
$('#inner-progress').addClass("load");
});
#outer-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
border: 0;
height: 100px;
width: 100px;
position: relative;
}
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
background-color: transparent;
width: 100%;
overflow: hidden;
position: relative;
bottom: 0;
height: 100%;
transition: height 3s;
-webkit-transition: height 3s;
}
.progress-value {
color: #FFF !important;
font-weight: bold;
position: absolute;
top: 40%;
left: 40%;
}
.load{
height: 0% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-progress">
<div id="inner-progress" value="0" max="100"></div>
<span class="progress-value">0%</span>
</div>
I have looked at this so long that I'm confusing myself. I seem to be stuck and missing something. My code is basically supposed to have the default div background (gamebg), and when you click on one of the buttons, the background of the div they are in changes.
<style>
#gamebg {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg1 {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg2 {
background-color: #00b5d3;
background-image: url('background_button_2.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
</style>
<div id="gamebg">
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
</div>
Any suggestions for me?
IDs have a higher specificity than classes. In your case, #gamebg is overriding .gamebg1
It's also best not to put too much code in in-line JavaScript. Considering creating a function. Inside the function, you will use the attribute function to add a class, and the removeAttribute function to remove the id.
Now in onclick, you just need to call the function with the class you want to add inside the paramater.
Here is a solution for you
JavaScript
function addNewClass(className) {
var background = document.getElementById('gamebg');
background.attribute('class', className);
background.removeAttribute('gamebg');
}
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
Here is more information on specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
This is due to something called "specificity". In CSS, id's are more "specific" than a class, which is why the id's background-color property will always override the class' background-property, meaning the background-color property won't actually change while the classes bound to the node with that id will.
A good video about specificity here:
https://www.youtube.com/watch?v=fy07HYm-geM
I'm using the background-blend-mode on this:
<a href="#" class="blend">
<h3>Title</h3>
<p>Content goes here</p>
</a>
It has a url set for the background-image. When .blend is hovered over, it changes the background to this:
.blend:hover {
background-blend-mode:multiply;
background-color: rgba(0,0,0,.6);
}
So it works, but not in IE (of course). What alternatives are there? Is there some sort of jQuery trick that I can use to get it to work in IE? Or is there a prefix I could use, say -ms- or something similar?
Not the best solution I know, but as IE and MS Edge can't use background-blend-mode (http://caniuse.com/#feat=css-backgroundblendmode).
I get around this by adding a :after class to the element and manipulating that via background-colour and playing with the opacity on the pseudo element.
DEMO
https://codepen.io/nicekiwi/pen/PmZdMK
HTML
<div class="blend"></div>
CSS
.blend {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
background-repeat: no-repeat;
background-attachment: cover;
width: 200px;
height: 200px;
position: relative;
}
.blend:after {
width: 100%;
height: 100%;
content: '';
background-color: red;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s; /* lets transition to be fancy ^_^ */
}
.blend:hover:after {
opacity: 0.3;
}
How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg
Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.
there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's