Log in

View Full Version : Help with javascript: two codes only one works


breaustin
03-16-2011, 03:53 AM
Hi If anyone could help me with this issue it will be greatly appreciated. i've look at a few post which explained how to fix my issue but they didn't work for me.

I've been trying to load two scripts on one page. I'm able to get one of the scripts to run on one page, but when i try to load two of them on one page i notice that the image magnifier runs and for my content scroller the mini main content switches but they wont load on the large box. To see heres the link to the page. http://tnnap.com/

Can someone specifically and visually show me what to change in order to get both scripts to run?


1

The script for the content scroller
<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>

The body of the script is attached in a file.



2

The script for the image magnifier

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.magnifier.js">
/***********************************************
* 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>


This is the dynamic drive Javascript image magnifier im working with:
http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
Beverleyh
03-16-2011, 09:57 AM
The order of the scripts in the <head> section is probably causing problems - try ordering them like this (untested)


<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" src="/jquery.magnifier.js">
/***********************************************
* 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>

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

Also, the Scroller Body text file you attached isnt a well formatted web page.

Please make sure that you structure your web pages properly to give them a fighting chance of working properly.

Here are the basics;


<html>
<head>
<!-- javascripts go here -->
<!-- CSS goes heres -->
</head>
<body>
<!-- HTML content markup goes here -->
</body>
</html>

The text file you supplied shows CSS in the <body> area that should go in the <head> section.
breaustin
03-16-2011, 06:26 PM
Okay i changed the order of the scripts and in that case only my content scroller ran and the magnifier script didn't.

I was messing around with the script and i noticed this:
When i removed one of the JavaScript for the content slider(colored red below) both of the scripts ran, but the content scroller doesn't switch/flash fade the content the way it is suppose to. Before the content would switch by a fading effect whereas now it switches by a blinking effect.
I was thinking that maybe the problem is that i am referencing two of the same javascripts on one page: one for the magnifier (colored green below) and one of the the two scripts for the content slidered (colored red below). If you notice they are the same.


Magnifier Javascript
<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://tnnap.com/criticit/magnify/jquery.magnifier.js">
/***********************************************
* 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>





Content Slider Javascript

<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>
Thank you for your time and help by the way. i will surely fix the then way the body and head is organized. I'm learning all this on my own so your input is really appreciated. =]
azoomer
03-16-2011, 07:23 PM
it is only necessary to load 1.3.2/jquery.min.js once. The image magnifier is in jQuery.noConflict mode and therefore you may want to try changing the initiation of the slider to this:


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

That will be compatible with the noConflict mode.
breaustin
03-17-2011, 08:35 PM
Wow! Perfect! Thank you so much for your time and help. I really wish i understood Javascript more or at least as much as you do.

Thanks Again!