I need to convert this working filter gallery from JavaScript JQuery. I'm a complete novice in both these languages so I was hoping someone could give me a little help. Below is the JavaScript that will have to be converted,
(function() {
var filterButtons = document.querySelectorAll(".filterList a");
imageNodes = document.querySelectorAll("img");
console.log(filterButtons, imageNodes);
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
function doImageSwitch(event) {
console.log("fire");
console.log(event.target.parentNode.id);
for(i=0; i<imageNodes.length; i++) {
imageNodes[i].style.display = "inline";
if(!imageNodes[i].classList.contains(event.target.parentNode.id)) {
imageNodes[i].style.display = "none";
}
}
staggerImage();
}
[].forEach.call(filterButtons, function(el) {
el.addEventListener("click", doImageSwitch, false);
});
staggerImage();
})();
And this is the HTML code I have set up,
<?php
include './includes/functions.php';
$conn = connect($config);
$result = mysqli_query($conn, "SELECT * FROM main_content");
//echo mysqli_num_rows($result); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filter Gallery</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<?php
while($row = $result -> fetch_assoc()) {
echo "<img class=\"{$row['img_class']}
img-responsive\" src=\"img/{$row['img_src']}\"
alt=\"{$row['img_alt']}\">";
}
?>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/myScript.js"></script>
</body>
</html>
Any help would be greatly appreciated. Thank you!
Did you write the javascript code yourself? If so it should not be a problem finding the answer. StackOverflow is as said not a coding service. I can try to help you, but I will not be wasting time on this question if it's for homework or some programming job ;)
If you first try to convert the code, I will be happy to help you (try).
the following uses an html structure that is presumably the same as your php echo output.
(function() {
// Selecting all of the img tags within the document that have to be changed
var imageNodes = $(".images img");
// TweenMax syntax stays the same
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
$(".filterList a").on("click", function(e) {
console.log("fire");
// parent() - http://api.jquery.com/parent/
//console.log('This: %o - Parent - %o - ParentId - %o', $(this), $(this).parent(), $(this).parent().attr("id"));
var parentId = $(this).parent().attr("id");
// [parentId] will be used as a scoped variable on the nested anonymous function declared in [.each] below.
// .each([array],func) | [array].each(func) - http://api.jquery.com/jquery.each/
$(imageNodes).each(function(index, value) {
console.log("index: %o | value: %o | parentId: %o", index, value, parentId);
// .hasClass([string]) - http://api.jquery.com/hasclass/
if($(value).hasClass(parentId))
{
$(value).css("display","inline");
} else {
$(value).css("display","none");
}
});
staggerImage();
});
staggerImage();
})();
img {width:5em; height:5em;border:0.1em solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<img class="flower img-responsive" src="img/test.png" alt="flower 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 2" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 3" />
<img class="kitten img-responsive" src="img/test.png" alt="kitten 1" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 3" />
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/1m4LmLhx/1/
pastebin: http://pastebin.com/bfDL5NLU
Note: when you click on the hyperlinks, that we've attached click event handlers to, the viewport is being directed back to the top of the page.. this is usually undesirable, but it seems to be outside of the scope of this question to address that behavior.
Related
I've been trying to create a function that allow to move around a website without leaving the same page, just loading different contents on click.
<!DOCTYPE html>
<html>
<head>
<title>Freud Got Lynched</title>
<link rel="stylesheet" type="text/css" href="site.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght#200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="site.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="abertura" class="page0">
<video autoplay muted loop>
<source src="assets/fundo1.webm" type="video/webm">
</video>
<div class="info">
<img src="assets/logo.png" alt="logo" class="logobig">
<p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch...
ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.</p>
<p class="sonhar">Sonhar</p>
<img src="assets/botao2.png" alt="botao" class="botao">
</div>
</div>
<div id="segunda" class="page1">
<img src="assets/fundo.png" class="fundo">
<div class="container">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<ul><li>Episódios</li>
<ul><li>Episódio 1</li>
<li>Episódio 2</li>
<li>Episódio 3</li>
<li>Episódio 4</li>
<li>Episódio 5</li>
<li>Episódio 6</li>
</ul>
<li>Sobre</li>
<li>Autores</li>
<li>Créditos</li>
</div>
</div>
<div class="botaomenu" onclick="myFunction(this); openNav();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="assets/logo.png" alt="logo" class="logomedium" onclick="showPage('page0')"></div>
</div>
I have this function on Javascript
function showPage(id) {
if (id=="page1") {
var pages = document.querySelectorAll("div");
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
var le = document.getElementById('segunda');
le.style.display = "block";
}
The problem is that not all of the contents in the div#segunda are being loaded after the click triggers the function. All the elements of the div#abertura are removed, as it's supposed to do, but the only element that shows from the div#segunda is the img.fundo.
Any ideas? Please keep in mind that i'm a beginner in JavaScript.
The problem here is that you have divs inside segunda div. A better way to approach this would be to assign a class to the top-level divs, and then hide them using that class. For example here's an abridged version of the code.
<body>
<div id="1" class="container">...</div>
<div id="2" class="container">...</div>
</body>
Along with JS like
function showPage(id) {
if (id=="page1") {
var pages = document.document.getElementsByClassName("container");
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
var le = document.getElementById('segunda');
le.style.display = "block";
}
Your html is missing some closing tags, so it is invalid. I have also fixed that.
Now, the changes:
It is a good idea to give your "pages" a common way to identify them so that you can query the DOM only for them. In this case, I have given them the class page. Your problem was that by doing var pages = document.querySelectorAll("div"); you were basically selecting all the divs on the page and then hide them, which has an undesired effect.
Next, it is also a good idea to uniquely identify the page containers somehow. This can be achieved by giving them an id. It is a good idea to have a format for these ids so you can easily work with them. In this case, I have given them the id page_x, where x is a number.
Going to the showPage function, we are now able to pass just the number of the page we want, e.g. showPage(1). Because we have a certain format for the ids, it is now more elegant to work with them. As you can see in the function, I used the .page class and then I compared the ids in the loop to determine what is to be shown and what to hide.
Another option would be to have display: none; on the .page class in css and have another class called active with display: block; and then just add this class to the div you wish to show and remove it from the others
Here's the updated html:
<!DOCTYPE html>
<html>
<head>
<title>Freud Got Lynched</title>
<link rel="stylesheet" type="text/css" href="site.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght#200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="site.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="page_0" class="page">
<video autoplay muted loop>
<source src="assets/fundo1.webm" type="video/webm">
</video>
<div class="info">
<img src="assets/logo.png" alt="logo" class="logobig">
<p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch...
ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.
</p>
<p class="sonhar">Sonhar</p>
<img src="assets/botao2.png" alt="botao" class="botao">
</div>
</div>
<div id="page_1" class="page" style='display: none;'>
<img src="assets/fundo.png" class="fundo">
<div class="container">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<ul>
<li>Episódios</li>
<ul>
<li>Episódio 1</li>
<li>Episódio 2</li>
<li>Episódio 3</li>
<li>Episódio 4</li>
<li>Episódio 5</li>
<li>Episódio 6</li>
</ul>
<li>Sobre</li>
<li>Autores</li>
<li>Créditos</li>
</ul>
</div>
</div>
<div class="botaomenu" onclick="myFunction(this); openNav();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="assets/logo.png" alt="logo" class="logomedium" onclick="showPage(0)">
</div>
</div>
</body>
</html>
And js function:
function showPage(id) {
let pages = document.querySelectorAll(".page");
for (var i = 0; i < pages.length; i++) {
if(pages[i].id !== `page_${id}`) {
pages[i].style.display = "none";
} else {
pages[i].style.display = "block";
}
}
}
In the code below, index.html page is not getting styled in the browser as per the css and js it links to in the head of index.html. There is also a script tag before the closing body tag. I tried removing the ".." and playing around with the path for no avail.
index.html siblings are folders:
css, js and jquery.mobile-1.4.5
Contents of css folder:
index.css
Content of js folder:
index.js
jquery-1.11.3
Contents of jquery.mobile-1.4.5 folder:
Will the links in the head tag resolve correctly? if not, please suggest. Thanks
$("header .ui-btn-left").on("tap", drawerToggle);
$(".contentDiv nav").on("swipeleft", drawerClose);
$("ul").children("li").on("tap", navItemHandler);
$(document).on("pagebeforeshow", middleButtonGone);
function drawerToggle() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({
"left" : -width
});
} else {
$("nav").css({
"left" : 0
});
}
}
function drawerClose() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({
"left" : -width
});
}
}
function drawerOpen() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left != 0) {
$("nav").css({
"left" : 0
});
}
}
function middleButtonToggle() {
if ($("footer ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
} else {
$("#extra").show();
$("footer ul").removeClass('ui-grid-a').addClass('ui-grid-b').find("li").last().removeClass('ui-block-b').addClass("ui-block-c");
}
}
function middleButtonGone() {
if ($("footer ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
}
}
function navItemHandler() {
var selected_index = $(this).index();
drawerClose();
}
nav {
width: 80%;
position: fixed;
background-color: white;
left: 0;
top: 2em;
transition:left 0.3s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="../css/index.css" />
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<header data-role="header" data-position="fixed">
<a class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
<h1>Activity label</h1>
<a class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-gear">Info</a>
</header>
<div data-role="content" class="contentDiv">
<form method="post" action="demoform.asp">
<input type="text" name="fname" id="fname">
</form>
<nav>
<ul data-role="listview" data-inset="true">
<li>
<img src="css/images/image.png" alt="France" class="ui-li-icon ui-corner-none">France
</li>
<li>
<img src="css/images/image.png" alt="Germany" class="ui-li-icon">Germany
</li>
<li>
<img src="css/images/image.png" alt="Great Britain" class="ui-li-icon">Great Britain
</li>
<li>
<img src="css/images/image.png" alt="Finland" class="ui-li-icon">Finland
</li>
<li>
<img src="css/images/image.png" alt="United States" class="ui-li-icon ui-corner-none">United States
</li>
</ul>
</nav><!-- /side navigation -->
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<button type="submit" data-theme="c">
NO
</button>
</li>
<li id="extra">
<button type="submit" data-theme="c">
EXTRA
</button>
</li>
<li>
<button type="submit" data-theme="c">
YES
</button>
</li>
</ul>
</div>
</footer><!-- footer -->
<script src="../js/index.js"></script>
</body>
</html>
index.css
Your paths are wrong
If index.html is a sibling to the resource folders, then the paths to the folders should not be "../some path", it should be "some path".
Change to the following in head:
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="css/index.css" />
Change to the following at the end of the body:
<script src="js/index.js"></script>
It might be good to understand relative path's, specifically in regards to a parent directory.
I am new to web development so please forgive for any shortcomings.
I have been working on a website for a project for a while now and now I have to add a specific countdown on it(Keith Wood Countdown) the "Pad with zeroes:" one.
The problem is that, I do not know how to set the target date on it to countdown to and how to attach it to a particular div.
I have searched the Internet and there are similar questions on stackoverflow but they are for an older version of this countdown. And nowhere is there any answer for how to attach it to a div.
Here's my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<meta name="description" content=" Welcome to La Martiniere Model United Nations 2015">
<meta name="keywords" content="lmun,lucknow mun,la martiniere mun,la martiniere college,la martiniere model un,la martiniere model united nations,lmun 2015">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Slideshow *Starts* -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- Slideshow *Ends* -->
</head>
<body>
<div class="brdr_top"></div> <!-- A little gold border at the top -->
<div class="header" id="banner">
<img src="images/Website_bannertxtcombo.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
<img src="images/Logo_Blue_Small.png" id="banner_logo"/> <!-- The LMUN Logo -->
</div>
<div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->
<div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>
<div class="nb_item">ABOUT US <span id="dArrow"></span>
<ul id="abtus_menu">
<li class="nb_item_li"><span id="space2"></span>LA MARTINIERE COLLEGE</li>
<li class="nb_item_li"><span id="space2"></span>LMUN 2015</li>
<li class="nb_item_li"><span id="space2"></span>SECRETARIAT</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
<ul id="rgstr_menu">
<li class="nb_item_li"><span id="space2"></span>INDIVIDUAL</li>
<li class="nb_item_li"><span id="space2"></span>DELEGATION</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
<ul id="comt_menu">
<li class="nb_item_li"><span id="space2"></span>African Union</li>
<li class="nb_item_li"><span id="space2"></span>Arab League</li>
<li class="nb_item_li"><span id="space2"></span>SPECPOL</li>
<li class="nb_item_li"><span id="space2"></span>CCPCJ</li>
<li class="nb_item_li"><span id="space2"></span>UNSC</li>
<li class="nb_item_li"><span id="space2"></span>Ad - Hoc</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>RESOURCES <span id="space"></span></div>
<div class="nb_item">EVENTS <span id="dArrow"></span>
<ul id="evnt_menu">
<li class="nb_item_li"><span id="space2"></span>KEYNOTE SPEAKERS</li>
<li class="nb_item_li"><span id="space2"></span>SOCIALS</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>SPONSORS</div>
<div class="nb_item"><span id="space"></span>CONTACT US<span id="space"></span></div>
</div>
<div id="slideshow">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/ff.jpg" alt="" title="" id="wows0_0"/></li>
<li><img src="data0/images/dsc_0160001.jpg" alt="jquery content slider" title="" id="wows0_1"/></li>
<li><img src="data0/images/la_martiniere_college_building,_lucknow.jpg" alt="" title="" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/ff.jpg" alt=""/>1</span>
<span><img src="data0/tooltips/dsc_0160001.jpg" alt=""/>2</span>
<span><img src="data0/tooltips/la_martiniere_college_building,_lucknow.jpg" alt=""/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">image carousel by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div id="countdown"></div>
</body>
</html>
I want to add the countdown to the countdown div.
padZeros is now padZeroes. I've inserted variable names for the year, month and day that the countdown approaches. You attach to the target <div> by calling $("#yourDivId").countdown() with the appropriate options.
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.countdown.css">
<style type="text/css">
body > iframe {
display: none;
}
#defaultCountdown {
width: 240px;
height: 45px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
</head>
<script>
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
</script>
<body>
<h1>jQuery Countdown Basics</h1>
Counting down to:
<div id="year"></div>
<div id="defaultCountdown"></div>
</body>
</html>
According to the documentation:
<script>
$(function() {
var mydate = new Date();
mydate = new Date(mydate .getFullYear() + 1, 11 - 1, 6);
$('#countdown').countdown({until: mydate });
]);
</script>
Add this code right before your closing </body> tag.
I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.
This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource
I have created an expand / collapse menu on a site I created in Wordpress
http://www.ogormanconstruction.co.uk/
Once you click on any of the li's the URL changes but the page does not seem to refresh to display the correct content
I'm not too familiar with javascript so I was wondering how I could make this effect work
<script type='text/javascript' src="/wp-content/themes/child/scripts/jquery-1.6.2.min.js"></script>
<script type='text/javascript' src="/wp-content/themes/child/scripts/jMaster.js"></script>
<script type='text/javascript' src="/wp-content/themes/child/scripts/supersleight.plugin.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/hashchange.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/actions.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/tinyscroll.js"></script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</head>
<body <?php body_class(); ?>>
<div id="header">
<ul id="nav">
<li class="clearfix">
<div class="clearfix">
<div id="menuNav">Menu</div>
<ul class='clearfix'><li><strong>O'Gorman Construction Ltd</strong><ul class='clearfix'><li><a href='/about-us'>About Us</a><li><a href='/contact'>Contact</a></li></li><li><a href='/work'>Work</a></li><li><a href='/recruitment'>Recruitment</a></li></ul></li><li><strong>Services</strong><ul class='clearfix'><li><a href='/site-logistics'>Labour Supply</a></li><li><a href='/waste-management'>Drainage</a></li><li><a href='/security-services'>Fencing</a></li><li><a href='/traffic-management'>Demolition</a></li></ul></li><li><strong> </strong><ul><li><a href='/multi-service-gangs'>Ground Works</a></li><li><a href='/facilities-accomodation'>Multiservice Gangs</a></li><li><a href='/small-works-maintenance'>Engineering</a></li><li><a href='/catering-services'>Water Treatment</a></li></ul></li></ul>
</div>
</div>
</li>
</ul>
</div>
<h2>Work</h2>
<div class="leftCol">
<div class="rightCol gallery">
<ul id="homeGallery">
<li id="prevControl">Previous</li>
<li id="galleryItems">
<ul>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/1.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project I</strong></div></div>
</li>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/2.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project II</strong></div></div>
</li>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/4.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project III</strong></div></div>
</li>
</ul>
</li>
<li id="nextControl">Next</li>
<li id="copyright">© O'Gorman Construction Ltd</li>
</ul>
</div>
</div>
<div id="main">
It looks like it has to with $(window).hashchange(); which you are calling in the
$(document).ready(function ()
I think it is causing all of the links in your page to add a hash rather than redirect to another url.
For example, if you hover over the "Work" link, you can see the url it's supposed to go to in the bottom left corner:
http://www.ogormanconstruction.co.uk/work
But when you click on it, all that happens is the url is changed to:
http://www.ogormanconstruction.co.uk/#/work
which doesn't actually redirect you.
Is hashchange part of Wordpress, or is something you'ved added?