I have the following code that its been dynamically generated by a plugin, the plugin will create a "li" element for each team member, currently i have 150 members so it needs to add an auto increment ID. Thanks!
<ul id="dvteamgrid<?php echo esc_attr($random); ?>" class="dvteamgrid withanim">
<li data-filter-class='["gridall",<?php echo $filters; ?>]'>
<img src="<?php echo esc_url($thumb_url); ?>" alt="<?php the_title(); ?>"/>
</li>
This is how the html code looks like:
<ul id="dvteamgrid225306813" class="dvteamgrid withanim">
<li data-filter-class="["gridall","dvfilter5997", "dvfilter6007", "dvfilter6025";]">
<img src="/wp-content/uploads/2015/03/Abee-C.jpg">
</li>
</ul>
You need to loop through each li element and attach the auto incremented id.
var auto_inc_id = 0; //initialise value of auto incremented id to 0
$('ul.dvteamgrid li').each(function(){ //loop through each list element of ul
$(this).attr('id', auto_inc_id); //attach to current li an id attribute that has auto_inc_id as its value
auto_inc_id++; //increment auto_inc_id by one
});
Related
I'm pretty new to Jquery and writing a gallery with multiple pages and I have a problem with the Jquery selector.
I'm trying to select a img tag and a a tag, both tags have different class names and are in a .portfolio-item class.
What I've tried is
var countImages = $(".portfolio-item a img").length;
console.log(countImages);
var perPage = 8;
$('.image, .edit-post-link').css('display', 'none');
//$('.post-edit-link').css('display', 'none');
//$('.slider').children().slice(0, perPage).css('display', 'block');
$('.image, .edit-post-link').slice(0, perPage).fadeIn("fast");
//$('.post-edit-link').slice(0, perPage).fadeIn("fast");
function goTo(pageNumb){
var startFrom = pageNumb * perPage;
var endOn = startFrom + perPage;
//$('.post-edit-link').fadeOut("fast").delay( 200 ).slice(startFrom, endOn).fadeIn("fast");
$('.image, .edit-post-link').fadeOut("fast").delay( 200 ).slice(startFrom, endOn).fadeIn("fast");
}
var buttons = countImages/perPage;
console.log(buttons);
for (var i = 0; i < buttons; i++) {
var number = i + 1;
$(".pagination").append("<li><a class='navigation-number'>"+number+"</a></li>");
//console.log(number);
};
$('.navigation-number').on('click', function() {
var pageNumber = $(this).text();
goTo(pageNumber -1);
});
this only results in 4 images on each page, but I wanted 8 on one page
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="portfolio-item">
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('medium', array('class' => 'img-responsive image')); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div class="edit-post-link">
<?php edit_post_link(); ?>
</div>
</div>
Edit 3:
<div class="col-md-3 portfolio-item">
<!-- post thumbnail -->
<a href="http://www.q-mediaspot.nl/blog/cinema-4d/cinema-4d-vaas/" title="Cinema 4d Vaas" style="display: none;">
<img src="http://www.q-mediaspot.nl/blog/wp-content/uploads/2016/03/placeholder1-250x150.jpg" class="img-responsive image wp-post-image" alt="placeholder1"> </a>
<!-- /post thumbnail -->
<div class="edit-post-link">
<a class="post-edit-link" href="http://www.mywebsite.nl/blog/wp-admin/post.php?post=4&action=edit">Edit This</a>
</div>
This
$('.portfolio-item').children('a, img')
var $els = $("img.className, a.otherClassName");
This:
$(".portfolio-item a img")
Will select img elements which are inside of a elements which are inside of any element with the portfolio-item class.
It sounds like you want to select a and img elements which themselves have that class. Which would be something like this:
$("a.portfolio-item, img.portfolio-item")
Or, to break it down descriptively (not an actual selector in this case):
$("[tag].[class of that tag], [another tag].[class of that tag]")
Any tag, any class, however you want to define it. Specifically note that there is no space between the tag and the class in this selector. That's because with a space it means "the second part as a child of the first part" whereas without a space it means "the second part as a modifier of the first part".
Edit: Or, perhaps I misunderstood. Do you mean that the a and img tags are themselves descendants of some other element of the portfolio-item class? In that case, it would be more like this:
$(".portfolio-item a, .portfolio-item img")
That is, "all a elements which are inside any .portfolio-item element, and all img elements which are inside any .portfolio-item element".
I have a number of products, which will be displayed in different categories when ticked.
Now, what I am trying to achieve, is certain images to be shown depending on which categories are clicked.
Example.
IF I clicked category A, then an image (A) would be shown.
I am doing this as the code shows below.
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$terms = wp_get_post_terms( get_the_id(), 'type' );
$term_class = '';
if ( isset( $terms[0] ) ) {
$term_class = $terms[0]->slug;
}
?>
<ul>
<li class="linoheight" style="margin-left:45px !important;"><img class="<?php echo $term_class; ?>-new" src="<?php bloginfo('stylesheet_directory'); ?>/images/acoustic-icon-small.png" alt="" width="30px" height="30px" style="display:none;"></li>
<li class="linoheight"><img class="<?php echo $term_class; ?>-new" src="<?php bloginfo('stylesheet_directory'); ?>/images/hard-wired-icon-small.png" alt="" width="30px" height="30px" style="display:none;"></li>
<li class="linoheight"><img class="<?php echo $term_class; ?>-new" src="<?php bloginfo('stylesheet_directory'); ?>/images/radio-icon-small.png" alt="" width="30px" height="30px" style="display:none;"></li>
</ul>
So, this will get the checkbox which is selected, and then create the class 'categoryA-new.
In the CSS, this category will be display:block, which displays the icon.
Now, the issue I am having, is that <?php echo $term_class;?>-new is only getting one of the categories, which means if category A is selected, then category B and C are still showing images.
I have a feeling this is an issue with the loop, does anyone have any ideas?
You just need to hide and show the object if onclick then a unique id of that item should be passed to some jquery or javascript function and they will show the item eg,
if I have
item 1item 2item 3
these three fields have unique id,s in them like
for 1- 2- etc you need to use jquery hit like this after placing some unique id at the ul like first to catch the in between li,s :
$("#list-of-items li").click(function(){
var current_clicked_li_index = $(#list-of-items li).index(this);
// now use .each loop in jquery
$("#list-of-items li img").each(function( Loopindex ) {
if(current_clicked_li_index != Loopindex){
$(this).hide();
}else{
$(this).show();
}
});
});
Note: don't forget to use the jquery library.
Use tag to show/hide div when click when JavaScript is disabled. Tried adjusting following example Show hide divs on click in HTML and CSS without jQuery but that doesn't seem to work.
From this question How to detect if JavaScript is disabled? i assumed that there isn't a convenient way to check if JS is disabled like:
if(JS is disabled){
// show <a> tag that words with jQuery to display div
} else {
// show label to show/hide div onclick
}
Any ideas will be welcomed.
Question How to make "a" tag to show a mini login form stored in "div" when JavaScript is disabled. Because when it's enabled it ?
Below is coresponding code of tag "a" and "div".
<ul class="nav nav-bar pull-right" >
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" for="_1" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<?php
$form_sm = $this->form_sm;
$form_sm->prepare();
echo $this->form()->openTag($form_sm);
?>
<dl class="form">
<dd><?php
echo $this->formElement($form_sm->get('email'));
echo $this->formElementErrors($form_sm->get('email'));
?></dd>
<dd><?php
echo $this->formElement($form_sm->get('password'));
echo $this->formElementErrors($form_sm->get('password'));
?></dd>
<li class="divider" style="width:78%"></li>
<dd><?php
echo $this->formElement($form_sm->get('send'));
echo $this->formElementErrors($form_sm->get('send'));
?></dd>
<?php echo $this->form()->closeTag() ?>
</div>
</li>
</ul>
It uses a Bootstrap3 and Zend Framework components and by clicking "a" tag following line
<li class="dropdown" id="menuLogin">
change to
<li class="dropdown open" id="menuLogin">
You can use checkbox hack to do it. Since it is pure CSS there are some limitations. The elements you want to hide have to be siblings or children of the label you will use so you can select them when you get the :checked status. You can't go up to a element's parent in CSS.
Here is an example: http://jsfiddle.net/carloscalla/msaccf9w/
HTML:
<label class="hide_action" for="chk1">Action toggle</label>
<input id="chk1" type="checkbox" />
<div>Sibling div</div>
CSS:
.hide_action{
display:block;
background-color: yellow;
}
.hide_action + input{ /* or #chk1 */
display:none;
}
.hide_action + input + *{ /* or #chk1 (selector for what you want to hide) */
display:none;
}
.hide_action + input:checked + *{ /* or #chk1:checked (selector for what you want to hide) */
display:block;
}
You can not go up a parent and hide other element since you won't be able to get a selector for it. You can go down in children or siblings.
In this example I use + input to select the adyacent input to the label if you don't want them to be together you can identify it by an id as in the CSS comments.
i have some images in an un ordered list.
<ul>
<li id='chain'>
<a href="">
<span class='fade'></span>
<div class='title'>TITLE</div>
<img src="img/bike/chain.jpg" alt="" width="550" height="440" />
</a>
</li>
<li id='grips'>
<a href="">
<span class='fade'></span>
<div class='title'>TITLE</div>
<img src="img/bike/grips.jpg" alt="" width="275" height="440" />
</a>
</li>
<li id='tires'>
<a href="">
<span class='fade'></span>
<div class='title'>TITLE</div>
<img src="img/bike/tires.jpg" alt="" width="175" height="220" />
</a>
</li>
</ul>
i need css that will give the span and div in each set the same width like this expressed in a loop, NOT hand written every item
#chain .fade, #chain .title {width:550px}
#grips .fade, #grips .title {width:275px}
#tires .fade, #tires .title {width:175px;}
question: could i dynamically create css using jQuery? if not how can i create this css and assign the width value using PHP?the list items will change often and i wish to use a loop or .each statement.
in other words i dont want to make a list of each item
is there a way to pull the li ID and the IMG dimension and dynamically create css
pseudo code:
var w = $('ul li').each(find img width).assign it to> .css(this .fade, this .title {width:w + "px"});
or
should i look into php to echo the output of each ul li IMG?
jQuery easily allows you to create inline CSS styles (styles that are applied to each element).
$('#chain, #grips, #tires').each(function(index, element){
$('.fade', element).width( $('img', element).width() );
});
Here is what this script is doing
.each() iterates over all the selected elements. index, as the name suggests, is the index of the array being iterated over. element is the current element being iterated over.
$('.fade', element) this looks for the class of fade within the element.
.width() will either get or set the width of an element. It will be set if a parameter is passed into it, example: .width(15). (This will set the width of the element to 15 pixels wide.) It retrieves the width of an element if nothing is passed into it, example: .width().
$('img', element).width() retrieves the width of the img tag inside the element. Because this value is being passed into $('.fade', element).width(), it will set elements with the class of fade to width of the img.
This is how to do it with jQuery:
$('li').each(function(){
var $li = $(this);
var $img = $li.find('img');
var width = $img.attr('width');
$li.find('.fade, .title').css('width', width + 'px');
});
Or get rid of the jQuery, and use just css:
li { float: left; clear: left; }
http://jsfiddle.net/u2HNx/2/
ok, try this:
$('li').each(function(){
var width = $(this).find('IMG').width();
$(this).find('.fade').width(width);
$(this).find('.title').width(width);
});
$("#chain .fade,#chain .title").css('width','550px');
I am trying to make prev - next sliding between content on a page. I have the following markup:
<div class="right">
Previous
Next
</div>
<?php foreach ($chapters as $chapter) : ?>
<div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none">
<div class="left">
<h1 class="hmc"><?php echo $chapter->title; ?></h1>
</div>
<ul class="attachments scroll-pane">
<?php foreach ($chapter->files as $file) : ?>
<!--video zone-->
<?php if ($file->extension == '.mpeg') : ?>
<li class="wide">
<img src="" />
<span class="duration hmc"><?php $file->duration; ?></span>
<h1 class="hmc">The title is a title</h1>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
Basically I generate some content dynamically with PHP. I have wrapped each content generated in a div and I do not display it only with jQuery.
Now I tried doing something like:
$('body').on('click', 'a#next-button', function(){
$('#chapters-container-').next();
});
but ofc it is not working as I want it. How can I make the content change when i toggle between prev and next button based on the markup I am generating.
I think that you don't get what
$('#chapters-container-').next();
does. This, according to the documentation,
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
so you are just selecting the next element after the element with id = chapters-container-
Youy should do something like:
$('body').on('click', 'a#next-button', function(){
var visisbleContainer = $('div[id^=chapters-container-]:visible');
visisbleContainer.next().show();
visisbleContainer.hide();
});
when user clicks on next button get the visible div( chapter ) id attribute.You would receive the chapter id add 1 to this chapter id and generate another string such as chapters-container-2.
Now hide the current div and show the div of the generated string i.e $('#'+ newstring).show()