How to change header background on scroll down? - javascript

I started with modifing the header on my site, and have a hard time to make it worked as i wanted.
I want, header background to change background color to white, when scroll down 100-150px, exactly like is on this site.
I found this JS:
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});
what i inserted into custom JS plugin in my WP site.
Also have this JS:
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
Is maybe this better sollution, then previous code?
How to use this JS to make the effect on demo site i posted before in this post?

use following code snippet, working fine in the demo website
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"red"});
} else {
jQuery('#navigation').css({"background":"transparent"});
}
});

Try this code.
$(function() {
var bgcolor_navigation = function(){
var bg_offset_top = $(window).scrollTop(); // our current vertical position from the top
if ((100 > bg_offset_top) &&(150 < bg_offset_top)) {
$('#navigation').addClass("bgcolorheadnav");
} else {
$('#navigation').removeClass("bgcolorheadnav");
}
};
// run our function on load
bgcolor_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
bgcolor_navigation();
});
});
css
.bgcolorheadnav{
background-color:#000;
}

This is just for websites made by WordPress:
Create a child theme for your theme.
Activate your child theme.
Copy your header.php file to the child theme folder by FTP client
Replace the code in the child’s header.php with this code:
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('.header-main').addClass('scrolled');
}
else {
$('.header-main').removeClass('scrolled');
}
});
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
Put following code to your Child Theme style.css file or install the Simple Custom CSS plugin and put the code there.
.header-main {
transition:top 0.5s ease;
box-shadow:0 0 10px black;
transition: background-color 0.5s ease;
}
.scrolled {
background: #bada55!important;
}
If you don't do the CSS this way and put the code to themes -> style.css, you will loose all changes you made when you update your theme in the future.

The site you referred uses bootstrap framework.
You can see what is done on that site by right clicking on the site and say inspect element. The following code was found for the navbar: This way you do not need to write custom js, jut follow the industry the best practice.
<nav class="navbar navbar-dark navbar-fixed-top top-nav-collapse" role="navigation">
<div class="navbar-container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">
<span class="logo hidden-xs">
<img src="img/logo-santa.svg" alt="">
</span>
<span class="logo hidden-sm hidden-md hidden-lg">
<img src="img/logo-notext.svg" alt="">
</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden active">
</li>
<li class="page-scroll">
Pricing
</li>
<li class="page-scroll">
XenoPanel
</li>
<li class="page-scroll">
Multicraft
</li>
<li class="page-scroll navbar-borderbtnn">
Client Area <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Related

adding carousel items using jquery

I'm working on an inserting form that inserts a product to a [ products draft ] so I have two tables
one called ( Drafts ) and the other is ( items ) each item in the last table (items) have a draft id.
When inserting a new Draft it supposes that the client who is adding the draft have entered the number of the products in the draft so when he entered the number of the products the application well call a number of forms to insert each one of them ( the determined number of products ) so I used jquery to insert the product forms inside a bootstrap 4 carousel as a ( carousel-item ) using (append) and within each form, there is a navbar ( shows which form is this ) like this ( 1 / 50 ) and my question is which element (DOM) I have to append my code to I tried this:- and nothing happens
Code Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(event){ // **** PS: I Think the problem is with the carousel-item status ( $actives )
var formscount = $('#count').val();
if (formscount > 0) {
for (i=0; i < formscount; i++) {
$('#demo').append($('<div class="carousel-item '+<?=$actives;?>+'"><center><nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"><a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+'</a></nav></center></div>'));
event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<form action="#" method="post">
<input name="count" id="count" type="number" class="form-control" placeholder="عدد النماذج">
<button onclick="myFunction(event)">إضافة النماذج</button>
</form>
<div id="demo" class="carousel slide" data-ride="carousel" style="height:50vh;">
<!-- Indicators -->
<ul class="carousel-indicators" style="background-color: black; color:black;">
<?
$i = 0;
foreach($result as $row){
$actives = '';
if($i == 0){
$actives ='active';
}
?>
<li data-target="#demo" data-slide-to="<?= $i; ?>" class="<?= $actives; ?>"></li>
<? $i++ ; }?>
</ul>
<!-- The slideshow -->
<div class="carousel-inner canner">
<div class="carousel-item"><img src="<?= $row['imageurl']?>" Height=75% alt="inner"></div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
Update:- a new problem pops up is when I append a new ( carouesl-items ) nothing happens it just showing one active items even the indicator is a one
updated the snippet to see the code
When you run this in the console it says that current(i) is not defined, so if you remove it and leave just second occurrence of i instead you'll get this result:

My Wordpress site page scroll not working

I created a page using the page builder. The content is not showing fully. Because I cannot scroll the page to see the whole page. There are 3-page codes I include in here. How to fix this error. Anyone can help me?
my header-test.php page code
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'test' ); ?></a>
<header id="masthead" class="site-header">
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
</div>
my footer-test.php page code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'test' ) ); ?>">
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'test' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'test' ), 'test', 'Underscores.me' );
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Here is my created customfullwidth.php page code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'test' ) ); ?>">
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'test' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'test' ), 'test', 'Underscores.me' );
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

