I am using the pin it button script to display pin it button on hover.
It's working fine on desktop.
But it throwing error on iPad's Safari.
The error: "Safari cannot open the page. because the address is invalid."
I am using code like this:
<div class="pin-it-hover">
<a href="//www.pinterest.com/pin/create/button/?url=<?php echo current_url(); ?>&media= <?php echo site_url($imagepath); ?>&description=<?php echo $description; ?>"
data-pin-do="buttonPin" data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/>
</a>
</div>
Included script only once.
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
CSS used:
.pin-it-hover {
right: 20px;
top :20px ;
position: absolute;
visibility: hidden;
}
.outerdiv:hover .pin-it-hover {
visibility: visible;
}
Any suggestion?
What's wrong with my code?
Use http: in front of URLs or remove // in every urls like below.
http://assets.pinterest.com/js/pinit.js or assets.pinterest.com/js/pinit.js
instead of //assets.pinterest.com/js/pinit.js
<div class="pin-it-hover">
<a href="http://www.pinterest.com/pin/create/button/?url=<?php echo current_url(); ?>&media= <?php echo site_url($imagepath); ?>&description=<?php echo $description; ?>"
data-pin-do="buttonPin" data-pin-config="none">
<img src="http://assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/>
</a>
</div>
I think this will helps you.
Related
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I have two flags in header ( im using customizr theme ), but in Chrome I see only 1 flag and in firefox 2 flags.
In Google Chrome:
and in Mozille Firefox:
My Question is, why I see only 1 flag in chrome ?
My code for this :
<header class="<?php echo implode( " ", apply_filters('tc_header_classes', array('tc-header' ,'clearfix', 'row-fluid') ) ) ?>" role="banner">
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
<div style = 'position: absolute; right: 100px; top: 10px; z-index: 201'>
<?php wp_loginout(); ?>
</div>
<div style = 'position: relative; right: 80px;'>
<?php
// The '__header' hook is used with the following callback functions (ordered by priorities) :
//TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
do_action( '__header' );
?>
</div>
</header>
I already tried to move flags right position to 40,100, ... But nothing.
Can somebody help me or give some clue :) Thanks !
Try to remove the position styles from flags div because of this one flags not appear properly. Just empty for now and than check where flags displayed.
<div style = ''>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. The problem is I am using a loop to generate the content as well as the tabs themselves.
I've got a nice javascript code right here that works perfectly fine. I understand this perfectly as well. The only problem is that it obviously doesn't disable other toggles when another one is clicked. Also having one "tab" / "toggle" always active. Code that could probably check the div id with a prefix of "post" and make all div id's with "post" to display:none besides the one that was clicked on. That would be perfect if that could be possible. Another way I could think of this is putting all the generated content into a container, and it simply disables all id's in the container besides the one that was clicked.
If this code can be modified to achieve that, it would be great. This is some very simple code that I understand very clearly. All I need is that it behaves more like tabs where only one can be active at once.
<script type="text/javascript">
function toggleMeMirror(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
</script>
HTML / PHP
Loop 1 - The Content
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div id="post-<?php the_ID(); ?>" style="display:none;">
<center><?php the_title(); ?><br /><br />
<?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?>
<?php wprp(true);?>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
Loop 2 - The actual toggles / tabs
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div style="float: left; padding: 4px;">
<center>
<div class="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" >
<div style="overflow: hidden; width: 150px; height: 100px;">
<div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;">
<center>
<?php echo get_post_meta(get_the_ID(), 'video_provider', true);
echo ' Mirror';?>
</center>
</div>
<img src="<?php echo $thumbnail_src; ?>" width="150px"/>
</div>
</div>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
This is also tagged jquery so I'll just recommend that you include the jquery library and include:
$('.someclass').hide();
as the first line in the toggleMeMirror function.
Then, make sure that each of your looped content divs exist in the class "someclass".
like:
foreach($this as $that) {
print "<div class='someclass'>$that</div>";
}
then
function toggleMeMirror(a){
// hide all
$('.someclass').hide();
// show one
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
You can try something like this DEMO
HTML Code
<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>
jQuery
$("#one").click(function() {
$("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});
$("#two").click(function() {
$("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
});
$("#three").click(function() {
$("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});
I have searched and gone through many so called solutions but none helped.
I have a situation where i need multiple facebook comments on a same page for different li tags.
The code will make it clear I guess.
<?php foreach($events_without_upcoming as $single_events):?>
<li id="event_<?php echo $single_events->id; ?>" class="events" style="cursor:default">
<span class="sn"><?php $i++; ?></span>
<span class="date"><?php echo $new_date?></span>
<span class="venue"><?php echo $single_events->venue; ?></span>
<span class="address"><?php echo $single_events->address; ?></span>
<span class="option"><?php echo share_button('facebook', array('url'=>"http://www.xxxxxx.com", 'text'=>$text))?><?php echo share_button('twitter', array('url'=>$url, 'text'=>$text, 'via'=>'Lightning At The Opera', 'type'=>'iframe'))?></span>
<div id="fb_<?php echo $single_events->id; ?>" class="fb_plugin" style="display:none;"></div>
<div class="fb-like" style="display:block" data-href="http://www.xxxxxx.com/<?php echo $single_events->id; ?>" data-send="true" data-width="450" data-show-faces="false"></div>
<div class="fb-comments" data-href="http://www.xxxxxx.com/#event<?php echo $single_events->id;?>" data-width="470"></div>
</li>
<?php endforeach;?>
The FB comment plugin is within a foreach loop.
Every li contains the comment plugin.
I tried giving data-href a unique url as in code but its not working.
I have been trying this from morning but I couldn't find anything.
If i haven't made myself clear please ask anything thats required.
Thx in advance.
<iframe
style="border: none; overflow: hidden; height: 155px; width: 470px;"
scrolling="no"
src="https://www.facebook.com/plugins/comments.php?api_key=your_api_key&elation%3Dparent.parent&numposts=1&width=470&href=http%3A%2F%2Fexample.com"></iframe>
as we cannot find any solution with js so We are using iframe without any js libs,
it also helpful when we want to show comments dynamically.