PDA

View Full Version : 2 scripts but only 1 work



dwkblog
12-09-2011, 09:51 AM
I put DD Mega Menu (http://dynamicdrive.com/dynamicindex1/ddmegamenu.htm) and Simple Controls Gallery v1.4 (http://dynamicdrive.com/dynamicindex4/simplegallery.htm), but only one can working.

How can I fix that ?

jscheuer1
12-09-2011, 03:12 PM
In Mega Menu's ddmegamenu.js file, using a text only editor like NotePad, comment out (red) the highlighted line as shown:


/* DD Mega Menu
* Created: June 13th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// July 27th, 11': Added ability to activate menu via "click" of the mouse, on top of the default "mouseover".

//jQuery.noConflict()

jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, . . .

Save that and use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

dwkblog
12-10-2011, 01:01 PM
Thank you, its work. But there is a drop down menu below the gallery, how to make drop down menu on top the gallery ?
I cannot post a link, because it is still on localhost.

jscheuer1
12-10-2011, 03:15 PM
Back to the ddmegamenu.js file again with NotePad or some other text only editor. Edit the highlighted value as shown in red:


/* DD Mega Menu
* Created: June 13th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// July 27th, 11': Added ability to activate menu via "click" of the mouse, on top of the default "mouseover".

//jQuery.noConflict()

jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
})

var ddmegamenu={
startzindex:1002,
wrapperoffset:[10,25], //additional width and height to add to outer wrapper of drop down menus to accomodate CSS drop down shadow, if any
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod) . . .

dwkblog
12-10-2011, 03:57 PM
Thank you John. You are the best.

kurry
12-14-2011, 11:22 AM
Hello, I'm new in Blogger and scripts and I have the same problem, 2 scripts and only 1 works.
I'm using the "jQuery Image Magnify v1.11" and I want to add one slider, but it doesn't work:
jQuery Image Magnify v1.11

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
dsettings: {
magnifyby: 2, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
imgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
zIndexcounter: 100,

refreshoffsets:function($window, $target, warpshell){
var $offsets=$target.offset()
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
warpshell.newattrs.x=winattrs.x+5
}
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
warpshell.newattrs.x=winattrs.x+5
}
if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
warpshell.newattrs.y=winattrs.y+5
}
},

magnify:function($, $target, options){
var setting={} //create blank object to store combined settings
var setting=jQuery.extend(setting, this.dsettings, options)
var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={}
newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
$target.css('cursor', jQuery.imageMagnify.cursorcss)
if ($target.data('imgshell')){
$target.data('imgshell').$clone.remove()
$target.css({opacity:1}).unbind('click.magnify')
}
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
$target.bind('click.magnify', function(e){ //action when original image is clicked on
var $this=$(this).css({opacity:setting.imgopacity})
var imageinfo=$this.data('imgshell')
jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
var $clone=imageinfo.$clone
$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
//none added
}) //end animate
}) //end click
$clone.click(function(e){ //action when magnified image is clicked on
var $this=$(this)
var imageinfo=$this.data('$relatedtarget').data('imgshell')
jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
function(){
$this.hide()
$this.data('$relatedtarget').css({opacity:1}) //reveal original image
}) //end animate
}) //end click
}
};

jQuery.fn.imageMagnify=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
jQuery.imageMagnify.magnify($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.imageMagnify.magnify($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.imageMagnify.magnify($, $imgref, options)
})
}
})
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
})
};
//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
var $targets=$('.magnify')
$targets.each(function(i){
var $target=$(this)
var options={}
if ($target.attr('data-magnifyto'))
options.magnifyto=parseFloat($target.attr('data-magnifyto'))
if ($target.attr('data-magnifyby'))
options.magnifyby=parseFloat($target.attr('data-magnifyby'))
if ($target.attr('data-magnifyduration'))
options.duration=parseInt($target.attr('data-magnifyduration'))
$target.imageMagnify(options)
})
var $triggers=$('a[rel^="magnify["]')
$triggers.each(function(i){
var $trigger=$(this)
var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
$trigger.data('magnifyimageid', targetid)
$trigger.click(function(e){
$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
e.preventDefault()
})
})
})
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//]]>

</script>

SLIDER
I'm loocking for one slider like this:
http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/


<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
$(&quot;#featured&quot;).hover(
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,0,true);
},
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,5000,true);
}
);
});
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>



I don't know if you can advise me anther slider that works with the image Margnify or I can adapt this one.
Thanks.

jscheuer1
12-14-2011, 03:36 PM
Probably the same answer, comment out the line as shown:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

//jQuery.noConflict()

jQuery.imageMagnify={
dsettings: {
magnifyby: 2, //default increase fact

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

kurry
12-14-2011, 04:31 PM
Thank you Jonh, but it doesn't work.
I'm using a test blogger for this: http://pescablackbass-pruebas.blogspot.com/#fragment-4
I try this scripts in a new and clean template and I have the same problem, the slider works, the Magnify works, but when I use both scripts the slider doesn't work
The Slider use CSS code for the style and this exactly code:

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>

<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>

<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>

<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>

<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>

</div>
</div>

Thank you again.

jscheuer1
12-15-2011, 05:13 AM
You have a lot more going on on that page than just those two scripts. I seriously doubt everything was working before you added the Dynamic Drive script. And what there is on that page, even just the part about the tab script, is different than what you have in your post

However, with a bit of luck, this might work. Now I'm talking about what's actually on the page. There we see:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

//jQuery.noConflict()

jQuery.imageMagnify={
dsettings: {
magnifyby: 2, //default incre . . .

followed by the rest of that script, then:


<link href='http://videobox-lb.sourceforge.net/css/videobox.css' rel='stylesheet' type='text/css'/>
<script src='http://videobox-lb.sourceforge.net/js/mootools.js' type='text/javascript'></script>
<script src='http://videobox-lb.sourceforge.net/js/swfobject.js' type='text/javascript'></script>
<script src='http://videobox-lb.sourceforge.net/js/videobox.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

What we're interested in are the three highlighted lines (two in the first code block, one in the second). Change the first to:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

Revert the second to what it was (make it):


jQuery.noConflict()

without the comment token. And for the third line, change it to:


jQuery(document).ready(function($){

As I say - there's a lot going on script wise on that page, so this might not be enough. But with a bit of luck, it will do the trick.

The browser cache may need to be cleared and/or the page refreshed to see changes.

kurry
12-16-2011, 09:03 AM
I tried this changes.
The Image Magnify and the Video Vidbox continue working fine, but the slider doesn't work.
Sorry to be so insistent. Thanks again for your help, you are really the best forum about it.
http://pescablackbass-pruebas.blogspot.com/

jscheuer1
12-16-2011, 02:48 PM
You missed one part of the last change. Now I'm still not promising it will work, but to have a chance, change:


<link href='http://videobox-lb.sourceforge.net/css/videobox.css' rel='stylesheet' type='text/css'/>
<script src='http://videobox-lb.sourceforge.net/js/mootools.js' type='text/javascript'></script>
<script src='http://videobox-lb.sourceforge.net/js/swfobject.js' type='text/javascript'></script>
<script src='http://videobox-lb.sourceforge.net/js/videobox.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function($){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

to:


<link href='http://videobox-lb.sourceforge.net/css/videobox.css' rel='stylesheet' type='text/css'/>
<script src='http://videobox-lb.sourceforge.net/js/mootools.js' type='text/javascript'></script>
<script src='http://videobox-lb.sourceforge.net/js/swfobject.js' type='text/javascript'></script>
<script src='http://videobox-lb.sourceforge.net/js/videobox.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
jQuery(document).ready(function($){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

kurry
12-16-2011, 05:44 PM
Oh my God!
Now the three scripts works fine!
Thank you very very very much Jonh, you are simply the best!
Thank you one more time.

ashwini223
09-29-2012, 08:52 AM
Hi jscheuer1

This is my page www.peacockbrand.in/demo/version1
I face a problem with mootools.js and jquery.min.js ( version 1.5.1 )
When i use jquery.min.js alone and comment mootools.js, I can see vertical menu on left where sub menus opens whenhttp://www.dynamicdrive.com/forums/newreply.php?do=newreply&p=273802&noquote=1 more is clicked works fine
When i use mootools.js alone, i can see vertical scroll images onmouseover works fine

I want both jquery.min.js and mootools.js to be used and where both vertical menu on left and vertical image slider on right to work

Please help

bernie1227
09-29-2012, 09:05 AM
You may wish to create a new thread for this question.

ashwini223
09-29-2012, 10:02 AM
How to create???Its little bit emergency

bernie1227
09-29-2012, 10:05 AM
Choose the relevant forum and there should be a a button at the top saying create a new thread, or some such.

bernie1227
09-29-2012, 10:28 AM
What happens when you have both on there?

ashwini223
09-29-2012, 10:41 AM
What happens when you have both on there?


Only vertical menu on left working and right side mootools not working

bernie1227
09-29-2012, 11:11 AM
I would take a look at this (http://stackoverflow.com/questions/2810399/jquery-and-mootools-conflict) thread on stack overflow.

ashwini223
09-29-2012, 11:44 AM
I would take a look at this (http://stackoverflow.com/questions/2810399/jquery-and-mootools-conflict) thread on stack overflow.

hmmm..Please help me soon

bernie1227
09-29-2012, 11:46 AM
Have you looked at the link?

jscheuer1
09-29-2012, 07:04 PM
In place of the page at peacockbrand.in/demo/version1/ use this one:

4777

ashwini223
10-01-2012, 07:46 AM
Hi john

Thanks a lot for the page..My index page works fine now (http://www.peacockbrand.in/demo/version2/index.html)

But In other pages where i used zoom ( magnify.js ), fancybox not working ( http://www.peacockbrand.in/demo/version2/emperor.html )

Please help.

- ashwini

jscheuer1
10-01-2012, 03:45 PM
It doesn't look as though you're even using mootools or the script that uses mootools on that page, but I've left them in there anyway.

You didn't have an initialization for fancybox, I added that:


$('a[rel="example_group"]').fancybox();

That's just the bare bones init for it. It has a host of options you may or may not want to use. Consult its documentation for information on what's available.

The magnify script was magnifying on the right which is its default. I added position: left to it so it could be completely seen on narrower screens/windows and not cause a horizontal scrollbar.

Overall, as on the other page, I reorganized the scripts and styles. Styles should go before scripts. The order of styles may be important, so the order they were in should be preserved. jQuery comes first among the scripts followed by the noConflict directive. All:


$(document).ready(function(){

and similar become:


jQuery(document).ready(function($){

so as to work properly in noConflict mode.

After all of the scripts that use jQuery, you may then add one library that also uses the $ variable (mootools in this case) and script(s) that need it if these are needed on the page. Other scripts that use no $ library can go pretty much anywhere.

Duplicate external script tags and external script tags to scripts that are not there should be removed.

That's the process. Here's the page:

4778

ashwini223
10-02-2012, 02:26 AM
Thank you thank you thank you.. You are really genius... Problem solved........