I'm showing a loading bar before the content loads successfully. And after load I am displaying the content by jQuery but when i visit the page first time the loader is showing forever and the on load event isn't firing. It fires when i manually refresh the page. What's wrong with my code?
Event call code:
$(window).on('load', function(){
$("#slider-pre-loader").fadeOut("slow");
$("#video-blog-slider").fadeIn();
});
Dynamic HTML:
<div id="slider-pre-loader"></div>
<div id="video-blog-slider" style="display: none">
<div class="blog-category-items blog-page" id="blogIndex">
<div class="container">
<?php
$hpos = 0;
foreach ($categories as $category):
$categoryhref = fakeUrl::genSlugFromText($category['name']);
$listVideos = $category['videos'];
if (in_array($category['name'], $categoryDisplay)) :
?>
<div class="blog-groups">
<div class="group-heading">
<h3>
Test title
</h3>
</div>
<?php if ($category['desc'] != '') :?>
<p class="group-desc"><?php echo $category['desc'];?></p>
<?php endif;?>
<?php
$slideClass = '';
if (!$detect->isMobile() && !$detect->isTablet() ) {
$slideClass = 'blog-slider';
}
?>
<div class="<?php echo $slideClass;?> owl-lg-dot mb-none owl-theme owl-loaded" id="videoList">
<?php
$v = 0;
foreach ($listVideos as $video) :
$v++;
$itemClass = '';
if (($detect->isMobile() || $detect->isTablet()) && $v > 5) {
$itemClass = 'item-disable';
}
$videoSlug = fakeUrl::genSlugFromText($video['title']);
?>
<div class="blog-item <?php echo $itemClass;?>">
<div class="blog-image">
<a href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="caption">
<a class="blog-list-video-title" href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="blog-metas">
<small class="blog-views"><?php echo number_format($video['views']); ?> views</small>
</div>
</div>
<?php
endforeach;
?>
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
jQuery placed before event call:
<script src="//code.jquery.com/jquery-1.11.3.min.js" async></script>
Don't place async attribute on your script tags unless you really need your script file to be loaded asynchronously. Right now, your 'jQuery' code is being loaded asynchronously, i.e. jQuery is most probably not loaded when you are trying to attach your event.
The only explanation for it working the second time upon manual refresh is that the browser is 'synchronously' loading the cached resource. Different browsers do this differently, so you can expect inconsistent behaviour there.
Just remove the async attribute, and you should see your event firing every time.
The $(window) selector is for selecting the viewport whereas the $(document) selector is for the entire document (that is, what's inside the <html> tag).
Try using the following:
$(document).on('load', function(){
$("#slider-pre-loader").fadeOut("slow");
$("#video-blog-slider").fadeIn();
});
I hope this working with you, I have created example you will be woking with document.ready it means JQuery see and focus on all elements in your web page, here is fiddle
Simple for test
<div id="slider-pre-loader">no</div>
<div id="video-blog-slider" style="display: none">
hi
</div>
OR your code
<div id="slider-pre-loader">no</div>
<div id="video-blog-slider" style="display: none">
<div class="blog-category-items blog-page" id="blogIndex">
<div class="container">
<?php
$hpos = 0;
foreach ($categories as $category):
$categoryhref = fakeUrl::genSlugFromText($category['name']);
$listVideos = $category['videos'];
if (in_array($category['name'], $categoryDisplay)) :
?>
<div class="blog-groups">
<div class="group-heading">
<h3>
Test title
</h3>
</div>
<?php if ($category['desc'] != '') :?>
<p class="group-desc"><?php echo $category['desc'];?></p>
<?php endif;?>
<?php
$slideClass = '';
if (!$detect->isMobile() && !$detect->isTablet() ) {
$slideClass = 'blog-slider';
}
?>
<div class="<?php echo $slideClass;?> owl-lg-dot mb-none owl-theme owl-loaded" id="videoList">
<?php
$v = 0;
foreach ($listVideos as $video) :
$v++;
$itemClass = '';
if (($detect->isMobile() || $detect->isTablet()) && $v > 5) {
$itemClass = 'item-disable';
}
$videoSlug = fakeUrl::genSlugFromText($video['title']);
?>
<div class="blog-item <?php echo $itemClass;?>">
<div class="blog-image">
<a href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="caption">
<a class="blog-list-video-title" href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="blog-metas">
<small class="blog-views"><?php echo number_format($video['views']); ?> views</small>
</div>
</div>
<?php
endforeach;
?>
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
Javascript:
$(document).ready(function() {
$("#slider-pre-loader").fadeOut('slow');
$("#video-blog-slider").fadeIn('slow');
});
Related
I am working on a section on my website where I need to toggle, add, and remove a class.
I have something that works really good but I was wondering if there is a simple solution to make my code better, organized, and much more readable than how it is now.
I have 4 buttons:
.info-button-left-1
.info-button-left-2
.info-button-right-1
.info-button-right-2
These buttons trigger a class to ad to the following divs:
.product-information-block-left-1
.product-information-block-left-2
.product-information-block-right-1
.product-information-block-right-2
And this is my code:
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'info-product-block-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'info-product-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
?>
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> container-fluid">
<div class="row">
<div class="container">
<div class="row product-heading">
<div class="col">
<h2><?php echo the_field('product_heading'); ?></h2>
<?php echo the_field('product_content'); ?>
</div>
</div>
<div class="row product-information">
<div class="col-left-product">
<div class="left">
<div class="product-name"><?php echo the_field('product_name_left'); ?></div>
<div class="product-year"><?php echo the_field('product_year_left'); ?></div>
<div class="product-button">
<?php
$link = get_field('product_link_left');
if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="right">
<div class="product-image">
<div class="info-button-left-1"></div>
<div class="info-button-left-2"></div>
<?php
$image = get_field('product_image_left');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-left-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-left-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
</div>
<div class="col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button-right-1"></div>
<div class="info-button-right-2"></div>
<?php
$image_right = get_field('product_image_right');
if( !empty( $image_right ) ): ?>
<img src="<?php echo esc_url($image_right['url']); ?>" alt="<?php echo esc_attr($image_right['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-right-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-right-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
<div class="left">
<div class="product-name"><?php echo the_field('product_name_right'); ?></div>
<div class="product-year"><?php echo the_field('product_year_right'); ?></div>
<div class="product-button">
<?php
$link_right = get_field('product_link_right');
if( $link_right ):
$link_right_url = $link_right['url'];
$link_right_title = $link_right['title'];
$link_right_target = $link_right['target'] ? $link_right['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_right_url ); ?>" target="<?php echo esc_attr( $link_right_target ); ?>"><?php echo esc_html( $link_right_title ); ?></a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(".col-left-product .info-button-left-1").click(function() {
$(".product-information-block-left-1").toggleClass("active");
$(".product-information-block-left-2").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-left-product .info-button-left-2").click(function() {
$(".product-information-block-left-2").toggleClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-right-product .info-button-right-1").click(function() {
$(".product-information-block-right-1").toggleClass("active");
$(".product-information-block-right-2").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
$(".col-right-product .info-button-right-2").click(function() {
$(".product-information-block-right-2").toggleClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
</script>
</section>
I am learning more and more every day. but I do think that there is a better way to do this.
Is there anyone who can give me an answer or a path to follow?
Thank you in advance.
To make the JS more generic you can use common class names on the elements. Then you can relate them to each other by using DOM traversal methods, such as closest() and find() to target the required element by matching indexes. Something like this:
let $productInfoBlocks = $('.product-information-block');
$('.info-button').on('click', e => {
let $el = $(e.target);
let $targetInfoBlock = $el.closest('.col').find('.product-information-block').eq($el.index()).toggleClass('active');
$productInfoBlocks.not($targetInfoBlock).removeClass('active');
});
.active { color: #C00; }
<!-- Note: I reduced the HTML to the relevant elements only -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row product-information">
<div class="col col-left-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-left-1</div>
<div class="info-button">info-button-left-2</div>
</div>
<div class="product-information-block">product-information-block-left-1</div>
<div class="product-information-block">product-information-block-left-2</div>
</div>
</div>
<div class="col col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-right-1</div>
<div class="info-button">info-button-right-2</div>
</div>
<div class="product-information-block">product-information-block-right-1</div>
<div class="product-information-block">product-information-block-right-2</div>
</div>
</div>
</div>
In similar case I used data attribute in combination with a general class name:
The general syntax for buttons:
<div class="info-button" data-place="left" data-targetId="1"></div>
The general code for target divs:
<div class="product-information-block" data-place="right" data-targetId="1">
<?php echo the_field('product_content_left'); ?>
</div>
The general code to handle all occurances:
$(".col-right-product .info-button").click(function() {
var place=$(this).data("place");
var targetId=$(this).data("targetId");
$(".product-information-block").removeClass("active");
$(".product-information-block[data-place='"+ place +"'][data-targetId='"+ targetId +"']").addClass("active");
});
I have these dynamic generted divs in HTML and populated with PHP data:
<?php foreach (get_all_locations() as $cards) : ?>
<div class="block">
<div class="centered">
<div class="div_container">
<p class="location_id_el"><?php echo $cards['id']; ?></p>
<span onclick="edit_button_request(<?php json_encode($cards); ?>)"><i class='fas fa-edit'></i></span>
<p><?php echo $cards['name']; ?></p>
<div id="main_address_div">
<div id="address_div">
<p><?php echo $cards['streetname'] . ' ' . $cards['streetnumber'] . ' '; ?></p>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
now, I would like to navigate to a specific div using Javascript:
function myNavFunction(){
let i = document.getElementById('location_id_el').value; //here I get the id of that element
if(i === 4) document.location.href = ""; //here I want to navigate to the parent div of that element
}
any suggestions?!
I want to know if I can get all fetched ids from a PHP while loop to use them in a jQuery for a flip effect?
while ($fetch_locomotion = mysqli_fetch_assoc($result_locomotion))
{
$id = $fetch_locomotion['id'];
echo
'<a href="index.php?price='.$hash.'" style="text-decoration: none;" id="object_a_jquery">
<div id="'.$id.'" style="perspective:1000px;height:100%;width:13%;display:inline-table;">
<div class="front">
<div id="object_list_price_bg" style="background-image:url(images/bg_price_f.png);"></div>
</div>
<div class="back">
<div id="object_list_price_bg_b" style="background-image:url(images/bg_price.png);"></div>
</div>
</div>
</a>';
}
<script>$(<?php echo $id;?>).flip();</script>
You can dump them into an array and use them at a later time.
// do this before entering the loop so it isn't overwritten
$ids = [];
// Do this part inside of the while loop
$ids[] = $fetch_locomotion ['id'];
?>
/* do this part in the html section you wish to execute the javascript code */
<script>
jQuery(function ($) {
<?php foreach ($ids as $id): ?>
<?php echo "$('#". $id . "').flip();\n"; ?>
<?php endforeach; ?>
});
</script>
Edited for your exact code:
$ids = [];
while ($fetch_locomotion = mysqli_fetch_assoc($result_locomotion))
{
$ids[] = $fetch_locomotion['id'];
echo
'<a href="index.php?price='.$hash.'" style="text-decoration: none;" id="object_a_jquery">
<div id="'. $fetch_locomotion ['id'] .'" style="perspective:1000px;height:100%;width:13%;display:inline-table;">
<div class="front">
<div id="object_list_price_bg" style="background-image:url(images/bg_price_f.png);"></div>
</div>
<div class="back">
<div id="object_list_price_bg_b" style="background-image:url(images/bg_price.png);"></div>
</div>
</div>
</a>';
}
<script>
jQuery(function ($) {
<?php foreach ($ids as $id): ?>
<?php echo "$('#". $id . "').flip();\n"; ?>
<?php endforeach; ?>
});
</script>
I would suggest adding a class attribute and querying on it (instead of each ID separately).
Also, using the alternative PHP syntax would be cleaner in this context.
This becomes:
<?php while ($fetch_locomotion = mysqli_fetch_assoc($result_locomotion)): ?>
<a href="index.php?price=<?= $hash ?>" style="text-decoration: none;" id="object_a_jquery_<?= $id ?>">
<div id="<?= $fetch_locomotion['id'] ?>" class="js-flipMe" style="perspective:1000px;height:100%;width:13%;display:inline-table;">
<div class="front">
<div id="object_list_price_bg" style="background-image:url(images/bg_price_f.png);"></div>
</div>
<div class="back">
<div id="object_list_price_bg_b" style="background-image:url(images/bg_price.png);"></div>
</div>
</div>
</a>
<?php endwhile ?>
<script>
jQuery(function ($) {
$('.js-flipMe').flip();
});
</script>
Note that I also changed your <a>'s id attribute to be unique, as it should be.
Im trying to make a dynamic jQuery function with some help from Advanced Custom Fields in Wordpress. This may not have something to do with the question, but I work in Wordpress with this plugin, anyway.
My code is like this:
<div id="restaurangmeny">
<h2>Vår meny</h2>
<? if( get_field('meny_for_restaurangen') ): ?>
<?php while( has_sub_field('meny_for_restaurangen') ): ?>
<div class="kategori">
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<? if( get_sub_field('matratter') ): ?>
<?php while( has_sub_field('matratter') ): ?>
<div class="matratt">
<div class="left">
<div class="namn"><?php the_sub_field('namn_pa_matratt'); ?></div>
<div class="beskrivning"><?php the_sub_field('beskrivning_av_matratten'); ?></div>
</div>
<div class="pris"><?php the_sub_field('pris_pa_matratten'); ?>:-</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--#restaurangmeny-->
So what I want is when I click on the div called "kategorinamn" I want to div called "matratter" be shown or hidden. That's why I use same id for "kategorinamn" and "matratter" just because these 2 belong together.
Simply, if I click on 1 I want everything that got the same id (1) be shown. If I click on 2 I want everything that got the same id (2) be shown.
I don't know what dynamic jQuery like this is called, but I'm far away from being good with jQuery so that's why I'm asking.
Something like this http://jsfiddle.net/gwK6d/18/, but with jQuery only and that fit's my code above.
1) Import jquery
2) Make sure you are not using the same id for multiple elements
3) Change this bit:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
To this:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<?php the_sub_field('namn_for_kategorin'); ?>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
</div>
4) Declare this function after load:
$(".kategorinamn").click(function(){
$(this).children('.matratter').toggle();
});
JSFIDDLE: http://jsfiddle.net/uRpc8/
<div style="margin-left:5%;width:5%;float:left;margin-right:10%;">
<img src="./1.png" id="imgstatus"/>
</div>
<div style="width:80%;float:left;">
<h3>Your transaction was <?php echo $message; ?> ! Your transaction reference number for any furthur communication is <?php echo $cust_ref_no; ?> .</h3>
</div>
</div>
I have this html. All I want is javascript which chnages the img src to <img src="./1.png" /> if $message='succes' and <img src="./2.png"/> when $message='failed'.
You could use the ternary operator to minimize code length.
<div style="margin-left:5%;width:5%;float:left;margin-right:10%;">
<img src="<?php echo ($message == 'success' ? 'success.jpg' : 'failed.jpg'); ?>" id="imgstatus"/>
</div>
<div style="width:80%;float:left;">
<h3>Your transaction was <?php echo $message; ?> ! Your transaction reference number for any furthur communication is <?php echo $cust_ref_no; ?> .</h3>
</div>
</div>
<div style="margin-left:5%;width:5%;float:left;margin-right:10%;">
<img src="<?php
if($message == 'success')
{
echo 'success.jpg';
}
else
{
echo 'failed.jpg';
}
?>" id="imgstatus"/>
</div>
<div style="width:80%;float:left;">
<h3>Your transaction was <?php echo $message; ?> ! Your transaction reference number for any furthur communication is <?php echo $cust_ref_no; ?> .</h3>
</div>
</div>