We Keep Coding

How to set the height of both the columns to the highest of them with jQuery?

A sheetdb plugin pulls data from a shared googlesheet to display them on a WordPress site. The page displays nothing else but this dynamic contents from the googlesheet. It is a simple page. Below is custom field content from WordPress page editor. This is what prints data on the page via template(Code added at the end of this post)
[sheetdb url="https://sheetdb.io/api/v1/ymk583vab4dwh" search="Approval=1&Display=1"]
<div class="story-entry">
<div class="content"> {{Story}} </div>
<div class="contestent-name">-{{First Name}} {{Initial}}</div>
</div>
[/sheetdb]
CSS for the div displaying columns on the page.
.story-entry {
margin: 15px 10px;
border: solid 1px black;
padding: 10px 20px;
width: calc(50% - 22px);
float: left;
}
<?php $story = get_field('story'); ?>
<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>
The problem with the columns is them having the same height resulting in unnecessary wastage of the extra space. I got the logic to dynamically find out the max height of the two columns and set both them to the max height.
With the following jQuery code I am trying to use to set the height to both the columns.
$(document).ready(function() {
var maxHeight = 0;
var entryNumber = 1;
var prevEntrySelector = null;
$(".story-entry").each(function(){
alert('Hello');
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
if ((entryNumber % 2) == 0) {
// Even entry.
// Set height of previous entry and this entry to maxHeight.
$(this).height(maxHeight);
prevEntrySelector.height(maxHeight);
// this - this selector - this story entry
maxHeight = 0;
}
prevEntrySelector = $(this);
entryNumber ++;
});
$(".entry-selector").height(maxHeight);
});
This code doesn't work on this page. Below is the reference page.
https://knackshops.com/pages/spread-joy-message
What I did so far is as seen below with unnecessary space after the content
This is the page that I want to make look like this with jQuery.
The full template code for this page:
<?php
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];
$link_text = get_field('link_text');
$link_to_contest = get_field('link_to_contest');
$story = get_field('story');
?>
<?php get_header(); ?>
<div class="default-flex-hero relative">
<div class="inside">
<div class="row mb0 pt pb">
<?php if($image): ?>
<div class="col col-xs-12 col-md-2 col-lg-2 mb0">
<picture>
<source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
<source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
<source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
<source srcset="<?php echo($image['sizes']['xlarge']); ?>">
<img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
</picture>
</div>
<?php endif; ?>
<div class="hero-col col col-xs-12 col-md-10 col-lg-10 mb0">
<h1 class="mb0 color-tan-dark">
<?php if( $hero_h1 ): echo $hero_h1; endif; ?>
</h1>
<?php if( $hero_h2 ): ?>
<h2 class="mb0 mt2 alt-heading h4">
<?php echo $hero_h2; ?>
</h2>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="contest-link">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-link-text col col-xs-12">
SHARE YOUR OWN STORY HERE
</div>
</div>
</div>
</div>
</div>
**<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>**
<?php get_footer(); ?>

You can do with css
just add these line
.contest-story-text > div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.story-entry {
height: auto !important;
}
#media only screen and (max-width: 600px) {
.story-entry {
width: calc(100% - 22px) !important
}
}

I finally accomplished it with jQuery and an eventhandler for the plugin sheetdb.
window.addEventListener("sheetdb-downloaded", function() {
var maxHeight = 0;
var entryNumber = 1;
var prevEntrySelector = null;
$(".story-entry").each(function(index) {
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
if ((entryNumber % 2) == 0) {
// Even entry.
// Set height of previous entry and this entry to maxHeight.
$(this).height(maxHeight);
prevEntrySelector.height(maxHeight);
// this - this selector - this story entry
console.log( "Height: " + maxHeight );
maxHeight = 0;
}
prevEntrySelector = $(this);
entryNumber ++;
return true;
});
$(".entry-selector").height(maxHeight);
});

Can someone explain why my "fixed navigation on Scroll" is not working?

