I have almost finished a website, but I'm struggling with combining two different javascript files... If I exclude A, B works. If I exclude B, A works. So there seems no go-between.
I'm trying to combine a JQuery-form validation and a JCarousel. As you can see, I have to exclude the validation script in orde to get the Carousel working...
Isn't there a way to combine both these script? I already tried the $j-trick from JQuery documentation, but with no luck.
I have included the files in this order:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.6.min.sliding.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<!-- THIS MUST BE COMMENTED OTHERWISE THE CONTACT SLIDER DOENS'T WORK!!
MUST FIX!!!
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
-->
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
I can see the problem but not what is causing it. I imagine you're outputting some javascript via PHP but it is coming out above the <html> tag.
If you goto view-source:http://www.YOURDOMAIN.be/new/index.php?page=&action=shout
The html looks like this:
<script>
$(document).ready(function(){noty({"text":"Uw shout is succesvol toegevoegd.",
"layout":"top","type":"success","animateOpen":{"height":"toggle"},
"animateClose":{"height":"toggle"},"speed":500,"timeout":5000,
"closeButton":true,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});});</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- css links -->
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" href="styles/skin.css" />
<link rel="stylesheet" type="text/css" href="includes/js/form/css/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="includes/lightbox/lightbox.css" />
<link rel="stylesheet" type="text/css" href="includes/notify/css/jquery.noty.css"/>
<link rel="stylesheet" type="text/css" href="includes/notify/css/noty_theme_default.css"/>
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/demos/demos.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/jquery-ui-timepicker.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
<script>
$(function(){
$('.leader_picture').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width = 500; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = 'includes/php/popup.php'; //Refer to any page on your server, external pages are not valid
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
</head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
is wrong
use this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
see the difference it is src.
Related
I am using jQuery with bootstrap but its not working. Here is a jsffidle:
<script type="text/javascript" src="http://localhost/ecommerce/js/jquery-3.2.1.js"></script> <script language="JavaScript" src="http://localhost/ecommerce/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" src="http://localhost/ecommerce/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$(".fnybx").fancybox();
$("body").on("click","a.details",function(e){
e.preventDefault();
var _id = $(this).attr("id");
$("#"+_id).fancybox();
});
});
</script>
Click here
I have two jquery javascripts (scrollpane and last.fm one). However, whichever one is posted later in the <head> is the one that executes and shows up on the page and the other one disappears. I don't know how to fix this. Here is my head code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--LASTFM-->
<link href="css/engage.lastfm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/engage.lastfm.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Begin jQuery goodness
$('div#lastfm').lastFM({
username: 'angrypink',
apikey: '255b0123e857aa3f6fd52a76b70ec15d',
number: 2,
artSize: 'medium',
onComplete: function(){
}
});
// End jQuery goodness
});
</script>
<!--JSCROLL-->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">
$(document).ready(function() {
var $images = $(".tumblr img")
, imageCount = $images.length
, counter = 0;
$images.one("load",function(){
counter++;
if (counter == imageCount) {
$('.scroll-pane').jScrollPane();
}
}).each(function () {
if (this.complete) {
$(this).trigger("load");
}
});
});
</script>
</head>
You make a mistake : You have multiple definition of jquery :
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to just put this one time, keep this one : <script src="js/jquery-1.10.2.min.js"></script>
Because is local one, and not depending on google
Try to clean a bit because multiple definition of jquery can create error
I like a Javascript for remove
<ul class="selection-list sel-scroll sel-items js-items-unchecked">
REMOVE only (sel-scroll)
And then add this code below that
This code
<link rel="stylesheet" type="text/css" media="all" href="js/jScrollPane.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
$('#pane1').jScrollPane({showArrows:false,scrollbarWidth:10, scrollbarMargin:20});
});
</script>
It looks like you're using jQuery. Therefore you can do:
$('#elementID').removeClass('sel-scroll');
Also look into:
$('.sel-scroll').removeClass('sel-scroll');
I want to implement javascript flip counter. I included all needed files and added code as in this article - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo.
I added html in my page:
<div id="counter" class="flip-counter"></div>
and added javscript to my application.js:
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
here is my included files(js and css):
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.8.22.custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-flipcounter.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.22.custom.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
I will also write here what files demo page is including:
<!-- My flip counter script, REQUIRED -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<!-- Style sheet for the counter, REQUIRED -->
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<!-- jQuery from Google CDN, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
and here is rar archive with working counter: https://dl.dropbox.com/u/86122402/cnanney-apple-style-flip-counter-13fd00129a41.rar.
add this to your application.js
$(function(){
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});
Everything looks like it should work.
Try adding you JavaScript inside a self anonymous invoking function.
$(function(){
var myCounter = new flipCounter("counter", { inc:123, pace:600});
});
Also make sure all your included files point to the right location.
Replace it with the following to test.
<script type="text/javascript" src="js/flipcounter.js"></script>
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<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.6/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
I've included fancybox2 files like instructed here
http://fancyapps.com/fancybox/#instructions
using my extensions xml and
<action method="addJs">
for javascript files and
<action method="addItem">
for css.
Order of my included js and css files inside my :
<link rel="stylesheet" type="text/css" href="magento/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="magento/js/n123/fancybox2/source/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="magento/js/prototype/prototype.js"></script>
<script type="text/javascript" src="magento/js/lib/ccard.js"></script>
<script type="text/javascript" src="magento/js/prototype/validation.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="magento/js/varien/js.js"></script>
<script type="text/javascript" src="magento/js/varien/form.js"></script>
<script type="text/javascript" src="magento/js/varien/menu.js"></script>
<script type="text/javascript" src="magento/js/mage/translate.js"></script>
<script type="text/javascript" src="magento/js/mage/cookies.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery.no.conflict.js"></script>
<script type="text/javascript" src="magento/js/varien/product.js"></script>
<script type="text/javascript" src="magento/js/varien/configurable.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="magento/js/n123/fancybox2/source/jquery.fancybox.pack.js"></script>
Then inside my template (phtml) I've added following code:
<a id="single_1" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Assunção - Santo Tirso...a New Dimension... (Alex Matos)">
<img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
</script>
In Chrome this error occurs:
http://www.imagebanana.com/view/6oxxttnx/s02.png
Uncaught TypeError: Object function wrap(wrapper) {
var __method = this;
return function()
{
var a = update([__method.bind(this)], arguments) ;
return wrapper.apply(this, a);
}
} has no method 'unbind'
Every help is welcome!
I've found a soulution: in my case the packed "fancybox.pack.js" didn't work and I got that error posted above but the "fancybox.js" ("unpacked"/normal version) works like a charm! Thanks for your support and attention.