I have jquery script for menu and other for gallery, how to enable both of them to work? Below is my code
I also have some expanding box problem on the li element, whit thi explanation:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.
Affects: Internet Explorer 6.0
Likelihood: Likely
And also double float margin bug error:
When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely
It is very urgent,pls help!
SCRIPT FOR MENU BAR
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="../../js/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
SCRIPT FOR GALLERY
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jStack.js"></script>
<!-- syntax -->
<link rel="stylesheet" href="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
// fadeInOut
$("#logo").fadeOut().fadeIn();
// smooth scroller
$("a[href^=#]").click(function() {
var hash = this.hash;
if(!hash || hash == "#")
return false;
$($.browser.safari ? 'body' : 'html')
.animate({scrollTop: $(hash).offset().top}, 1500, "easeInOutBounce");
return false;
});
});
var options = {
isClickAnimation: true,
isPositionRandom: true,
durationOut: 300,
durationIn: 200,
easingOut: "easeInOutBack",
easingIn: "easeOutBounce",
moveLeft: 250,
moveTop: 150,
opacityOut: 0.6,
opacityIn: 1,
delay: 10,
direction: "next",
callback: function() {}
};
$(window).bind("load", function() {
// jStack
var jstack = $("#imageBox").jStack(options);
$("#next").click(function() {
jstack.next();
});
$("#prev").click(function() {
jstack.prev();
});
$("#shuffle").click(function() {
jstack.shuffle();
});
});
</script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
if im not mistaken, both of them are jquery library?, they probably has conflict with each other if they are loaded on the same page, this problem occured to me, what i did was removed one of the library,
Related
I am working on a responsive layout using javascript, responsive-menu and javascript, responsiveslides.
When I have only one javacript at a time on the page, they work fine, but together the responsive-menu doesn't work. If I put the javascript for the responsive-menu at the bottom of the page, the menu works fine but the slide show doesn't work. Any suggestions would be appreciated.
Here is my javascript call out:
<script src="respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="menu_files/responsive-menu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="menu_files/jquery.responsive-menu.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#JQResponsiveMenu1").fdResponsiveMenu({windowMinWidth:1000,autoHighlightCurrentPage:false,subMenuOpenOnClick:false,subMenuTransitionEasing:"easeOutSine",subMenuTransitionDuration:300});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="responsiveslides.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript"> // You can also use "$(window).load(function() {"
jQuery(window).load(function() {
// Slideshow 1
jQuery("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
jQuery("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
jQuery("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
jQuery("#slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
jQuery('.events').append("<li>before event fired.</li>");
},
after: function () {
jQuery('.events').append("<li>after event fired.</li>");
}
});
});
</script>
It's not advisable to load more than one version of jQuery on a site. I'd remove v1.8 and see how that does. If it fails, remove 1.10 instead. Some changes in 1.10 might break your plugins.
When I incorporate the Scrollorama plugin into my webpage, the Cycle plugin stops functioning. I tried incorporating jQuery.noConflict but it still doesn't work. Am I implementing the jQuery.noConflict() wrong or is it something else?:
Links:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Scrollorama Plugin:
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
</script>
Cycle Plugin:
<script>
$(function(){
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
});
</script>
I've tried doing different options from different questions in the past but none of them work. Could this be an issue with the plugins and not how I implement them into my site?
I had the same problem with superscrollorama and for weeks I could not crack it, until I discovered console. Console allowed me to track all the JS errors.
If you embed the files in this order:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Then put all your code in:
(function($){
})(jQuery);
Example:
(function($){
$(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
})(jQuery);
It should work fine.
For superscrollorama, the example has the jQuery is embedded in the body. For extra jQuery plugins on the page, TweenMax and jquery.min need to be moved into the head in the following sequence:
<head>
... Your Meta, CSS files, ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
... Your other jQuery files, mootools, ...
</head>
Your CSS files may appear above or below the jQuery.noConflict(); but all your jQuery MUST appear after TweenMax.
jquery.lettering-0.6.1.min.js and jquery.superscrollorama.js may remain in the body. Just remember to add (function($){ ... })(jQuery); around all your code:
(function($){
$(document).ready(function() {
// set rotation of flash
TweenMax.set("#newversion", {rotation: 15});
... and so on ...
})(jQuery);
When I call a window resize and click the readmore link that is provided I get this message Additionally, the close link appears to get appear stuck when the characters are at a "in the goldie locks" line height area:
Uncaught TypeError: undefined is not a function bootstrap.js?n4eadf:121
(anonymous function) bootstrap.js?n4eadf:121
jQuery.event.dispatch jquery.js:5095
elemData.handle jquery.js:4766
This is my actual function:
jQuery(document).ready(function($) {
jQuery(window).resize(function($){
jQuery('.subcontainer').readmore({
speed: 75,
maxHeight: 129
});
});
});
Here is the reference error:
$scrollableElement.once('bootstrap-anchors', function () {
$scrollableElement.on('click.bootstrap-anchors', 'a[href*="#"]:not([data-toggle], [data-target])', function(e) {
this.scrollTo(e);
});
});
And Finally my called js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.js'>\x3C/script>")</script>
<script src="http://tsunami.crabdance.com/misc/jquery.once.js?v=1.2"></script>
<script src="http://tsunami.crabdance.com/misc/drupal.js?n4eadf"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write("<script src='/sites/all/modules/jquery_update/replace/ui/ui/jquery-ui.js'>\x3C/script>")</script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.js?v=1.2.1"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="http://tsunami.crabdance.com/modules/contextual/contextual.js?v=1.0"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/gss/scripts/autocomplete.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/modules/toolbar/toolbar.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/affix.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/alert.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/button.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/carousel.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/collapse.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/dropdown.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/modal.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/tooltip.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/popover.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/tab.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/readmore.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/transition.js?n4eadf"></script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"bootstrap_tsunami","theme_token":"zeb-lBs7FuYRH5wwgGZbBZ5IpDYYfIqZkbQjisS0Auk","js":{"sites\/all\/themes\/bootstrap\/js\/bootstrap.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.js":1,"0":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.2\/jquery-ui.js":1,"1":1,"sites\/all\/modules\/jquery_update\/replace\/misc\/1.9\/jquery.ba-bbq.js":1,"sites\/all\/modules\/jquery_update\/replace\/misc\/1.9\/overlay-parent.js":1,"modules\/contextual\/contextual.js":1,"sites\/all\/modules\/jquery_update\/replace\/ui\/external\/jquery.cookie.js":1,"sites\/all\/modules\/gss\/scripts\/autocomplete.js":1,"modules\/toolbar\/toolbar.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/affix.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/alert.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/button.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/carousel.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/collapse.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/dropdown.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/modal.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/tooltip.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/popover.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/tab.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/readmore.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/transition.js":1},"css":{"modules\/system\/system.base.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"misc\/ui\/jquery.ui.menu.css":1,"misc\/ui\/jquery.ui.autocomplete.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/contextual\/contextual.css":1,"modules\/field\/theme\/field.css":1,"sites\/all\/modules\/footer_sitemap\/footer_sitemap.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/css\/bootstrap.min.css":1,"sites\/all\/themes\/bootstrap_tsunami\/css\/style.css":1}},"gss":{"key":""},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"pathPrefixes":[],"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height","bootstrap":{"anchorsFix":1,"anchorsSmoothScrolling":1,"popoverEnabled":1,"popoverOptions":{"animation":1,"html":0,"placement":"right","selector":"","trigger":"click hover","title":"","content":"","delay":0,"container":"body"},"tooltipEnabled":1,"tooltipOptions":{"animation":1,"html":0,"placement":"auto left","selector":"","trigger":"hover focus","delay":0,"container":"body"}}});</script>
</head>
I got the similar error when integrating with flexslider plugin. Try to go to your Bootstrap Settings (yourdomain/admin/appearance/settings/yourtheme), unchecked the "Fix anchor positions". I turn that off and the error disappeared. See if it works for you.
Javascript (Tab) > Anchors > Fix anchor positions
I want to open a new page inside of shadowbox, when I click the code
this link Opens a new page inside the shadowbox in the same page. How to do that?
<a class="fancybox" href="edit.php?pn"></a>
rfq_list.php
<link rel="stylesheet" href="css/style.css" type="text/css" id="" media="print, projection, screen" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
type: "iframe",
helpers : {
overlay : {
closeClick: false}
// prevents closing when clicking OUTSIDE fancybox
},
closeClick : false, // prevents closing when clicking INSIDE fancybox
scrolling : 'no',
width : 550,
height : 0,
autoScale : true,
openEffect : 'elastic',
closeEffect : 'fade',
closeBtn : true,
afterClose:function () {
window.location.reload();
}
}).trigger("onclick");
});
parent.$.fancybox.close();
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<script type="text/javascript">
$(function() {
$("table").tablesorter({debug: true});
});
</script>
<script type="text/javascript">
$(function(){
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (var i=1;i<tfrow;i++) {
tbRow[i]=document.getElementById('tfhover').rows[i];
tbRow[i].onmouseover = function(){
this.style.backgroundColor = '#f3f8aa';
};
tbRow[i].onmouseout = function() {
this.style.backgroundColor = '#ffffff';
};
}
});
</script>
</head>
rfq.php
<script type="text/javascript" src="javascript/jquery.js"></script>
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('rfq_list.php?q=' + str)
}
</script>
<div id="txtHint">
</div>
What is the problem in this scripts?
You are including jQuery three times:
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
and aside particular cases you have to include it once (and use noconflict).
Now the the table sorter plugin will be detached from jQuery by the third include and you face your error.
Remove the other jQuery include and use only the latest.
I have 3 jquery scripts on my page. The 2nd script for the menu is interfering with the 3rd script, the carousel. When I take out the 2nd script, the carousel works again. I tried putting in noConflict, but maybe I'm putting it in the wrong place because it breaks even more things. Here's my code:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#main-menu').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.5.0-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
visible: {
min: 6,
max: 6
}
}
});
});
</script>