Conflict between jQuery 1.4.2 and 1.9.1 - javascript

I have a background slideshow that uses the jQuery 1.9.1 which is called here "jacksis.js" in body section and i have another submenu slider that uses jQuery 1.4.2 as in here is called "core.js" in head section. However, when i added the jQuery 1.9.1, the slider on 1.4.2 stopped working. I tried the noConflict() mode without success and the jQuery call innstead of the "$". Down below, the "ss1_wrapper" is using the 1.4.2 and the "cbp_bislideshow" the 1.9.1. What could be wrong in my
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<link href="index_files/main.css" type="text/css" rel="stylesheet">
<script src="index_files/core.js"></script>
<script src="index_files/js/modernizr.custom.js"></script>
</head>
<body id="page">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
...
</ul>
<form class="" name="aspnetForm" method="post" action="index.htm" id="aspnetForm">
<div class="ss1_wrapper">
......
</div>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
</form>
<script src="index_files/jacksis.js"></script>
<script src="index_files/js/jquery.imagesloaded.min.js"></script>
<script src="index_files/js/cbpBGSlideshow.min.js"></script>
<script>$(function() {
cbpBGSlideshow.init();});
</script>
<script type="text/javascript" src="index_files/quant.js"></script>
</body>
I am receiving only one error in firebug in line core.js (1.4.2) line 1993:
TypeError: jQuery.browser is undefined
and the error is in that function at line 4 (it's line 1993 in the original file)
(function($) {
$(document).ready( function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
What couldn't be wrong in my code if i tried all the possibilities of getting away with jQuery conflict?
UPDATE:
I introduced jQuery 1.7.1 and deleted both 1.4.2 and 1.9.1, then now i have both my Slider and Background slideshow working again together BUT my drop-down menu (which could be seen on my webpage www.es-processing.com) is not working anymore. On the online version it is working, but right now, on the version i'm working on it's not functioning at all. You can have an idea from my dropdown on my webpage to see which jQuery functions it follows and how to adapt them on the new 1.7.1 i put.

Related

JQuery automatic slideshow

I'm trying to just implement a simple automatic slideshow with JQuery on my webpage.
I followed this tutorial : https://www.youtube.com/watch?v=r5iPoJZjXnU. But, it seems that my fadeOut() and fadeIn() functions aren't working well. The code works but the transitions between images are too fast and not smooth.
Here's what i did:
added these lines in my head tags for upload jquery and jquery UI librairies:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
then, at the end of my body tags i simply added:
<script type="text/javascript">
function galerie(){
var active = $("#slideshow .active");
var next = (active.next().length > 0) ? active.next() : $("#slideshow img:first");
active.fadeOut(function(){
active.removeClass("active");
});
next.fadeIn("slow").addClass("active");
}
</script>
and call this function whenever i click on my h1 tag:
<h1 onClick="galerie()">Pure</h1>
Do you have any suggestions ?
Problem soleved, it was my html structure which wasn't right

Auto update div content inside slider jquery

How do I get my div content inside slider jquery auto update when MySQL has changed or has a new row added?
I've tried with my code, But my slider doesn't work and can't slide any div content.
My code :
index.php
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick.css" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" />
<script type="text/javascript">
$(document).ready(function () {
$('.single-item').slick({
dots: false,
infinite: true,
speed: 700,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
setInterval(function () {
$('.single-item').load('item.php');
}, 3000);
});
</script>
<style type="text/css">
body {
background-color: darkturquoise;
}
</style>
</head>
<div class="single-item" style="width: 500px; height: 500px; margin: auto;">
</div>
</html>
item.php
<?php
include 'connect.php';
$sql = mysql_query("SELECT * FROM fm_product WHERE p_pined = 'PINED'") or die(mysql_error());
while($result = mysql_fetch_array($sql)){
echo '<div style="background-color: white; height: 200px;">'.$result['p_id'].'</div>';
}
?>
My code given output:
I'm unsure if this qualifies as a complete answer, but a main problem lies in your usage of .load and it's interaction (or lack thereof) with the slick slider plugin.
The order of events on your page is as follows:
The dom is loaded & ready.
Slick Slider is initialised on .single-item. The contents of .single-item (currently nothing) is replaced with slick slider's HTML to set up and render the slides, control buttons etc. properly.
This is important because .single-item is now full of a lot of different HTML elements. If you're unsure what it looks like, check the slick slider demo page - view the page source, then view the source using developer tools to see the change in how it looks.
Additionally, .single-item never had any content originally, so it will render zero slides. At this point, you've created an empty slider.
Your setInterval event is registered.
3 seconds pass.
Your setInterval event fires for the first time. An XHR is made to item.php, which responds with HTML - a bunch of styled divs containing data.
At this point, you can use your developer tools to confirm that item.php is returning the correct data by monitoring your network requests area.
Your script takes the request response (the HTML) and completely replaces single-item's contents with it.
Alarm bells should be ringing at this point, as this immediately causes a conflict between what used to be in this element (slick's HTML setup) and what it has replaced. If you look in your developer tools console, you might even spot some errors popping up from slick complaining about missing elements.
GOTO STEP4
What's happening is that your .load call is replacing the contents of an element containing a slick slider setup, totally breaking the slider.
What you need to do is change how you handle the AJAX. You should drop the .load and move towards using $.ajax for nicer callback control. Based on the slick docs you can either:
On each XHR request return - destroy the slick slider with $('.single-item').slick('unslick');, insert the contents into .single-item, then re-initialize the slider.
Keep track of the current slides. On each XHR return, detect which slides are present and which ones aren't, and remove/add them to the slider using .slick('slickAdd', HtmlOrDomNode) and .slick('slickRemove' slideIndex)
Hope this helps.

x-editable (jQuery UI build) throws Uncaught TypeError

Consider the following code:
Inside jQuery document.ready:
$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
send: 'never',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
HTML:
<div class="editable">
superuser
</div>
This throws Uncaught TypeError: this.tip(...).find is not a function at jqueryui-editable.js:4727.
I assume this is because of incompatibilities with the jQuery UI version. But how can I get around it?
Update: Adding full example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
<script>
$(function() {
$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
send: 'never',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
});
</script>
</head>
<body>
<div class="editable">
superuser
</div>
</body>
</html>
I had the same error, but solved it by using an older version of jquery-ui. I was on v 1.12.0, but noticed the editable demo used 1.10.1. Using the 1.10.1 version of jquery-ui allowed me to use editable.
I'm using
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css
and
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js
I think this is a bug in the source code specific to jqueryui 1.11.4.
It doesn't look like the jquery version of the source code has been touched since 2013, so I don't think it'll be fixed anytime soon. Unfortunately this is the most functional inplace editing library I've found, so I was determined to make it work.
A decent alternative is to use the "plain" version of the library which doesn't use jqueryui at all. It appears to me to be functionally equivalent. If you want the "popup" instead of "inline" mode, you need to also grab and include poshytip

Can't install jQuery Plugin

I want to install the gallery and instead of using flash I wish to use this jQuery plugin. I cannot figure out how do I install and use it since it is distributed as .zip archive with two .js files inside and no index file or .css at all.
Here's plug in features demo, which I would like to achieve.
$("#container").gridalicious({
animate: true,
animationOptions: {
queue: true,
speed: 200,
duration: 300,
effect: 'fadeInOnAppear',
complete: onComplete
}
});
As per the source code...
The CSS is set in the JS itself, no need for an external style sheet.
If you'll scroll down http://suprb.com/apps/gridalicious/, you will see how to initialize it. It appears to just be a collection of divs with the class item inside of the initialized container.. <div id="container"> for example.
Update:
<!doctype html5>
<html>
<head>
<title>Test of plugin</title>
<script type="text/javascript" src="path/to/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.grid-a-licious.min.js"></script>
</head>
<body>
<div id="container">
<!--I assume it asks for divs with the "item" class, but it may be added automatically.-->
</div>
<script type="text/javascript>
//The initialize code printed above. Has parameters (read:options) you can tweak.
</script>
</body>
</html>

jQuery animation issue in Chrome

I was animating an a element in jQuery using jQuery 1.3.2 and jQuery color plugin. I was animating the 'color' and 'backgroundColor' properties at the same time. In IE8 and FF it worked just fine. Chrome animated the mousehover color and then stopped. The background stayed the same and the mouseout did not undo the effect as it should have.
Chrome's developer tools said something about something being undefined. I know that I'm being somewhat vague here, perhaps this is a known issue?
EDIT - Code(, finally!):
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
EDIT:
#Bernhard Hofmann - What do you mean "issues with the properties you've chosen"? Please elaborate.
It would seem that Chrome has a few issues with the properties you've chosen. I managed to get the animation working using mouse enter and leave events in Chrome. Here's the script and mark-up for those wanting to fiddle and have a go as well.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(event){
$(".nav a").
mouseenter(function(){$(this).animate({fontSize:"2em"}, 900);}).
mouseleave(function(){$(this).animate({fontSize:"1em"}, 900);});
/*
$(".nav a").hover(function(){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
*/
});
</script>
</head>
<body>
<div class="nav" style="color:#000;background:#cfc;padding:2em 2em 2em 2em;margin:2em 2em 2em 2em;">
StackOverflow
</div>
</body>
</html>
This seems to be a bug with the color animation plugin with webkit browsers with their rgba(r,g,b,opacity) format for background color style.
The fix is simple, just add these lines in the appropriate place inside the getRGB(color) function of the plugin.
// Look for rgba(num,num,num,num)
if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
EDIT: Here is a working version with the fix http://jsbin.com/ekoli
Can you provide some HTML? I tried out with Google Chrome 4 BETA on Mac OS and Chrome 3 on XP and it worked as intended.
The HTML I used is as follows
<head>
<!-- These are my local jquery files. Use yours or the ones from Google -->
<script src="/osr/javascript/dev/librarys/jquery.js" type="text/javascript"></script>
<script src="/osr/javascript/dev/librarys/jquery-ui/js/jquery-ui.js" type="text/javascript"></script>
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
</head>
<body>
<div class="nav">
<a>aighosvaovhaovuho</a>
</div>
</body>
I have the same issue, using jQuery.animate
Works fine in FF, IE 7 & 8
The code..
$(document).ready(function(){
jQuery.noConflict();
jQuery('.boxgrid.caption').hover(function(){
var s = jQuery(".cover", this).stop();
s.animate({width: "50%"},{queue:false,duration:300});
jQuery(".cover", this).stop().animate({top: "180px"},{queue:false,duration:300});
}, function() {
jQuery(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
});
Produces:
ERROR : (from chrome dev tool) :
Uncaught TypeError: Cannot set
property 'width' of undefined

Categories