I'm trying to produce list of recently added item in cart and the code goes like this
<ol style = "overflow: -moz-scrollbars-vertical; overflow-y: scroll;">
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
</ol>
I'm getting the items but the scroll not working. Please help me. I'm a budding developer.
If you want to have vertical scroll after certain height of ol container use below listed code
<ol style = "overflow-y: scroll;">
use overflow:auto property of css instead of scroll, and give some height for your list.
Specify a height there like this
<ol style = "overflow: -moz-scrollbars-vertical; overflow-y: scroll;height:50px;">
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
</ol>
Related
I am currently trying to tweak the item.php file into displaying the extra fields separately instead of in a group. I found som code snippets here & there, not really helping as I think they may be outdated.
For instance: This page:
http://steffenjungersen.moloch.dk/nugent-be-goode
I would like "Info" to show on top of the item underneath the bold intro-text.
Also, I would like the "Karakter" (a drop down menu extra field) to display as stars from 1-6
Using the category names I gave these extra fields, I came up with this for the "Karakter" one in item.php:
<?php if(isset($this->item->extra_fields[rating]) && ($this->item->extra_fields[rating] >= 0 || $this->item->extra_fields[rating] <=6)): ?>
<span class="starsbox stars<?php echo $this->item->extra_fields[rating]; ?>"></span>
<?php endif; ?>
And then this in my k2.css file:
.starsbox {
width: 96px;
height: 16px;
display: inline-block;
background: url(images/stars.png) no-repeat;
}
.stars6 {
background-position: 0px 0px;
}
.stars5 {
background-position: -16px 0px;
}
...etc
That didn't work.
Similarly, I tried calling the "Info" field into an independent position and placing it at the top. No reaction.
So i removed the whole item->extra_fields as $key=>$extraField): ?> block and then the extra fields just went away.
Can anyone point me in the right direction here?
Thank you :-)
-astrid
Okay. I got some help from my friends. Here's how far it got us (if anyone should wonder).
In order to have the extra fields displayed independently, you need to split them up. So replace the "foreach ..." line in you item.php with this:
<!-- START: Call to prepare extra fields -->
<?php
//convertArray to use ids as key
$extrafields = array();
foreach($this->item->extra_fields as $item)
{
$extrafields[$item->id] = $item->value;
}
?>
<!-- END: Call to prepare extra fields -->
Then, to call the extra field you need in, do this:
<?php if(isset($extrafields[X]) === true):?>
<?php echo $extrafields[X]; ?>
<?php endif; ?>
Where X is the numeric ID of the extra field.
Now here comes the fun part. I wanted to create a 1-6 stars rating system for my client who is a music journalist. He should be able to select a rating from a dropdown, and this value should be displayed as stars in the item view.
I decided to use the css and sprite based article rating system which comes with K2 - then I could "recycle" the nice star images and the css already created.
Heres how it looks:
<?php if(isset($extrafields[3]) === true):?>
<ul class="itemRatingList">
<li class="itemCurrentRating" id="itemCurrentRating<?php echo $this->item->id; ?>" style="width:<?php echo round($extrafields[3]*100/6); ?>%;"></li>
<li><?php if(isset($extrafields[3]) == 1):?>1</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 2):?>2</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 3):?>3</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 4):?>4</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 5):?>5</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 6):?>6</li><?php endif; ?>
</ul>
<?php endif; ?>
When I at some point can manage to get my hands down, I will look into replacing the a tags with span or something. And I might get around to correcting the text thing. But now it works.
Best regards,
Astrid
I want to display 30 same div. So I am taking for loop with showing 30 div. Now I want div in only one line. If the div is out of screen then it will show horizontal scroll bar.
The code is:
<div id="sort-able" >
<?php for($j=0;$j<30;$j++){?>
<div class = "dragg-able" >Home - <?php echo $j;?></div>
<?php } ?>
</div>
<div id="sort-able" style="width: 100%; overflow-x: scroll; white-space:nowrap;" >
<?php for($j=0;$j<30;$j++){?>
<div class = "dragg-able" style="display:inline; ">Home - <?php echo $j;?></div>
<?php } ?>
</div>
Example: http://kelostrada.pl/test.php
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'
});
My goal is to create a dynamic list of links next to each other (not on top of each other). So far I have the links outputting correctly using Simplepie and an Atom datasource but for some reason my output has a linebreak between each new item in the for each statement. Is it possible to skip the line break and put the output items next to each other instead? I am not getting any errors, just not getting my goal output. Please help this is making me age at an exponential rate :)
<body>
<?php
foreach ($feed->get_items() as $item):
?>
<div class="item"><?php echo $item- >get_title(); ?></div><?php endforeach; ?>
</body>
Put the links in a <ul> (Unordered list element) with style of float:left like so
<body>
<ul>
<?php
foreach ($feed->get_items() as $item):?>
<li class="item"><?php echo $item- >get_title(); ?>
</li>
<?php endforeach; ?>
</ul>
</body>
I am trying to integrate a small section on an existing website, my problem seems simple, but I can't seem to get my head around it. Here is how I want it to look like:
alt text http://img691.imageshack.us/img691/329/layouth.jpg
Blue = #pagecontainer
Red = #sectioncontainer
Yellow = .post
pagecontainer { height: 100%; width: 900px;}
post container {width: 900px;}
.post {width: 210px;}
Four posts are getting pulled in from WordPress using:
<?php if (have_posts()) : ?>
<?php query_posts('category_name=Category&posts_per_page=4'); ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<div class="post">
<?php the_content() ?>
</div>
<?php endwhile; ?>
The posts will be a fixed width, but a varied height. The problem is, I cannot put spacers in-between, without the last post pushing a div underneath, and I cannot use margins because the first and last div are bumped up against the page container.
I could probably use something like
.post {margin-right: 20px;}
.post:last-child {margin: 0 !important;}
...but this just seems messy and I would rather avoid using the child pseudo selectors.
Any ideas on a tidier solution?
You can use a $count
Something like:
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<?php $count++; ?>
<?php if ($count < 5) {
$class = 'post';
} else {
$class = 'post-last';
} ?>
<div class="<?php echo $class; ?>">
<?php the_content() ?>
</div>
<?php endwhile; ?>
Then just set your 'post' class in the CSS to have the margin of 20px and 'post-last' to not have a margin
Try to use margin-based solution, but instead of :last-child trick that is unfortunately isn't cross-browser, set parent's margin at right side to equivalent negative value:
.post {margin-right: 20px;}
.secioncontainer {margin-right: -20px;}
Also make sure that there will be no spaces in-between of the .posts. You could modify the markup so that it is written in one line without spaces:
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?><div class="post"><?php the_content() ?></div><?php endwhile; ?>
Or use CSS technique like:
.secioncontainer {font-size: 0px;}
.post {font-size: /*your normal value*/;}