The document ready function isn't working for me, but it worked just the day before. Also, no other jQuery function works in that file but it did a couple of days ago. can somebody help?
here is the code:
$(document).ready(function() {
//does not log ready
console.log('ready');
//animation for slides
$("#slideshow > div:gt(0)").hide();
//this does work
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
//end of animation
$('nav ul div').hover(function() {
$('.aMain').addClass('expand');
}, function() {
$('.aMain').removeClass('expand');
});
$('#a').hover(function() {
$('.aMain').addClass('expand');
}, function() {
$('.aMain').removeClass('expand');
});
//this doesnt log click inside the function
$('.subA', '.aNav').click(function() {
console.log('click');
console.log($(this).get(0).id);
//sessionStorage.setItem("catagory", $(this).get(0).id); -> commented to not throw error on SO
});
//$('#thead').text(sessionStorage.getItem("catagory")); -> commented to not throw error on SO
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alpert Cooks - Cook and Share</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<header>
<img src="images/Logo.png" id="logo" alt="" href="AlpertCooks/index.html" />
<nav id="nav">
<ul>
<li><a class="anav" href="recipeList.php">מנות ראשונות</a></li>
<li><a id="a" class="anav">מנות עיקריות</a></li>
<li><a id="vegeterian" class="anav" href="recipeList.php">צמחוני</a></li>
<li><a id="salads" class="anav" href="recipeList.php">סלטים</a></li>
<li><a id="deserts" class="anav" href="recipeList.php">קינוחים</a></li>
<li><a id="speciala" href="recipeUpload.php">העלו מתכון שלכם</a></li>
<div class="aMain">
<li><a id="meat" href="recipeList.php" class="subA">בשר</a></li>
<li><a id="bread" href="recipeList.php" class="subA">פחמימות</a></li>
<li><a id="fish" href="recipeList.php" class="subA">דגים</a></li>
<li><a id="milk" href="recipeList.php" class="subA">דברי חלב</a></li>
<li><a class="subA">אחר</a></li>
</div>
</ul>
</nav>
</header>
<main id="main">
<div id="slideshow">
<div>
<div class="title">
<h2 class="h2">פסטה</h2>
<img id="line" src="images/decorative-clipart-fancy-3.png" alt="" /></div>
<img id="slides" src="images/d87c1237-c3e2-401a-b26b-9afc323e503f.jpg" alt="" />
</div>
<div>
<div class="title">
<h2 class="h2">פירה</h2>
<img id="line" src="images/decorative-clipart-fancy-3.png" alt="" /></div>
<img id="slides" src="images/ab7c95c8-781c-4d09-93f2-d484a95cde2d.jpg" alt="" />
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
I added comments inside the code so you can see which functions are working and which ones are not. All the hover functions are working.
As the JS snippet runs normally, assuming no network problems, Google CDN's delivery of the jQuery script will is also assumed to happen normally.
The issue can be pinpointed to the part where the JS file is imported to the HTML file, which is:
<script type="text/javascript" src="js/scripts.js"></script>
You will want to check your browser's devtools/inspector's Network tab to see if you are getting a 404 response/error for fetching this script. If so, the problem has been correctly identified, which is that the javascript file is not available at the location js/scripts.js. Verify the location/address of the javascript file to ensure that the scripted is imported correctly to the HTML file.
Related
My problem is the .click event below. The 'nav' and '#closemenu' div hide as expected on document ready, but the click event won't work to save my life. Either I'm missing something embarrassingly small (which I hope is unlikely because I copy/pasted the code from the jQuery API page and then changed only the ID and alert) or else I have no idea what my issue is. Any help is much appreciated.
Here's my code:
$(document).ready(function() {
$('nav').hide();
$('#closemenu').hide();
$('#menuicon').click(function() {
alert('Hello, test');
});
});
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<h1>Page Title Here</h1>
<div id="menuicon">
<img src="mobile_menu.png">
</div>
<nav>
<ul>
<a href="">
<li class="upCase">Projects</li>
</a>
<a href="">
<li clas s="upCase">Profile</li>
</a>
<a href="">
<li class="upCase">Contact</li>
</a>
</ul>
</nav>
<div id="closemenu">
<p>X</p>
</div>
</header>
</body>
Why don't you just add the event directly like this
For multiple div use the below
$( "#menuicon" ).bind({ click: function(){ alert ();}
});
I am a self taught coder and would be really grateful if someone could give me some advice on how to get the following hexagon animated menu I downloaded from codepen to work (link: http://codepen.io/web-tiki/pen/WvNQpG). Now I have created 3 files: hexmenu.html, hexmenu.css, and hexmenu.js all in the same folder of course. But when I paste the code from code pen in each file the menu doesn't seem to work. The head of my file which links to the js and css is as follows:
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8" />
<title>PASSION DEVELOPMENT PROJECT</title>
<link href="hexmenu.css" rel="stylesheet" type="text/css" />
<script src="hexmenu.js" ></script>
</head>
Now all the html code from codepen is in the body tag; the css in hexmenu.css and the javascript in hexmenu.js file. Each one was pasted directly into different files respectively from codepen with no modification (there is nothing else in these files!), hence I'm a little baffled as to why this isn't working. Any advice?! The css document seems like it is working but I think something is wrong on the javascript end. Could anyone let me know what I'm missing? I even created a jsfiddle to check if the code itself was working and everything ran smoothly. Yet when I put the files on my desktop and run it on google chrome and firefox the menu doesn't open up... An easy fix would be a godsend at this point! I figure as a novice I must be missing something obvious here...
You need window.onload in javascript. I Check following
code in my local by adding window.onload and now it's working charm like in codepen. Here i add all code in same HTML page you can separate javascript.
Use following code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
window.onload = function() {
var hexNav = document.getElementById('hexNav');
document.getElementById('menuBtn').onclick = function() {
var className = ' ' + hexNav.className + ' ';
if ( ~className.indexOf(' active ') ) {
hexNav.className = className.replace(' active ', ' ');
} else {
hexNav.className += ' active';
}
}
};
</script>
</head>
<body>
<nav id="hexNav">
<div id="menuBtn">
<svg viewbox="0 0 100 100">
<polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
</svg>
<span></span>
</div>
<ul id="hex">
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
<li class="tr"><div class="clip"><a href="#" class="content">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
</ul>
</nav>
</body>
</html>
Hope it helps. Fiddle link
you have to add js library in your head tag,
<script src="http://code.jquery.com/jquery-2.1.3.min.js" ></script>
actually your code is wrong,
<!DOCTYPE html>
<head>
<html lang="en">
replace with,
<!DOCTYPE html>
<html lang="en">
<head>
So I just started a new site in bootstrap and I'm working on a nav-tabs design. I've followed the directions to the tee and have almost copied and pasted at this point just to get it to function but alas I have several problems:
(1) The nav-tabs do not change on click i.e. the url changes to my element id but the actual tab does not become "active" (Home remains depressed while the others stay unpressed)
(2) The tab-content div only displays the content marked by class="active".
I have included the necessary jquery and bootstrap js scripts and I believe they are in the correct order but no matter what I do these tabs never switch their active state to the one that is clicked.
Here is my html:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I have attempted the various solutions I could find including the addition of
<script>
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Underneath the bootstrap.min.js script but like I said just about anything I've done has produced NO change whatsoever. Everything else looks fine on the page but a little guidance here would truly get me started on the right foot. I haven't been working with bootstrap for more than a few hours so forgive my ignorance. The docs say that bootstrap does not even require javascript to toggle the tabs when data-toggle is used so I'm quite confused on what the right answer is.
:EDIT: The first answer was correct. Placing the tags right before the closing body tag did not improve functionality but replacing my scripts with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Did indeed work. I my initial jquery and bootstrap files were in the correct place but it seems they are not completely functional/broken in some way or something. Thanks again!
By the way: Am I able to link to these repositories constantly or will I have to update my pages when new updates of bootstrap/jquery come out? What I'm asking is will these repositories will be deleted?
The only thing I can think of (but what usually causes this issue) is your <link> and <script> tags are in the wrong spot. Copying your code to an editor of mine and adding jquery.min.js and bootstrap.min.js right before the closing </body> tag caused it to work just fine for me. Here is the HTML file:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".../bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src=".../jquery.min.js" type="text/javascript"></script>
<script src=".../bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Note: Replace .../ with the correct URL to bootstrap.min.css, jquery.min.js and bootstrap.min.js. Hope that helps!
The tabs are working fine as can be seen here: https://jsfiddle.net/AndrewL32/nh6ma48r/
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
You need to keep bootstrap.js as well as the above script that calls the function above on your <head></head> section but below your jQuery.
Also, please replace your:
<script src="bootstrap.js"></script> with this <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
and your
<script src="jQuery"></script> with this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
(issue could be because your js files are edited, moved or missing)
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>