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.
- <head>
- <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"/>
- <meta name="description" content="Complete SignNow walkthrough for the iPad. " />
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>AR's Toolbox - Home</title>
- <meta name="keywords" content="ar toolbox, walkthrough, financial aid, signnow, pin, online appllication center, oac, efc calculator, grad calculator, gpa calculator," />
- <meta name="description" content="Numerous tools used for making the day of an AR much better and more efficient." />
- <link href="css/south_style.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>
- <!--<script type="text/javascript" src="/jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>-->
- <script type="text/javascript" src="js/jquery-ui.min.js"></script>
- <script type="text/javascript" src="js/showhide.js"></script>
- <script type="text/JavaScript" src="js/jquery.mousewheel.js"></script>
- <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
- <script type="text/javascript" src="js/jquery.min.js"></script>
- <script type="text/javascript" src="js/efccalc.js"></script>
- <script type="text/javascript" src="js/ddsmoothmenu.js"></script>
- <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
- <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
Here's the JQUERY scripting I'm using...
- <!--Modal Code-->
- <script type="text/javascript">
- $(function(){
- //get the height and width of the page
- var window_width = $(window).width();
- var window_height = $(window).height();
- //vertical and horizontal centering of modal window(s)
- /*we will use each function so if we have more then 1
- modal window we center them all*/
- $('.modal_window').each(function(){
- //get the height and width of the modal
- var modal_height = $(this).outerHeight();
- var modal_width = $(this).outerWidth();
- //calculate top and left offset needed for centering
- var top = (window_height-modal_height)/2;
- var left = (window_width-modal_width)/2;
- //apply new top and left css values
- $(this).css({'top' : top , 'left' : left});
- });
- $('.activate_modal').click(function(){
- //get the id of the modal window stored in the name of the activating element
- var modal_id = $(this).attr('name');
- //use the function to show it
- show_modal(modal_id);
- });
- $('.close_modal').click(function(){
- //use the function to close it
- close_modal();
- });
- });
- //THE FUNCTIONS
- function close_modal(){
- //hide the mask
- $('#mask').fadeOut(500);
- //hide modal window(s)
- $('.modal_window').fadeOut(500);
- }
- function show_modal(modal_id){
- //set display to block and opacity to 0 so we can use fadeTo
- $('#mask').css({ 'display' : 'block', opacity : 0});
- //fade in the mask to opacity 0.8
- $('#mask').fadeTo(500,0.8);
- //show the modal window
- $('#'+modal_id).fadeIn(500);
- }
- </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)...
- <!--Code for Modal overlay-->
- <div id='mask' class='close_modal'></div>
- <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>
- <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Admissions.png" width="500" height="96" alt="" /><br /><br>
- <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Academics.png" width="500" height="96" alt="" /><br /><br>
- <a href="http://lipsum.com" target="_self" </a><img src="images/View-the-toolbox-for-Finance.png" width="500" height="96" alt="" /><br />
- </div>
- <!--End Code for Modal overlay-->
And here is the CSS used (again... if it helps)...
- /* leanModal */
- #mask{
- position:fixed; /* important */
- top:0px; /* start from top */
- left:0px; /* start from left */
- height:100%; /* cover the whole page */
- width:100%; /* cover the whole page */
- display:none; /* don't show it '*/
- /* styling bellow */
- background-color: #fb991a;
- }
- .modal_window{
- position:absolute; /* important so we can position it on center later */
- display:none; /* don't show it */
- /* styling bellow */
- color:white;
- }
- /* style a specific modal window */
- #modal_window{
- padding:50px;
- border:none;
- background: #fb991a;
- color:black;
- }
I've done everything I can think of up to this point. Really need some guidance here.
Thanks, in advance, for your assistance.
-Jared