I have designed a site.
as you can see the learnmore image isnt getting on top of the slideshow images.
u have the following php code
<?php
$directory = 'uploads';
$learnmore_img_path='learnmore';
echo'<div style="position: relative; ">';
try {
// Styling for images
echo "<div id=\"myslides\" style='position: relative; z-index:99999;'>";
foreach ( new DirectoryIterator("../" . $directory) as $item ) {
if ($item->isFile()) {
$path = "/" . $directory . "/" . $item;
echo "<img src=\"" . $path . "\" width=861 height=443 href='#' style='position: relative;'/>";
$learnmore_img_path='learnmore';
$path1="/" . $learnmore_img_path . "/" . 'learnmore.jpg';
}
}
echo "</div>";
$path1="/" . $learnmore_img_path . "/" . 'learnmore.jpg';
echo '<a href="#" id="examplelink">';
echo "<img src=\"" . $path1 . "\" width=160 height=30 style='z-index:32111;; p osition: absolute; top: -75; left: 370;'/>";
echo '</a>';
echo "</div >";
}
catch(Exception $e) {
echo 'No images found for this player.<br />';
}
?>
i dont know why ?
is it because of z-index?
any help appreciated..
Have you tried increasing the z-index of the "learn more" link ?
Give the div containing the slide show less z-index and give the link "learn more" greater z-index value.
Add position: relative on both elements. Then you can adjust level with z-index (CSS)
Related
I'm writing a plugin to display recent posts, however, can't figure out why the thumbnail is not inside the div and "jump" to the header of the page.
This is the code from the plugin:
$my_query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 5
));
if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();
$html .="<div class=\"My-container\">";
$html .="<div class=\"My-item\">" . the_post_thumbnail('thumbnail', array('class' => 'My-postImg')) . "</div>";
$html .="<div class=\"My-item-1\">";
$html .= "<p>" . the_category(', ') . " | " . the_time('M. d') . "</p>";
$html .= "<h2>" . get_the_title() . " </h2>";
$html .= "<p>" . the_category(', ') . "</p>";
$html .= "Read more";
$html .="</div>";
endwhile; endif;
$content .= $html;;
return $content;
another question: I try to display the recent posts at the end of the post. Therefore I have to return the $content after I add it to the $html. Is there cleaner / more efficient way to do this?
Thanks
thanks for your help. Here's the CSS. Just before, here's the thing: if I put for example just text or , etc. then it will display correctly inside the . Only when it comes to the thumbnail it "jumps".
The .My-container is just a standard flex box
#charset "utf-8";
/* CSS Document */
.My-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
flex-wrap: nowrap;
}
.My-item {
min-width: 300px;
min-height: 300px;
background-color: orange;
display: block;
}
.My-item-1 {
width: 200px;
height: 100px;
background-color: green;
}
I'm creating a simple "Read More/Read Less" button for a WordPress site that when pressed reveals hidden content using slideToggle. It's in the form of a WordPress plugin. The buttons fadeIn and fadeOut. And I'm using php/html to display the page.
Everything is working great except one little hiccup. For some reason, when the Read More button is clicked and the animation starts, the content div (or p tag - I can't tell for sure) starts a few pixels down and then shifts up after it finishes the animation. And vice versa, when the Read Less button is clicked, the animation does the same thing.
I've looked through the php and css and I can't find anything. I've even inspected the elements and removed all the css that way but it's not helping.
I've included all the code and a short video to show you what I mean.
Here is the link to the video: https://youtu.be/3LnmaPglyPI
Javascript
jQuery('.wpsm-content').addClass('wpsm-content-hide');
jQuery('.wpsm-show, .wpsm-hide').removeClass('wpsm-content-hide');
jQuery('.wpsm-show').on('click', function (e) {
"use strict";
var currentContent = jQuery(this);
function complete() {
jQuery(currentContent).next('.wpsm-content').slideToggle(800);
}
jQuery(this).fadeOut(200, complete);
e.preventDefault();
});
jQuery('.wpsm-hide').on('click', function (e) {
"use strict";
var wpsm = jQuery(this).parent('.wpsm-content');
function complete() {
wpsm.prev('.wpsm-show').fadeIn(200); // Read More
}
wpsm.slideToggle(1250, complete);
e.preventDefault();
});
CSS
.wpsm-show a, .wpsm-show:active, .wpsm-show:visited {
cursor: pointer;
text-decoration: none;
}
.wpsm-show:hover {
cursor: pointer;
text-decoration: underline;
}
.wpsm-hide a, .wpsm-hide:active, .wpsm-hide:visited {
cursor: pointer;
text-decoration: none;
}
.wpsm-hide:hover {
cursor: pointer;
text-decoration: underline;
}
.wpsm-content-hide {
display: none;
}
PHP/HTML
add_shortcode( 'show_more', 'wpsm');
function wpsm( $attr, $smcontent ) {
if (!isset($attr['color'])) $attr['color'] = '#cc0000';
if (!isset($attr['list'])) $attr['list'] = '';
if (!isset($attr['more'])) $attr['more'] = 'show more';
if (!isset($attr['less'])) $attr['less'] = 'show less';
$wpsm_string = '<div class="show_more">';
$wpsm_string .= '<p class="wpsm-show" style="color: ' . $attr['color'] . ' ">';
$wpsm_string .= $attr['list']. ' ' . $attr['more'];
$wpsm_string .= '</p><div class="wpsm-content">';
$wpsm_string .= $smcontent;
$wpsm_string .= ' <p class="wpsm-hide" style="color: ' . $attr['color'] . ' ">';
$wpsm_string .= $attr['list']. ' ' . $attr['less'];
$wpsm_string .= '</p>';
$wpsm_string .= '</div></div>';
return $wpsm_string;
}
add_action( 'wp_enqueue_scripts', 'sm_scripts');
function sm_scripts (){
$plugin_url = plugins_url( '/', __FILE__ );
wp_enqueue_style (
'sm-style',
$plugin_url . 'wpsm-style.css'
);
wp_enqueue_script (
'sm-script',
$plugin_url . 'wpsm-script-mine.js',
array( 'jquery' ),
'1.0.1',
true
);
}
add_action('wp_footer', 'sm_scripts');
?>
I have problem displaying my wp_list_categories with Style. I am already using args, etc but that does not seem to help with the problem.
I want to display same sub-categories for single article.
Here my code :
<?php
if (is_home()) {
wp_list_categories('orderby=id&title_li=none&depth=1');
} else {
$category = get_the_category();
$cat_term_id = $category[0]->term_id;
$cat_category_parent = $category[0]->category_parent;
$listcat = wp_list_categories('echo=0&child_of='.$cat_category_parent.'&title_li=');
$listcat = str_replace("cat-item-".$cat_term_id, "cat-item-".$cat_term_id." current-cat", $listcat);
if ( in_category( $cat_term_id ) || post_is_in_descendant_category( $cat_term_id )) {
echo $listcat;
}
}
?>
</ul>
and here is the result :
http://i.stack.imgur.com/buYyl.jpg
I want the result will be like this :
http://i.stack.imgur.com/U3Pc6.jpg
I think this might work for you, but I'm not exactly sure which theme file you're referencing above.
<?php $parent_cat_id = 1; // Change this ID to match the ID value of the "Sepeda" category ?>
<?php $categories = get_categories( "child_of=$parent_cat_id" ); ?>
<?php if ($categories) : ?>
<ul id="category-list">
<?php // Print the link for 'Sepeda' ?>
<?php echo "<li class='category-name'><a href='" . get_category_link($parent_cat_id) . "'>" . get_cat_name($parent_cat_id) . "</a></li>"; ?>
<?php // Loop through the sub-categories of 'Sepeda' and print the names and links ?>
<?php foreach ($categories as $cat) {
echo "<li class='category-name'><a href='" . get_category_link( $cat->term_id ) . "'>" . $cat->name . "</a></li>";
} ?>
<?php wp_reset_query(); // Restore global post data ?>
</ul>
<?php endif; ?>
Then you could use this CSS to style the category list appropriately:
#category-list {
width: 250px;
padding: 5px;
background: white;
list-style: none;
}
.category-name {
background-color: #694489;
color: white;
min-height: 40px;
text-align: center;
line-height: normal;
padding-top: 10px;
}
.category-name + .category-name {
margin-top: 10px;
}
I am trying to add shipping cost to the current order with a custom plugin code. I have write a plugin to display some radio buttons for delivery option and pickup option and embed one javascript file for the radio check event. The following is my plugin code:
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
function radio_button_checks(){
wp_register_script('wp_head',plugin_dir_url(__FILE__).'radio_check.js',array( 'jquery' ), '1.0', true);
wp_enqueue_script('wp_head');
}
function delivery_form() {
$content = '<div style="width:90%; margin-top:10px; float:left; background-color:rgba(255, 255, 255, 0.85); border-radius:5px; padding:5%;">';
$content .= '<h3 id="first-self-id"><input type="radio" value="self_product_pick_up" class="distance_between_text" name="delivery" id="self-delivery" />PICK UP AT THE TROPICAL FRUIT TRIBE HQ KICTHEN AT 1/1 GENERAL BRIDGES CREC, DACEYVILLE 2032</h2>';
$content .= '<div id="self-delivery-functionality" class="delivery_functionality" style="width: 100%; display: inline-block;">';
$content .= '<div class="self_delivery_day" style="width: 45%; float: left; padding: 0% 2%; text-align: right; ">';
$content .= '<h4><input type="radio" value="tuesday" class="distance_between_text" />TUE</h4>';
$content .= '</div>';
$content .= '<div class="self_delivery_time" style="width: 45%; float: left; padding: 0% 2%; text-align: left;">';
$content .= '<h4><input type="radio" name="pickup_time" value="9AM-12PM" class="distance_between_text" />9AM-12PM</h4>';
$content .= '<h4><input type="radio" name="pickup_time" value="12PM-3PM" class="distance_between_text" />12PM-3PM</h4>';
$content .= '<h4><input type="radio" name="pickup_time" value="3PM-6PM" class="distance_between_text" />3PM-6PM</h4>';
$content .= '<h4><input type="radio" name="pickup_time" value="6PM-8PM" class="distance_between_text" />6PM-8PM</h4>';
$content .= '</div>';
$content .= '</div>';
$content .= '<h3 id="second-notSelf-id"><input type="radio" value="shop_keeper_delivery" class="distance_between_text" checked="checked" name="delivery" id="other-one-deliver" />DELIVERY OPTION ($12 only)</h2>';
$content .= '<div id="seller-delivery-functionality" style="display:block;">';
$content .= '<div class="delivery-info-text" style="text-align: left;">';
$content .= '<p style="margin:5px; font-size:1em;">PLEASE KEEP IN MIND THAT THIS IS A FROZEN PRODUTS AND NEEDS TO BE STORED IN FREEZER IMMEDIATLY UPON DELIVERY. PLEASE ENSURE YOU ARE AVAILABLE TO TAKE THIS DELIVERY AT THE DROP OFF LOCATION SPECIFIED.</p>';
$content .= '</div>';
$content .= '<div class="delivery_functionality" style="width: 100%; display: inline-block;">';
$content .= '<div class="shop_keeper_delivery_day" style="width: 45%; float: left; padding: 0% 2%; text-align: right;">';
$content .= '<h4><input type="radio" name="delivery_day" value="monday" class="distance_between_text" />Mon</h4>';
$content .= '<h4><input type="radio" name="delivery_day" value="fri" class="distance_between_text" />Fri</h4>';
$content .= '</div>';
$content .= '<div class="shop_keeper_delivery_time" style="width: 45%; float: left; padding: 0% 2%; text-align: left;">';
$content .= '<h4><input type="radio" name="delivery_time" value="9AM-12PM" name="" class="distance_between_text" />9AM-12PM</h4>';
$content .= '<h4><input type="radio" name="delivery_time" value="12PM-3PM" class="distance_between_text" />12PM-3PM</h4>';
$content .= '<h4><input type="radio" name="delivery_time" value="3PM-6PM" class="distance_between_text" />3PM-6PM</h4>';
$content .= '<h4><input type="radio" name="delivery_time" value="6PM-8PM" class="distance_between_text" />6PM-8PM</h4>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '<input type="hidden" id="shipping_rate" value="0.00" /> ';
$content .= '</div>';
echo $content;
}
add_action("woocommerce_after_cart_table","delivery_form");
add_action("wp_enqueue_scripts","radio_button_checks");
and my radio_check.js file contain the following code:
jQuery(document).ready(function(){
/* Checkout CheckBox Functionality for Self Delivery */
jQuery("#self-delivery-functionality").hide("slow");
jQuery("#seller-delivery-functionality").show("slow");
jQuery("#self-delivery").click( function() {
if(jQuery(this).is(':checked')) {
jQuery("#self-delivery-functionality").show("slow");
jQuery("#seller-delivery-functionality").hide("slow");
jQuery("#seller-delivery-functionality").find("input[type='checkbox']").prop("checked", false);
jQuery("#seller-delivery-functionality").find("input[type='radio']").prop("checked", false);
}
});
/* Checkout CheckBox Functionality for having Delivery Functionality */
jQuery("#other-one-deliver").click( function() {
if(jQuery(this).is(':checked')) {
jQuery("#seller-delivery-functionality").show("slow");
jQuery("#self-delivery-functionality").hide("slow");
jQuery("#self-delivery-functionality").find("input[type='checkbox']").prop("checked", false);
jQuery("#self-delivery-functionality").find("input[type='radio']").prop("checked", false);
}
});
jQuery('input[name=delivery_time]').click(function(){
if(jQuery(this).is(':checked'))
{
var curr_amount_dol = jQuery('.cart-subtotal .amount').html().replace('$','');
var total_amount = parseFloat(curr_amount_dol) + parseFloat(12.00);
//alert(total_amount.toFixed(2));
jQuery('#shipping_rate').val('$'+total_amount.toFixed(2));
jQuery('.order-total .amount').html('$'+total_amount.toFixed(2));
}
});
}); //ready function ends
This code is updating total amount (only displaying) along with shipping cost (which is $12) but when i click the checkout button i will not get the total amount with shipping rate on next page.
What should i more add in this code to update the shipping cost on the radio button checked?
Note: right now the total amount is updating through the javascript.
'woocommerce_cart_calculate_fees' solved my issue. I just added the following code and a little modification on my javascript.
function woo_add_cart_fee() {
$req = $_REQUEST['shipping_method'];
if($req=='delivery')
{
WC()->session->set('ship_val','12.00');
}
else if($req=='pickup')
{
WC()->session->set('ship_val','00.00');
}
//checkship($_REQUEST['shipping_method']);
WC()->cart->add_fee('Shipping ', WC()->session->get('ship_val'));
}
add_action('woocommerce_cart_calculate_fees', 'woo_add_cart_fee');
and for the javascript i just redirect the same page along with a query parameter 'shipping_method'
jQuery('input[name=delivery_time]').click(function(){
if(jQuery(this).is(':checked'))
{
window.location='http://examplesite.com/cart/?shipping_method=delivery';
}
});
jQuery('input[name=pickup_time]').click(function(){
if(jQuery(this).is(':checked'))
{
window.location='http://examplesite.com/cart/?shipping_method=pickup[';
}
});
On radio button checked my page is redirect with the query ?shipping_method=delivery / ?shipping_method=pickup
and my php code in the plugin file check the parameter value and set the shipping rate using:
add_action('woocommerce_cart_calculate_fees', 'woo_add_cart_fee');
and the fees is update on both cart page and checkout page too.
I'm absolutely fed up with this. I've been trying for a week trying different code, modifying different values etc. I simply cannot skin my Drupal (6)'s search submit button.
I want to be able to swap out the submit buttons for events like hover, active, and such. One of the biggest issues is that I can't figure out how to change the php code so these CSS styles only are applied to the search submit button, not all the other buttons on the site.
Here is the code I have semi-working at the moment. Right now another issue I face is that, the span tag keeps showing the size is only 45x16px, I've applied width and height properties to be 54x28 but it doesn't change anything.
function phptemplate_button($element) {
// Make sure not to overwrite classes.
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}
// We here wrap the output with a couple span tags
return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span>\n";
}
span.button {
background-image: url('images/go-button.png');
background-repeat: no-repeat;
border: none;
width: 53px;
height: 28px;
}
span.button:hover {
background-image: url('images/go-button-gifsmooth.gif');
background-repeat: no-repeat;
border: 0;
}
span.button:active {
background-image: url('images/go-button-pressed.png');
background-repeat: no-repeat;
border: 0;
}
span.button span input {
background: transparent;
border: 0;
color: transparent;
padding: 0;
cursor: pointer;
}
If you want to theme the search button for the sites main search page (www.example.com/search), you can use this in template.php:
function phptemplate_button($element) {
// Check that the buttons belongs to the site search page
if ($element['#value'] == 'Search' && $element['#id'] == 'edit-submit') {
// Make sure not to overwrite classes.
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}
// We here wrap the output with a couple span tags
return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span><div style='clear:both;'></div>\n";
}
else {
return '<input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
}
}
To alter the button for the "theme search" in header or the "search block", you will have to create a tpl file named either search-theme-form.tpl.php or search-block-form.tpl.php and place it in your theme directory. Then insert code similar to this:
// This is for the theme search... for search block, $search['search_block_form']
<?php print $search['search_theme_form']; ?>
<span class="button"><span><input type='submit' name='submit-form' value='TEST' class='this-submit'/></span></span>
<?php print $search['hidden']; ?>
To make the span display as the correct size, I got it working by adding display: block; to the style for span.button. It may move the button around a little, but with some more CSS you can get it wherever you like.