Because I am using variable color for buttons, I need to add it with inline css. The hover color is other variable. I cant add hover selector on inline css so, I must use js. I have try to do it with .hover() but when I hover the button both colors desappear.
The code:
$('.btn').hover( function() {
var $hover = $('.btn').attr('data-hover');
$(this).css( "background", $hover );
}, function() {
var $color = $('.btn').attr('data-color');
$(this).css( "background", $color );
});
HTML:
<button class="btn wpb_btn-small" style="background:#00aff0;" data-color="#00aff0" data-hover="#0cbbfc">Button</button>
$('.btn').hover( function() {
var $hover = $(this).attr('data-hover'); // <-- change to this , there are many .btn
$(this).css({ "background-color" : $hover }); // minor change
}, function() {
var $color = $(this).attr('data-color'); // same change
$(this).css({ "background-color" : $color }); // minor change here
});
$('.btn') is returning an array - if there are more then one on the page , use $(this)
they both should be "background-color" or "background" , make sure you use the last edit where I made them the same
you could even get really crazy and put it all in one line
$(this).css({ "background-color" : $(this).attr('data-hover') });
You should use mouseenter and mouseleave events:
http://api.jquery.com/mouseenter/
HTML
<button class="btn wpb_btn-small" style="background:#00aff0;" data-color="#00aff0" data-hover="#0cbbfc">Button</button>
JS
$(function() {
$('.btn').mouseenter(function() {
var bg = $(this).attr('data-hover');
$(this).css( "background", bg );
});
$('.btn').mouseleave(function() {
var bg = $(this).attr('data-color');
$(this).css( "background", bg );
});
});
Live Demo
UPDATE:
It's actually better using Hover event, (refer to the upvoted answer :<)
Related
When I try to strech row in the row settings in Visual Composer, the row streches, but the position of the row is all wrong.
It happens only when body direction has direction:rtl css setting.
Website is online: http://ono.devurl.net/?page_id=871
Any way of fixing that?
Yuval.
Yuval Hey !
Try this script to fix your problem.
if( jQuery('html').attr('dir') == 'rtl' ){
jQuery('[data-vc-full-width="true"]').each( function(i,v){
jQuery(this).css('right' , jQuery(this).css('left') ).css( 'left' , 'auto');
});
}
Put this script code in jQuery(window).load.
hope this'll help you :)
Could be easier to resolve it with css, and it will work when page is resized too.
Find a class for row before [data-vc-full-width="true"] and add such css to your rtl.css
.before-fullwidth-row {
direction: ltr;
}
.before-fullwidth-row > div {
direction: rtl;
}
Seems to work...
If you want to fix VC Row also on window resize use this solution:
$(window).on( 'resize', function() {
$( '.rtl [data-vc-full-width="true"]' ).each( function(){
$( this ).css( 'right' , $( this ).css( 'left' ) ).css( 'left' , 'auto' );
});
}).resize();
WordPress Visual Composer full width row ( stretche row ) fix for RTL
jQuery(document).ready(function() {
function bs_fix_vc_full_width_row(){
var $elements = jQuery('[data-vc-full-width="true"]');
jQuery.each($elements, function () {
var $el = jQuery(this);
$el.css('right', $el.css('left')).css('left', '');
});
}
// Fixes rows in RTL
jQuery(document).on('vc-full-width-row', function () {
bs_fix_vc_full_width_row();
});
// Run one time because it was not firing in Mac/Firefox and Windows/Edge some times
bs_fix_vc_full_width_row();
});
Source
Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you
Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo
Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/
I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!
fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.
.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO
Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).
I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.
you helped me yesterday with create tooltip div. Today i would like to extend it.
I have something like that: http://jsfiddle.net/Axjgf/18/
How can I change it so that the yellow box appears next to the box that I clicked on? For instance if I click on the purple box it should appear next to the purple box instead of the black.
thanks for help!
Solution:
http://jsfiddle.net/genesis/VmXU9/26/
Have a look at the last example here: Query-Click Doc. Use $(this) for getting the clicked div attributes.
If you want to change the color of the overlay box, you can give each smaller box its own click utility.
EDIT:
Just realized you wanted a position change! ;-) Code is fixed. See below.
$("#TWO").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'blue', 'top' : '-320px'});
});
$("#five").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'purple', 'top' : '-280px'});
});
$("#six").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'yellow', 'top' : '-220px'});
});
http://jsfiddle.net/jasongennaro/Axjgf/21/
EDIT 2:
Since the question changed, I edited the fiddle, to remove the background color change.
$("#TWO").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-320px'});
});
$("#five").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-280px'});
});
$("#six").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-220px'});
});
http://jsfiddle.net/jasongennaro/Axjgf/22/
Since you're already using jQuery, I would highly recommend using the jQuery UI library's "Position" utility.
It has quite a few useful little methods for aligning objects relative to another object. For example using that library you could modify your click function to something like this (untested):
$('.click').click(function(){
$(c) = $(this);
$('#THREE').position({
my: 'left top',
at: 'right center',
of: $(c)
});
});
Hi I'm new to JQuery. I have an two issues that I can't figure out. I'm using copy and past code as I'm on a tight deadline.
1) When I hover over a link it doesn't fade back to the original color once I move my mouse away from the link.
2) If I move my mouse rapidly over the links they get stuck in a loop and fade in and out over and over... I know I should be able to use stop() but not sure if thats what I need.
// JavaScript Document
$(document).ready(function() {
//Grab the original BG color of the link
var originalBG = $("#nav li a").css("background-color");
//The color you want to fade too
var fadeColor = "#FFFFFF";
//Now animate on links with class = animate
$("#nav li a").hover(
function() {
$(this)
//Fade to the new color
.animate({backgroundColor:fadeColor}, 350)
//Fade back to original color
.animate({backgroundColor:originalBG}, 350)
},
function(){
}
);
});
update: from suggestions - Resolved some of my issues, but now some times if you hover over a link it doen't fade.
// JavaScript Document
$(document).ready(function() {
//Grab the original BG color of the link
var originalBG = "#351411";
//The color you want to fade too
var fadeColor = "#FFFFFF";
//Now animate on links with class = animate
$("#nav li a").hover(
function() {
//Fade to the new color
$(this).stop().animate({backgroundColor:fadeColor}, 350)
},
function(){
//Fade back to original color
$(this).stop().animate({backgroundColor:originalBG}, 350)
}
);
});
Doesn't work because the .css("background-color") returns in another color format, some like this: "rgb(18, 52, 86)".
Try this :
$("#nav li a").hover(
function() {
//Fade to the new color
$(this).animate({backgroundColor:fadeColor}, 350)
},
function(){
//Fade back to original color
$(this).animate({backgroundColor:originalBG}, 350)
}
);