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.
Related
I have code, where on click to <a> div shows. It disable my scrollbar and when user click on disable button (img), I wanna escape from my preventDefault function, because when I want use scrollbar, it's again disabled.
As you can see, i give back default css, so website looks like before, but on mousewheel, my scrollbar is again disabled. I'm looking for reset this preventDefault or somehow delete this function, i don't know.
$('#region').click(function(e) {
$('#regions').append("<div class=\"regionWindow\"></div><div class=\"regionCancel\"><img class=\"cancelButton\" src=\"img/cancelButton.png\" /></div>");
$('.content').css({ "height": "100%", "background": "rgba(0,0,0,0.7)", "pointer-events": "none" });
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
$(this).css({ "overflow-y": "scroll", "position": "fixed", "width": "100%" });
}
});
$('.cancelButton').click(function(){
$('.content').css({"height":"","background":"","pointer-events":""});
$('#regions').remove('div');
$('body').css({"overflow-y":"","position":"","width":""});
});
});
You first need to define your event handler as a separate (named) function:
function myMouseWheelHandler(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
$(this).css({ "overflow-y": "scroll", "position": "fixed", "width": "100%" });
};
Then keep the .on() you have, but now with your named function:
$('body').on('mousewheel', myMouseWheelHandler);
And then you can remove it with .off():
$('body').off('mousewheel', myMouseWheelHandler);
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');
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});
});
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.
I am trying to have an element on the page fade out upon mouseleave, then apply some css properties to it. The problem is that the css properties are being added to the element before it has completely faded out. Here is what I've tried:
$(".tiptrigger").mouseleave(function() {
var s_id = $(this).attr('id');
$("#tiptip_holder-"+s_id).fadeOut("fast");
$("#tiptip_holder-"+s_id).css({"margin-left": "0px", "margin-top": "0px"});
});
When that didn't work, I tried:
$(".tiptrigger").mouseleave(function() {
var s_id = $(this).attr('id');
$("#tiptip_holder-"+s_id).fadeOut("fast").delay(500).css({"margin-left": "0px", "margin-top": "0px"});
});
And when that didn't work, I finally tried:
$(".tiptrigger").mouseleave(function() {
var s_id = $(this).attr('id');
$("#tiptip_holder-"+s_id).fadeOut("fast");
}, function() {
$("#tiptip_holder-"+s_id).css({"margin-left": "0px", "margin-top": "0px"});
});
Any suggestions?
You can use the callback function here like:
$("#tiptip_holder-" + s_id).fadeOut("fast", function () {
$(this).css({
"margin-left": "0px",
"margin-top": "0px"
});
});
Use the callback:
$("#tiptip_holder-"+s_id).fadeOut("fast", function(){
$(this).css({"margin-left": "0px", "margin-top": "0px"});
});
This will complete the animation and, once that's completed, initiate whatever's in the callback (anonymous) function.
Using the delay() will only delay the animation queue.
References:
fadeOut().
try this
$.when($("#tiptip_holder-" + s_id).fadeOut(500))
.done(function() {
$(this).css({
"margin-left": "0px",
"margin-top": "0px"
});
});
Try it as a callback function:
$("#tiptip_holder-"+s_id).fadeOut("fast", function(){
$(this).css({"margin-left": "0px", "margin-top": "0px"});
});
You can use a callback on the fadeOut, to do something when the animation completes, like so:
$(".inner").mouseleave(function() {
$(this).fadeOut(400, function() {
$(this).css({
"margin-top": "0px",
"margin-bottom": "0px"
});
});
});
Have a look at this jsFiddle