Jquery If/else slide - javascript

I would like to make a filter for some blogs. Each blog will get a class with a category. If it matches it will show when a button is clicked. I thought I made some decent code, but it's not working. Can you please look at it and tell me what is wrong?
$('#filter').on('click', '.het-begin', function() {
if ($('.blogpagina').hasClass('het-begin')) {
$('.blogpagina').filter('.het-begin').slideDown();
}
else {
$('.blogpagina').slideUp();
}
});
If you guys want to see it in action you can look at: http://atmos.beer/blog.html. If you want some more information I can provide it.
Thanks in advance!

When you click the filter you could loop through each .blogpagina and check if it has the class het-begin. So it would look like this:
$('#filter').on('click', '.het-begin', function() {
$('.blogpagina').each(function() {
if ($(this).hasClass('het-begin')) {
$(this).slideDown();
} else {
$(this).slideUp();
}
});
});

Related

Conditional fields based on select value in SiteOrigin Page Builder

I'm trying to integrate Page Builder by SiteOrigin into my plugin. I've added some custom fields under the row styles via the siteorigin_panels_row_style_fieldsfilter found here. One of the custom fields is a select. I would like fields to either be hidden or displayed when the select is at a certain value. I've enqueued the Javascript to Page Builder using the siteorigin_panel_enqueue_admin_scriptsaction as per the documentation, and have even added the panelsopen event with some test code:
jQuery( document ).ready(function($) {
$(document).on('panelsopen', function(e) {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
However, this does not seem to be working. Any help or ideas how I could solve this would be greatly appreciated!
After some research I figured this out by using the ajaxComplete() function in jQuery. This is how it works:
$(function() {
$(document).ajaxComplete(function() {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
I hope this helps anyone trying to achieve something similar.

How do I simplify the following code?

So I have a selection of images and would like a div to appear on('hover'). My current code is very bulky and manually adds that div for each of the images.
$("#TheNook").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#TheNook-cover").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});
$("#ManCave").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#ManCave-cover").hover(function() {
$("#ManCave-cover").toggleClass("hidden");
});
$("#AnchorsAweigh").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$("#AnchorsAweigh-cover").hover(function() {
$("#AnchorsAweigh-cover").toggleClass("hidden");
});
$('#BatCave').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#BatCave-cover').hover(function() {
$('#BatCave-cover').toggleClass('hidden');
});
$('#CountryChic').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#CountryChic-cover').hover(function() {
$('#CountryChic-cover').toggleClass('hidden');
});
$('#BohemianBungalow').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
$('#BohemianBungalow-cover').hover(function() {
$('#BohemianBungalow-cover').toggleClass('hidden');
});
My new solution that I have tried is much more condensed, but I'm not entirely sure how to make it work. I'm new to declaring and using variables in JQuery so please help.
var cover = $('.theme-img:hover').attr("alt");
$('.theme-img').hover(function() {
$('#'+cover+'-cover').toggleClass('hidden');
});
Here is a JSFiddle: https://jsfiddle.net/w6pbp4Lz/2/
The first image should behave like the second.
You can use this code in order to achieve that:
JQUERY:
$('img.theme-img').hover(function() {
$(this).parent().children('div').toggleClass('hidden');
});
Here is your JSfiddle with my edits: https://jsfiddle.net/w6pbp4Lz/6/
Assuming they all have the class "theme-img" this might work
// "var cover = $('.theme-img:hover').attr("alt"); (not needed)
$('.theme-img').hover(function() {
$(this).toggleClass('hidden');
});
function toggleHover(srcElements, tarElement) {
srcElements.forEach(function(srcElement) {
srcElement.hover(function() {
tarElement.toggleClass('hidden');
});
});
}
call toggle hover with an array of the jQuery elements and the target jQuery element to toggle hidden. example
toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));
just an idea, might clean the code up a bit

Firefox/IE jQuery is(":hover") not working

http://jsfiddle.net/h8rxa3pj/2/
$("#open_link").hover(function() {
$("#menu").removeClass("hidden");
},function() {
if ($("#menu").is(":hover")) {
$("#menu").mouseleave(function() {
$("#menu").addClass("hidden");
});
}
else {
$("#menu").addClass("hidden");
};
});
I have looked at the other questions on this and tried pretty much every solution except the ones I couldn't understand.
How do I check if the mouse is over an element in jQuery?
I feel like Arthur's answer could help but I'm really new to jQuery/JS and I don't know how to apply it here. Help appreciated
$("#open_link, #menu").hover(function() {
$("#menu").removeClass("hidden");
});
$("#open_link, #menu").mouseleave(function() {
$("#menu").addClass("hidden");
});

