I have the following code:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
Which doesn't work. As you could probably tell, it's supposed to expand the .webPanel div to 350px on mouseover, but nothing happens.
How can I get this thing to work? I don't understand why it isn't working!
Thank you
You need a separate script inclusion for jquery:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
//you script
</script>
And how about hover function
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(function() {
$('.webPanel').hover(
function(){
$('.webPanel').animate({'width': '350px'}, 100);
},
function (){
$('.webPanel').animate({'width': '500px'}, 100);
}
});
});
</script>
I wrote your script in jsfiddle and it works great.
Please, see the code here.
I think that your problem is due to the code you wrote between the script tags.
Regards.
your function need to be in separate script tag:
<script type="text/javascript"> // this missing
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script> // this missing
Related
My page contains the code
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/head.load.min.js"></script>
<script type="text/javascript">
head.load([ '${pageContext.request.contextPath}/javascript/timecookie.js',
'http://code.jquery.com/jquery-1.10.2.min.js' ],
function() {
console.log("Done loading resources");
});
</script>
<script type="text/javascript">
<!-- this fuction does not work -->
$(document).ready(function(){
$(function(){
$('button').click(function(){
console.log("running");
var url='myapp.com/mainpage.jsp?check='+this.id;
alert(url);
});
});
});
</script>
I faset that jquery (it has been loaded) does not work arter such loading. Whats wrong with resouces loader?
Could you please try with below approach:
<script type="text/javascript">
head.load([ '${pageContext.request.contextPath}/javascript/timecookie.js',
'http://code.jquery.com/jquery-1.10.2.min.js' ],
function() {
console.log("Done loading resources");
$(document).ready(function(){
$('button').click(function(){
console.log("running");
var url='myapp.com/mainpage.jsp?check='+this.id;
alert(url);
});
});
});
</script>
I have two functions that i want to perform on a page. The first being some jQuery that slowly fades in my site upon loading. The second is some javascript for an auto scrolling div. The problem I am having is getting them to both work on the same page. Separately they work fine. The code looks as below:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollGallery.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
});
</script>
<script>
$(document).ready(function(){
if (document.images){
$('#container').hide();
$(window).load(function(){
$.fx.speeds._default = 1000;
$("#container").delay(500).fadeIn(2000);
});
}
});
</script>
</head>
Anyone any suggestions as to what I am doing wrong. I am still learning javascript so it might stand out as glaringly obvious to folks on here, in which case i apologise for my newby question in advance!
As your comments seem to have filled up I'll put this here
You will need to use jQuery.noConflict() as you have 2 conflicting javascript libraries in mootools and jquery
As well as this, as IMSoP has pointed out, you will need to only use one DOMReady event and put all your code into one wrapper something like this (not tested)
<script type="text/javascript">
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
var j = jQuery.noConflict();
if (document.images){
j('#container').hide();
j(window).load(function(){
j.fx.speeds._default = 1000;
j("#container").delay(500).fadeIn(2000);
});
}
});
</script>
So, something like
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
if (document.images){
jQuery('#container').hide();
jQuery(window).load(function(){
jQuery.fx.speeds._default = 1000;
jQuery("#container").delay(500).fadeIn(2000);
});
}
});
</script>
should work then? - I have definitely not tested it!
Here's another option for you as per Dave Walsh's blog here http://davidwalsh.name/jquery-mootools
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script>
//no conflict jquery
jQuery.noConflict();
// jquery stuff
(function($) {
if (document.images){
$('#container').hide();
$(window).load(function(){
$.fx.speeds._default = 1000;
$("#container").delay(500).fadeIn(2000);
});
}
})(jQuery);
</script>
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollGallery.js"></script>
<script type="text/javascript">
// moo stuff
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
});
</script>
This link will help you.
When we are using two framework of javascript for Jquery we can use JQuery instead of $.
Even you can try this code:
<script type="text/javascript">
var $j = jQuery.noConflict();
jQuery(document).ready(function(){
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
if (document.images){
$j('#container').hide();
$j(window).load(function(){
$j.fx.speeds._default = 1000;
$j("#container").delay(500).fadeIn(2000);
});
}
});
</script>
I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle
close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});
You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.
Any ideas why this doesnt work in my php document?
When i tested this on jsfiddle, everything worked fine.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
</head>
<body>
<div class="shipping-container">
Show UPS info
Show Fedex info
<div class="ups info" style="display:none">the info for ups</div>
<div class="fedex info" style="display:none">Who let the dogs out</div>
</div>
</body>
You missed the document ready handler, try this:
<script type="text/javascript">
$(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
Alternatively, leave your script tag as it is, but put it at the end of the document, before the </body> tag.
You should make sure that your JQuery code is only loaded AFTER your DOM has fully loaded by doing:
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
You are running the script before the link element exists.
In jsfiddle the code is by default placed in an event that runs after the document is loaded. Use the ready event to do this in your code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
I think you should do this in your header:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
This will ensure that all of the DOM objects (especially the a elements) are loaded before you try to attach any event handler.
The following way of loading a page in a div via clicking a link works with all browsers but with Safari.
Can anyone please give me a clue on what is Safari choking on?
Thanks a lot!
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(eventt){
$("#adiv").html('<div id="destiny"></div>');
fs();
});
})
function fs() {
$("#destiny").load("mypage.php", {}, function(){ });
}
</script>
Click me
<div id="adiv"></div>
I think it would work better when you replace .html with below code
.ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});
Old code
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(event){
$("#content").html('<div id="content"></div>');
fs();
});
})
function Diensten() {
$("#content").load("test.php", {}, function(){ });
}
</script>
New Code
<script type="text/javascript">
$(document).ready(function(){
$("#Diensten").click(function(event){
$("#content").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});('<div id="content"></div>');
Diensten();
});
})
function Diensten() {
$("#content").load("diensten.php", {}, function(){ });
}
</script>
Have you tried simplifying your code to
$(document).ready(function(){
$("#fs").click(fs);
function fs() {
$("#adiv").html('<div id="destiny"></div>');
$("#destiny").load("mypage.php");
}
});