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.data(): set values from php

I have some images that I create using data from a MySQL database. The data in the database are a title and a description. This is not visible on the website until a user clicks the image. Javascript then loads it in some other place, not anywhere near my image.
My problem is the accessing of this data. I create my elements in PHP with this structure:
<div class="image-container">
<img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
<div class="title" style="display: none;"><?php echo $title; ?></div>
<div class="description" style="display: none;"><?php echo $description; ?></div>
</div>
When the image is clicked, I call for the data like this:
$('.image-container').click(handle_image_click);
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('.title').html();
var description = jQuery(e.currentTarget).find('.description').html();
(...)
}
Allthough this works, I don't find this a very 'clean' solution. It requires me having to hide div elements and 'store' data in them. I know you can store data to elements in jQuery using the following code:
$('#myElement').data('someName', 'someValue');
Now my question is: is there any way to not have to create the div elements in php (as seen in code block 1), but directly add the description and title to the 'data'-property of the element, ready to be fetched by javascript/jQuery?

you can use the data-* html5 attribute to store data
<div class="image-container" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>">
<img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
</div>
then in the handler
$('.image-container').click(handle_image_click);
function handle_image_click(e) {
var title = jQuery(this).data('title');
var description = jQuery(this).data('description');
(...)
}

yes you can.. using html5 data attribute
<img src="<?php echo $url; ?>" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>" alt="<?php echo $title; ?>" />
and fetch it with jquery using data()
...
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('img').data('title'); //gives title
var description= jQuery(e.currentTarget).find('img').data('description'); //gives description
....

Number of products displayed in HelloSlide homepage block in Magento 1.4.2

http://bit.ly/bsydBA
I've widened the product slider displaying boots to be full page width but I'm not seeing how to expand the number of products being displayed neither vía CSS or the code in featured.phtml (below). I also haven't found anything in the admin which would let me set any parameters.
The site just came to me after a variety of prior developers got under the hood so I'm just wrapping my head around any changes made to core files (yes, they didn't use /app/code/local/).
Has anyone worked with theme or see where I might be able to make the required adjustment?
Thanks in advance.
<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection. Please provide a category ID.') ?>
</div>
<?php else: ?>
<?php // Grid Mode ?>
<ul id="featured" class="jcarousel-skin-tango">
<?php $_collectionSize = $_productCollection->count() ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%4==0): ?>
<?php endif ?>
<li><a class="preview" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300, 300); ?>" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(105, 105); ?>" width="105" height="105" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</a> </li>
<?php if ($i%4==0 && $i!=$_collectionSize): ?>
<?php endif ?>
<?php endforeach ?>

I solved the issue. Turns out the site was using GTSpeed to minify the JS and CSS and cache them so the changes that I made in Firebug just didn't appear.
Once I figured this out and disabled it was a snap, just needed to change
.jcarousel-skin-tango .jcarousel-container-horizontal for the outer container
.jcarousel-skin-tango .jcarousel-clip-horizontal for the inner container

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>