Two jQuery scripts conflicting...

Two jQuery scripts conflicting...

Your comment is awaiting moderation.

I am having issues with two different jQuery scripts running on the page at the same time. I have a carousel at the top of the page. I also have this Modal window, which works great, until I put it on my website. I have customized the modal window, and here’s a picture of what happens when I run it on my site.

https://www.box.com/s/b725gr7nxqhmwq7mfumt 


Here is what's currently in the head of my page. 


  1. <head>

  2. <meta name="keywords" content="ar toolbox, toolbox, jared newnam, start date calendar, online application, tracker, staff common, compliance, open ended questions, graduation calculator, grad calculator, gpa calculator, crabwa"/>
  3. <meta name="description" content="Complete SignNow walkthrough for the iPad. " />

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>AR's Toolbox - Home</title>
  6. <meta name="keywords" content="ar toolbox, walkthrough, financial aid, signnow, pin, online appllication center, oac, efc calculator, grad calculator, gpa calculator," />
  7. <meta name="description" content="Numerous tools used for making the day of an AR much better and more efficient." />
  8. <link href="css/south_style.css" rel="stylesheet" type="text/css" />

  9. <script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>
  10. <!--<script type="text/javascript" src="/jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>-->
  11. <script type="text/javascript" src="js/jquery-ui.min.js"></script> 
  12. <script type="text/javascript" src="js/showhide.js"></script> 
  13. <script type="text/JavaScript" src="js/jquery.mousewheel.js"></script>
  14. <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  15. <script type="text/javascript" src="js/jquery.min.js"></script>
  16. <script type="text/javascript" src="js/efccalc.js"></script>
  17. <script type="text/javascript" src="js/ddsmoothmenu.js"></script>

  18. <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
  19. <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />

Here's the JQUERY scripting I'm using... 

  1. <!--Modal Code-->
  2. <script type="text/javascript">

  3. $(function(){

  4.     //get the height and width of the page
  5.     var window_width = $(window).width();
  6.     var window_height = $(window).height();

  7.     //vertical and horizontal centering of modal window(s)
  8.     /*we will use each function so if we have more then 1
  9.     modal window we center them all*/
  10.     $('.modal_window').each(function(){

  11.         //get the height and width of the modal
  12.         var modal_height = $(this).outerHeight();
  13.         var modal_width = $(this).outerWidth();

  14.         //calculate top and left offset needed for centering
  15.         var top = (window_height-modal_height)/2;
  16.         var left = (window_width-modal_width)/2;

  17.         //apply new top and left css values
  18.         $(this).css({'top' : top , 'left' : left});

  19.     });

  20.         $('.activate_modal').click(function(){

  21.               //get the id of the modal window stored in the name of the activating element
  22.               var modal_id = $(this).attr('name');

  23.               //use the function to show it
  24.               show_modal(modal_id);

  25.         });

  26.         $('.close_modal').click(function(){

  27.             //use the function to close it
  28.             close_modal();

  29.         });

  30.     });

  31.     //THE FUNCTIONS

  32.     function close_modal(){

  33.         //hide the mask
  34.         $('#mask').fadeOut(500);

  35.         //hide modal window(s)
  36.         $('.modal_window').fadeOut(500);

  37.     }
  38.     function show_modal(modal_id){

  39.         //set display to block and opacity to 0 so we can use fadeTo
  40.         $('#mask').css({ 'display' : 'block', opacity : 0});

  41.         //fade in the mask to opacity 0.8
  42.         $('#mask').fadeTo(500,0.8);

  43.          //show the modal window
  44.         $('#'+modal_id).fadeIn(500);

  45.     }
  46. </script>

Also, the above picture shows how everything looks in Chrome. Here's a picture of how the overlay looks when used in IE8. Any ideas on fixing this, too... 

https://www.box.com/s/99f6ydk2qigfwprfu7zb 

Additionally, here's the code I'm using in the <body></body> tags (if it helps)...

  1. <!--Code for Modal overlay-->
  2.     <div id='mask' class='close_modal'></div>

  3.     <div id='first_window' class='modal_window' align="center"><h3>Please select the toolbox you would like to enter...</h3><br /><img src="images/toolbox.png" width="96" height="69" alt=""/><br>
  4.     <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Admissions.png" width="500" height="96" alt="" /><br /><br> 
  5.     <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Academics.png" width="500" height="96" alt="" /><br /><br>
  6.     <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Finance.png" width="500" height="96" alt="" /><br />
  7. </div>
  8. <!--End Code for Modal overlay-->

And here is the CSS used (again... if it helps)... 

  1. /* leanModal */

  2. #mask{
  3. position:fixed; /* important */
  4.     top:0px; /* start from top */
  5.     left:0px; /* start from left */
  6.     height:100%; /* cover the whole page */
  7.     width:100%;  /* cover the whole page */
  8.     display:none; /* don't show it '*/
  9.     /* styling bellow */
  10.     background-color: #fb991a;
  11. }
  12. .modal_window{
  13. position:absolute; /* important so we can position it on center later */
  14.     display:none; /* don't show it */
  15.     /* styling bellow */
  16.     color:white;
  17. }
  18. /* style a specific modal window  */
  19. #modal_window{
  20. padding:50px;
  21.     border:none;
  22.     background: #fb991a;
  23.     color:black;
  24. }

I've done everything I can think of up to this point. Really need some guidance here. 


Thanks, in advance, for your assistance.


-Jared