Develop Reference

slideindown wow from top

i try to reach the same animation like this link http://mynameismatthieu.com/WOW/index.html, the doge image come from way top to bottom
how to get the animation like that.
heres my code
<div class="about-title">
<h1 class="text-center title">
<?php
$about_title = get_field('about_title', 'option');
?>
<?php if(strlen($about_title) > 0): ?>
<?php echo $about_title; ?>
<?php endif; ?>
</h1>
<hr class="divider wow animated slideInDown" data-wow-duration="2s" data-wow-delay="0.5s">
</div>
<script>
new WOW().init();
</script>

Replace "slideInDown" to "fadeInDownBig".... This is the solution for you..

a element inside of article tag gets duplicated 10 times all of them getting the same classes, ids etc

tl;dr; Some javascript that runs in wordpress duplicates my top element all over the html. See image.
Hi
I am really surprised at this bug in wordpress, and its actually pretty easy to replicate. I wanted a
<a class="something" href="a-link"> ... </a>
to wrap all of my article content so that it would look like this code:
<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4'); ?>>
<a class="hehe" href="google.com">
<?php
if (is_sticky() && is_home() && ! is_paged()) {
printf( '<span class="sticky-post">%s</span>', __('Featured', 'nisarg'));
} ?>
<?php nisarg_featured_image_disaplay(); ?>
<div class="main-image">
<?php if( get_field('main_image') ): ?>
<img class="img-responsive " src="<?php the_field('main_image'); ?>" />
<?php endif; ?>
</div>
<?php if( get_field('vacation_type_image') ): ?>
<img src="<?php the_field('vacation_type_image'); ?>" class="post-vacation-type" />
<?php endif; ?>
<header class="entry-header">
<div class="post-header">
<div class="row blog_post_container">
<div class="col-sm-12 blog_post_info_container_col">
<div class="blog_post_info_container">
<div class="blog_post_info_container_margin">
<span class="screen-reader-text"><?php the_title();?></span>
<?php if( is_single()) : ?>
<h1 class="entry-title blog_post_header"><?php the_title(); ?></h1>
<?php else : ?>
<h2 class="blog_post_info entry-title">
<?php the_title(); ?>
</h2>
<?php endif; // is_single() ?>
<?php if ('post' == get_post_type()) : ?>
<div class="entry-meta">
<h5 class="blog_post_info entry-date"><?php nisarg_posted_on(); ?></h5>
</div><!-- .entry-meta -->
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</header><!-- .entry-header -->
<div class="entry-summary row">
<div class="excerpt">
<?php the_excerpt(); ?>
<div class="excerpt-footer">
<div class="facebook-button">
<div class="fb-like"
data-share="true"
data-width="500"
data-show-faces="true">
<a class="fb-xfbml-parse-ignore"
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">
</a>
</div>
</div>
</div>
</div>
</div><!-- .entry-summary -->
<!--<footer class="entry-footer">
<?php nisarg_entry_footer(); ?>
</footer> -->
</a>
</article><!-- #post-## -->
I am using the Nisarg theme, but if i went inside of twentysixteen theme, and put a:
<a class="something" href="a-link"> ... </a>
inside of that content.php it would have the same effect, it litters the element inside of the article. like this:
If i look in the source code of my web page, i dont see any of these additional A elements, so they're being appended by some javascript. Now that its something that occurs in several themes i think it has something to do with html5shiv... But ive tried to remove that script from the equation, but the problem remains - so im kind of lost. Does anyone know which javascript library that could do something like this?? i have also used grep to look for javascript files that does a.cloneNode but to no prevail.
Twentysixteen, replication of error:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="http://www.google.com" class="hehe">
<header class="entry-header">
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class="sticky-post"><?php _e( 'Featured', 'twentysixteen' ); ?></span>
<?php endif; ?>
<?php the_title( sprintf( '<h2 class="entry-title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
) );
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',
) );
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php twentysixteen_entry_meta(); ?>
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
</a>
</article><!-- #post-## -->
Resulting html:
so that means, simply adding a a tag right after the article tag in something like content.php will duplicate the a tag inside of all the divs, which just seems insane to me.
Thanks
EDIT 1: adding example of "core" wordpress theme twentysixteen with exact same error.
EDIT 2: I can confirm, a clean installation of Wordpress has this exact problem.