How can I create a JavaScript Variable with my php Variable in a While loop?

I am making a web with information from a MySQL database and I want pictures to appear after clicking a buttom.
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<script type=\"text/javascript\">";
echo "function showImage() {
document.getElementById(\"$id[$y]\").style.visibility=\"visible\";
}";
echo "</script>";
echo "<br><br>";
echo "<input type=\"button\" onclick=\"showImage();\" value=\"Show Picture\"/>";
echo "<p>";
I want the second image(The one with $PATH_edit[$y]) to appear after clicking in its buttom. (The buttom appears after each couple of images).
I have all with echo because It's all in the loop and I want it all to display as many times as number of entrances the database has.
I know I can not use the php variables in Javascript, I tried everything but I can't fix it. I am new with php, html and I have no idea ofJavaScript.
This is how it looks like without clicking the buttom
I know I can put an id to the image but that will only work for the first one.
This is how it looks like after clicking
I have also tried this:
echo "function showImage() {
var id_id = \"$id[$y]\";
document.getElementById(id_id).style.visibility=\"visible\";
}";
This is the whole code:
<!DOCTYPE html>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Base de Datos ATLAS</title>
<meta name="Una gran base de datos de microscopía" content="">
<meta name="Pablo Cruz" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="style.css">
<!-- script (I tried to put the function here, bu tit does not work either)
================================================== -->
<script src="js/modernizr.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<link rel="icon" href="logo.jpg" type="image/x-icon">
<!-- preloader
================================================== -->
<div id="preloader">
<div id="loader" class="dots-fade">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- header
================================================== -->
<header class="s-header header">
<div class="header__logo">
<a class="logo" href="index.html">
<img src="images/logo_sin.png" alt="Homepage" >
</a>
</div> <!-- end header__logo -->
</div> <!-- end header__search -->
<a class="header__toggle-menu" href="#0" title="Menu"><span>Menu</span></a>
<nav class="header__nav-wrap">
<h2 class="header__nav-heading h6">Navigate to</h2>
<ul class="header__nav">
<li class="current">Inicio</li>
<li class="has-children">
Base de Datos
<ul class="sub-menu">
<li>Microscopía Electrónica</li>
<li>Microscopía Óptica</li>
</ul>
</li>
<li class="has-children">
Almacén
<ul class="sub-menu">
<li>Mitocondrias</li>
<li>Núcleo</li>
<li>Lisosomas</li>
<li>Vesículas</li>
<li>Aparato de Golgi</li>
<li>Microtubulos</li>
<li>Retículo Endosplamático Rugoso</li>
<!--
<ul class="sub-menu">
<li>Video Post</li>
<li>Audio Post</li>
<li>Standard Post</li>
</ul>
-->
</ul>
</li>
<li>USAL</li>
<li>Contacto</li>
</ul> <!-- end header__nav -->
Close
</nav> <!-- end header__nav-wrap -->
</header> <!-- s-header -->
<!-- s-content
================================================== -->
<section class="s-content s-content--top-padding s-content--narrow">
<article class="row entry format-standard">
<div class="entry__header col-full">
<h1 class="entry__header-title display-1">
Galeria de Mitocondrias.
</h1>
</div>
<?PHP
require "connect.php";
$x=0;
$y=0;
$autosuma = 222;
$database = "tfg";
$db_found = mysqli_select_db($db_handle, $database);
if ($db_found) {
$SQL = "SELECT * FROM id_organulo WHERE mitocondria = 1";
$result = mysqli_query($db_handle, $SQL);
while ( $db_field = mysqli_fetch_assoc($result) ) {
$id[$x] = $db_field['id'];
$comentario[$x] = $db_field['comentario'];
$nombre_de_foto[$x] = $db_field['nombre_de_foto'];
$autor[$x] = $db_field['autor'];
$path[$x] = $db_field['PATH'];
$path_edit[$x] = $db_field['PATH_edit'];
$ruta_perfil_foto[$x] = $db_field['ruta_perfil_foto'];
$x = $x+1;
echo "<div class=\"col-full entry__main\">";
echo "<div class=\"entry__author\">";
echo "<img src=\"".$ruta_perfil_foto[$y]."\"alt=\"\">";
echo "<div class=\"entry__author-about\">";
echo "<h5 class=\"entry__author-name\">";
echo "<span>$autor[$y]</span>";
echo "$nombre_de_foto[$y]";
echo "</h5>";
echo "</div>";
echo "</div>";
echo "<br>";
echo "</div>"; // <!-- s-entry__main -->
echo "<center>";
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<br><br>";
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture"/>';
echo "<p>";
print $comentario[$y];
echo "</p>";
echo "</center>";
$y++;
}
}
else {
print "Database NOT Found ";
}
mysqli_close($db_handle);
?>
<script type=\"text/javascript\">
function showImage() {
var id = <?php echo (json_encode($id[$y])); ?>;
document.getElementById(id).style.visibility="visible";
}
</script>";
<div class="row pagination-wrap">
<div class="col-full">
<nav class="pgn" data-aos="fade-up">
<ul>
<li><a class="pgn__prev" href="s_mitocondrias_result_3.php">Prev</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_1.php">1</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_2.php">2</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_3.php">3</a></li>
<li><span class="pgn__num current">4</span></li>
>
</ul>
</nav>
<hr>
</div>
</div>
<p> <h5>Codigo de rotulación:</h5> </p>
M: Mitocondrias <br>
dM: Doble membrana <br>
cM: Cresta Mitocondrial <br>
R: Ribosomas <br>
N: Nucleo <br>
eu: Eucromatina <br>
Nu: Nucleolo <br>
Mtu: Microtúbulos <br>
Ec: Esterocilio <br>
</p>
</center>
<?php $y++; ?>
</article> <!-- end entry/article -->
Thank you in advance.
first a little advice, separate php, javascript and html. Together it is difficult to read and maintain. Otherwise you create a function at each pass of the loop. It doesn't bother me that nothing works like that. Try it like this:
Send the id of your image as a parameter to the function. A single function, which will be after the loop.
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
and at each passage of the loop send to the function the id of the image like this :
<input type="button" onclick="showImage(\"$id[$y]\");" value="Show Picture">
Finally it will give something like that :
<?php
while(...){
echo '<img align="left" src="'.$path[$y].'" alt="error">';
echo '<img align="right" src="'.$path_edit[$y].'" alt="error" id="'.$id[$y].'" style="visibility:hidden">';
echo '_____________________________________';
echo '<br><br>';
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture">';
echo '<p>';
}
?>
<script type="text/javascript">
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
</script>
Use ' for echo and not " when displaying html, it's more practical.
Good luck for the future

