Conditionally add class to element based on other element status/class - javascript

I'm trying to hide an image after I scroll down my page. When scrolling my header gets a class fl-theme-builder-header-scrolled. My image div has a class hiding-image and I want to add a class image-off when the fl-theme-builder-header-scrolled class shows up in the header.
This is what I have:
$(document).ready(function() {
if($( 'header' ).hasClass( 'fl-theme-builder-header-scrolled' )) {
$( '.hiding-image' ).toggleClass( 'image-off' );
}
});
but this doesn't work. Any advice? Thx.

Your code only runs once after the document ready, as soon as the page loads. So if the header doesn't have the fl-theme-builder-header-scrolled class and only gets added later, your code will not run again.
You need a a mutation Observer.
Check this thread: Event trigger on a class change
Alternatively you can do as #Brewal is saying, putting the code evaluation on the scroll event. Although be careful so you don't run the code every time the scroll event is triggered since it can slow your website performance, specially on mobile devices.

Try something like this.
$(window).scroll(function() {
if($( 'header' ).hasClass( 'fl-theme-builder-header-scrolled' )) {
$( '.hiding-image' ).toggleClass( 'image-off' );
}
});

As pointed out in the comments, I think the best approach would be to find where the fl-theme-builder-header-scrolled class is already being controlled.
However, If you really would want to put the logic in a separate area, you can do it like this:
$(document).ready(function () {
$(window).scroll(function () { //attach to window scroll event
if ($('header').hasClass('fl-theme-builder-header-scrolled') && !$('.hiding-image').hasClass('image-off')) {
$('.hiding-image').addClass('image-off'); //add class only if it does not already exist;
} else {
if ($('.hiding-image').hasClass('image-off')) {
$('.hiding-image').removeClass('image-off'); //remove class
}
}
});
});

Check condition like this:
`$(window).scroll(function() {
if($( 'header' ).hasClass( 'fl-theme-builder-header-scrolled' ))
{
$( '.hiding-image' ).addClass( 'image-off' );
}
else
{
$( '.hiding-image' ).removeClass( 'image-off' );
}
});`

I finally managed to make it work doing this:
(function($){
$(function(){
var headerThemer = $( '.fl-builder-content[data-type=header]' ).eq(0);
$(window).on( 'scroll.fl-theme-builder-header-scrolled', function(){
if ( headerThemer.hasClass('fl-theme-builder-header-scrolled') ) {
$('.hiding-image').hide();
}
else {
$('.hiding-image').show();
}
});
})
})(jQuery);

Related

Having troubles with removing and reapearing html elements with jquery

Basically I want to slide down a element, then when the button is hit again I want it to slide up, empty the div, then slide down with the new results. I'v been trying to figure out how to do this for so long and I cant seem to get it working with jquery.
$(".search").on("click",function(){
$('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});
I understand this is kind of specific to my project kind of but I do feel others might find this useful
I'm not sure what exactly your problem is, but I think the slideUp animation is not shown in your example.
The slideUp method takes a second argument, which is the function callback. It is called when the slideUp action is finished. If you do the rest of your actions in this callback function, is guaranteed to be performed after the slideUp.
jQuery('#testbutton').on('click',function() {
$('#testlist').slideUp(500, function() {
$('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
});
});
You can find a fully working example here:
https://jsfiddle.net/dxyybwyh/5/
I want to slide down a element, then when the button is hit again I
want it to slide up, empty the div, then slide down with the new
results.
It seems simple enough to me
let me know if you need anything more
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
//show the div
$( ".myDiv" ).slideDown( "slow" );
//add content
$( ".myDiv" ).html("New Content")
} else {
//hide the div
$( ".myDiv" ).slideUp( "slow" );
//clear content
$( ".myDiv" ).html("");
}
});
http://codepen.io/Rohithzr/pen/jqmGXg
Updated the pen with append ability and more readability
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
show();
} else {
hide();
clearContent();
appendContent("New Content");
}
});
function clearContent(){
//clear content
$( ".myDiv" ).html("");
}
function appendContent(content){
$( ".myDiv" ).html($( ".myDiv" ).html()+content);
}
function hide(){
//hide the div
$( ".myDiv" ).slideUp( "slow" );
}
function show(){
//show the div
$( ".myDiv" ).slideDown( "slow" );
}

