Develop Reference

javascript - don't add class for specific css class

I'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>

Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags

not working fancy box slider properly

I am working php application with code igniter framework and have attached fancybox js with the application.
this is my view file.
<?php foreach ($item['items'] as $key => $value): ?>
<li>
<a style="text-decoration:none;"
data-fancybox="<?php echo $value['group']; ?>"
href="<?php echo base_url(); ?>assets/img/products/<?php echo #$value['images'][0]; ?>">
<?php echo $value['name']; ?>
</a>
</li>
<!-- <div> -->
<?php unset($value['images'][0]); ?>
<?php if (empty(!$value['images'])) :?>
<?php foreach ($value['images'] as $img): ?>
<a data-fancybox="printer" href="<?php echo base_url(); ?>assets/img/products/<?php echo $img; ?>"></a>
<?php endforeach ?>
<?php endif; ?>
<!-- </div> -->
<?php endforeach; ?>
I need view
href="<?php echo base_url(); ?>assets/img/products/<?php echo $img; ?>"
in fancybox view but when I click slider items it is only view one image and not display movement arrow. my url display like this
http://localhost/technet/products#printers
how can I fix this problem?

It is not possible to help you without seeing your live page or at least seeing what html code you have. Because, how can we know what your php code produces?
I can only guess that <?php echo $value['group']; ?> outputs something different for each link and therefore grouping is not working.

Jquery tabs elements with same id

I am working with wordpress and jquery tabs and was wondering if somebody can help me. My example is similar to this one jQuery UI Tabs
Here is my php code
<?php if (!defined('FW')) die( 'Forbidden' ); ?>
<?php $tabs_id = uniqid('fw-image-tabs-'); ?>
<div class="fw-image-tabs-container" id="<?php echo esc_attr($tabs_id); ?>">
<div class="fw-image-tabs">
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<h3 class="fw-image-tabs-content"><?php echo $tab['tab_image_title']; ?></h3>
<img src="<?php echo esc_attr( $tab['tab_image']['url']); ?>">
</div>
<?php endforeach; ?>
<ul>
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<li><?php echo $tab['tab_title']; ?></li>
<?php endforeach; ?>
</ul>
<?php foreach ( $atts['image_tabs'] as $key => $tab ) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<p><?php echo do_shortcode( $tab['tab_content'] ) ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
And my script
jQuery(document).ready(function ($) {
$('.fw-image-tabs-container').tabs();
});
The trouble i am having is that i cannot hide the second <div class="fw-image-tabs-content"></div>. Both divs have the same class name and the same id. For some reason only the first id works. How can i show/hide the text for both divs?
Thanks

Have you tried this?
jQuery(document).ready(function ($) {
$('.fw-image-tabs').tabs();
});

JQuery tabs - unique ID for each container div

