I am new to wordpress custom theme developing. Currently I am revamping a site into wordpress and there is a gallery page consist with a lightbox. In website, images were pre-selected and images were linked to code by src.
But when it comes to my wordpress revamp, I use wordpress loop for show-all dynamic pill and get_post() function for category dynamic pills.
All I need is to have an idea about to customize my wordpress loop and get_post() functions to add the lightbox which orginal website used. Here are my codes and original site codes
Original Site
gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO -->
<title>Gallery</title>
<meta name="description" content="Hello">
<meta name="keywords" content="Hello">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Open Sans -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Lightbox -->
<link href="assets/css/lightbox.css" rel="stylesheet">
<!-- Pre Classes -->
<link href="assets/css/pre-classes.css" rel="stylesheet">
<!-- Styles -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Content -->
<section class="content pull-left width-wide clear-both">
<div class="wrap">
<!-- Inside Content -->
<div class="inside-content inside-page pull-left width-wide clear-both">
<!-- Gallery -->
<div class="gallery pull-left width-wide">
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<!-- Item -->
<a href="img1" data-imagelightbox="a" class="item col-md-4">
<img src="img1" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img2" data-imagelightbox="a" class="item col-md-4">
<img src="img2" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img3" data-imagelightbox="a" class="item col-md-4">
<img src="img3" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img4" data-imagelightbox="a" class="item col-md-4">
<img src="img4" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img5" data-imagelightbox="a" class="item col-md-4">
<img src="img5" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img6" data-imagelightbox="a" class="item col-md-4">
<img src="img6.jpg" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
</div><!-- Inside Content -->
</div>
</section><!-- // Content -->
<!-- jScripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- <script src="assets/js/cycle.min.js"></script> -->
<script src="assets/js/imagelightbox.min.js"></script>
<!-- Custom jsPlugins -->
<!-- <script src="assets/js/plugins.jquery.js"></script> -->
<!-- Custom jScripts -->
<script src="assets/js/custom.jquery.js"></script>
</body>
</html>
imagelightbox.min.js
;(function(e,t,n,r){"use strict";var i=function(){var e=n.body||n.documentElement,e=e.style;if(e.WebkitTransition=="")return"-webkit-";if(e.MozTransition=="")return"-moz-";if(e.OTransition=="")return"-o-";if(e.transition=="")return"";return false},s=i()===false?false:true,o=function(e,t,n){var r={},s=i();r[s+"transform"]="translateX("+t+")";r[s+"transition"]=s+"transform "+n+"s linear";e.css(r)},u="ontouchstart"in t,a=t.navigator.pointerEnabled||t.navigator.msPointerEnabled,f=function(e){if(u)return true;if(!a||typeof e==="undefined"||typeof e.pointerType==="undefined")return false;if(typeof e.MSPOINTER_TYPE_MOUSE!=="undefined"){if(e.MSPOINTER_TYPE_MOUSE!=e.pointerType)return true}else if(e.pointerType!="mouse")return true;return false};e.fn.imageLightbox=function(r){var r=e.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:true,enableKeyboard:true,quitOnEnd:false,quitOnImgClick:false,quitOnDocClick:true,onStart:false,onEnd:false,onLoadStart:false,onLoadEnd:false},r),i=e([]),l=e(),c=e(),h=0,p=0,d=0,v=false,m=function(t){return e(t).prop("tagName").toLowerCase()=="a"&&(new RegExp(".("+r.allowedTypes+")$","i")).test(e(t).attr("href"))},g=function(){if(!c.length)return true;var n=e(t).width()*.8,r=e(t).height()*.9,i=new Image;i.src=c.attr("src");i.onload=function(){h=i.width;p=i.height;if(h>n||p>r){var s=h/p>n/r?h/n:p/r;h/=s;p/=s}c.css({width:h+"px",height:p+"px",top:(e(t).height()-p)/2+"px",left:(e(t).width()-h)/2+"px"})}},y=function(t){if(v)return false;t=typeof t==="undefined"?false:t=="left"?1:-1;if(c.length){if(t!==false&&(i.length<2||r.quitOnEnd===true&&(t===-1&&i.index(l)==0||t===1&&i.index(l)==i.length-1))){w();return false}var n={opacity:0};if(s)o(c,100*t-d+"px",r.animationSpeed/1e3);else n.left=parseInt(c.css("left"))+100*t+"px";c.animate(n,r.animationSpeed,function(){b()});d=0}v=true;if(r.onLoadStart!==false)r.onLoadStart();setTimeout(function(){c=e("<img "+r.selector+" />").attr("src",l.attr("href")).load(function(){c.appendTo("body");g();var n={opacity:1};c.css("opacity",0);if(s){o(c,-100*t+"px",0);setTimeout(function(){o(c,0+"px",r.animationSpeed/1e3)},50)}else{var u=parseInt(c.css("left"));n.left=u+"px";c.css("left",u-100*t+"px")}c.animate(n,r.animationSpeed,function(){v=false;if(r.onLoadEnd!==false)r.onLoadEnd()});if(r.preloadNext){var a=i.eq(i.index(l)+1);if(!a.length)a=i.eq(0);e("<img />").attr("src",a.attr("href")).load()}}).error(function(){if(r.onLoadEnd!==false)r.onLoadEnd()});var n=0,u=0,p=0;c.on(a?"pointerup MSPointerUp":"click",function(e){e.preventDefault();if(r.quitOnImgClick){w();return false}if(f(e.originalEvent))return true;var t=(e.pageX||e.originalEvent.pageX)-e.target.offsetLeft;l=i.eq(i.index(l)-(h/2>t?1:-1));if(!l.length)l=i.eq(h/2>t?i.length:0);y(h/2>t?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(s)p=parseInt(c.css("left"));n=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove pointermove MSPointerMove",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;e.preventDefault();u=e.originalEvent.pageX||e.originalEvent.touches[0].pageX;d=n-u;if(s)o(c,-d+"px",0);else c.css("left",p-d+"px")}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(Math.abs(d)>50){l=i.eq(i.index(l)-(d<0?1:-1));if(!l.length)l=i.eq(d<0?i.length:0);y(d>0?"right":"left")}else{if(s)o(c,0+"px",r.animationSpeed/1e3);else c.animate({left:p+"px"},r.animationSpeed/2)}})},r.animationSpeed+100)},b=function(){if(!c.length)return false;c.remove();c=e()},w=function(){if(!c.length)return false;c.animate({opacity:0},r.animationSpeed,function(){b();v=false;if(r.onEnd!==false)r.onEnd()})};e(t).on("resize",g);if(r.quitOnDocClick){e(n).on(u?"touchend":"click",function(t){if(c.length&&!e(t.target).is(c))w()})}if(r.enableKeyboard){e(n).on("keyup",function(e){if(!c.length)return true;e.preventDefault();if(e.keyCode==27)w();if(e.keyCode==37||e.keyCode==39){l=i.eq(i.index(l)-(e.keyCode==37?1:-1));if(!l.length)l=i.eq(e.keyCode==37?i.length:0);y(e.keyCode==37?"left":"right")}})}e(n).on("click",this.selector,function(t){if(!m(this))return true;t.preventDefault();if(v)return false;v=false;if(r.onStart!==false)r.onStart();l=e(this);y()});this.each(function(){if(!m(this))return true;i=i.add(e(this))});this.switchImageLightbox=function(e){var t=i.eq(e);if(t.length){var n=i.index(l);l=t;y(e<n?"left":"right")}return this};this.quitImageLightbox=function(){w();return this};return this}})(jQuery,window,document);
$( function()
{
// ACTIVITY INDICATOR
var activityIndicatorOn = function()
{
$('.overlay-bg').remove();
$( '<div id="imagelightbox-loading"><div></div></div><div class="overlay-bg"></div>' ).appendTo( 'body' );
},
activityIndicatorOff = function()
{
$( '#imagelightbox-loading' ).remove();
},
// OVERLAY
overlayOn = function()
{
$( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
},
overlayOff = function()
{
$( '#imagelightbox-overlay' ).remove();
},
// CLOSE BUTTON
closeButtonOn = function( instance )
{
$( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
},
closeButtonOff = function()
{
$( '#imagelightbox-close' ).remove();
},
// CAPTION
captionOn = function()
{
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
if( description.length > 0 )
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
},
captionOff = function()
{
$( '#imagelightbox-caption' ).remove();
},
// NAVIGATION
navigationOn = function( instance, selector )
{
var images = $( selector );
if( images.length )
{
var nav = $( '<div id="imagelightbox-nav"></div>' );
for( var i = 0; i < images.length; i++ )
nav.append( '<button type="button"></button>' );
nav.appendTo( 'body' );
nav.on( 'click touchend', function(){ return false; });
var navItems = nav.find( 'button' );
navItems.on( 'click touchend', function()
{
var $this = $( this );
if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
instance.switchImageLightbox( $this.index() );
navItems.removeClass( 'active' );
navItems.eq( $this.index() ).addClass( 'active' );
return false;
})
.on( 'touchend', function(){ return false; });
}
},
navigationUpdate = function( selector )
{
var items = $( '#imagelightbox-nav button' );
items.removeClass( 'active' );
items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
},
navigationOff = function()
{
$( '#imagelightbox-nav' ).remove();
},
// ARROWS
arrowsOn = function( instance, selector )
{
var $arrows = $( '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>' );
$arrows.appendTo( 'body' );
$arrows.on( 'click touchend', function( e )
{
e.preventDefault();
var $this = $( this ),
$target = $( selector + '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ),
index = $target.index( selector );
if( $this.hasClass( 'imagelightbox-arrow-left' ) )
{
index = index - 1;
if( !$( selector ).eq( index ).length )
index = $( selector ).length;
}
else
{
index = index + 1;
if( !$( selector ).eq( index ).length )
index = 0;
}
instance.switchImageLightbox( index );
return false;
});
},
arrowsOff = function()
{
$( '.imagelightbox-arrow' ).remove();
};
// WITH ACTIVITY INDICATION
$( 'a[data-imagelightbox="a"]' ).imageLightbox(
{
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); },
onEnd: function() { activityIndicatorOff();$('.overlay-bg').remove(); }
});
});
Wordpress - page-gallery.php
get_header(); ?>
<section class="content pull-left width-wide clear-both">
<div class="wrap">
<!-- Inside Content -->
<div class="inside-content inside-page pull-left width-wide clear-both">
<!-- page header -->
<div class="page-header pull-left width-wide">
<!-- Title -->
<h1>Gallery</h1><!-- Title -->
<!-- Breadcrumb -->
<ul class="_bread">
<li>Home</li>
<li>Gallery</li>
</ul>
<!-- Breadcrumb -->
</div><!-- // page header -->
<!-- Gallery -->
<div class="gallery pull-left width-wide">
<!-- Menu -->
<div class="cat-menu pull-right padding-right-20">
<!--Categories : -->
<!-- Show All
<a href="#Category1" title="Category 1 " >Category 1 </a>
<a href="#Category2" title="Category 2" >Category 2</a>
<a href="#Category3" title="Category 3" >Category 3</a> -->
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
<li><a data-toggle="pill" href="#Category1">Category 1</a></li>
<li><a data-toggle="pill" href="#Category2">Category 2</a></li>
<li><a data-toggle="pill" href="#Category3">Category 3</a></li>
</ul>
</div><!-- // Menu -->
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<div class="tab-content">
<div id="showall" class="tab-pane fade in active">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile;
else:
echo "Content not found";
endif;
wp_reset_postdata();?>
</div>
<div id="Category1" class="tab-pane">
<?php
$my_page_id = 766; //your page or post ID
$my_page = get_post($my_page_id); //retrieves the page via the ID
$content = $my_page->post_content; //gets the unfiltered page content
$content = apply_filters('the_content', $content); //cleanup content
$content = str_replace(']]>', ']]>', $content); //cleanup content
$title = $my_page->post_title; //retrieves page title and sets the variable
?>
<?php
echo $content; //show page content
?>
</div>
<div id="Category2" class="tab-pane">
<?php
$my_page_id = 769;
$my_page = get_post($my_page_id);
$content = $my_page->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$title = $my_page->post_title;
?>
<?php
echo $content; //show page content
?>
</div>
<div id="Category3" class="tab-pane">
<?php
$my_page_id = 772; //your page or post ID
$my_page = get_post($my_page_id); //retrieves the page via the ID
$content = $my_page->post_content; //gets the unfiltered page content
$content = apply_filters('the_content', $content); //cleanup content
$content = str_replace(']]>', ']]>', $content); //cleanup content
$title = $my_page->post_title; //retrieves page title and sets the variable
?>
<?php
echo $content; //show page content
?>
</div>
</div>
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
</div><!-- Inside Content -->
</div>
</section><!-- // Content -->
<?php get_footer(); ?>
Please help me with this.
This is not an actual answer. However I managed to develop lightbox which works onclick. I used ACF gallery field.
style.css
header{
position: sticky;
}
footer{
position: sticky;
}
page-gallery.php
<div class="tab-content">
<?php $images = get_field('gallery');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div class="gallery_content_wrapper">
<div class="item col-md-4">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" width="344" height="215" onclick="openModal();currentSlide(1)" class="cursor">
</div>
<?php if ( function_exists('slb_activate') ){
$content = slb_activate($content);
}
echo $content; ?>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<img src="<?php echo $image['url']; ?>">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
custom.js
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
custom.css
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 100000000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #000000;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
/*text-align: center;*/
}
.mySlides{
text-align: center;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
opacity: 1;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
This will not display the exact image which you select because I haven't add a loop to it. However this will solve the lightbox problem.
Further I removed lightbox js and css files added above mentioned codes.
Have a great day!
cheers!
Related
Been working on a home automation dashboard and I need some help. How do I get the image to change when the button is toggled ON and OFF. I have a sun svg for on and moon svg for off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<ol class="b">
<li class="dashboard_item kitchen">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button id="kitchen-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item frontdoor" >
<img src="./door-closed.svg" width="40px" height="40px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
</ul>
</body>
</html>
<!-- variable in js -->
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
KitchenState = !KitchenState;
});
Been trying examples online with no luck so far.
Give some id attribute to the image and then change it in the same way like you are changing the innerHTML. For image you just need to change the src accordingly.
<script>
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('toggle-img').src = KitchenState ? './sun.svg' : './moon.svg'
KitchenState = !KitchenState;
});
</script>
<img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">
use .setAttribute or .src
add id kitchen-icon to tag <img> icon
and try code:
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('kitchen-icon').src = KitchenState ? './moon.svg' : './sun.svg'
KitchenState = !KitchenState;
})
From the point of view of your question, I think you need the following code
let btnAll = document.getElementByTagName('button')
let conAll = document.getElementByClassName('content')
let btnAllLen = btnAll.length
//Create a callback function for the click event of each button
for (let i = 0; i < btnAllLen; i++) {
!(function(n) { // Register click events
btnAll[n].addEventListener('click', function() {
for (let j = 0; j < btnAlllen; j++) {
btn[j].className = ""
conAll[j].style.display = "none"
}
this.className = "active"
conAll[n].style.display = "block"
})
})(i)
}
.main {
text-align: center;
}
button:focus {
outline: none;
}
nav {
margin-top: 30px;
box-sizing: border-box;
}
button {
background: white;
border: none;
height: 36px;
line-height: 36px;
width: 80px;
text-align: center;
border: 1px solid lightgray;
border-radius: 4px;
cursor: pointer;
}
nav>button:not(:first-child) {
margin-left: 15px;
}
.active {
background: black;
color: white;
}
.content {
margin-top: 40px;
}
.content>p {
display: none;
}
<div class="main">
<nav>
<button class="active">content 1</button>
<button>content 2</button>
<button>content 3</button>
<button>content 4</button>
</nav>
<div class="content">
<p style="display: block;">content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
</div>
</div>
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>
I'm learning JS (without JQuery for now!) and got a problem with my code and need your help!
I'm working on a code which fetch the image title out of a database and put it in a kinda list.
If the user clicks on the title, a other div box pops up and shows the image describtion.
My Problem is that my code only display the first "img_descr" in each popup box.
And because the "img_title" list is dynamically (it depends on what the user types in the search bar) it makes it even more a bit difficult.
Below I will paste a simple version of my code with php code and below that i will past a snippet. (by clicking on the "play" button you can see a simulation of my code).
Click on each title and you will see, only 1 describtion will show up for each title.
▽ Here you can see a simple version of my code with PHP code ▽
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result))
{
echo "<div class='click_box'>";
echo "<a class='img_id'>ID: ".$row['img_id']."</a><br>";
echo "<div class='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
echo "</div>";
echo "<div id='popup'>";
echo "<div class='img_descr'><a>Descr: <b>".$row['img_descr']."</b></a></div>";
echo "</div>";
}
?>
</div>
<style>
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
#popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
opacity: 0;
}
.img_descr{
color: white;
}
</style>
<script>
let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
// retrieve the actual value of opacity for bg
bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
// if the opacity is "0" make it "1" otherwhise make it "0"
let opacity = bgStyle == "0" ? "1" : 0;
// use the opacity variable
bg.setAttribute("style", `opacity:${opacity};`);
})
})
</script>
</body>
</html>
▽ Here you can see a snippet i created, but without PHP code ▽
there you can see, only the first "img_descr" do work!
let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
// retrieve the actual value of opacity for bg
bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
// if the opacity is "0" make it "1" otherwhise make it "0"
let opacity = bgStyle == "0" ? "1" : 0;
// use the opacity variable
bg.setAttribute("style", `opacity:${opacity};`);
})
})
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
#popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
opacity: 0;
}
.img_descr{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<div class='click_box'>
<a class='img_id'>ID: 1</a><br>
<div class='img_title'><a>Title: <b>Golden Retriever</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>UK:DFYDFBAERSDFBYDFBYDFydfbydfBaeydfb1311y</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 2</a><br>
<div class='img_title'><a>Title: <b>Appenzeller Sennenhund</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>Swiss:erydfydfbrehaydydfbydfydbaerydf2ydfb</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 3</a><br>
<div class='img_title'><a>Title: <b>German Shepard</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>Germany:ydf3d1fby3df1by3dfb6ydfb31ydf31ydf</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 4</a><br>
<div class='img_title'><a>Title: <b>Alaskan Klee Kai</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>USA:f3ngxfgxfgnxfxfgnxfg3xf31gnxfgner6ae13</b></a></div>
</div>
</div>
</body>
</html>
It seems it have to do something with the "id="popup"... and if i change the popup div from "id" to "class", change "document.getElementById" to "document.getElementsByClassName" and change the css "#popup" to ".popup", nothing work then.
If you would make it totally different, please let me know. (i'm a js beginner)
first of all, you have to replace the multiple popup ids with classes (in css and html)
Here is the js code with the corrections.
let myarray = Array.from(document.querySelectorAll('.click_box'));
myarray.map((e) => {
e.addEventListener("click", event => {
let popups = Array.from(document.querySelectorAll('.popup'));
popups.map((popup) => {
popup.setAttribute("style", 'opacity:0');
})
let bg = e.nextElementSibling;
bg.setAttribute("style", 'opacity:1');
})
})
here is the process :
get the click boxes (notice that I use .click_box as my click target)
get all popups and hide them using opacity: 0
get the element after the clicked one using nextElementSibling. as the click event is on clickBox, the next element will be the popup
show the popup using opacity: 1
jsfiddle here : https://jsfiddle.net/1L0ehpuy/18/
warning : this code depends on the html markup to work properly : you have to keep the popup right after the click_box element otherwise the nextElementSibling won't be the popup
here is the php code with classes instead of ids. with this php code and the js above, everything should be fine
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result)) {
echo "<div class='click_box'>";
echo "<a class='img_id'>ID: ".$row['img_id']."</a><br>";
echo "<div class='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
echo "</div>";
echo "<div class='popup'>";
echo "<div class='img_descr'><a>Descr: <b>".$row['img_descr']."</b></a></div>";
echo "</div>";
}
?>
new version to hide the popup on 2nd click
let myarray = Array.from(document.querySelectorAll('.click_box'));
myarray.map((e) => {
e.addEventListener("click", event => {
let bg = e.nextElementSibling;
if (bg.style.opacity == 1) {
bg.setAttribute("style", 'opacity:0');
} else {
let popups = Array.from(document.querySelectorAll('.popup'));
popups.map((popup) => {
popup.setAttribute("style", 'opacity:0');
})
bg.setAttribute("style", 'opacity:1');
}
})
})
there are not many changes : at the begining of the function, I just added a if to check if the related popup is already shown. if so, I hide it.
fiddle here : https://jsfiddle.net/1L0ehpuy/21/
This is new, edited version of my code. I've transfered every jQuery code into pure JavaScript. I've also tried to comment my JS code so it will be easier for you to understand it.
//Pass the clicked element in function 'openPopup' and name it as 'el'
//We are passing the clicked element from the HTML, you can see it at "onclick='openPopup(this)'"
//The word 'this' is a variable for current element
function openPopup(el){
var parent = el.parentElement;
var child = null;
//Loop through children of parent element
for (var i = 0; i <= parent.childNodes.length; i++) {
//Only if children has class, check if children's class contains 'popup'
if(parent.childNodes[i].classList){
if (parent.childNodes[i].classList.contains("popup")) {
//If we have the popup element, add it to a variable 'child'
child = parent.childNodes[i];
break;
}
}
}
//If assigned popup is opened
if(child.classList.contains("visible")){
//Remove class 'visible' from the popup element (popup is stored in 'child' variable)
child.classList.remove("visible");
} else {
//Close all popups by removing class 'visible' from all popups
var popups = document.getElementsByClassName("popup");
for (var i = 0; i < popups.length; i++) {
popups[i].classList.remove("visible");
}
//Add class 'visible' to popup assigned to our button (still stored in 'child' variable)
child.classList.add("visible");
}
}
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
.popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
display: none;
}
.popup.visible{
display: block;
}
.img_descr{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 1</a><br>
<div class='img_title'><a>Title: <b>Title 1</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 1</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 2</a><br>
<div class='img_title'><a>Title: <b>Title 2</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 2</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 3</a><br>
<div class='img_title'><a>Title: <b>Title 3</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 3</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 4</a><br>
<div class='img_title'><a>Title: <b>Title 4</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 4</b></a></div>
</div>
</div>
</div>
</body>
</html>
I customized a WordPress theme that has a fixed header (which includes logo and navbar) and everything works fine on desktop Chrome. However, when viewing on mobile phones, header gets cut off by ~20px when you scroll down the page.
I tried setting fixed height to various elements, adding overflow: auto, and even line-height:90px to .header, but nothing seems to work.
Website is http://nadjapavic.com
Relevant html:
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pine' ); ?></a>
<div class="offcanvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-nav', 'container' => false ) ); ?>
</div><!-- /.offcanvas -->
<header class="header animated bounceInDown">
<div class="container">
<div class="row">
<div class="col-xs-6">
<?php pine_logo(); ?>
</div><!-- /.col -->
<div class="col-xs-6">
<button class="offcanvas-toggle">
<span></span>
<span></span>
<span></span>
</button><!-- /.main nav toggle -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</header><!-- /.header -->
<?php if ( ! is_404() ) : ?>
<div class="header-spacer"></div><!-- /.header spacer -->
<?php endif; ?>
<div id="content">
Relevant css:
.header {
position: fixed;
width: 100%;
background-color: #fff;
padding: 20px 0;
z-index: 10000;
}
.header-spacer {
min-height: 90px;
}
Relevant javascript:
( function( $ ) {
'use strict';
var $body = $( 'body' );
var $header = $( '.header', $body );
var $headerSpacer = $( '.header-spacer', $body );
var $offcanvas = $( '.offcanvas', $body );
var $adminbar = $( '#wpadminbar', $body );
$( document ).on( 'ready', function() {
$adminbar = $( '#wpadminbar', $body );
} );
var adaptHeaderSpacerTimeout = null;
var nothing = null;
var $headerHeight = $header.outerHeight();
var adaptHeaderSpacer = function() {
if ( adaptHeaderSpacerTimeout !== null ) {
clearTimeout( adaptHeaderSpacerTimeout );
}
setTimeout( function() {
nothing = $header[0].offsetHeight;
$headerHeight = $header.outerHeight();
$headerSpacer.css( 'height', $headerHeight + 'px' );
if ( $body.hasClass( 'admin-bar' ) && $adminbar.length ) {
$offcanvas.css( 'top', ( $headerHeight + $adminbar.outerHeight() ) + 'px' );
}
else {
$offcanvas.css( 'top', $headerHeight + 'px' );
}
}, 400 );
};
adaptHeaderSpacer();
$( 'img', $header ).on( 'load', adaptHeaderSpacer );
$( document ).on( 'ready', adaptHeaderSpacer );
$( window ).on( 'resize orientationchange', adaptHeaderSpacer );
// Full-screen navigation
var $offcanvasToggle = $( '.offcanvas-toggle' );
$offcanvas = $( '.offcanvas' );
$offcanvasToggle.on( 'click', function() {
$offcanvas.toggleClass( 'offcanvas--active' );
$offcanvasToggle.toggleClass( 'offcanvas-toggle--active' );
} );
Please help.
You appear to be using Bootstrap or a similar grid system. In those systems, .rows need wrapping .containers. Add the container class to #content. The lack of .container makes the particular .row push the body larger giving you the effect you see.
Here is what I have now...
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-image: url("images/mark-athena-2.png");
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
Okay So when I click "Contact Info" on the Nav bar I want the "contact info div" to display or disappear or toggle... same for Submission methods, Data base, and Frequent kick codes. the divs should be able to be toggled to display information inside, and stay displayed until toggled off by the button that toggled them on...
So here is my HTML Code i have created for this project...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
</head>
<body>
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info">
<p>Contact info</p>
</div>
<div class="submission-methods">
<p>submission methods</p>
</div>
<div class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
And here is my css
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
You could use jQuery .toggle function, documentation and samples are available here.
You can give an 'id' to the individual navigation anchors, and associate a click event that with jQuery will toggle the div you want. I'd use id in all of them, but you can surely work with class too.
The sample code becomes some like:
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
The jQuery/javascript code looks like:
$("#contact").click(function(){
$("#contact_div").toggle();
});
$("#submission").click(function(){
$("#submission_div").toggle();
});
$("#database").click(function(){
$("#database_div").toggle();
});
$("#frequent").click(function(){
$("#frequent_div").toggle();
});
Two notes:
1. the database section is missing in the original post
2. you need to include the jQuery on the page, either you
load it locally on your server, or include it via CDN, like:
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
For the second request on this, the code blocks would to be added/removed based on clicks. The jQuery method change, and for the full working solution you also need to correctly both import jquery, source the javascript code, and have an document.ready handler that will actually initialize the elements. The code looks like this (css remains unchanged).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
<script>
$( document ).ready(function() {
initialize();
});
</script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
with the js/cont.js as:
function initialize() {
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
}
You can do this like this:
Html
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info" data-container>
<p>Contact info</p>
</div>
<div class="submission-methods" data-container>
<p>submission methods</p>
</div>
<div class="frequent-kick-codes" data-container>
<p>frequent kick codes</p>
</div>
Jquery
$(document).ready(function() {
// initially don't show anything
$('*[data-container]').hide();
// Hide or show the div for that menu item. We don't hide the others because that wasn't asked.
$('*[data-container-class]').click(function(e) {
var className = $(this).data('container-class');
$('.' + className).toggle();
});
});
Jsfiddle example here