I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.
The website in question is:
www.guerrilla.nz
The Code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<script src="https://use.typekit.net/gbc6dao.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.j s"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type='text/javascript'>
// Sticky nav
var nav = $('stick');
var navHomeY = nav.offset().top;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if ($(this).scrollTop() > navHomeY){
nav.addClass("fixed-nav");
}
else{
nav.removeClass("fixed-nav");
}
});
</script>
<style>
.fixed-nav {
position: fixed;
top: 0;
z-index: 1001;
width: 100%;
}
#stick.fixed-nav {
background-color: rgba(255, 255, 255, 1);
position: fixed!important;
top: 0;left: 0; right: 0;
top: 0;
width: 100%;
z-index: 50000!important;
}
</style>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'before' ); ?>
<?php if( is_page( 'Home' ) ) { ?>
<div class="cb-slideshow-container">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>OWNER OF A SMALL BUSINESS?</h3> </div></li>
<li><span>Image 02</span><div><h3>OR TRADIE,<br>
LOOKING TO GO IT ALONE?</div></li>
<li><span>Image 03</span><div><h3>DON'T KNOW<br>
WHERE TO START...</h3></div></li>
<li><span>Image 04</span><div><h3>WE CAN HELP</h3></div></li>
<li><span class="toe">Gerrilla</span></li>
</ul>
</div>
<?php } ?>
<header class="site-header" role="banner">
<nav id="stick" class="site-navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Your site title as branding in the menu -->
<?php if ( get_theme_mod( 'andys_logo' ) ) : ?>
<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'andys_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'> </a>
</div>
<?php else : ?>
<hgroup>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php endif; ?>
</div>
<div class="getstartedn-wrap">
<a href="http://www.guerrilla.nz/contact-us/">
<div class="nav-getstarted getstarted-button">GET STARTED</div>
</a>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'nav',
'container_id' => 'navbar-collapse',
'container_class' => 'collapse navbar- collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div> <!--<div style="background-color:#000; height:30px; color:#000;"> dsfsf</div> -->
</div><!-- .container -->
</nav><!-- .site-navigation -->
</header><!-- #masthead -->
I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.

Just take a look at your console. There's an error: Uncaught TypeError: Cannot read property 'top' of undefined.
It's pretty simple. Get the outerHeight of the slideshow element and then apply the sticky class to your nav if this specific height is reached.
Don't forget to add a padding-top to your body with the same height of your nav. Because your navigation will be fixed at the top, your body needs a padding-top.
Here's a simple example:
$(window).scroll(function() {
var slideshow = $('.slideshow').outerHeight();
var nav = $('nav');
if ($(window).scrollTop() >= slideshow) {
nav.addClass('sticky');
} else {
nav.removeClass('sticky');
}
});
html, body {
padding: 0;
margin: 0;
}
.slideshow {
width: 100%;
height: 200px;
background: blue;
}
nav {
width: 100%;
height: 50px;
background: red;
}
.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
}
main {
/* Get some space */
min-height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
<p>
Just for testing
</p>
</div>
<nav>
<p>
Just to demonstrate it
</p>
</nav>
<main>
<p>
Just to get some space
</p>
</main>

Hide specific element when hover over a different element

I have a shopping bag icon under my posts(.wrap-front-page-shop) and I am trying to make it so that when you hover over the shopping bag icon the post excerpt will disappear(.front-page-post-excerpt). I'm trying to do this with css, and I think I have written the css right, but it is not working. Does anyone see my mistake, or is there a better way to fix this problem? Thanks in advance.
the css
.wrap-front-page-shop:not(:hover) .front-page-post-excerpt {
font-family: 'Crimson Text', serif;
font-size: 15px;
padding: 50px 50px;
display: block;
position:absolute;
}
.wrap-front-page-shop:hover .front-page-post-excerpt {
color: #ffffff;
visibility: hidden;
display: block;
position:absolute;
}
front-page-shop-the-post.php (the code is for the shopping icon and the actual shopping widget that shows up when you hover over the shopping icon - it works correctly)
<div class="wrap-front-page-shop">
<div class="front-page-shop-image"><img src="http://localhost:8888/wordpress/wp-content/uploads/2017/01/shopping-shopping-bag-icon.png" /></div>
<div class="shopthepost-widget-front">
<?php if (shortcode_exists('show_shopthepost_widget')) {
// Get the value of the custom field defined in the editor
$widgetId = get_post_meta(get_the_ID(), 'shortcode_id', true);
// Check if a value is set
if (!empty($widgetId)) {
$shortcode = '[show_shopthepost_widget id="'.$widgetId.'"]';
} else {
// or use a default widget
$shortcode = '[show_shopthepost_widget id="2379026"]';
}
echo do_shortcode($shortcode);
} ?>
</div>
</div>
the css to show the shopping widget when you hover over shopping icon)
.wrap-front-page-shop:not(:hover) .shopthepost-widget-front {
background-color: #ffffff;
visibility: hidden;
display: block;
position:absolute;
}
.wrap-front-page-shop:hover .shopthepost-widget-front {
display: block;
position:absolute;
margin-left:-225px;
bottom:150px;
background-color: #ffffff;
padding:30px;
}
.wrap-front-page-shop:hover .stp-control {
background-color: #ffffff !important;
display:inherit !important;
}
.wrap-front-page-shop {
display: inline-block;
}
.front-page-shop-image {
padding-right: 15px;
padding-bottom: 30px;
}
font-page.php that shows post excerpt code
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
JS I tried adding in for a possible solutions (did not work)
var _products = document.getElementById("front-page-shop-image"),
_hideIfHovered = document.getElementById("front-page-post-excerpt");
for (var i=0, e = _products.children; i < e.length; i++) {
e[i].onmouseenter = function() {
_hideIfHovered.style.display = "none";
}
e[i].onmouseleave = function() {
_hideIfHovered.style.display = "inherit";
}
}