How to replace Twenty Seventeen Wordpress header with slider?

I would like my header to be replaced by my slider made with the Master Slider widget. I want the slider to be full size, just like the header image is right now.
This is the header code:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
// If a regular post or page, and not the front page, show the featured image.
if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
echo '<div class="single-featured-image-header">';
the_post_thumbnail( 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
The shortcode for my slider is:
[masterslider id="1"]
PHP function:
<?php masterslider(1); ?>
How can I insert this image slider to replace the header image on the front page only without affecting the rest of the page?
Thanks.

Multiple HTML elements with same ID causing errors

I'm currently running into a problem where inside my HTML document, I have a carousel, and inside each slide a new button shows up, all doing the same thing. Each one of these buttons is a navbar-toggle button, which displays a navbar if it is pressed.
I problem I'm having is that in the code I was given, it only accounts for one of these buttons to work, the first one to load, as it declares the variable by var showRightPush = document.getElementByID. The problem is that I want to be able to click this button on every slide.
Below is my code, the old code, as well as the code in the full context.
Thanks.
MY CODE
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'navbar-toggle' );
};
</script>
OLD CODE
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
</script>
FULL CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title><?php bloginfo('name'); ?> </title>
<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('template_directory'); ?>/css/bootstrap.css" rel="stylesheet">
<!-- Sidebar core CSS -->
<link href="<?php bloginfo('template_directory'); ?>/css/simple-sidebar.css" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/default.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/component.css" rel="stylesheet">
</head>
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3><?php bloginfo('name'); ?></h3>
About
Submit
Subscribe
Follow
Contact
</nav>
<?php
$number = 0;
query_posts(array('post_type' => 'facts'));
if(have_posts()):
?>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php while(have_posts()): the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
<?php endwhile; ?>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<?php while(have_posts()): the_post(); ?>
<div class="item">
<nav class="navbar navbar-top navbar-inverse visible-xs <?php foreach(get_the_category() as $category) {echo $category->slug;} ?>" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" id="showRightPush" class="btn btn-default navbar-toggle" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="<?php bloginfo('template_directory'); ?>/images/brains.png" alt=""> </a>
</div> <!-- end navbar-header -->
</div> <!-- end container -->
</nav> <!-- end navbar -->
<nav class="navbar navbar-fixed-bottom navbar-inverse visible-xs bottom-nav-colour" role="navigation">
<div class="container">
<div class="navbar-header text-center">
<ul class="bottom-directions">
<li><img src="<?php bloginfo('template_directory'); ?>/images/prev.png" alt=""></li>
<li><img src="<?php bloginfo('template_directory'); ?>/images/random.png" alt=""></li>
<li><img src="<?php bloginfo('template_directory'); ?>/images/next.png" alt=""></li>
<ul>
</div> <!-- end navbar-header -->
</div><!-- /.container -->
</nav> <!-- end navbar -->
<div class="fact-number-container <?php foreach(get_the_category() as $category) {echo $category->slug;} ?>">
<div class="container">
<div class="fact-header">
<h3>/Fact <span class="fact-number"><?php echo(types_render_field("fact-number", array())); ?></span></h3>
</div> <!-- end fact-header -->
</div> <!-- end container -->
</div> <!-- end fact-number-container -->
<div class="fact-text-container">
<div class="container">
<div class="fact-text">
<p><?php echo(types_render_field("fact-text", array())); ?></p>
</div> <!-- end fact-text -->
</div> <!-- end container -->
</div> <!-- end fact-text-container -->
<div class="tweet-this-container">
<div class="container">
<a href="#">
<div class="tweet-this ">
<p><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="">Share this fact like a champ</p>
</div> <!-- end tweet-this -->
</a>
</div> <!-- end container -->
</div> <!-- end tweet-this-container -->
</div> <!-- end item -->
<?php endwhile; ?>
</div>
</div>
<?php endif; wp_reset_query(); ?>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/classie.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/modernizr.custom.js"></script>
<script type="text/javascript" src="//use.typekit.net/gyv3ykj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'navbar-toggle' );
};
</script>
<script>
jQuery(document).ready(function(){
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
});
</script>
</body>
</html>
showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
showRightPush.onclick = function() {
/* ... */
};
Oh god, that won't work!
I've just answered this question: Javascript change width of div onclick
And will just copypaste my answer:
document.getElementsByClassName returns somewhat an array of
elements, so you cannot simply refer to it as a DOM element in hope
that it will work as you refer to each element of the collection (that
is possible in jQuery, btw), so you have to use the foreach loop
(doesn't matter how are you gonna achieve this -- via simple for(),
or for(x in y), or any other way).
I usually use Array.forEach function, but the specific type of an
array returned by the document.getElementsByClassName does not have
such function in prototype, so you have to use
[].forEach.call(inWhat,function(what){}) syntax, or fallback to
for(...) syntax.
First of all, be aware that the getElementsByClassName method will only work for versions of Internet Explorer from 9 and up. You can use a polyfill like this one to enable the functionality in older browsers, or use some other method to find the elements with the correct class name. Having said that, you'll have to iterate over the buttons and bind the click event for each of them.
var showRightPush = document.getElementsByClassName( 'navbar-toggle' );
for (var i = 0; i < showRightPush.length; i++) {
showRightPush[i].onclick = function() { ... }
}
I don't really understand what you mean, it is not very clear. But as far as I understand you should do something like this (I am using jQuery since you tagged it)
$('.navbar-toggle').on('click', function() {
...some events
var class_header = $(this).parent().attr('class');
var index = $('.'+class_header).indexOf($(this).parent());
$('.'+class_header).eq(index+1).append('/*whatever you want, here your button */');
};

Categories