There is another <a> within the <h2> title. It's not possible to nest <a> tags.
If you do this, the browser attempts to fix the structure closing the nested <a> and what you see is the result.

PHP equivalent to the JavaScript parentNode Property

I'd like to check the id of the parent element, to display either the big or the small version of an image.
<div id="content">
<?php include 'test.php';?>
</div>
<div id="sidebar">
<?php include 'test.php';?>
</div>
In test.php, an if-statement checks if the parent has the demanded id.
Is there a way to get the parentnode-id without JavaScript?

No. PHP do nothing with the rendered page.
But why don't you create a function and call that with parameters?
include 'test.php'
?>
<div id="content">
<?php showImage(); ?>
</div>
<div id="sidebar">
<?php showImage(true); ?>
</div>
<?php
And in test.php
function showImage($smallImage = false) {
if (!$smallImage) {
echo '<img src="path/to/bigimage" alt="" />';
} else {
echo '<img src="path/to/smallimage" alt="" />';
}
}
Or there are an alternative way. Set a variable before you include your file, and you can set an if condition in your test.php when you want to show the image.
<div id="content">
<?php
$parentNode = 'content';
include 'test.php'
?>
</div>
<div id="sidebar">
<?php
$parentNode = 'sidebar';
include 'test.php'
?>
</div>

Jquery load in same script

I'm sorry if this is already asked. I couldn't find it.
I'm making an AJAX chat system. It's going great, the only problem I'm having is that I need the chat to automatically refresh itself every second. I know this can be done with the load() function...
But I would like to refresh the div and the PHP inside it, now load it from another script.
My piece of code(JS):
<script>
setInterval(function() {
$('#container').load();
}, 1000); </script>
And the div I want to reload/refresh every second:
<div class="container" id="container">
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
</div>
And if I do $('#container').load('index.php'); it will give me this(the site will also be very slow): $('#container').load('index.php');
Thank you very much for helping in advance! My English is also very bad due that it's not my mother language :-)

Don't you think it will be cleaner to just include() your "message pooling" script inside your <div class="container" id="container">, so that your main chat page will now have:
<div class="container" id="container">
<?php
include("chatScript.php");
?>
</div>
Then chatScript.php will contain:
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
Then you can simply do
<script>
setInterval(function() {
$('#container').load();
}, 1000);
</script>
after loading <div class="container" id="container">.
Hope this helps

Add an html to an element under PHP condition

I'm trying to add an HTML next to an existing element in my page. This is what I've tried::
HTML/PHP
<?php
if ( $duedatereservation < $today ) {
//echo "Past Due!";
$isPastDue = true;
}
?>
<div class="container">
<div class="inner">Transaction Date</div>
<div class="inner">Due Date</div>
</div>
<h2 id="report">Notice</h2>
jquery:
$(document).ready(function(){
$("<span>Past Due!</span>").insertAfter("#report");
});
What exactly I want is when the condition $isPastDue is true, I want to append/add a html tag next to #report h2. But it's not displaying. Any ideas? Help is much appreciated. Thanks.

Try this code
<?php
if ( $duedatereservation < $today ) {
//echo "Past Due!";
$isPastDue = true;
}
?>
<div class="container">
<div class="inner">Transaction Date</div>
<div class="inner">Due Date</div>
</div>
<h2 id="report">Notice</h2>
<?php if($isPastDue):?>
<span>Past Due!</span>
<?php endif;?>
If your requirement this much, no need to add JavaScript.Just use only php.

Try to do like this:
<?php
if($isPastDue) {
?>
<script>
$(document).ready(function(){
$("<span>Past Due!</span>").insertAfter("#report");
});
</script>
<?php
}
?>

So, the main case is you want to execute the insertAfter script only if isPastDue is true. You can do it by echo the insertAfter script before closing } of your PHP if condition.
<?php
if($duedatereservation < $today){
echo '<script>';
echo '...
echo '</script>';
}

No need to use JQuery for this. You can do this using PHP only
<h2 id="report">Notice <?php if($isPastDue){echo "<span>Past Due!</span>";} </h2>