First I realise I'm talking about an external framework but please hear me out as I think it may be more of an html php issue (possibly JS). I am trying to incorporate this horizontal timeline into my web page as a school project:
https://codyhouse.co/gem/horizontal-timeline/
I am trying to print out results I got from an array. I am converting the datetime format to the same that is taken in.
Their method is as follows:
<ol>
<li>16 Jan</li>
<li>28 Feb</li>
<li>20 Mar</li>
<li>20 May</li>
............
</ol>
While mine looks like this:
<ol>
<?php foreach ($mile2[ "milestones"] as $key=>$value) { if ($key != 0) { ?>
<li>
<a href="#0" data-date="<?=date('d/m/Y',strtotime($mile2['milestones'][$key]['start_time']['date']));?>">
<?=d ate( 'd M', strtotime($mile2[ 'milestones'][$key][ 'start_time'][ 'date']));?>
</a>
</li>
<?php } else{ ?>
<li>
<a href="#0" data-date="<?=date('d/m/Y',strtotime($mile2['milestones'][$key]['start_time']['date']));?>" class="selected">
<?=d ate( 'd M', strtotime($mile2[ 'milestones'][$key][ 'start_time'][ 'date']));?>
</a>
</li>
<?php }} ?>
</ol>
The outputs are very different, this is a link to the demo https://codyhouse.co/demo/horizontal-timeline/index.html.
And this is how mine currently appears:
The first Problem I see in your code is that date is declared d ate even though im not shure if that is actually the problem. I suggest to var_dump() the contents of your array to rule out the possibility of sending in false data to your frontend.
Additionally you can make shure the javascript ist loaded after the DOM is done loading by using jQuery $(function()) as the javascript might trigger before your html is fully loaded.
Here some optimized code:
<ol>
<?php foreach ($mile2["milestones"] as $key => $value) : ?>
<?php if ($key != 0): ?>
<li>
<a href="#0"
data-date="<?= date('d/m/Y', strtotime($value['start_time']['date'])); ?>"
><?= date('d M', strtotime($value['start_time']['date'])); ?></a>
</li>
<?php else: ?>
<li>
<a href="#0"
data-date="<?= date('d/m/Y', strtotime($value['start_time']['date'])); ?>"
class="selected"
><?= date('d M', strtotime($value['start_time']['date'])); ?></a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ol>
Related
I'm creating dynamic menu. I wanted to highlight the menu once it is selected.
We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<?php
$i=1;
if(count($shipments) > 0)
{
foreach($shipments as $row)
{
$shipment_id = $row['id'];
$containerdest = $row['no']."-".$row['destination'];
?>
<li id="shipment<?php echo $shipment_id; ?>"><?php echo $containerdest; ?>
</li>
<?php $i++;
}
} ?>
<li>
Logout
</li>
</ul>
</div>
</div>
Change your html line with below line
<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a>
And write javascript code as below (assuming you have included jquery library file)
<script>
$(document).ready(function(){
var url = location.pathname;
var arr = mystr.split("/");
var id = arr[2];
$(#shipment'+id).attr('shipmentid');
$('.menu').removeClass('active'); //this will remove all active class after page loading
$('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu
});
</script>
I am just beginner in php and I am finding difficulty in the pagination code. According to my client he needs a pagination on top and as well in bottom. So for that I have written this code like in below : which the code states I have totally 8 pages to display and each page has 12 records. It will work in inline display till 8 pages but that looks odd. So my management said to do in this format << < 1 2 3 4 > >> and each time the page changes the next number should be displayed but it display only till 4 pages after that it doesn't show the next page.
<?php
$limit = 12;
$sql = "SELECT COUNT(*) FROM products WHERE type='1'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<div align="center">
<ul class='pagination text-center' id="pagination">
<?php if(!empty($total_pages)):for ($i=1; $i <= $total_pages; $i++):
if($i == 1):?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class='current' id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php else:?>
<li id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php endif;?>
<?php endfor;endif;?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</div>
And i have written this javascript code for changing the pagination like this
$(document).ready(function(){
//Loading Image Display
function Display_Load()
{
$("#loading").fadeIn(100);
$("#loading").html("<img src='loading.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("granite.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("granite.php?page=" + pageNum, Hide_Load());
});
});
Please can anyone help me where I am doing wrong and give me the guidelines to correct it.
I am displaying anchor tag in php loop. Now I am trying to get text of these anchor tags which is coming from PHP loop in Jquery but I am getting the wrong Result. Check the Screen Shots Below...
Anchor Tags
Wrong Result That I am getting
Now when I click on any link Like Baby Food Or Baby Furniture Or any other link then I am getting the text of all Anchor Tags instead of specific anchor tag which is clicked. For Example when I click on Baby Food then I want Just Baby Food to be displayed not all Anchor Tag Text. Please Help me. Below is my code
PHP
<h4>Related Category</h4>
<?php foreach($grouped_with_count as $relatedCat) { ?>
<b> <?php echo $relatedCat['industry']; ?> </b>
<li> <?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>
Jquery
function RelatedCatLink(){
var href = $('.GetHref').text();
console.log(href);
//alert($('.GetHref').attr('href'));
}
Please help me out. Thanks in advance..
Problem in your code
You are using class for selection. There will be multiple <a> with the same class.
Solution
Pass the element along with your function call
HTML
<?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
JS
function RelatedCatLink(elem){
var href = $(elem).text();
}
Working Demo
function RelatedCatLink(elem){
var href = $(elem).text();
alert(href);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
//PHP CODE
<h4>Related Category</h4>
<?php foreach($grouped_with_count as $relatedCat) { ?>
<b> <?php echo $relatedCat['industry']; ?> </b>
<li> <?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>
//JQUERY CODE
function RelatedCatLink(id){
var href = $('#GetHref-'+id).text();
console.log(href);
}
I'm working on a shopping cart and my client wants it to have one background when it's empty and another one when it has items. So here's what I got as a mark up:
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">
<span>
</span>
</a>
The changes on the data-count are being handled on server side and updated via php my problem is that I have no idea how to make jquery read the data-count and make the if statement so it reads
if data-count= 0 then add .empty
else data-count > 0 then add .full
Also, I'm not sure if I should use .addClass or .toggleClass from empty to full, I'm sorry, so far all my attempts to write jquery have failed and the handler for all that is on vacation so I would appreciate all the help.
A decision was made to change the plugin being used and now I tried to replicate this on the new one and cant seem to wrap my head around it to achieve it the new code available looks something like this:
<?php global $woocommerce; ?>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('View your shopping cart', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
$('a.cart').data('count')
Gives the value of count.
why don't you do this ? :
$cart = sprintf(_n('%d', cart::$cart_contents_count, 'mini-cart'), cart::$cart_contents_count);
if($cart >= '1')
{
?>
<a href="#" id="shopping-cart" data-count="$cart" class="trigger cart">
<span>
</span>
</a> <?php
}
else
{ ?>
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">
<span>
</span>
</a>
<?php
}
this way you do not need to use jQuery to hide elements that are not needed.
Edit my code to make it work please.
Edited for latest version.
Here is what I have:
<body>
<!-- visibility toggle -->
<script type="text/javascript">
<!--
function toggle_visibility()
{
if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
document.getElementById(window.event.srcElement.id+'menu').style.display='none';
}
else{
document.getElementById(window.event.srcElement.id+'menu').style.display='block';
}
};
//-->
</script>
Here are my divs (edited to show exactly what I have)
<ul class="lyrics"><h3>ALL LYRICS</h3>
<?php while ( have_posts() ) : the_post(); ?>
<li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
<div id="linksmenu"><?php the_content();?></div>
</li>
<?php endwhile; // End the loop. Whew. ?>
</ul>
Here is what happens:
Regardless which link I click on, only the text associated with the very last "the_content" displays.
Here is what I need:
Initially all the "child" divs are not visible.
When I click on "Title 1" link, the "Child text 1" will become visible.
When I click on "Title 2" link, the "Child text 2" will become visible and the "Child text 1" will become not visible.
This is going to be in a WordPress blog so the number of Title divs will change. There will always be only one child.
Thanks in advance!
the reason why your first div is toggled no matter where you click, is because you use the hard-coded id foo. Pass this to toggle_visibility instead of the literal 'foo' and inside toggle_visibility function find the div that you want to toggle (this is going to be the first child of the passed parameter).
It is doing this because you are calling the_content() twice. I am assuming your file looks like:
<?php get_header();
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<ul>
<li class="main"><?php the_title(); ?> <div class="child"><?php the_content(); ?></div> </li>
<li class="main"><?php the_title(); ?> <div class="child"><?php the_content(); ?></div> </li> <ul>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
You need to have two loops, but I can't supply detail without seeing more code. Read about multiple loops.
Throw the parameter away and build the id you want to set visible/invisible using the id of the element which triggers the event.
function toggle_visibility()
{
if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
document.getElementById(window.event.srcElement.id+'menu').style.display='none';
}
else{
document.getElementById(window.event.srcElement.id+'menu').style.display='block';
}
};
And as long as the thing you want to show always has a id+'menu' or whatever, you can show it with the function. (notice that the parent has id links and the child has id linksmenu )
<ul class="lyrics"><h3>ALL LYRICS</h3>
<?php while ( have_posts() ) : the_post(); ?>
<li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
<div id="linksmenu"><?php the_content();?></div>
</li>
<?php endwhile; // End the loop. Whew. ?>
</ul>