can I make a function into a variable to reduce my code (JavaScript Code debug Please)

Hello I have been boggling my mind over and over again trying to simplify this java Script Code.
I am fairly new to JavaScript and I do not know where else to turn.
I am making a navigation that when I click on a button it will animate to transform:translateX(0); from transform:translateX(-98%); as a class.
I am also making it if you hover over the div .main-navigation it will slide back and forth accordingly. I have it where the mouseover will slide the navigation if its open to the close state but I cannot do so when it is closed to open. I am also trying to make it if the .home is active then the hover will not open or close the .home just the menu.
Any suggestions?
$(function(){
var navToggle = document.querySelectorAll('.nav-toggle');
var mainMenu = document.querySelectorAll('.main-navigation');
$(navToggle).on('click', function(){
if ($(mainMenu).hasClass('close')){
$(mainMenu).removeClass('close');
$(mainMenu).addClass('open');
}else{
$(mainMenu).addClass('close');
$(mainMenu).removeClass('open');
};
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
$(mainMenu).on('mouseenter', function(){
if ($(mainMenu).hasClass('close')){
$(mainMenu).removeClass('close');
$(mainMenu).addClass('open');
}
if ($(mainMenu).hasClass('open')){
$(mainMenu).removeClass('open');
$(mainMenu).addClass('close');
};
});
});
Sorry I created a Code Pen to show you a very close example of what I am trying to do and the behavior that is happening.
My CodePen Example
Never mind I figured it out, I went with JQuery and was able to achieve my goal. I ended up changing it to this.
$(function(){
homeAnimate();
menuAnimate();
menuAnimate2();
autoAnimateEnter();
autoAnimateExit();
function homeAnimate(){
$('.nav-toggle').click(function () {
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
}
function menuAnimate(){
$('.nav-toggle').click(function () {
if ($('.main-navigation').hasClass('close')) {
$('.main-navigation').addClass('close');
$('.main-navigation').toggleClass('open');
}
if ($('.main-navigation').hasClass('open')) {
$('.main-navigation').toggleClass('close');
$('.main-navigation').toggleClass('open');
}
});
}
function menuAnimate2(){
$('.nav-toggle-menu').click(function () {
if ($('.main-navigation').hasClass('open')) {
} else {
$('.main-navigation').addClass('open');
$('.main-navigation').removeClass('close');
}
$('.home').toggleClass('hide, toggleAnimate');
$('.contentWrap').toggleClass('open');
});
}
function autoAnimateEnter(){
$('.main-navigation').mouseenter(function () {
if ($('.main-navigation').hasClass('close')) {
$('.main-navigation').removeClass('close');
$('.main-navigation').addClass('open');
} else {
// DO NOTHING
}
});
}
function autoAnimateExit(){
$('.main-navigation').mouseleave(function () {
if ($('.home').hasClass('toggleAnimate')) {
// DO NOTHING
} else {
$('.main-navigation').removeClass('open');
$('.main-navigation').addClass('close');
}
});
}
});
I'm not sure if this is the cleanest way in order to achieve my goal but it works and I'm happy.
Here is my code if anyone wants to check it out.
Code

Jquery Menu that on click toggles class to expand one list level at a time

issue#1 So I have a menu that asks for the Make, model and year of a car. I have got the basic functionality working but my code isn't clean. How can I make this DRYer?
jQuery(document).ready(function( $ ) {
$('li.menu-item-type-custom').on('click', function () {
$(this).closest('ul.sub-menu').toggleClass('expand-menu');
});
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
});
});
issue#2
I also want only one child of each make or model to be shown at a time. Right now if I click on make 1 and make 2 then the text overlaps and it looks bad. I tried
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
if( $(this).hasClass("expand-menu") ) {
$(this).siblings().removeClass("expand-menu")
} else{}
});
but my approach is wrong and it isn't working
DEMO:
http://jsfiddle.net/BbF9K/
Thanks for the help
I'm too tired to sort out all your classes, so I just used hide() and show(). Feel free to translate it back into CSS-driven statements.
http://jsfiddle.net/isherwood/BbF9K/2/
jQuery(document).ready(function ($) {
$('li.menu-item-type-custom').on('click', function () {
$(this).siblings().find('ul.sub-menu').hide();
$(this).children('ul.sub-menu').show();
});
});
Here's a version with slide effects:
http://jsfiddle.net/isherwood/BbF9K/3/
You could also tighten up your jQuery like so:
http://jsfiddle.net/isherwood/BbF9K/4/
jQuery(function($) {
$('li.menu-item-type-custom').click(function () {
$(this).siblings().find('ul.sub-menu').slideUp();
$(this).children('ul.sub-menu').slideDown();
});
});

Categories