I'm working on Wordpress theme using Bootstrap on localhost.
I have load the CSS files correctly and I have load the js files using the right way but for some reasons js scripts is not working.
Here is my index.php
<?php get_header(); ?>
<?php get_footer(); ?>
Here is my header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href = "<?php bloginfo(stylesheet_url); ?>" rel = "stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here is my footer.php
<script src= "<?php get_template_directory(); ?>/js/bootstrap.js"></script>
</body>
</html>
This problem drives me CRAZY!
I spent 2 hours searching for solution but nothing!
So what is the problem guys?
You can use it for including your scripts
function WM_Scripts(){
wp_register_script( 'jScript', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' );
wp_register_script('bootstrapjs',get_template_directory_uri() .'/js/bootstrap.min.js');
wp_enqueue_script( 'jScript' );
wp_enqueue_script( 'bootstrapjs' );
}
add_action( 'wp_enqueue_scripts', 'WM_Scripts' );
And For stylesheet you have to use this function.
function WM_CSS(){
wp_register_style( 'bootstrapGrid', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapGrid' );
}
add_action( 'wp_enqueue_scripts', 'WM_CSS' );
Please refer wordpress documentation for include your script into footer.
This the right way to include your script and styles.
And please add wp_head(); functions in your header to load script and styles.
Put this code in your "functions.php" file to enqueue "/css/bootstrap.min.css", "/style.css" and your "/js/bootstrap.js":
/**
* Enqueue scripts and styles
*/
function theme_scripts() {
wp_enqueue_style( 'bootstrapcss', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'stylesheet', get_stylesheet_uri() );
wp_enqueue_script(
'bootstrapjs',
get_stylesheet_directory_uri() . '/js/bootstrap.js',
array(),
'3.3.5', // Bootstrap version number
true // Place before </body>
);
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
Keep note, you need to set the last parameter of wp_enqueue_script to true to place your '/js/bootstrap.js' before the </body> end tag. For more info visit this link.
You missed echo. You must print what the function get_template_directory_uri() returns like here:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.js"></script>
After that your js will work flawless.
Related
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:
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>
I've updated my website to use Bootstrap and the version I'm using needs to use jQuery Version 1.11.0. However, doing this has broken Jquery Fancybox v. 1.3.4... the images no longer pop up in a dialogue box, but redirect to a new page.
When I change the jquery back to jQuery Version Library v1.3.2 my fancybox works, but the bootstrap doesn't!
Please help!! I can't find any way to fix this.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- jQuery Fancybox for gallery -->
<script src="js/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<!-- bespoke JQuery functions -->
<script src="js/bespokeJS.js"></script>
<!-- CSS jQuery Fancybox for gallery -->
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
<script type="text/javascript">
// FANCY BOX
$(function() {
$("a.group").fancybox({
'nextEffect' : 'fade',
'prevEffect' : 'fade',
'overlayOpacity' : 0.8,
'overlayColor' : '#000000',
'arrows' : true,
});
});
</script>
</head>
<body id="gallery" class="gallery" >
<!-- Start split screen LEFT COLUMN -->
<div id="mainRed">
<div class="container">
<div class="row">
<div id="leftCol" class="leftCol col-xs-12 col-sm-8 col-md-8 well">
<div id="leftColContentContainer" >
<div id="leftColTitleDiv" ></div>
//gets images from instagram page
<?php
// Supply a user id and an access token
$userid = "xxx";
$accessToken = "xxxx";
// Gets our data
function fetchData($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
// Pulls and parses data.
$result = fetchData("https://api.instagram.com/v1/users/{$userid}/media/recent/?access_token={$accessToken}");
$result = json_decode($result);
?>
<?php foreach ($result->data as $post): ?>
<!-- Renders images. #Options (thumbnail,low_resoulution, high_resolution) -->
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img style="padding-left:10px; padding-top: 10px;" src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div><!-- close left column container -->
</div> <!-- close left column -->
</div> <!-- close row -->
</div> <!-- close container -->
</div><!-- close main -->
</body>
</html>
Old fancyBox is not compatible with new jQuery versions.
You have two options. Downgrade jQuery which I think you don't want to do or upgrade fancyBox.
or this patch might be useful.
I'm learning AJAX for the first time and I'm trying to create a simple application that calculates the grade a person needs to get on their final exam based on their previous assessment results.
The user inputs their grades into the form and then using ajax I calculate the response in response.php which should then be output in the callback function in the div with ajax as its id.
For some reason the xhr.readystate property is never reaching 4 so the response is never generated. Can anybody see what I'm doing wrong?
Please bear in mind I'm only learning...
index.php
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Grade Calculator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
function sendAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
document.getElementById('ajax').innerHTML = xhr.responseText;
} else {
document.getElementById('ajax').innerHTML = document.write('There was a problem');
}
};
xhr.open("GET","response.php");
xhr.send();
document.getElementById('gradeForm').style.display = "none";
document.write(xhr.readyState);
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1><br>
<form action="index.php" method="get" id="gradeForm">
<div class="form-group">
<label for="currentGrade">What is your current Grade</label>
<input type="text" name="currentGrade"><br>
</div>
<div class="form-group">
<label for="targetGrade">What is your target Grade</label>
<input type="text" name="targetGrade"><br>
</div>
<div class="form-group">
<label for="finalWorth">What is your final worth?</label>
<input type="text" name="finalWorth"><br>
</div>
<button type="submit" class="btn btn-default" onclick="sendAjax()">Submit</button>
</form>
<div id="ajax">
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Here is response.php
<?php
$currentGrade = $_GET['currentGrade'];
$targetGrade = $_GET['targetGrade'];
$finalWorth = $_GET['finalWorth'];
$neededMark = $currentGrade - $targetGrade;
$neededMark = $neededMark / $finalWorth;
$neededMark = $neededMark * 100;
$neededMark = round($neededMark);
if(isset($currentGrade, $targetGrade,$finalWorth)) {
echo $neededMark;
}
?>
The correct order of operations is:
construct
open
set handler
send
You are doing them in the order 1324, which is incorrect and therefore likely to not behave as expected.
Put things in the right order, see if that works :)
EDIT: Additionally, remove all document.write calls. They will not work with any asynchronous operation and will almost certainly break things.
EDIT EDIT: Also, <button type="submit" class="btn btn-default" onclick="sendAjax()"> - this should be type="button", otherwise your form will be submitted and it will look like it did nothing.
doesn't look like you are sending any parameters in your ajax request so response.php is not GETting any data...
if it were xhr.open("GET","response.php?param1=value1¶m2=value2"); etc you should get something
Only one small change is required
In form division make instead of submit. Because on submit the forms behaviour is different as compared to just a button click
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 */');
};