In my latest Wordpress project I'm trying to figure out how to use JQuery tabs in combination with the ACF repeater fields. The first one works but now I want multiple divs containing a few tabs on a single page. The following ones don't show the content in tabs (the script is not working on these). As far as I understand this is caused by the ID of the div (#tabs). Therefore I like to add something to this ID to see if this fixes my problem; like #tabs1, #tabs2, #tabs3, etc. I can't give each div it's own ID manually as they are created in a loop (ACF repeater field). Been searching for days and can't seem to find how to do this in the script. Hope someone can guide me in the right direction.
<script>
jQuery(document).ready(function($) {
$('#tabs').tabs();
})
</script>
The loop to create the tabs:
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
Here's an example of a website that has a set up kind of like what I'm trying to achieve... note that each section has a slide show with buttons (in my case the 'tabs') underneath to select a different slide show.
http://partnersandspade.com/studio/

I believe the problem lies here <div id="<?php the_sub_field('tab_title');?>">.
If your tab_title have spaces, comma, quotes (which is most likely since it's a title and not a slug) and you use it as an element id then this isn't valid and will likely cause some problem.
Use simple ids instead. tab-1, tab-2, tab-2 etc.,
e.g.
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<div id="#tab-<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<ul>
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $i++; ?>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>

UPDATE
Changing to class should work but if it doesn't I would suggest to change your ACF structure a bit. You could include the slider repeater in another repeater field "tabs" then you would be able to loop in the loop (docs - nested lops) and that way you will give each "tabs" an unique id. See the code below:
<?php if( have_rows('tabs') ): ?>
<?php $i = 1; while(have_rows('tabs') ): the_row(); ?>
<div id="tabs<?php echo $i++; ?>">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endwhile; ?>
<?php endif; ?>
I've misunderstood at the first time. Did you consider changing id="tabs" to class="tabs". This should solve the problem:
<script>
jQuery(document).ready(function($) {
$('.tabs').tabs();
})
</script>
Markup:
<div class="tabs">
IGONRE BELOW:
Add variable $i with value "1" and increase its value on the end on the loop.
Replace
<?php the_sub_field('tab_title');?>
with
tabs<?php echo $i;?>
All together this should give you unique id for each row.
<?php $i = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tabs<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; endwhile; ?>

This is where I'm at now...
I managed to give all tab wrappers (#tabs) it's own ID and all the tabs inside this wrapper will get a unique ID too.
<?php $tabsId = 1; while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<header class="article-header">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
</header>
<?php if( have_rows('slider') ): ?>
<div id="tabs<?php echo $tabsId; ?>">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tab<?php echo $tabId;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $tabId++; endwhile; ?>
<ul class="tabs">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $tabId++; endwhile; ?>
</ul>
</div>
<?php endif; ?>
<section class="entry-content cf">
<?php the_content(); ?>
</section>
</article>
<?php $tabsId++; endwhile; ?>
However I think I need to change the script somehow so it knows that I'm not targeting the #tabs div but I'm targeting #tabs1, #tabs2, #tabs3 etc. Here's the script I'm using as i'm using it. Is there way to change this so it runs on each #tabs.. div?
jQuery(document).ready(function($) {
$('#tabs1').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
})

How to keep current category tab remain open using ddaccordian.init?

I have list of categories, some have sub-category and some have sub-sub-category which are in such a way:
Main menu
sub menu
sub menu
I used ddaccordian.init to watch for open close events. All works fine, But now what I want is that current selected URL category must remain open.
I have tried the following code:
<script type="text/javascript">
ddaccordion.init({
headerclass: "question", //Shared CSS class name of headers group
contentclass: "theanswer", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedanswer", "openanswer"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
//togglehtml: ["prefix", "<img src='images/plus.gif' /> ", "<img src='images/minus.gif' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
and to get the current category activated i.e. must remain open I did this:
<a <?php if($_category->hasChildren()): ?>class="question"<?php endif; ?><?php if ($currentUrl == $this->getCategoryUrl($_category)): ?> class="current"<?php endif; ?> href="<?php echo $this->getCategoryUrl($_category) ?>">
<?php echo $_category['name']; ?>
</a>
<?php $potential1 = $_category->hasChildren(); ?>
<?php if($_category->hasChildren()): ?>
<?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<ul <?php if($_subcategories): ?>class="theanswer"<?php endif; ?>>
<?php foreach($_subcategories as $subcat): ?>
<li>
<a <?php if($subcat->hasChildren()): ?>class="question"<?php endif; ?><?php if ($currentUrl == $this->getCategoryUrl($subcat)): ?> class="current"<?php endif; ?> href="<?php echo $this->getCategoryUrl($subcat); ?>">
<?php echo $subcat->getName(); ?>
</a>
<?php if($subcat->hasChildren()): ?>
<?php
$_subcat = Mage::getModel('catalog/category')->load($subcat->getId());
$childrens = $_subcat->getChildrenCategories();
?>
<ul <?php if($childrens): ?>class="theanswer"<?php endif; ?>>
<?php foreach($childrens as $_childrens): ?>
<li>
<a <?php if ($currentUrl == $this->getCategoryUrl($_childrens)): ?> class="current"<?php endif; ?>href="<?php echo $this->getCategoryUrl($_childrens); ?>">
<?php echo $_childrens->getName(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
But I am getting no response on frontend :( Never mind if you think I am missing a foreach loop etc.
I have just pasted a portion of the code so tell me where I am wrong :(
Although i am getting the current URL correctly.

The accordion plugin you've chosen doesn't appear to have an option for keeping a section open so you would have to intercept that yourself and stop it. The only possible event it provides is onopenclose but that is called after slideUp has finished, which is useless.
You should pick another plugin which satisfies your needs.
Luckily Magento already comes with Prototype and it's own accordion class, you can replace or wrap it's sectionClicked method and stop the event there.
Accordion.prototype.sectionClicked = function(event) {
var element = $(Event.element(event)).up('.section');
if (!element.hasClassName('current')) {
this.openSection(element);
}
Event.stop(event);
};

This solved my problem, what i did was added this
<?php if ($this->isCategoryActive($_category)): ?>
instead of
if($currentUrl == $this->getCategoryUrl($_category)): ?> and added Css class at the bottom.
<div class="content-links">
<ul>
<?php $i=0; foreach ($catlist as $_category): ?>
<?php if($_category->getIsActive()): ?>
<li>
<a <?php if($_category->hasChildren()): ?>class="question"<?php endif; ?> href="<?php echo $this->getCategoryUrl($_category) ?>">
<?php echo $_category['name']; ?>
</a>
<?php $potential1 = $_category->hasChildren(); ?>
<?php if($_category->hasChildren()): ?>
<?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<ul class="<?php if($_subcategories): ?>theanswer<?php endif; ?><?php //if($currentUrl == $this->getCategoryUrl($_category)): ?><?php if ($this->isCategoryActive($_category)): ?> opened<?php endif; ?>">
<?php foreach($_subcategories as $subcat): ?>
<li>
<a <?php if($subcat->hasChildren()): ?>class="question"<?php endif; ?> href="<?php echo $this->getCategoryUrl($subcat); ?>">
<?php echo $subcat->getName(); ?>
</a>
<?php if($subcat->hasChildren()): ?>
<?php
$_subcat = Mage::getModel('catalog/category')->load($subcat->getId());
$childrens = $_subcat->getChildrenCategories();
?>
<ul class="<?php if($childrens): ?>theanswer<?php endif; ?><?php if ($this->isCategoryActive($_subcat)): ?> opened<?php endif; ?>">
<?php foreach($childrens as $_childrens):
?>
<li>
<a <?php if ($currentUrl == $this->getCategoryUrl($_childrens)): ?>class="current"<?php endif; ?>href="<?php echo $this->getCategoryUrl($_childrens); ?>">
<?php echo $_childrens->getName(); ?>
</a>
</li>
<?php
endforeach;
echo "</ul>";
?>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
</div>
<div class="clear" style="height:218px;"></div>
</div>
</div>
<div class="event-bot"></div>
</div>
</div> <!--inner right end here-->
<style type="text/css">
.opened { display:block !important;}
</style>