I have to dynamically include some navigation bars, format and misc css classes via jQuery.
For each webpage I have the following code :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').load('navigationtheory.html');
});
$(document).ready(function(){
$('#footer').load('../../include/footer.html');
});
$(function(){ $("head").load("../../include/header.html") });
</script>
This is inside the <head> dom element.
I have to isolate the second script contents into a separate file. I did so by including the exact code in a file called jqueryincludes.js and then call it in this fashion
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<script src="jqueryincludes.js"> </script>
My contents of jquery includes is :-
$(document).ready(function(){
$('#navigation').load('navigationtheory.html');
});
$(document).ready(function(){
$('#footer').load('../../include/footer.html');
});
$(function(){ $("head").load("../../include/header.html") });
The page does not render correctly.
So in theory this should work. I am pretty certain its a syntax error, I could not find anything in jQuery documentation for external definitions.
I am new to Javascript and JQuery.
Related
I have read that I have to put back in the event handler for it to work in dreamweaver from JS Fiddle, I have put it back in and I it still wont work? Here is the Demo: http://jsfiddle.net/EfLJJ/6/
Here is my JS Code:
$(document).ready(function() {
$(".list .fs1").bind({
mouseenter:function(){
$(".sublist").show();
},
mouseleave: function(){
$(".sublist").hide();
}
});
});
Add the jQuery library to your script.
Put this code inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your html code inside head put this line of code in order to include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Otherwise will not be able to use it.
In jsfiddle this works in a different way.
Also, if you're using jQuery version 1.7 and above, I'd recommend you switch from using ".bind()" to ".on()" for as ".on()" is the preferred method according to the jquery website. Check out the difference between ".bind()", ".on()" and ".live()" for more info here, What's the difference between `on` and `live` or `bind`?
Problem solved! To get it running in Dreamweaver you have to use the Javascript Script Tags
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Your Code Here */
</script>
i have been trying to set up utterscroll and i cant seem to be able to
there is no clear instruction,
i put both files provide in order and i call the event but nothing
https://github.com/debiki/utterscroll
i cant even get it to work on a jsfiddle
<script src='jquery-scrollable.js'></script>
<script src='debiki-utterscroll.js'></script>
if (!Modernizr.touch) // if not a smartphone
debiki.Utterscroll.enable({
scrollstoppers: '.CodeMirror, .ui-resizable-handle' });
Now I've added an example HTML file that shows how you can enable Utterscroll on your page:
http://rawgit.com/debiki/utterscroll/master/utterscroll-example.html
(Linked from https://github.com/debiki/utterscroll)
What that page does, is it places this before </body>:
<script src='https://rawgithub.com/debiki/utterscroll/master/debiki-utterscroll.js'></script>
</body>
and this in the <head>:
<script type="text/javascript">
jQuery(function($) {
if (!Modernizr.touch) { // if not a smartphone
debiki.Utterscroll.enable();
}
});
</script>
I'm trying to implement jQuery tabs to replace AJAX tab container. I've followed the code from the jquery website but my tabs aren't showing up. It just loads the entire page full of data with no tabs. And firebug tells me the following error:
$("#tabs").tabs is not a function
$("#tabs").tabs();
I've got references to all the files needed:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
And I've got the function specified as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
The code for the tabs are as follows:
div id="tabs">
<ul>
<li><span>Patient Information</span></li>
<li><span>Medical History 1 of 3</span></li>
<li><span>Medical History 2 of 3</span></li>
<li><span>Medical History 3 of 3</span></li>
<li><span>Scheduler</span></li>
<li><span>Care Plan</span></li>
</ul>
<div id="tab-1">
</div>
**Repeats for all tabs through tab-6**
</div>
Can anyone tell me what I'm doing wrong? Since the .tabs() function isn't working the page is just loading like so -
Your code works just fine. The only thing you're missing is the CSS for the tabs - http://jsfiddle.net/8JX4A/
If you have another jQuery element in the same page maybe you have conflicts. I have the same problem, try with this:
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$("#tabs").tabs();
});
Then only change i:; jQuery.noConflict(); before each jQuery element.
You need to link the CSS file:
http://jsfiddle.net/fJaBa/
Try loading scripts in this sequence
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
$.fn.tabs = function() {
var selector = this;
this.each(function() {
var obj = $(this);
$(obj.attr('href')).hide();
$(obj).click(function() {
$(selector).removeClass('active');
$(selector).each(function(i, element) {
$($(element).attr('href')).hide();
});
$(this).addClass('active');
$($(this).attr('href')).fadeIn();
return false;
});
});
$(this).show();
$(this).first().click();
};
Live Demo Here
Not a jquery expert but I do know you will need some css to make the tabs work correctly. since they will need to be positioned relative. Also check out this jquery tabs tutorial to compare your code.
Is the 1.8 alias to the jQuery UI lib working? Have you tried using a specific full version, like 1.8.16 instead? Can you look at the page once it's loaded and see if jQuery and/or jQuery UI were actually pulled in successfully?
I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />
You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict
Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
My main page is index.php. I'm loading a section of the page with AJAX and I would like to also load a datepicker in the same section I got all relevant JS:
<script type="text/javascript" src="javascripts/jquery/jquery.js"></script>
<script type="text/javascript" src="javascripts/datepicker/jquery.datePicker.js"></script>
<script type="text/javascript" src="javascripts/datepicker/date.js"></script>
I hope i'm not missing anything, the CSS is copied into my main css file.
and here's how the ajax looks like, at least the callback part:
xmlhttp12.onreadystatechange=function() {
if (xmlhttp12.readyState == 4) {
if(document.getElementById("corpcrm").innerHTML=raspuns[0]){
$(function()
{
$('#datepicker')
.datePicker({inline:true})
});
Now i know there aren't any problems with the the rest of the code as i've been using the very same thing for a while now, somehow I can't get the jQuery part right.
i tried adding a div directly to index.html and adding
<script type="text/javascript">
$(document).ready(function(){
$("#test").datepicker();
});
</script>
in the head. Firebug finds an error related to it that says
$('#test').datepicker() is not a function
The problem is now solved. I wasn't loading jquery-ui properly, was missing a > at the end of a script, thanks for the help guys.