I want to change background-color on body to mix color on slide change but facing problem can anybody help me . this is my function on slide change but do't know what mistake i am doing. my site url is http://krakenworldwide.com/destinations/`
function imgbackground() {
if (jQuery('.slide a').hasClass('a1')) {
jQuery('body').css({
'background-color': '#63bcf8',
'background-image': 'none'
});
} else if (jQuery('.slide a').hasClass('a2')) {
jQuery('body').css({
'background-color': '#d7e5f2',
'background-image': 'none'
});
} else if (jQuery('.slide a').hasClass('a3')) {
jQuery('body').css({
'background-color': '#a3cff4',
'background-image': 'none'
});
} else if (jQuery('.slide a').hasClass('a4')) {
jQuery('body').css({
'background-color': '#fefefe',
'background-image': 'none'
});
} else {
jQuery('body').css({
'background-color': '#fff',
'background-image': 'none'
});
}
}
window.setInterval(function () {
imgbackground()
}, 1000);
Unfortunately I didn't have much time to sift through your code (it is all over the place) but I did notice a few things that might help you:
You are linking to 2 different versions of JQuery you have one link to version "...1.10.2" in your "wp-includes" folder and below that you are linking to version "...1.7.1.min.js" in your "wp-content" folder. The lower one in the order will override the higher one.
You need to load your main JQuery library before all the other plug-ins so move whichever version you want above all other script links.
It looks like your slide function is changing the display, z-index, and left properties of each anchor tag within <div class="slides-control"...> but the classes for each individual anchor tag remain the same so the function you wrote above won't work because '.slide a' always has a class of a1 and it always has a class of a2 and so on.
There are many ways to accomplish what you are looking for but you might try assigning an id to each anchor tag within <div class="slides-control"...>. Then assigning a color to your background based on which anchor tag has display:block;.
So you code would look something like this:
function imgbackground() {
if ($('#anchor1').css('display') == 'block') {
$('body').css({
'background-color': '#63bcf8',
'background-image': 'none'
});
} else if ($('#anchor2').css('display') == 'block') {
$('body').css({
'background-color': '#d7e5f2',
'background-image': 'none'
});
} else if ($('#anchor3').css('display') == 'block') {
$('body').css({
'background-color': '#a3cff4',
'background-image': 'none'
});
} else if ($('#anchor4').css('display') == 'block') {
$('body').css({
'background-color': '#fefefe',
'background-image': 'none'
});
} else {
$('body').css({
'background-color': '#fff',
'background-image': 'none'
});
}
}
I also didn't see anywhere where you are calling your function.
You need to either do it the body: <body onload="imgbackground()">...</body>
Or use the JQuery .ready() method:
$(document).ready(function() {
// your "imgbackground" function here
}
Hope that helps.
Related
I have a code but i don't know why it does not working, even if it's a simple code of
if condition.
$(".btn-superimposed-wrapper").each(function () {
if (($(this).prev(".wp-block-group")) && ($(this).next(".wp-block-group"))) {
$(this).css({ "margin-top": "-8rem", "margin-bottom": "-6rem", "text-align": "center" });
}
});
i also tried with hasClass() :
$(".btn-superimposed-wrapper").each(function () {
if ($(this).prev().hasClass(".wp-block-group") && $(this).next().hasClass(".wp-block-group")) {
$(this).css({ "margin-top": "-8rem", "margin-bottom": "-6rem", "text-align": "center" });
console.log("PREV ;",$(this).prev())
console.log("NEXT ;",$(this).next())
}
});
i need to add the css style (above) to button when it have a div with class .wp-block-group before AND after.
But for example if i change the name of the div.wp-block-group in the html, it style apply the css as the condition is always true knowing that we have a condition with AND, i don't understand !
Consider the following.
$(".btn-superimposed-wrapper").each(function (i, el) {
if ($(el).prev().hasClass("wp-block-group") && $(el).next().hasClass("wp-block-group")) {
$(el).css({
"margin-top": "-8rem",
"margin-bottom": "-6rem",
"text-align": "center"
});
}
});
This will examine the previous and next elements and if they both have the Class, will return true.
I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();
(function() {
var count = 0;
jQuery('#home-grid-three-two').click(function () {
count += 1;
jQuery('#home-grid-one-one').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-one').css({
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
jQuery('#home-grid-one-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-two').css({
'background-color': 'transparent',
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
if (count == 2) {
jQuery('.home-grid').css('background-image', 'none');
jQuery('#home-grid-one-two').css('background-color', '#cccccc');
jQuery('#home-grid-two-one').css('background-color', '#cccccc');
jQuery('#home-grid-two-three').css('background-color', '#cccccc');
jQuery('#home-grid-three-two').css('background-color', '#cccccc');
jQuery('#home-grid-one-two').find('p').show();
jQuery('#home-grid-two-one').find('p').show();
jQuery('#home-grid-two-two').find('p').show();
jQuery('#home-grid-two-three').find('p').show();
jQuery('#home-grid-three-two').find('p').show();
count = 0;
}
});
})();
A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.
Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)
sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/
Example html:
<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>
Sample CSS
.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto;
border: solid lime 1px;}
sample code
$('.mygrids').on('click',function(){
$('#showactive>span').text($(this).text());
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).siblings().removeClass('inactive');
}
else{
$(this).addClass('active');
$(this).siblings().addClass('inactive');
}
});
$('.mygrids').not('.active').addClass('inactive');
I want to set a CSS attribute for a element (div) just for 2 sec. here is my try:
html:
<div class="div">foo</div>
<input class="btn" type="button" value="click" />
jquery:
$(".btn").click(function(e) {
$(".div").css({"border": "1px solid #ccc"});
});
But the above code will be applied for ever, how can I limit it for a specific period ?
I think using css class maybe the best solution just because i don't know the prev border style or the others css rules applied to the element:
css
.borderStyle{
border: 1px solid #ccc!important;
}
js
$('.btn').click(function(){
$('.div').addClass("borderStyle");
setTimeout(function(){ $('.div').removeClass("borderStyle"); }, 2000);
});
toggle class version
$('.btn').click(function(){
$('.div').toggleClass("borderStyle");
setTimeout(function(){ $('.div').toggleClass("borderStyle"); }, 2000);
});
fiddle
don't know why the toggleclass don't work for you but lets keep it shown in my answer for future reviews
I think you could use something like this :
$(".btn").click(function(e) {
$(".div").css({"border": "1px solid #ccc"});
setTimeout(function(){
$(".div").css({/* Your initial css */});
}, 2000);
});
Pretty simple, add a setTimeout() and let that run after 2 seconds and let it remove the border.
$(".btn").on("click", function() {
$('.foo').css('border', '1px solid #ccc');
setTimeout( function() {
$('.foo').css('border', 'none');
}, 2000);
});
Working JSFIDDLE
As you can see, I have replaced your .click() with .on(). Read here why it's better to use .on() and here how you use it.
After two seconds to remove css atribute:
$(".btn").click(function(e) {
$(".div").css({"border": "1px solid #ccc"});
setTimeout(function() {
$(".div").css({
'border' : 'none',
'width' : '30px',
'top' : '10px',
'left' : '30px',
'bottom' : '10px',
'right' : '30px'
});
}, 2000);
});
When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});
Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});
<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});
You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});
Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});
What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors
Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});
<ul style="#" class="hmenu">
<li class="active selected">Home</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
I have a menu with one link as active. I use this script to switch active class on hover
$('.hmenu li').on('mouseenter', function () {
$('.hmenu li').removeClass('active');
$(this).addClass('active');
});
$('.hmenu li').on('mouseleave', function () {
$(this).removeClass('active');
$('.hmenu li[class=selected]').addClass('active');
});
This work's but i want to change it so that when i hover any link, the link should fadeIn and fadeOut on mouseleave.
I can't get my head around this - How can i do this ?
Here is the fiddle : http://jsfiddle.net/GdSUg/
Add the:
transition: all 1s;
to the css code in the class .active
this is an example
See the reference for more information: Here
There you go
$('.hmenu li').hover(function () {
$(this).animate({
backgroundColor: "#89B908"
}, 300);
}, function () {
$(this).animate({
backgroundColor: "#FFF"
}, 1);
});
Fiddle
CSS transitions are one way. Another is to use jQuery UI's built in switchClass functionality. Using your demo:
$('.hmenu li').hover(function() {
if (!$(this).hasClass('active')) $(this).switchClass('','active', 200);
}, function () {
$(this).switchClass('active', '', 200);
});
Requires
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Reference: http://jqueryui.com/switchClass/
You may notice weird behavior when quickly hovering over elements that require a delayed transition (i.e. - fade, slide) -- Consider using hoverIntent:
What is hoverIntent?
hoverIntent is a plug-in that attempts to
determine the user's intent... like a crystal ball, only with mouse
movement! It is similar to jQuery's hover method. However, instead of
calling the handlerIn function immediately, hoverIntent waits until
the user's mouse slows down enough before making the call. Why? To
delay or prevent the accidental firing of animations or ajax calls.
Simple timeouts work for small areas, but if your target area is large
it may execute regardless of intent. That's where hoverIntent comes
in...
To animate colours reliably with JQuery, you need to use the JQuery Color Plugin (https://github.com/jquery/jquery-color). You can then do something like the following:
var active = {
backgroundColor: '#89B908',
color: '#FFF'
},
inactive = {
backgroundColor: '#FFF',
color: '#000'
};
$('.hmenu li').on('mouseenter', function () {
$(this).animate(active, function () {
$('.hmenu li').removeClass('active').css(inactive);
$(this).addClass('active').css(active);
}).find('a').animate({
color: '#FFF'
});
});
$('.hmenu li').on('mouseleave', function () {
$(this).animate(inactive, function () {
$(this).removeClass('active');
$('.hmenu li.selected').addClass('active').css(active);
}).find('a').animate({
color: '#000'
});
});
You can find a working jsFiddle here: http://jsfiddle.net/GdSUg/28/