i find it strange. I couldn't figure it out why.
First of all, I put js files on the <head>. Something like this below:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
Furthermore, my code for menu navigation like below:
For HTML
<ul class="mainMenu">
<li>LINK 1
<ul class="subMenu">
<li>SUB LINK 1</li>
<li>SUB LINK 2</li>
<li>SUB LINK 3</li>
<li>SUB LINK 4</li>
</ul>
</li>
<li> LINK 2 </li>
</ul>
For JS:
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
}
AND CSS:
.subMenu {
display: none;
}
Here is JSFIDDLE. It is working in JSFiddle but it's not working in my server. I am wondering why. Any idea?
I'm not sure if it's the case or not. You must put your code inside
$(document).ready(function(){ // here });
So your are telling jQuery to load/manipulate dom elements after all the HTML elements has been loaded.
Now here comes the point that why is your your fiddle is working.
Its because, $(document).ready(function(){ }); it's already built-in inside the js panal of jsFiddle. So whatever jQuery you write on that panel it all will go inside $(document).ready(function() { // here }) which means all your code will run after the page has finished loading.
Note : And of course maintain order when loading the scripts accordingly as you don't want to call a function that hasn't been loaded yet for sure.
Should be loaded first
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
When jQuery is loaded, load other components
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
First load jquery , jquery migrate is plugin so load after jquery framework
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
wrap the code in document ready
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
});
___ ^--- not close
Add Below code and just try it again, It should work or not ??
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(.subMenu).css("display", "block");
$(this).children('ul').slideToggle('slow');
});
});
Related
I have a php rendered menu. This menu is the first item to appear while my page is rendering.
The problem is that menu apperas like a simple text list, like a broken page, so after the page render completly the menu appears as it should appear.
I already try tu use fadein, delay and nothing worked for me.
At my case, how I could show this menu only after the page load completly?
I'm using prototype and jquery. How do it with no conflict?
the structure at html is simple:
<div id="menu">
<nav id="mobile-menu" >
<ul>
<li>item</li>
<li>item</li>
</ul>
</nav>
</div>
Menu before page render:
I assume that you already know about this if you have tried fadein.
#menu {
display: none;
}
I have had some problems with the jQuery implementation in the past and just used pure Javascript. Could you just put this at the bottom of your HTML page?
It is kind of a hack, but it depends on your use case.
<script>
document.getElementById("menu").style.display = "block";
</script>
<html>
<head>
<script type="text/javascript"
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'>
</script>
<style>
#menu{
display: none;
}
</style>
</head>
<body>
<div id="menu">
<nav id="mobile-menu" >
<ul>
<li>item</li>
<li>item</li>
</ul>
</nav>
</div>
</body>
<script>
$(document).ready(function(){
$('#menu').css("display", "block");
})
</script>
</html>
If you are using jquery below is where you need to display the menu. $( document ).ready is fired after html is renndered
$( document ).ready(function() {
//change menu style to display
});
Thank you guys!
I used your code with no conflict!
<script type="text/javascript">
var j = jQuery.noConflict();
j( document ).ready(function( $ ) {
j('.hide-menu').css("display", "block");
});
</script>
I am working on a project to explain jQuery to my students. I had a div that would slide on click and then added a second to hide. Then nothing worked so I removed all new code but the slide div no longer works.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
// slide function
$("#frog").click(function() {
$("#frog").animate({left: "200px"}, 500);
});
</script>
<style type="text/css">
#frog{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 20px;
}
</style>
<title>I hate JS!</title>
</head>
<body>
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<h2>Top 3 Best Animations</h2>
<h4><li>Slide</li></h4>
<div id="frog"></div>
</ol>
</body>
Your HTML is invalid. This can break any javascript as elements get rendered wrong. It should look like this:
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<li><h2>Top 3 Best Animations</h2></li>
<li>
<h4>Slide</h4>
<div id="frog"></div>
</li>
</ol>
<script>//javascript here</script>
Also, it is strongly recommended to include your JS before your closing body tag. Because when the javascript initiates, the element it has to bind to, has to exist first! If the javascript renders before the element does, it will never be able to find it, therefore not work, so include javascripts at the end of your document, not the start.
You also need to wrap your javascript within a
$(function(){
//Javascript here
});
So that it will trigger on all browsers when the page has finished loading. (Not all browsers automatically trigger javascripts)
See this JS fiddle for a working example:
https://jsfiddle.net/5cxnLe4v/1/
-- also slightly important: make sure you close all your elements, like the </body> and </html>!
I'm trying to get tabs working in IE8, using code directly off the examples page for Twitter Bootstrap, but they just aren't behaving the same way as they do on the example page.
Specifically, the inactive tabs always remain visible.
Code below:
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="messages">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
I've tried initiating the tabs both through using data-toggle tags and also using the suggested .tab() method but no difference... the inactive tabs are always visible!
JSfiddle link here (but jsfiddle doesn't work in IE8 anyway): http://jsfiddle.net/4gNpt/
SOLVED! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.
Solved! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.
First of all I' very new to jQuery and JavaScript but not to HTML and PHP.
I found many posts about that problem but no solution. I think I am doing something (completely?) wrong...
I've got two files, the index.php and content.php which should dynamically add content to the page.
index.php:
<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css"></link>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<title>Ajax test</title>
<script language="JavaScript">
$(function(){
$('#page1').click(function(event) {
$('#content').load($(this).attr('href')).trigger("create");
return false;
});
});
$(function(){
$('#page2').click(function(event) {
$('#content').load($(this).attr('href')).trigger("create");
return false;
});
});
</script>
</head>
<body>
<div id="hm-agenda" data-theme="a" data-role="page">
<div data-theme="a" data-role="header">
<h1>Ajax test</h1>
</div>
<div id="content" data-role="content">
Default content
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d" class="navdiv">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
</div>
</body>
</html>
So a click to "Page 1" or "Page 2" in the navigation should load content.php?page=x into the div with the id "content".
And this is how content.php looks like:
<ul data-role="listview" class="hm-list">
<li data-role="list-divider"><h3>You are on page: <?php print $_GET['page']; ?></h3></li>
</ul>
Loading the file into the content-div works fine put jQuery won't apply the styling stuff.
The strange thing is that after clicking the link in the navigation the style is getting applied for about one second and disappears immediately.
This example is online at: http://m.sepulturagenda.ch/ajax/
Any help is appreciated. I stock here for hours now...
Your problem is with this line:
$('#content').load($(this).attr('href')).trigger("create");
You are creating an asynchronous request via .load() and not waiting for it to complete before calling the .trigger("create") method. So basically you are calling the .trigger("create") method before there is any HTML to initialize.
You can utilize the callback function that you can pass to .load() to call the .trigger("create") method at the correct time.
For example:
$(function(){
$('#page1').click(function(event) {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
});
A Quick Note:
Is there a reason you're using .load() to load external content? jQuery Mobile will do this for you as long as the external content is in the proper format. Here is some documentation to explain what I mean: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
And a Side Note:
Using the document.ready event handler is not recommended when using jQuery Mobile. Instead you should bind to one of the jQuery Mobile page-events, like pageinit.
For example:
//place this in the global scope
$(document).on('pageinit', '#my-page', function () {
$('#page1').click(function(event) {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
});
Although since you're using an ID as the selector for your click event handler, you might as well delegate the event handler strait to the #page1 element.
For example:
$(document).on('click', '#page1', function () {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
Here is the documentation for jQuery Mobile events (see the large yellow warnings at the top of the page): http://jquerymobile.com/demos/1.1.1/docs/api/events.html
I'm sure there is a better way to do this but you could just manually tell it to add the "ui-btn-active" class..
$(function(){
$('#page2').click(function(event) {
$(".ui-btn-active").removeClass("ui-btn-active");
$('#content').load($(this).attr('href')).trigger("create");
$(this).addClass('ui-btn-active');
return false;
});
});
I've looked high and low, and tried all sorts of things, but it simply won't work. I saw these two SO questions and their responses (which apparently worked) but do not seem to be working for me:
jquery bounce effect breaks inline alignment of list
jQuery Bounce In Place
I want to make the list items on my website http://web.cs.dal.ca/~webucat/ bounce when clicked on. This is my HTML:
<div id = "links">
<ul>
<li>Home<li>
<li>Learn Math<li>
<li>Learn Geography<li>
<li>Learn Spelling<li>
<li>Learn Music<li>
<li>Contact Teacher<li>
</ul>
</div>
And my jQuery:
$('li a').hover(function () {
$(this).effect("bounce", { times: 3 }, 300);
})
But they don't seem to work.
In one of the previous questions it said to make the list items float left instead of display inline, which I did, but it still didn't fix the issue.
I have an odd feeling it's something to do with my script references in my HTML. Are these correctly done?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
I'm really at a loss here as to why it won't work. Could anyone help?
Edit: I made this fiddle: http://jsfiddle.net/jfHNU/2/ And it works there, and I fail to see how my code is different from that.
When is
$('li a').hover(function () {
$(this).effect("bounce", { times: 3 }, 300);
})
being executed? Is it perhaps running before the dom is fully loaded and therefor the li's don't exist?
edit:
It looks like it's running before the page is fully loaded. try moving your script tag to the bottom of the page and perhaps wrapping it in a document.ready ie:
$(document).ready(function() {
$('li a').hover(function () {
$(this).effect("bounce", { times: 3 }, 300);
})
});
You must include jQuery-ui after jQuery otherwise nothing will work
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>