append display:none to subsequent li on loop - php

We have a slider, we want to use. Dead simple stuff. But I need it to become a little more dynamic.
We have a blog roll, which runs and displays on a php loop, basically.. if we set the loop to 6.. it generates 6 sets of divs.
Now my thought is, put the DIV which displays the blog post within a slider, then we can display subsequent posts as each div refreshes.. kinda thing.. I am sure you know what I mean.
I have made a simple fiddle...
http://jsfiddle.net/ozzy/yEB4V/
Essentially, we only need ONE <li> to </li>
Reason is, we can plonk our php around the LI tags so that the loop works, and the slides get updated accordingly..
The issue I have is, the first time the LI is fired, it must not have display:none , for obvious reasons.. all the otehr subsequent occurences of the LI tags are hidden.
As you can see from the fiddle, all the LI tags have display none, apart from the first LI tag, so it shows that first, then loops to next and each one is updated.
script here;
var slider = function() {
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(1000);
}
});
};
var interval = setInterval(slider, 2000);
$('#testimonials .slide').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(slider, 2000);
});
I wonder if anyone knows how to get around this... As our php code will be something like:
<ul id="testimonials">
<!-- OUR PHP LOOP-->
<li class="slide">
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<!-- // PHP LOOP -->
</ul>

You could use jquery to make the first child visible.
$(document).ready(function(){
$('#testimonials :first-child.slide').show(0);
//.. rest of the stuff
});
And in the php, set all the divs to display:none

use:
<ul id="testimonials">
<?php foreach($lis as $li) { ?>
<li class="slide"<?php if($li == $lis[0]) echo ' style="display:list-item;"' ?>>
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<?php } ?>
</ul>

Related

JQuery show and hide data from a query in list format that displays parent clickable list that opens its child list

