I have a conflict with my JS as one of the scripts isn't functioning properly, I'm trying to use more than one javascript in my document, I will be using three and I'm getting a conflict already and I only have two in the document so far... :(
First in the head:
<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script>
<script type="text/javascript" src="javascript/jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
Second in the body:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'243px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content')
.stop(true,true)
.fadeOut()
.find('p')
.stop(true,true)
.fadeOut();
}
</script>
From what I can see it's the "function" that may be causing the issue. Please help... And how can you avoid these issues, I'm sure loads of people use multiple js all the time, do you just hope and pray it doesnt mess up?
Edited:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
Cleaning up your source code may help the debugging process..
Instead of using javascript contained within script tags within the body/head of your document, you can just create a separate javascript file. Place all of your external script tags within the head of the document. Your custom javascript file which contains all the above code should be called last.
Your click/hover functions should be contained/bound within your document.ready function.
Also, you are calling duplicate scripts, jcarousel.js and jcarousel.min.js are the same script. One is just the minified version. You are likely producing conflicts because of this, and the same would be true for your jquery calls. Try using just one version of jQuery, ie the latest version from scriptsrc.net
Your resulting html document would therefore look something like this
<head>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script>
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<!-- your custom js -->
<script type="text/javascript" src="javascript/yourCustom.js"></script>
</head>
your custom js file would then look like this..
function expand($elem) {
var angle = 0;
var t = setInterval(function() {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({
rotate : '+=-40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '243px'
}, 1000).find('.item_content').fadeIn(400, function() {
$(this).find('p').stop(true, true).fadeIn(600);
});
}//end expand
function collapse($elem) {
var angle = 1440;
var t = setInterval(function() {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({
rotate : '+=40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '52px'
}, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}//end collapse
$(document).ready(function() {
//Carousel setup
$('#jcarouselMetro').jcarousel({
scroll : 1,
wrap : 'both'
});
$('#jcarouselInvites').jcarousel({
scroll : 1,
wrap : 'both'
});
//end carousel
//item hover function
$('.item').hover(function() {
var $this = $(this);
expand($this);
}, function() {
var $this = $(this);
collapse($this);
});
//end hover
});//end document ready
Further to all of this, you may need to define a clearInterval function. Unless it is part of one of the many libraries you have included, as it is called in your expand and collapse functions.
Hope this helps...
I can see two issues with conflicting JavaScript code being included twice. Firstly
you're loading two versions of the same carousel library here:
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
The first is a minified version of of the same code. You only need one, so remove the second line above as it won't be required and it's just a larger version of the same file. This may not be causing the issue, but it's not right.
Secondly you have two versions of jQuery in your code and that will also cause significant issues because you're loading them at very different times in your page and they will have very different functionality. You can fix this using noConflict:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var jq142 = jQuery.noConflict();
jq142(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
The first line var jq142 = jQuery.noConflict(); will ensure that you have the correct version of jQuery loaded for the carousel library. Read the noConflict documentation for more information.
You can use this to only load one version of the library. 1.3.2 on IE6,7,8 and 1.9.1 on all other browsers.
<!--[if lt IE 9]>
<script src="jquery-1.3.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-1.9.1.js"></script>
<!--[endif]-->
Related
In main.js
jQuery(document).ready(function(){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
In index.html
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/main.js"></script>
<head>
In style.css
.secondary{
background-color:#34495e;
}
It is a code for changing the class of a navigation bar with class 'nav' to the class 'secondary' when the page scroll to downwards
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
The above code doesn't works fine inside
jQuery(document).ready(function(){});
but,
jQuery(document).ready(function(){
"use strict"
alert("hello world");
});
works fine and some other functions also works fine
but some functions not working.
can anyone help me to find the solution for this problem
Your code is correct. Check the value of top with console.log to make sure the scroll event is fired. Otherwise you will find an error about some other part of your code.
For example, this works and is also slightly optimised:
$(document).ready(function() {
"use strict";
var $win = $(window)
var $nav = $("nav");
$win.scroll(function() {
var top = $win.scrollTop();
console.log(top);
if (top >= 60) {
$nav.addClass("secondary");
} else if ($nav.hasClass("secondary")) {
$nav.removeClass("secondary");
}
});
});
Demo: https://codepen.io/taseenb/pen/QWbxRvP
You can check what the error is on browser's inspect tool.
If you press "F12", "Developer tools" panel will be shown.
And click "Console" on this panel and check which error has been occured.
And I guess you need to use "jQuery" keyword to select elements.
Or please try following code.
jQuery(document).ready(function($){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
If you can share your page url, I can help you to check error and find a solution.
you can try on this, it works to me
put source script
<script th:src="#{/richtext/jquery.richtext.min.js}"></script>
<script th:src="#{/richtext/jquery.richtext.js}"></script>
then script text:
<script type="text/javascript">
(function($) {
$('#shortDescription').richText();
$('#fullDescription').richText();
})(jQuery);
</script>
I was wondering if someone could help me out with a bit of jquery im trying to write.
Im quite new to jQuery so this is prob something easy.
I have a div with an id of 'about-box'
I want it to slide in and out of the viewport when a menu item is pressed.
I have the following jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if($('#about-box:visible').length)
$('#about-box').hide("slide", { direction: "left" }, 1000);
else
$('#about-box').show("slide", { direction: "left" }, 1000);
});
});
</script>
But i am getting the following error message:
Uncaught TypeError: undefined is not a function
Any help getting this to work would be greatly appreciated.
I think the problem is you are not including jQuery-UI in your page, the show/hide implementation you have used requires jQuery UI
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if ($('#about-box').stop(true, true).is(':visible')) {
$('#about-box').hide("slide", {
direction: "left"
}, 1000);
} else {
$('#about-box').show("slide", {
direction: "left"
}, 1000);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
You can also use jQueryUI toggle
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
$('#about-box').toggle("slide", {
direction: "left"
}, 1000);
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
since document is for sure a good element the undefined is not on the ready
:visible looks good see here http://api.jquery.com/visible-selector/
So the undefined must be here $('#menu-item-1 a').click or in other code in your page or on the execution of the ready.
Try to find where . remove the if else . does the undefined throw?? if yes the $('#menu-item-1 a') doesnt resolve.
wish it help
try changing the selector to
$('#about-box').is(':visible')
$('#about-box:visible') is a wrong selector,I think you can toggle a class on about-box button and decide slide in or out
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>
This way of prepending does work for me:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#learn-more-button").click(function() {
$("#main-text").load('ajax/learn-more.html #learn-more', function() {
$(this).prepend('<p> DARN </p>'); // <=== This here WORKS
$(this).hide().fadeIn(500); //Fade in
$("#main-text").animate({ // Then Animate
width:"500px",
left:'+=400px',},
400
);
});
});
});
</script>
This way of prepending doesn't work for me:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#learn-more-button").click(function() {
$("#main-text").prepend('<p> DARN </p>'); // <=== This here doesn't work
$("#main-text").load('ajax/learn-more.html #learn-more', function() {
$(this).hide().fadeIn(500); //Fade in
$("#main-text").animate({ // Then Animate
width:"500px",
left:'+=400px',},
400
);
});
});
});
</script>
Why the second way doesn't work? How should it be done to make it work?
I'm not really a jQuery guy, so help is appreciated :)
When you perform the load() the contents of the #main-text element are completely replaced. Therefore if you add the <p>DARN</p> before the load - as in the second method, it gets overwritten.
In the first method the <p> is being added in the callback function of the load. This is called after the load has been completed.
You should also chain methods on to one selector for better performance, like this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#learn-more-button").click(function() {
$("#main-text").load('ajax/learn-more.html #learn-more', function() {
$(this).prepend('<p> DARN </p>')
.hide().fadeIn(500)
.animate({
width:"500px",
left:'+=400px'
}, 400);
});
});
});
</script>
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