Automatic reset when click another link

Automatic reset when click another link - javascript

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

Related

Filling Javascript array from PHP request

I want to fill a JavaScript array with results from my PHP query to database. I have initially filled it with variables but i wanna get those from database . I am putting the query result the 'liste' variable, I don't know if I can use foreach to fill it, any help would be appreciated thanks.
PHP code:
<?php
$sql="SELECT * FROM produits WHERE cat='Interieur'";
$req=$db->prepare($sql);
$req->execute();
$liste=$req->fetchAll(PDO::FETCH_OBJ);
?>
<?php foreach ($liste as $product): ?> ````
Javascript code:
var arrayTitle = ["Chaise Skandinave", "Chaise2", "Chaise3","Table1","Table2","Table3","Fauteuil1","Fauteuil2","Fauteuil3"];
var arrayImage = ["images/ChaiseSkandinave.jpg", "images/Chaise2.jpg", "images/Chaise3.jpg","images/Table1.jpg","images/Table2.jpg","images/Table3.jpg","images/Fauteuil1.jpg","images/Fauteuil2.jpg","images/Fauteuil3.jpg"];
var arrayDesc = ["a", "b", "c","d","e","f","g","h","i"];
var modal = document.getElementById('myModal');
function openModal(i)
{
modal.style.display = "block";
$(document).ready(function()
{
document.getElementsByClassName("modalimg")[0].src = arrayImage[i];
document.getElementsByClassName("modaltitle")[0].innerHTML = arrayTitle[i];
document.getElementsByClassName("modaldesc")[0].innerHTML = arrayDesc[i];
});
}
HTML CODE:
<div class="container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<span>Meubles Interieurs</span>
<h2>Produits</h2>
<p></p>
</div>
</div>
<div class="row" id="row1">
</div>
<?php
$sql="SELECT * FROM produits WHERE cat='Interieur'";
$req=$db->prepare($sql);
$req->execute();
$liste=$req->fetchAll(PDO::FETCH_OBJ);
?>
<?php foreach ($liste as $product): ?>
<div class="col-md-4 text-center animate-box">
<div class="product">
<div class="product-grid" style="background-image:url(images/<?php echo $product->num; ?>.jpg)">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3><?php echo $product->nom; ?> </h3>
<span class="price"><?php echo number_format($product->prix,2,',',''); ?> TND</span>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>

ACF Change Background Image on Hover

Been trying to get a solution for this for a while now and haven't been able to come up with anything that works.
My goal is that when you hover over this particular div, the background image will change to a darkened version of that background image. I've tried using the filter property but it affects all of the inside divs containing content. (Through JavaScript)
This is being done inside a repeater field through ACF. So the background-image is being selected by the sub-field in within the repeater.
I've attempted some Javascript but haven't found a solution.
Also looked at replacing the div's hence you'll see a hover-div. But had no luck.
Below you'll find my code for reference.
Any assistance would be greatly appreciated!
<div class="member-wrap grid-x grid-margin-x grid-margin-y">
<?php if ( have_rows( 'branch_team_members' ) ) : ?>
<?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
<div class="branch-member-main small-12 medium-6 large-3 cell">
<?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
<div class="main-member-hover" style="background-image: url('<?php echo $team_member_hover_image['url']; ?>');">
</div>
<?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
<div class="main-member-area" style="background-image: url('<?php echo $team_member_image['url']; ?>');">
<h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
<span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>
<?php the_sub_field( 'team_member_bio' ); ?>
</div>
<div class="main-member-contact">
<span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
<span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>

Haven't debugged it all - but this might give you an idea, on how to do it.
This method will create a block for each box with a counter
<div class="member-wrap grid-x grid-margin-x grid-margin-y">
<?php if ( have_rows( 'branch_team_members' ) ) : ?>
<?php $counter; ?>
<?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
<?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
<?php $counter++; ?>
<style type="text/css">
.blockNumber-<?php echo $counter; ?>{
background-image: url('<?php echo $team_member_image['url']; ?>');
}
.blockNumber-<?php echo $counter; ?>:hover{
background-image: url('<?php echo $team_member_hover_image['url']; ?>');
}
</style>
<div class="branch-member-main small-12 medium-6 large-3 cell">
<?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
<div class="main-member-area blockNumber-<?php echo $counter; ?>">
<h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
<span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>
<?php the_sub_field( 'team_member_bio' ); ?>
</div>
<div class="main-member-contact">
<span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
<span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>

getElementById not working on IE 11: HTML5 <article> element

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.

Pagination without a table

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

how to retrieve data from more than one table using session?

I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?

Develop Reference

JavaScript is the programming language of the Web.

Automatic reset when click another link - javascript

Add class ex. 'autohide' to all divs you want to autohide. Then: $('.autohide').click(function(){ $('.autohide').hide(); $(this).show(); })

Related

Filling Javascript array from PHP request

ACF Change Background Image on Hover

getElementById not working on IE 11: HTML5 <article> element

Pagination without a table

how to retrieve data from more than one table using session?

Categories

Resources