I am trying to position a div vertically in the middle of a window in Wordpress.
I have a function.js file with the following code:
function setToCenter()
{
var a = document.getElementById("R_center");
var h = window.innerHeight;
var p = (h/2)-(650/2);
if( p < 80 ){ p = 80; }//limit to header height
//a.style.transform = "transform(0,"+p+"px)";
//a.style.margin-top= p+"px";
a.style.paddingTop = p+"px";
}
and a php file to get the post content:
<?php
/*
Template Name: Page R Center
*/
?>
<?php global $optimizer;?>
<?php get_header(); ?>
<div id="R_center" class="R">
<script type="text/javascript"> setToCenter(); </script>
<?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="thn_post_wrap">
<?php the_content(); ?>
</div>
</div>
<?php endwhile ?>
</div><!--R_center class END-->
<?php endif ?>
<?php get_footer(); ?>
and in my header.php:
<script type="text/javascript" src="http://localhost/wp/wp-content/themes/r-child/assets/js/functions.js"></script>
evrything is working well. The Div is positioned in the vertical middle of my screen. BUT because the Div is rendered after the java script it works only after refreshing the page.
My question is where do I have to place my javascript to avoid refreshing? Can I execute everything from my functions.js without calling function in my php?
thx
In your case you need to launch setToCenter function after DOM is loaded by browser. You should wrap it into DOMContentLoaded event, example:
document.addEventListener("DOMContentLoaded", function(event) {
setToCenter();
});
or if you use jQuery:
$(function(){
setToCenter();
});
The easiest way is to place your function call near the footer even you can place it after the footer as well. this will solve you problem.
You have asked "can you place the code in function.js?" yes you can do this as well. just place function call inside window.load function and put this code in function.js file.
Below are the example for both cases .
$(window).load(function() { setToCenter(); });
OR
<?php
/*
Template Name: Page R Center
*/
?>
<?php global $optimizer;?>
<?php get_header(); ?>
<div id="R_center" class="R">
<?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="thn_post_wrap">
<?php the_content(); ?>
</div>
</div>
<?php endwhile ?>
</div><!--R_center class END-->
<?php endif ?>
<?php get_footer(); ?>
<script type="text/javascript"> setToCenter(); </script>
Related
I successfully implemented a Masonry-Gallery for a WordPress website by using Bootstrap 5 in combination with 'Masonry-Layout'.
It works all fine except in Safari, where the layout usually breaks, a known problem and the solution is supposed to be 'imagesLoaded'.
I tried a lot, but I just don't manage to add the needed classes at the right place(s).
The code as far as I got, see below. Anybody who can help?
<div class="row grid" id="gallery-masonry" data-masonry='{"percentPosition": true }'>
<?php
$images = get_field('gallery');
$size = 'large';
if( $images ): ?>
<?php foreach( $images as $image_id ): ?>
<div class="col-md-6 mb-3">
<div id="post-<?php the_ID(); ?>" class="card rounded-0" >
<?php echo wp_get_attachment_image( $image_id, $size, "", ["class" => "card-img-top rounded-0","alt"=>""]); ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!--Masonry-Layout-->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
<!--ImagesLoaded-->
<script src="https://unpkg.com/imagesloaded#5/imagesloaded.pkgd.min.js"></script>
<!--Script ImagesLoaded-->
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
});
</script>
Please check my post regarding adding a Masonry to a Wordpress Site.
https://www.customfitwebdesign.com/how-to-add-masonry-layout-in-wordpress/
Note: Masonry is actually built into the core of WordPress ( wp-includes/js/masonry.min.js ). This WordPress version of Masonry also includes ImagesLoaded (imagesloaded.min.js).
Here is my code
jQuery:
jQuery(document).ready(function(){
jQuery('#admin-page-wrapper ul').sortable({cursor: 'move'});
});
Here is my order of jquery which are enqued
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
And here is my plugin code
<div id="admin-page-wrapper">
<h2>Published Pages</h2>
<?php
$pages = new WP_Query(array('post_type'=>'page','post_status'=>'publish','posts_per_page'=>'-1','order'=>'ASC'));
?>
<ul id="dashboard-page">
<?php if($pages -> have_posts()){
while($pages -> have_posts()){
$pages->the_post(); ?>
<li class="dashboard-item"><?php echo the_title(); ?></li>
<?php }
} ?>
</ul>
</div>
Add 3rd script & add it as last one:
wp_enqueue_script( 'jquery-ui-sortable');
You can find a list of all WordPress built in scripts at this page:
https://codex.wordpress.org/Function_Reference/wp_enqueue_script
I wonder if anyone could help me with a problem I am having with bxslider. I am creating a Wordpress site and using the jQuery bxslider instead of the plugin version. Everything with the slider is fine when you load the website, but when you leave the homepage to go to another page, and then come back the slider is broken.
When I say broken, both slides are showing and the JavaScript has stopped. Im using Bootstrap 3 as the framework of the theme.
I'm not used to posting on here, so sorry if I have made a mistake please feel free to correct it.
Any help would be appreciated.
Many Thanks
<div class="container">
<section class="row" id="slidercontainer">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="sliderholder">
<ul class="bxslider">
<?php
global $post;
$args = array('numberposts' => 4, 'category' => 2, 'post_status'=>"publish");
$myposts = get_posts($args);
foreach($myposts as $post) : setup_postdata($post);
?>
<li id="post-<?php the_ID(); ?>" class="slider-item">
<h1><?php echo get_the_title();?></h1>
<?php
$imageArray = get_field('slider_image'); // Array returned by Advanced Custom Fields
$imageAlt = $imageArray['alt']; // Grab, from the array, the 'alt'
$imageThumbURL = $imageArray['sizes']['postslider']; //grab from the array, the 'sizes', and from it, the 'thumbnail'
?>
<img class="pull-right" src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>">
<?php
$content = apply_filters( 'the_excerpt', get_the_excerpt() );
$content = str_replace( ']]>', ']]>', $content );
?>
<div class="slider-content"><?php echo $content;?></div>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
</div>
</section>
</div>
<!-- JavaScript -->
$(document).ready(function(){
$('.bxslider').bxSlider({
maxSlides: 4,
pager: false,
auto: true,
autoHidePager: true,
pause: 10500,
controls: true,
speed: 1800,
mode: 'horizontal'
});
});
I have page with image loading Dynamical from php.The image height is
various px size(70,130,100,60).my need is how can get the image size currently viewed in page automatically in alertbox i try same code is not working.please help
code
<?php
foreach ($images as $image) {
?>
<img src="<?php echo $image['url']; ?>" class="img_test" id="<?php echo $image['url']; ?>" width="70" style="max-height:70px" onclick="imagesize(this)" />
<?php
}?>
<script>
$( window ).load(function() {
$( ".img_test" ).each(function( index ) {
alert('Height: '+$(this).height());
});
});
function imagesize(obj){
alert($(obj).height());
}
</script>
if we click the image the height will display.in page load after automatically can't be display
It's important to understand that it's navigator (client) which load image and PHP is running into your server and send text to client.
Use a listener .on to get event 'click'.
Moreover, use $(document).ready and not .load to wait that images are loading
<?php foreach ($images as $image) { ?>
<img src="<?php echo $image['url']; ?>" class="img_test" id="<?php echo $image['url']; ?>" width="70" style="max-height:70px" />
<?php } ?>
$(document).ready(function(){
$( ".img_test" ).each(function(){
alert('Height: '+$(this).height());
});
$(".img_test").on("click", function(){
alert($(this).height());
});
});
http://jsfiddle.net/3c9CN/
How to setup an div to auto refresh?
I use Transcript theme for wordpress, in single.php is on call for inner php page:
</div><!-- /innerLeft -->
<?php include (TEMPLATEPATH . '/innerNarrowSidebar.php'); ?>
<?php include (TEMPLATEPATH . '/innerWideSidebar.php'); ?>
<div class="clear"></div>
The code inside innerNarrowSidebar.php
<?php if($trns_options['enArc'] == 1) { ?>
<div class="widget">
<h3 class="widget_sTitle_b"><?php _e('Archives','Transcript'); ?></h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
<?php } ?>
And than in innerpage_120x600.php
I have some google adsense
**NOTE**: I added this code in innerNarrowSidebar.php but dosn't work , the div dosn't autorefresh
There is the code that i have added:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "SANAjax();", 10000 ); ///////// 10 seconds
$(function() {
SANAjax = function(){
$('#narrowSidebar').fadeOut("slow").load('ads/innerpage_120x600.php').fadeIn("slow");
}
});
</script>
If this is not possible, how to make an text widget to auto refresh?
As described in comments:
<script language="JavaScript">
$j(function($) {
var SANAjax = function(){
//Add here anticache modificator:
var rnd=Math.random();
$('#narrowSidebar').fadeOut("slow").load('ads/innerpage_120x600.php?nc='+rnd).fadeIn("slow");
}
setInterval(SANAjax, 10000 ); ///////// 10 seconds
});
</script>