swipebox auto transition to next slide

This is more of a tip than a question, but i hope others find this useful.
Basically i needed to make the lightbox slider called 'Swipebox' auto transition to the next slide, I looked online for help but found nothing.
to add this feature to the plugin i added this code:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
The file for this JS is called 'jquery.swipebox.js'. This is the code where you want to place the code previously mentioned:
/**
* Navigation events : go to next slide, go to prevous slide and close
*/
actions : function () {
var $this = this,
action = 'touchend click'; // Just detect for both event types to allow for multi-input
if ( elements.length < 2 ) {
$( '#swipebox-bottom-bar' ).hide();
if ( undefined === elements[ 1 ] ) {
$( '#swipebox-top-bar' ).hide();
}
} else {
$( '#swipebox-prev' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getPrev();
$this.setTimeout();
} );
$( '#swipebox-next' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getNext();
$this.setTimeout();
} );
}
$( '#swipebox-close' ).bind( action, function() {
$this.closeSlide();
} );
// THIS IS THE NEW CODE ADDED:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
},
This function is around about 550 lines down.
Also, to make the slideshow loop back around, you will need to change the option called 'loopAtEnd' from FALSE to TRUE. This is located at the top of the document.
loopAtEnd: true,
Hope this helped :)

Drop Down text won't come back up and won't recognize other instances

I used OnClick drop down text with JavaScript and HTML code to make the dropdown hidden div project.
But the problems are:
1 - It won't open divs separatelly, all of the "projects" are open at once;
2 - I won't come back up once I click it again.
I made another line of code to make it go up:
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
$(function() {
$(".project2").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
And so on... and it goes up as soon as I click it only once, like an animation. It won't stay down and THEN on the next click it goes back up. AND it still gets both down instead of each one separately.
You shouldn't use document.ready to often if isn't needed.
// Shorthand for $( document ).ready()
$(function() {
});
If you bind two events to an element, .. it will be executed if you don't stopPropergation or making "cases".
So you can check the visibility and decide what to do:
$( function () {
$("[class^='project']").on( 'click', function () {
var $details = $( this ).parent().find( '.details' );
if ($details.is(':visible'))
$( this ).parent().find( '.details' ).slideUp();
else
$( this ).parent().find( '.details' ).slideDown();
});
} );
https://jsfiddle.net/3738Lnmf/
edit:
slideToggle is more elegant :) #Diego López
$( function () {
$("[class^='project']").on( 'click', function () {
$(this).parent().find('.details').slideToggle();
});
} );
https://jsfiddle.net/3738Lnmf/1/
Use .slideToggle() if you want to toggle between show and hide the div elements
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
});

Only run a function if on X page

I have this JS set up but the tabs are only on one page. So I'd like to only run the function on that page to prevent any undefined is not a function console errors. How can I include a conditional if statement to this?
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
});
So, something like:
if is X page {
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
});
}
If that page has a specific class assigned to it, or an element that only applies to that page, you can do it. It would look something like this:
$(function() {
if ($('body').hasClass('className')) {
$('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
}
});

JQuery.hover() not working when hovering over tile

I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.
For the basic 'tile-2' tile, I have the hover functionality:
<script>
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
</script>
But nothing is happening and I don't believe the hover is being registered and I'm not sure why.
My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/
The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.
Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.
Try like this, It works for me...
$("body").on('mouseenter', '.tile-2', function () {
alert("in!");
}).on('mouseleave', '.tile-2', function () {
alert("out!");
});
I think you load html using ajax, this should work
<script>
$( "body" ).on('hover','.tile-2',
function(){
alert("in!");
}, function() {
alert("out!");
}
);
;)
You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.
$(document).ready({
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
});

Categories

Resources