I am going to try and explain this as clearly as I can.
I am working with some script from #Prabu Parthipan which uses JQuery to open and close child lists of parent lists.
I have a query that returns an array of data. In the array I have two fields:
SeqHeader
SeqText
Each SeqHeader has variable number of SeqText items.
Example:
SeqHeader:Bedroom Door & Frame (inside & Outside)
SeqText:Chipped - Scratched - Stained - Needs Paint
SeqText:Chipped - Threshold - Sand/Stain - Repair
SeqText:Door Hinges - Squeaks/Sticks - Requires Oil/Repair
SeqHeader:Entry Door Lock
SeqText:Room Door Handle/Strike plate - Not Secure/Not Working
SeqText:Security Door Chain - Not Working
SeqText:Room Door Dead Lock - Not operating Correctly
SeqHeader:Bathroom Door Lock
SeqText:Door Handle/Strike plate - Not secure/Not Working
SeqText:Door Lock - Inoperable
I could display the above as rows using a PHP do while loop but I though it would be better to produce a list with sublists that open and close.
So adopting Prabu Parthipan code
#Prabu Parthipan code is:
$(document).ready(function(){
$('ul li.expanded > a')
.attr('data-active','0')
.click(function(event){
$('.submuneu').hide();
if($(this).attr('data-active')==0){
$(this).parent().find('ul').slideToggle('slow');
$(this).attr('data-active','1');
}
else
$(this).attr('data-active','0');
});
$('a.on').click(function(){
$('a.on').removeClass("active");
$(this).addClass("active");
});
});
In the body of the page I have:
<?php do { ?>
<tr>
<td colspan="3" class="imaindateselleft_padding">
<div class="leftsidebar_templ1">
<ul id="nav">
<li class="expanded"><a class="on"><?php print $row_AuditItems['SeqHeader']; ?></a>
<ul class="submuneu">
<li><a><?php print $row_AuditItems['SeqText']; ?></a> </li>
</ul>
</li>
</ul>
</div>
</td>
<td class="imaindatesel"> </td>
</tr>
<?php } while ($row_AuditItems = mysql_fetch_assoc($AuditItems)); ?>
As it is when the page is loaded it displays a SeqHeader for each SeqText. They are clickable and when clicked they open up the sub list.
What I want to do is have all the SeqText items relating to thier parent SeqHeader as a sublist so when the SeqHeader is clicked all the related sub items show, and click again so they hide.
Sorry if I have rabbled on.
Any help would be great and I thank you for your time.
Cheers.
Wouldn't it make more since to make a simple to use multi-dimensional array of the items you're getting? As I gather, you're using the deprecated mysql call to get rows of info from a DB. Each row will have the Header and the Text associated. Thus, if you call inline by each, row, you'll have a header for each row. Try the following instead.
<?php
$res = array();
while ($row = mysql_fetch_assoc($AuditItems)) {
if ($row['SeqHeader'] && $row['SeqText']) {
if (!$res[$row['SeqHeader']]) $res[$row['SeqHeader']] = array();
$res[$row['SeqHeader']][] = $row['SeqText'];
}
}
?>
<ul id="nav">
<?php foreach ($res as $k => $v): ?>
<li class="expanded">
<a class="on"><?php echo $k; ?></a>
<ul class="submuneu">
<?php foreach ($v as $item): ?>
<li><a><?php echo $item; ?></a></li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
I believe you're biggest problem now is in HTML layout. But this should help that. Fix that and then determine if the JS is still a problem, though what you want in JS is relatively easy.
Example of Easy JavaScript for dealing with opening and closing submenus using HTML Markup as:
UL > LI > A + UL > LI > A
// simply jQuery shorthand for document.ready = function() { ...
$(function() {
// the following is how to add events so that they work for even "dynamically" created elements.
// That is, elements created after code/page load.
$(document).on('click', 'li a', function(e) {
e.preventDefault(); // ensure it doesn't try to follow a link
// close all possible siblings and cousins
$(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
// slide toggle current possible sub menu
$(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
});
// uncomment the following line to ensure all sublist are closed,
// however, i strongly recommend this should be done using css
// $('ul ul').hide();
// change cursor for li elements having a sub menu
$('li').each(function(i) {
if ($(this).children('ul').length) { // test if it has a submenu
$(this).css({ cursor: 'pointer' });
// just for this test, i'm going to add a background color to A tags on li's having a submenu
$(this).children('a').css({ backgroundColor: '#f8f800' })
}
});
})
/* this simply hides all submenus outright */
ul ul { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><a>test1</a>
<ul>
<li><a>bleh</a></li>
<li><a>bleh Blah</a>
<ul>
<li><a>blo</a></li>
<li><a>bli</a>
<li><a>blu</a>
<ul>
<li><a>orange</a></li>
<li><a>fruit</a></li>
<li><a>apple</a></li>
</ul>
</li>
<li><a>ble</a>
<ul>
<li><a>gravy</a></li>
<li><a>steak</a></li>
<li><a>bra</a></li>
</ul>
</li>
</li>
<li><a>testCc</a></li>
</ul>
</li>
</ul>
</li>
<li><a>test2</a>
<ul>
<li><a>testPrev</a>
<ul>
<li><a>testA</a></li>
<li><a>testB</a></li>
<li><a>testC</a></li>
</ul>
</li>
<li><a>testNext</a>
<ul>
<li><a>testAa</a></li>
<li><a>testBb</a>
<li><a>testPrev2</a>
<ul>
<li><a>testA1</a></li>
<li><a>testB2</a></li>
<li><a>testC3</a></li>
</ul>
</li>
<li><a>testNext4</a>
<ul>
<li><a>testAa4</a></li>
<li><a>testBb5</a></li>
<li><a>testCc6</a></li>
</ul>
</li>
</li>
<li><a>testCc</a></li>
</ul>
</li>
</ul>
</li>
<li><a>test3</a>
<ul>
<li><a>blah</a></li>
</ul>
</li>
</ul>
You could try:
$(document).ready(function(){
$('ul li.expanded > a')
.attr('data-active','0')
.click(function(event){
$('.submuneu').hide();
if($(this).attr('data-active')==0){
$(this).parent().find('ul').slideToggle('slow');
$(this).attr('data-active','1');
}
else
{
$(this).attr('data-active','0');
}
});
$(document).on('click', 'a.on', function(){
$('a.on').removeClass("active");
$(this).addClass("active");
});
});
Some -code generated- elements need to be "listen" using $(document).on('event', 'element', function(){...});.
Hope it helps.

Php Wordpress Gallery

i'm trying to get a slider to feature my images that are in a post. I currently have everything set up but I only have one li element that is showing all three images. I'd love to have three li elements each showing one image but I can't figure out how to automatically isolate each image. Any help would be greatly appreciated!
you can see the current state here:
http://mksgear.com/shop/test-product/
this is what my code looks like:
<ul class="slides">
<li class="slide">
<?php if ( has_post_thumbnail() ) : ?>
<?php echo do_shortcode('[gallery option1="value1"]'); ?>
<?php else : ?>
<img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />
<?php endif; ?>
</li>
</ul>
I'm not sure I understand your question correctly, but I'll give an answer a go. If I have misunderstood what you're trying to do please clarify it for me and I'll update my answer.
You can use itemtag="li" inside the gallery shortcode to wrap each image in an li. You'd need to remove your <li class="slide"> line of code, and maybe use jQuery to add the "slide" class back to the generated li tags. So you could do something like this:
Also, does your code render the gallery when using the : in the if/else statement?
<script>
jQuery(document).ready(function() {
jQuery("#slides li").addClass("slide");
});
</script>
<ul class="slides">
<?php if ( has_post_thumbnail() ) { ?>
<?php echo do_shortcode('[gallery itemtag="li" option1="value1"]'); ?>
<?php } else { ?>
<img src="<?php get_bloginfo( 'stylesheet_directory' ); ?>/images/thumbnail-default.jpg" />
<?php } ?>
</ul>
Add this you your footer, you can add it inside the same document.ready as the jQuery to add the class slide. Just copy and paste this on a new line right after jQuery("slides li").addClass("slide");. You can adjust the height, width, or any other options in this call if you need to. This will hopefully work.
jQuery("#slides").advancedSlider({
width: 900,
height: 460,
responsive: 1,
skin: 'light-round'
});

How to do for each div its own trigger

for example i have:
<?php foreach($query as $q): ?>
<div class="item">
<?php echo img($q->images); ?>
</div>
<?php endforeach; ?>
so this code renders 5 divs in a line, each line 5 divs, and this code:
<?php foreach($url->result() as $u): ?>
<script>
$(document).ready(function(){
$('div.item').click(function(){
setTimeout(function(){
window.open('<?php echo $u->url; ?>');
}, 500)
})
})
</script>
<?php break; ?>
<?php endforeach; ?>
doesn't matter what div we click, it will open a new window with the same url, but what if I have 5 different urls in my database, and I want that when we click the first div of each line it open one window with the first url and when we click the second it will open the second url
i thinked that this is possible by using classes, for example class="item1", item2, item3, item4, item5, but what if we have only 3 urls, not 5, in this case how can i make that the first three divs will open the first 3 urls, but the 2 left, will open the last, it is the 3 div
sorry for my poor english, maybe you have an idea of how to do this, thanks!
ps: i am using codeigniter
Instead of a class you can have id like item_1, item_2 etc. for each of the division and in javascript you can setup listeners in each of the divs separately.
<?php $index = 0;?>
<?php foreach($query as $q): ?>
<div id="item_<?php echo $index++;?>">
<?php echo img($q->images); ?>
</div>
<?php endforeach; ?>
For Javascript the code goes as:
<?php $index = 0;?>
<?php foreach($url->result() as $u): ?>
<script>
$(document).ready(function(){
$('#item_<?php echo $index++;?>').click(function(){
setTimeout(function(){
window.open('<?php echo $u->url; ?>');
}, 500)
})
})
</script>
<?php break; ?>
<?php endforeach; ?>
2 options i can think of. first is to add the url as a data attribute of the div so data-url="url here" then you can just use $(this).attr('data-url') to get the link in the javascript action (may even be able to use data() but not sure on IE compatibility).
Second option would be to have a hidden anchor in the div, then in the javascript action you can just select the anchor within the clicked div to get the URL

How to link to a specific part in the same page with jquery and php?

I know to link to a part in the same page like :
<a href='#A'>A</a>
<a name='A'>Here is A</a>
But when I designed it with jquery and php, ı have a problem. My design is like :
There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.
Here is the code :
<div class="content_letters">
<ul>
<?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
"J","K","L","M","N","O","P","R","S","Ş","T",
"U","Ü","V","Y","Z");
for ($i=0;$i<27;$i++) {
echo "<li><a id='letter_{$array_letter[$i]}'
href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>";
}
?>
</ul>
</div>
<?php
for ($i=0;$i<27;$i++) {
?>
<div class="content_letter_block">
<div class="text">
<div class="show_hide">
<a class="button" id="
<?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
</div>
<a name="<?php echo "letter_".$array_letter[$i].'">';?>
<?php echo $array_letter[$i]; ?></a> starts from here</div>
</div>
</div>
<?php } ?>
<div style='display:none' id='<?php echo "item_".$array_letter[$i];?>'>
Here is item...
</div>
Here is the jquery code :
$(document).ready(function() {
// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {
// split the letter out of the ID
// of the clicked element and use it to target
// the correct div
$("#item_" + this.id.split("_")[1]).toggle();
});
$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();
});
});
Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.
To scroll with jQuery to a specific ID in your page, use
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
You can specify an anchor in your url as well.
<a href="your-page.html#k" />
When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">

prev - next dynamic content display with jquery

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()

Categories