unable to dynamically set height of div

I want to dynamically resize one of my divs to take the height of the viewport using the following javascript
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
$("#main-container-col2-rt-layout").css('height',wH);
console.log(wH);
};
$(document).ready(function() {
applyMapContainerHeight();
});
</script>
My div is coded as:
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
...........
This is a magento page for my e-commerce site. Please help!

Aside from vm and vh <length> datatypes, I see that your code works!
<style>
body {
margin: 0; padding: 0;
}
.main-container {
background: red;
}
</style>
<body>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
</div>
</div>
</div>
</div>
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
document.getElementById("main-container-col2-rt-layout").style.height = wH;
console.log(wH);
};
(function() {
applyMapContainerHeight();
})();
</script>
</body>
Your question was somehow unclear about what the problem really was, but if the problem is you want wrapper and page not to have a white background, then the solution is to apply dynamic width to the highest div element (i mean the grandpa i.e. wrapper).

Css has units specifically for this:
vh and vw
Demo: http://jsfiddle.net/jfbrdomb/show
div.red {
height: 100vh;
width: 100vw;
background-color: red;
}

Applying Wookmark tile plugin to a wordpress Theme using a posts-loop

I'm trying to apply the Wookmark jQuery Plugin to my wordpress theme. The implementation takes place with a Loop, as the point of the subject is to create a visually pleasing portfolio.
For the subject i've registered a new type of post typed 'portfolio' and made a loop that distinguishes between posts with pictures and those without.
The problem is of course, that it doesn't work.
No returning errors, all scripts are in place [or so it seems to me] - but the posts do not receive whatever treatment [jQuery Voodoo] that the WookMark is supposed to apply. All I get all the posts, called in order.
I've enqueued the scripts into my theme through the functions.php file thus:
if ( !function_exists('core_mods') ) {
function core_mods() {
wp_enqueue_script('jquery-custom', get_template_directory_uri().'/assets/wookmark/libs/jquery.min.js' );
wp_enqueue_script('wookmark', get_template_directory_uri().'/assets/wookmark/jquery.wookmark.js', array('jquery-custom'), false, false);
}
}
add_action( 'wp_enqueue_scripts', 'core_mods' );
And the actual HTML of page-portfolio.php is as follows:
<?php get_header(); ?>
<?php query_posts('post_type=portfolio') ?>
<?php if (have_posts()) : ?>
<script type="text/javascript">
(function($) {
$('.masonry-object').wookmark({
align: 'center',
autoResize: false,
comparator: null,
container: $('#masonry-container'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
})(jQuery);
</script>
<div id="masonry-container">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="masonry-object" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('masonry-thumb'); ?>
</a>
<div class="masonry-title">
<?php echo the_title(); ?>
</div>
</div><!--.masonry-thumbnail-->
<?php elseif ( !has_post_thumbnail() ): ?>
<div class="masonry-details">
<h5>
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<span class="masonry-post-title">
<?php the_title(); ?>
</span>
</a>
</h5>
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details -->
<?php endif; ?>
</div>
<?php endwhile;?>
</div> <!-- End .masonry-container -->
<?php endif; ?>
<?php get_footer(); ?>
The CSS attached to the subject is such:
#masonry-container {
}
.post-area {
background: #ffffff ;
padding: 10px ;
}
.masonry-thumbnail {
}
.masonry-thumbnail img {
max-width: 100%;
height:auto;
}
.masonry-title {
position: absolute;
width: auto;
background-color: #ef9430;
color: #ffffff;
padding: 5px;
bottom: 0px ;
right: 0px;
}
.masonry-details {
padding: 10px;
background-color: #ffffff;
}
.masonry-object {
width: 25% ;
transition: all 1s ease;
}
.masonry-object:hover {
z-index: 2;
box-shadow: 0 0 20px #ffffff;
transition: all 1s ease;
}

(function($) {...})(jQuery); is not the same as $(function() {...});
First will be executed as soon as it is encountered, second one is jQuery shorthand for $( document ).ready(), and will run when the DOM is ready for JavaScript. The solution is to move the script below the #masonry-container div, or to use the ready event. There is a small problem in WordPress since default jQuery uses jQuery.noConflict() so $ is not referenced to jQuery object. My favorite solution for that is:
jQuery(function ($) {
});
It will run on document ready, with $ as a jQuery alias.
Side note: - use position: relative on #masonry-container div, as documentation says.