I'm currently building out a new website, and naturally, Internet Explorer is giving me trouble. I have some Javascript that's intended to reveal an element with an onclick.
It works exactly as intended on other browsers, but testing on IE 11 has lead me into one headache after another.
Internet Explorer is driving me nuts while I figure this out. A live example for the page effected is here: http://beerworld.sandbox.nikijones.com/whats-on-tap/
The elements effected by the bug are generated here:
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name; ?>
<article id="board-<? echo $post_slug; ?>" class="tap-board" >
<span class="tap-board-head">
<? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
</span>
<div class="row stats">
<? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Brewery: </h3><? echo $brewery; ?>
</div> <? } ?>
<? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Style: </h3><? echo $style; ?>
</div> <? } ?>
<? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Color Rating: </h3><? echo $color; ?>
</div> <? } ?>
<? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Location: </h3><? echo $location; ?>
</div> <? } ?>
<? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>ABV: </h3><? echo $ABV . "%" ; ?>
</div> <? } ?>
<? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Hop: </h3><? echo $IBU; ?>
</div> <? } ?>
</div>
<div class="row">
<? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
<h3>Description: </h3><p><? echo $desc ?></p>
</div> <? } ?>
<? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
<h3>Tasting Notes: </h3><p><? echo $taste ; ?></p>
</div> <? } ?>
<? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
<h3>Food Pairing: </h3><p><? echo $food; ?></p>
</div> <? } ?>
</div>
</article>
<? } ?>
And the script that only partially executes is here:
<script>
function boardswap(slug){
/* This function is for changing active taps, continued from the tap() function */
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
var activeBoard = document.getElementById(board_ID);
activeBoard.style.height = 'initial';
activeBoard.style.overflow = 'unset';
activeBoard.style.opacity = '1';
/*Display*/
document.getElementById('tap-beer-display').style.height = '800px';
document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
document.getElementById('tap-beer-display').classList.remove("rotated");
}
function tap(slug){
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
document.getElementById('tap-beer-display').classList.add("rotated");
var boards = document.getElementsByClassName('tap-board');
for (var i = 0; i < boards.length; i++){
boards[i].style.height = '0';
boards[i].style.overflow = 'hidden';
boards[i].style.opacity = '0';
}
/* Taps Section */
var taps = document.getElementsByClassName('tap');
for (var i = 0; i < boards.length; i++){
taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
}
var activeTap = document.getElementById(tap_ID);
activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';
/* Pause before continuing */
setTimeout(function(){ boardswap(slug); }, 1000);
}
</script>
All lines seem to trigger propperly with exception of the fact that on internet explorer, the article remains hidden by a height of zero.
These are the 3 PHP Files for the page to be absolutely thorough:
HEADER.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<title><? the_title(); ?> - Beer World</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- WP Head Includes -->
<?php wp_head(); ?>
<!-- Fancy Box Image Lightbox -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<!-- Google Analytics Code -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118283566-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-118283566-1');
</script>
<!-- Facebook Pixel Code -->
<!-- No code yet -->
</head>
<body id="body" <? body_class(); ?> onscroll="scrollHead();">
<!-- jQuery -->
<script src="<? echo get_template_directory_uri(); ?>/js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap -->
<script src="<? echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<video id="bgVideo" preload autoplay muted loop >
<source src="/wp-content/uploads/053119795-beer-bubbles-and-foam-slow-mot_H264_420-1.mov">
<source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.ogg" />
<source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.mp4" />
</video>
<div id="site-wrap">
<div id="bg-gradient">
<!-- Background Orange Gradient -->
</div>
<div class="container">
<header id="header">
<div id="social">
<a href="https://www.facebook.com/beerworldnewwindsor/" ><img src="<? echo get_template_directory_uri(); ?>/img/social-fb.png" alt="Facebook" /></a>
<a href="https://twitter.com/beerworldstore2" ><img src="<? echo get_template_directory_uri(); ?>/img/social-twitter.png" alt="Twitter" /></a>
<a href="#" ><img src="<? echo get_template_directory_uri(); ?>/img/social-li.png" alt="Linkedin" /></a>
</div>
<nav class="navbar navbar-expand-lg">
<!-- Button Created from Codepen By Collin Smith: https://codepen.io/collinscode/full/JLXJZY -->
<button class="navbar-toggler back" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="hamburger();">
<span class="navbar-toggler-icon">
<div class="btn1 btn">
<div class="bar-container">
<div class="bar1 bar"></div>
<div class="bar2 bar"></div>
<div class="bar3 bar"></div>
</div>
</div>
</span>
</button>
<? $headArgs = array('menu' => 'Header Menu' ,
'menu_class' => 'navbar-nav nav-fill' ,
'menu_id' => '' ,
'container' => 'div' ,
'container_class' => '' ,
'container_id' => 'HeaderMenu' ,
'before' => '' ,
'after' => '' ,
'link_before' => '' ,
'theme_location' => 'Header Menu',
'link_after' => '');
wp_nav_menu($headArgs); ?>
</nav>
<img src="<? echo get_template_directory_uri(); ?>/img/logo.svg" alt="Beer World Logo" id="navLogo" />
<?/* * * NIVO SLIDER REPLACED BY REVOLUTION SLIDER ON JUNE 6, 2018 * * /
<!-- Nivo Slider -->
<? if(get_field('header_slider')){ ?>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<? $images = get_field('header_slideshow'); ?>
<? foreach( $images as $image ): ?>
<img src="<? echo $image['sizes']['large']; ?>" data-thumb="<? echo $image['sizes']['thumbnail']; ?>" alt="<? echo $image['alt']; ?>" class="nivo-img" />
<? endforeach; ?>
</div>
</div>
</header>
*/ ?>
<!-- Revolution Slider -->
<? $term = get_queried_object(); ?>
<? if(get_field('header_slider', $term)){
$slides = strval(get_field('header_slideshow', $term));
echo do_shortcode($slides);
}else{ ?>
<div id="spacer"><!-- No Active Slider For This Page --></div>
<? } ?>
PAGE TEMPLATE:
<?php
/**
* Template Name: What's On Tap
*
* #package WordPress
* #subpackage Beerworld
* #since Beerworld 2.0
*/
?>
<? get_header(); ?>
</header>
<script>
function boardswap(slug){
/* This function is for changing active taps, continued from the tap() function */
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
var activeBoard = document.getElementById(board_ID);
activeBoard.style.height = 'initial';
activeBoard.style.overflow = 'unset';
activeBoard.style.opacity = '1';
/*Display*/
document.getElementById('tap-beer-display').style.height = '800px';
document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
document.getElementById('tap-beer-display').classList.remove("rotated");
}
function tap(slug){
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
document.getElementById('tap-beer-display').classList.add("rotated");
var boards = document.getElementsByClassName('tap-board');
for (var i = 0; i < boards.length; i++){
boards[i].style.height = '0';
boards[i].style.overflow = 'hidden';
boards[i].style.opacity = '0';
}
/* Taps Section */
var taps = document.getElementsByClassName('tap');
for (var i = 0; i < boards.length; i++){
taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
}
var activeTap = document.getElementById(tap_ID);
activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';
/* Pause before continuing */
setTimeout(function(){ boardswap(slug); }, 1000);
}
</script>
<main id="content-area"><?
if (have_posts()){
while (have_posts()){
the_post();
$beer_array = get_field('beers');
/* Beer Display Area */ ?>
<div id="tap-beer-display" class="container" >
<div class="row">
<h2>
TRY ONE OF OUR 24 FRESH, DRAFT BEERS
</h2>
</div>
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name; ?>
<article id="board-<? echo $post_slug; ?>" class="tap-board" >
<span class="tap-board-head">
<? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
</span>
<div class="row stats">
<? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Brewery: </h3><? echo $brewery; ?>
</div> <? } ?>
<? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Style: </h3><? echo $style; ?>
</div> <? } ?>
<? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Color Rating: </h3><? echo $color; ?>
</div> <? } ?>
<? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Location: </h3><? echo $location; ?>
</div> <? } ?>
<? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>ABV: </h3><? echo $ABV . "%" ; ?>
</div> <? } ?>
<? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Hop: </h3><? echo $IBU; ?>
</div> <? } ?>
</div>
<div class="row">
<? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
<h3>Description: </h3><p><? echo $desc ?></p>
</div> <? } ?>
<? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
<h3>Tasting Notes: </h3><p><? echo $taste ; ?></p>
</div> <? } ?>
<? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
<h3>Food Pairing: </h3><p><? echo $food; ?></p>
</div> <? } ?>
</div>
</article>
<? }
wp_reset_postdata(); ?>
</div>
<div id="tap-click" >
<h2>
CLICK ON ANY TAP BELOW
</h2>
<div class="row" >
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name;?>
<div class="tap" onclick="tap('<? echo $post_slug; ?>')" id="tap-<? echo $post_slug; ?>" >
<? $logo = get_field('logo'); ?><img class="tap-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" />
</div>
<? }
wp_reset_postdata(); ?>
</div>
</div>
<div id="tap-blurb" >
<? the_content(); ?>
</div>
<? }
}
?></main>
<? get_footer(); ?>
FOOTER.PHP
</div>
<div id="foot">
<img src="<? echo get_template_directory_uri(); ?>/img/left-wheat.png" alt="bottom left wheat decoration" class="wheat left" />
<footer class="container">
<nav class='col-12'>
<?
$footArgs = array(
'menu' => 'Footer' ,
'menu_class' => 'navbar-nav' ,
'menu_id' => 'foot-menu' ,
'container' => 'div' ,
'container_class' => '' ,
'container_id' => 'footerMenu' ,
'before' => '' ,
'after' => '' ,
'link_before' => '' ,
'link_after' => '',
'theme_location' => 'Footer Menu');
wp_nav_menu($footArgs);
?>
</nav>
<div class="row" id="foot-info">
<div class='col-12 col-sm-12 col-md-12 col-lg-6'>
<img id="foot-logo" src="<? echo get_template_directory_uri(); ?>/img/logo.png" alt="Beer World Logo" style="width: 160px; max-width: 160px; min-width: 160px;" />
<span style="display:block;"><span style="font-size:22pt;" >BEER WORLD</span> 323 Windsor Highway • New Windsor, New York</span>
<span><a style="color: white;" href="tel:8455612244">845.561.2244</a> | <a style="color: white;" href="mailto:Info#beerworld.com">Info#beerworld.com</a></span>
</div>
<div class='col-12 col-sm-12 col-md-12 col-lg-6'>
<p style="text-align:right;">© 2018 BEER WORLD <br />WEBSITE DESIGN BY THE NIKI JONES AGENCY, INC. </p>
</div>
</div>
</footer>
<img src="<? echo get_template_directory_uri(); ?>/img/right-wheat.png" alt="bottom right wheat decoration" class="wheat right" />
</div>
</div>
<?php wp_footer(); ?>
<script type="text/javascript" src="<? echo get_template_directory_uri(); ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
//Navbar Hamburger Script
function hamburger(){
var toggler = $('#header').find('.navbar-toggler');
if (toggler.hasClass('active')) {
toggler.removeClass('active');
toggler.addClass('back');
}else{
toggler.removeClass('back');
toggler.addClass('active');
}
}
var $document = $('#body'),
$element = $('#header'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 20) {
// user scrolled 20 pixels or more;
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
</script>
<script src="<? echo get_template_directory_uri(); ?>/js/ada.js"></script>
Probably you forgot to add <!DOCTYPE html> at the begining of the page, so IE switches to 5.5 emulation, makes tag self-closing and you get an empty element.
Related
is it possible to work in pagination if there are no tables or do I have to change my output style entirely.
<div class="row">
<?php if ($company != null): ?>
<?php foreach ($company as $row): ?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="job-grid">
<div class="job-title-sec">
<div class="thumb"><?php echo $row['logo']; ?></div>
<div class="c-logo"> <img src="http://placehold.it/235x115" alt="" /> </div>
<div><h3><strong><?php echo $row['employerName']; ?></strong></h3></div>
<div><h3><strong>SECTOR: </strong><?php echo $row['sectorName']; ?></h3></div>
<div class="job-lctn"><i class="fa fa-map-marker"></i><?php echo $row['stateName']; ?></div>
</div>
<div class=""><i class="fa fa-external-link"></i>Website</div>
<div><i class="fa fa-external-link"></i>About</div>
</div><!-- JOB Grid -->
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if($this->session->flashdata('none') != null) {
echo '<div class="alert alert-danger">';
echo $this->session->flashdata('none');
echo '</div>';
} ?>
<?php endif; ?>
</div>
There are a large number of results for the foreach and I want to split it using pagination. Thanks
I'm having trouble on the wordpress page that I'm currently working..
I used this code >>https://github.com/alexcavender/wordpress-ajax-load-more
with some adjustment (complete code below) but the "load more button doesn't hide whenever it reach the last post.
<div id="primary" class="content-area container">
<main id="main" class="site-main" role="main">
<?php if (have_posts()) : ?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:', 'thinkbit'),
'after' => '</div>',
));
?>
</div><!-- .entry-content -->
<div id="all-post" class="all-post wrapper">
<?php
$args = array(
'post_type' => array('post', 'project', 'communities'),
'posts_per_page' => 10
);
$the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : ?>
<div class="row masonry">
<?php while ($the_query->have_posts()) : $the_query->the_post();
/*$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item*/
$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ($termsArray as $term) { // for each term
$termsString .= $term->slug . ' '; //create a string that has all the slugs
}
?>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
<div id="things-go-here"></div>
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<div id="load-more-posts" class="text-center">
<h4>Load More</h4>
</div>
<?php else : ?>
<?php get_template_part('template-parts/content', 'none'); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
function load_more_posts() {
$nonce_check = check_ajax_referer('extra-special', 'security');
if ($nonce_check) {
$offset = $_POST['offset'];
$args = array(
'post_type' => array('post', 'project', 'communities'),
'post_status' => 'publish',
'posts_per_page' => '10',
'orderby' => 'date',
'order' => 'DESC',
'offset' => $offset,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
while ($loop->have_posts()) {
$loop->the_post();
?>
<article>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
</article>
<?php
}
wp_reset_postdata();
}
wp_die();
} else {
exit();
}
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
Where is your js, did you catch ajax response yet?
you can detect the last post and display none or hide the button by using this.
This is just an example
<?php if (($loop->current_post +1) == ($loop->post_count)) {
echo 'This is the last post'; ?>
<style>
#load-more-posts{display:none !important;}
</style>
<?php
} ?>
The Code Below is when you click a certain div. the hidden item will show up and change the css to display block. and i have multiple menu or option what im trying to do is when you click a certein div. and you click another one. the first one close automatically this is the indiciator <?php the_title(); ?> or id of the div.
Html
<a id="mylink" class="career-en blue" href="javascript:showhide('<?php the_title(); ?>')">
<div class="Career-entry" >
<div class="row" >
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'position' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'brandsubsidiary' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'work_location' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'date_posted' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'aplication_dead_line_' ); ?>
</div>
</div>
</div>
</a>
<div class="career-content" id="<?php the_title(); ?>" style="display:none;">
<div class="row">
<div class="col-md-6">
<h6> <i> Position Summary: </i></h6>
<?php the_field( 'position_summary' ); ?>
</div>
<div class="col-md-6">
<h6> <i> Requirments: </i></h6>
<?php if( have_rows('requirments') ):?>
<?php while ( have_rows('requirments') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h6> <i>Major Duties & Responsibilities: </i></h6>
<?php if( have_rows('major') ):?>
<?php while ( have_rows('major') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
<div class="col-md-6">
<h6> <i> Submit yoru resume: </i></h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 col-sm-12">
<?php echo do_shortcode( '[contact-form-7 id="112" title="Career"]' ); ?>
</div>
</div>
</div>
</div>
<hr class="career-hr">
<?php if ($x == 2) { echo '<div class="blog_box clear"></div>'; $x = -1; } $x++; ?>
<?php endwhile; ?>
</div>
Css
.red{
background-color: #e7f2ca;
display: block;
}
JS
<script>
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<script>
$('a#mylink').click(function() {
$(this).toggleClass('red blue');
});
</script>
Add class ex. 'autohide' to all divs you want to autohide. Then:
$('.autohide').click(function(){
$('.autohide').hide();
$(this).show();
})
Just tweak your code a bit, just use a variable to keep track of currently open section.
var current_open_section;
function showhide(id){
//hide open section first
if(current_open_section){
current_open_section.style.display = 'none';
}
//let the selected section be current open section
current_open_section = document.getElementById(id);
//show current open section
current_open_section.style.display = 'block';
}
My website looks good on every browser except Safari.
In Safari it shows a huge whitespace.
Here you can see the difference between Chrome and Safari.
This is Safari:
And this is Chrome:
<?php get_header();?>
<?php while (have_posts()): the_post();
$imgId = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($imgId, 'full'); ?>
<div class="theBiggest">
<?php if ($imgId) { ?>
<div style="background-image: url(<?php echo $image[0] ?>); background-repeat: no-repeat; background-size: cover; min-height: 346px;background-position:100% 60%; " >
<div class="text-center" style="padding-top: 130px;">
<img src="<?php echo THEME_URL ?>/images/logo_icon_white.png" /><br>
<div class="title-page"><?php the_title();?></div>
</div>
</div>
<div class="page-bg" >
<?php } else { ?>
<div class="container text-center bg-white" style="padding-top:50px; margin-bottom: 20px;">
<img class="top-icon" src="<?php echo get_field('top_icon')['url'] ?>" /><br>
<?php $title = get_the_title();
$ar = explode(' ', strtoupper($title)); ?>
<span class="title-page grey-txt"><?php echo $ar[0] ?></span>
<?php if (count($ar) > 1) {?><span class="title-page orange-txt"><?php echo $ar[1] ?></span><?php }?>
</div>
<!-- TRAININGEN page or Coaching page -->
<?php if (have_rows('ups_trainingen')): ?>
<div class="greyBlock">
<?php if(is_page('Leiderschaps training')) {
echo "<p>Hierom kiest u voor een <strong>training</strong> van InReach</p> ";
$ctn = "t";
}
if (is_page('Leiderschaps coaching')) {
echo "<p>Hierom kiest u voor <strong>coaching</strong> van InReach</p> ";
$ctn = "c";
} ?>
<?php $i=1;?>
<?php while (have_rows('ups_trainingen')): the_row();
$text = get_sub_field("text");
$link_popover = get_sub_field("link/popover");
?>
<button type="button" class="orangeBtn btn " id="<?php echo $ctn . $i;?>" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<?php echo $link_popover ?>"><?php echo $text; ?></button>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif;
} // else $imgId
while (have_rows('sections')) { the_row();?>
<div class="container page-section">
<div class="content" >
<?php the_sub_field('content')?>
</div>
</div>
<?php
}
// OVER page
if ($post->ID == 221) { ?>
<div style="display:none">
<div id="formpopup" class="registen_form" style="padding: 30px">
<!-- <h2 style="padding-top:25px"><?php echo _e('Alles uit uw medewerkers halen?', 'new_inreach') ?></h2> -->
<h2 style="padding-top:25px"><?php echo _e('Abonneer op deze gratis leiderschapstips', 'new_inreach') ?></h2>
<!-- <h2><?php echo _e('Ontdek gratis de 3 grootste missers die u niet moet maken.', 'new_inreach') ?></h2> -->
<?php gravity_form(7, false, false, false, '', true);?>
<!-- <h4><?php echo _e('En ontvang regelmatig gratis tips om uw leiderschap te versterken', 'new_inreach') ?></h4> -->
<h4></h4>
</div>
</div>
<div class="container page-section text-center">
<div style="margin-bottom: 30px;">
Ontvang leiderschapstips
Bekijk trainingsmogelijkheden
Plan een coachingssessie in
</div>
</div>
<?php } ?>
<?php if (have_rows('info_buttons')): ?>
<div class="info_button" >
<p style="color:#fff;">Kies uw snelheid</p>
<?php while (have_rows('info_buttons')): the_row();
$image = get_sub_field('image');
$link = get_sub_field('link');
?>
<div><img src="<?php echo $image['url']; ?>"></div>
<?php endwhile;?>
</div>
<?php endif;?>
<?php if ($post->post_content !== "") { ?>
<div class="container text-center bg-white test"><?php the_content();?></div>
<?php } ?>
</div><!-- page-bg -->
<?php if (have_rows('orange_&_grey_buttons')): ?>
<?php while (have_rows('orange_&_grey_buttons')): the_row();
$orangeBtnText = get_sub_field('orange_btn_text');
$orangeBtnlink = get_sub_field('orange_btn_link');
$greyBtnText = get_sub_field('grey_btn_text');
$greyBtnlink = get_sub_field('grey_btn_link');
?>
<?php
$footerText = get_field('footer_text');
if ($footerText) { ?>
<div class="page-footer" style="background-color: <?php the_field('footer_color');?>">
<div class="container"><?php echo $footerText ?></div>
</div>
<?php } ?>
<div class="orange-grey-btns" style="background-color:<?php the_field('footer_color');?>;padding:15px 0;">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 ">
<div class="col-md-12 orange-btn">
<?php echo $orangeBtnText; ?>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="col-md-12 grey-btn">
<i><?php echo $greyBtnText; ?></i>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;endif; //orange_&_grey_buttons?>
</div>
<?php endwhile; //have_posts?>
<?php get_footer();?>
I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!
HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}