I can change TOP navigation bar for Android devices with this code on my website:
function address_mobile_address_bar() {
$color = "black";
// Chrome, Firefox OS, Opera and Vivaldi
echo '<meta name="theme-color" content="' . $color . '">';
// Windows Phone
echo '<meta name="msapplication-navbutton-color" content="' . $color . '">';
// iOS Safari
echo '<meta name="apple-mobile-web-app-capable" content="yes">';
echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
}
add_action( 'wp_head', 'address_mobile_address_bar' );
But how can I change color of the BOTTOM navigation bar of a smartphone on a website / PWA?
Related
I am using this code to display woocommerce custom field on frontend:
// DISPLAY Source Product URL ---------------------------------
echo '<div class="woo_echo">';
echo '<div class="woo_echo_inner">';
echo "<span style='font-weight:600;'>". __( 'Source Product URL:</span> <span> ', 'woocommerce' ) . $_p_source_url ."</span>";
$_p_source_url = get_post_meta($product_id, "_p_source_url", true);
echo '</div>';
echo '</div>';
It works very well but I would like
. $_p_source_url .
to be clickable link. Is it possible to wrap it with a tag?
In this example source url is original url of scraped product not woocommerce product url.
You need something like this :
echo "<a href='$YOUR_LINK_PRODUCT_URL'>product</a>";
EDIT
echo '<div class="woo_echo">';
echo '<div class="woo_echo_inner">';
echo "<span style='font-weight:600;'>". __( 'Source Product URL:</span> <span> ', 'woocommerce' ) . $_p_source_url ."</span>";
$_p_source_url = get_post_meta($product_id, "_p_source_url", true);
echo "<a href='$_p_source_url'>product</a>";
echo '</div>';
echo '</div>';
I have created a gallery using the acf pro plugin for WordPress. It all works perfectly with images that are in a landscape format. However, because the thumbnail images are a set width and portrait images are different proportions they have a much greater height than the landscape ones when scaled down which obviously looks very wrong.
What I am trying to work out is if there is a way to crop the image for the thumbnail, but still use the original for the lightbox.
You can view the gallery here:
The code is as follows:
<?php
$gallery = get_field('gallery');
$images = array();
$items_per_page = 12;
$total_items = count($gallery);
$size = 'full';
$total_pages = ceil($total_items / $items_per_page);
if(get_query_var('paged')){
$current_page = get_query_var('paged');
}
elseif (get_query_var('page')) {
$current_page = get_query_var('page');
}
else{
$current_page = 1;
}
$starting_point = (($current_page-1)*$items_per_page);
if($gallery){
$images = array_slice($gallery,$starting_point,$items_per_page);
}
if(!empty($images)){
?> <div id="slider" class="flexslider">
<div class="gallery-div">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" data-fancybox="gallery" data-caption="<?php echo $image['alt']; ?>" ><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
<?php endforeach; ?>
</div>
</div>
<?php
}
?><div class="pagination-links">
<?php
$big = 999999999;
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => $current_page,
'total' => $total_pages,
'before_page_number' => '<span class="screen-reader-text">'.$translated.' </span>'
));?>
</div>
<?Php
?>
Any help would be greatly appeciated.
Your Fancybox is on the link which will open the url in the href, but there's no reason you can't use a different image in your img tag. Why not try this:
<a href="<?php echo $image['url']; ?>" data-fancybox="gallery" data-caption="<?php echo $image['alt']; ?>" >
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
This should give you the full image in the lightbox, but show the thumbnail image on screen in your gallery.
I am trying to get this nav bar to respond on mobile Safari. It works fine on iPhone simulator.
From this answer thought it would work by simply adding cursor:pointer property but still no luck.
How do I use jQuery for click event in iPhone web application
Any help much appreciated (the code works fine on desktop browsers).
$(document).ready(function(){
//Click nav links
$('.nav li').click(function(e){
$('.nav li').attr('id', ''); //navtabs inactive
$(this).attr('id', 'activetab'); // clicked tab active
//hide fieldsets
$('fieldset').attr('class', 'hidden');
whichitem=$(this).attr('title'); //get title nav clicked
//show class cleared
$("fieldset[title='"+whichitem+"']").attr('class', '');
});
});
and the form:
<div class="nav">
<ul>
<li id="activetab" title="<?php echo _('Login'); ?>"><?php echo _('Step 1'); ?></li>
<li title="<?php echo _('Professional Details'); ?>"><?php echo _('Step 2'); ?></li>
<li title="<?php echo _('Optional'); ?>"><?php echo _('Step 3'); ?></li>
</ul>
</div>
<button type="submit"><?php echo _('Submit'); ?></button>
</fieldset>
</form>
:) Fixed
$(document).ready(function(){
var ua = navigator.userAgent,
event = (ua.match(/iPhone/i)) ? "touchstart" : "click";
All non-English (Lithuanian) elements like š,ė,ž,č and more are displayed as code which doesnt look nice. I added a facebook like button to my wordpress blog, which looks like this:
<iframe src="http://www.facebook.com/plugins/like.php?locale=lt_LT&href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; position: relative; top: -150px; padding: 0 0 20px 0; overflow:hidden; width:450px; height:60px"></iframe>
You can see that I added locale=lt_LT (I'm from Lithuania)
DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Im using this:
<?php
$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];
$default_img = get_bloginfo('stylesheet_directory').'/images/default_icon.jpg';
?>
<?php if(is_single() || is_page()) { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } else { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } ?>
Can it be a problem with DOCTYPE or something else?
The language of the button sets when you order a button from http://developers.facebook.com/docs/reference/plugins/like/
the button should have the language according to the user. example
js.src = "/ / connect.facebook.net / es_LA / all.js # xfbml = 1 & appId = 250867014982684";
that line where it says you can modify for your code es_LA language. This is html 5.
ok, for like button, try using fb developer page and get the code for htlm5; instead of iframe. i made like button in spanish some time ago, let me check my code. i'll get baack to you.
I've made a simple iPhone webapp and I've set a startup screen and icon and everything. Here's the link to it.
The problem I'm having is that when I save the webapp to the homescreen, a white screen (or else a screenshot of the page I have opened on Safari) shows up first for a few seconds before the startup screen.
I've added other iPhone webapps like JQtouch to my homescreen and opened them and the startup screen shows up straight away.
I'm wondering if I have something wrong in the html code???
Try changing <meta name="viewport" content="width=300px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> so the width=device-width and using commas (,) instead of semi-colons (;) except at the end of the line.
Do you have this in your <head>:
<link rel="apple-touch-startup-image" href="myImage.jpg">
See iOS Web App Configuration - mobile-meta-links.html for exact specs:
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />
Also read that the startup image will only show up if you use the HTML5-doctype
<!DOCTYPE html>
From Icons and splash screens for iOS web apps - retina displays also welcome:
To insert a high-resolution splash screen into the <head>, but only
for iOS devices with a retina display running iOS5 or later:
function hasRetinaDisplay() {
return (window.devicePixelRatio >= 2);
}
function isAppleDevice() {
return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
function iOSNewerThan(majorVersion) {
if(isAppleDevice()) {
// Check the version
var pattern = /iPhone OS (.*) like Mac/;
var result = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
var version = result[1].split(''); // Returns X, Y
var release = version[0];
return (release >= majorVersion);
}
return false;
}
// When we're ready to go...
$(document).ready(function() {
if(hasRetinaDisplay() && iOSNewerThan(5)) {
var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />';
$('head').append(highResSplash);
}
});