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);
});

Javascript auto scroll on div

I would like to scroll at the end of the div so in my case I can see the last message of chat.
Here's what I have but it doesn't work, the scroll is actually on top of the div.
<script type="text/javascript">
var divChat = document.getElementById('chat');
divChat.scrollTop = divChat.scrollHeight;
</script>
<div id="chat" style="border-style:groove;overflow-y: auto; height:50%;">
<?php
$response = $bdd->query('SELECT * FROM minichat');
while ($rsp = $response->fetch())
{
echo '['.$rsp['date_message'].']'." <strong>".htmlspecialchars($rsp['pseudo'])
."</strong>: ".htmlspecialchars($rsp['message'])."<br>";
}
?>
</div>
Thanks by advance for any help,

This should work fine:
<div id="chat" style="border-style:groove;overflow-y: auto; height:50%;">
<?php
$response = $bdd->query('SELECT * FROM minichat');
while ($rsp = $response->fetch())
{
echo '['.$rsp['date_message'].']'." <strong>".htmlspecialchars($rsp['pseudo'])
."</strong>: ".htmlspecialchars($rsp['message'])."<br>";
}
?>
</div>
...
<script type="text/javascript">
var divChat = document.getElementById('chat');
divChat.scrollTop = divChat.scrollHeight;
</script>
</body>

Javascript to have a fixed navbar is not working

http://www.new.techmoney360.com/ is the website and it's being developed with wordpress.
That navigarion bar is part of the <header> that also encompass my logo section up top so I'm not sure if that causing issues.
This is the entire html the encompasses the navigation bar that I want to stick to the top when I scroll past it.
<div id="navmenu" class="mkd-menu-area">
<div class="mkd-grid">
<div class="mkd-vertical-align-containers">
<div class="mkd-position-left">
<div class="mkd-position-left-inner">
<?php if(is_active_sidebar('mkd-left-from-main-menu')) : ?>
<?php dynamic_sidebar('mkd-left-from-main-menu'); ?>
<?php endif; ?>
<?php discussion_get_main_menu(); ?>
</div>
</div>
<div class="mkd-position-right">
<div class="mkd-position-right-inner">
<?php if(is_active_sidebar('mkd-right-from-main-menu')) : ?>
<?php dynamic_sidebar('mkd-right-from-main-menu'); ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
This is the javascript I'm using to target the navigation bar (thanks to akinuri for the script)
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("navmenu");
if (window.pageYOffset > 182) {
header.style.position = "absolute";
header.style.top = pageYOffset + "px";
} else {
header.style.position = "";
header.style.top = "";
}
}

Place .mkd-top-bar outside of all wrappers and whatnot, place it below the <body> and in it's css apply position: fixed;
.mkd-top-bar {
background-color: #303030;
position: fixed;
}
Is this what you're looking for?

#Jacob is partially correct, you don't need (as much) JavaScript here. Here's how you can resolve the issue. Replace the current functionality with this:
window.onscroll = stickyNav;
function stickyNav() {
var header = document.getElementById("navmenu");
if (window.pageYOffset > 70) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
Then, create a new class called .sticky with the following styling adjustments:
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Edit: update stickNav to stickyNav.

How to see if a div's bottom is 100 px from bottom?

I am using sticky class to stick a div. The problem is that it sticks correctly from top but at the bottom, it overlaps the footer.
This is my HTML
<div class="tab-content">
<div role="tabpanel" class="tab-pane active " id="menu1">
<div class="col-sm-12"><div class="clear"> </div></div>
<!-- LEFT NAV START -->
<div class="col-sm-3" id="sticky-anchor2">
<div class="sticky2">
<span style="color:red"><strong>Menu Group</strong></span>
<ul aria-labelledby="dropdownMenu1">
<?php foreach ($categories as $key => $value) { ?>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="<?php echo $nav_url; ?>#cat_<?php echo str_replace(' ', '_', trim($key)); ?>" class="anchorLink" style="color:#FFF !important;">
<button class="btn btn-danger btn-sm btn-block setlbl" type="button"><?php echo $key; ?></button></a>
</li>
<?php } ?>
</ul>
</div>
This is my jquery code.
var window_top = $(window).scrollTop();
var div_top2 = $('#sticky-anchor2').offset().top - 100;
if (window_top > div_top2) {
$('.sticky2').addClass('sticky stick');
} else {
$('.sticky2').removeClass('sticky stick');
}
What I want is that if the div is, let's say 150 px from bottom, it should remove the stick class. What should I do?

Try this:
It' working, try my fiddle: https://jsfiddle.net/v3kq1ddd/
or run the snippet in full screen and resize the window and you will see the border change from red to blue.
$(document).ready(function() {
$(window).resize(function() {
var eHeight = $(".sticky2").height();
var eTop = $(".sticky2").offset().top;
var tot = eHeight + eTop;
var heightDifference = $(window).height() - tot;
$('.height').text(heightDifference);
if(heightDifference < 150) {
$('.sticky2').addClass('blue');
} else {
$('.sticky2').removeClass('blue');
}
});
});
.sticky2 {
height: 200px;
width: 200px;
border: 1px solid red;
}
.blue {
height: 200px;
width: 200px;
border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable>Space to buttom</lable>
<div class="height"></div>
<div class="sticky2">detta är en div</div>

I am taking document height and window height, if have some particular
Div please take the height of that.
You have to calculate scroll Amount at each and every scroll, so
'Scroll' event will be used which will fire at every scroll. Other
thing to remember if 'sticky stick', is not two different class use
hyphen between them.
$(window).scroll(function(){
var scrollamount=$(window).scrollTop();
var totalheight=($(document).height() - ($(window).height()));
if(scrollamount > totalheight-100)
{
$('.sticky2').addClass('sticky_stick');
}
else
$('.sticky2').removeClass('sticky_stick');
});
JsFiddle: https://jsfiddle.net/2jo69opo/

image overlay for php generated items

So I have a roll over effect for my mock store, the images and info for each boxes are taking from .sql file and auto generated sections. I want it too cover each section. I could hard code it, but that's a little too draconian.
<div id="scoll" class="group">
<div class="container">
<div class="center_items">
<?php
//external pages area
include_once('config\database.php');
include_once('object/chair.php');
$database = new Database();
$conn = $database->getConnection();
$chair = new Chair($conn);
$stmt = $chair->readAll();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
<div class="product_box" >
<img src="img/<?php echo $row['THUMB']; ?>" alt="chair_image"> </a>
<h4> <?php echo $row['chair_name'];?> </h4>
<p>$<?php echo $row['PRICE'];?></p>
<div class="buy-box-shadow group">
Buy me!
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
JS
onload=init;
function init() {
document.getElementsByClassName("product_box")[0].onmouseover = function(e){
e.preventDefault();
mouseOver();
}
document.getElementsByClassName("product_box")[0].onmouseout = function(e){
e.preventDefault();
mouseOut();
}
function mouseOver() {
document.getElementsByClassName("buy-box-shadow")[0].style.opacity = .9;
}
function mouseOut() {
document.getElementsByClassName("buy-box-shadow")[0].style.opacity = 0;
}
See the code is hard coded to be the first element, a tad confused on how to make it go for every element.

You don't need JavaScript for that, you can do it just with CSS.
.product_box .buy-box-shadow {
opacity: 0.9;
display: none;
}
.product_box:hover .buy-box-shadow {
display: block;
}

Should be able to do this with forEach. Like so:
function init() {
var product_boxes = document.getElementsByClassName("product_box");
product_boxes.forEach(function(currentValue, index, array){
currentValue.onmouseover = function(e){
e.preventDefault();
mouseOver();
}
});