Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    How Can I Incorporate Two Stylesheets?

    Hello,

    After searching online, I have come to understand that I CANNOT have two stylesheets defined in the same document. I am attempting to use both a lightbox and an accordion effect and those required the following two lines of code (among others):

    Code:
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
    I was unable to find out how I could have both of them working within the same document and was wondering if anyone can assist me with this.

    Below is my full code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title> 
    
    <style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } 
    
    p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
    h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
    h5 { color: white; font-family: arial; font-size: 16px;}
    h6 { color: white; font-family: arial; font-size: 12px;}
    a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
    
    
    #container { width: 1100px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; } 
    
    
    #container #col1 { background: #000; height: 600px; width: 250px; float: left; } 
    
    
    #container #col2outer { width: 850px; float: right; margin: 0; padding: 0; } 
    
    #col2outer #col2mid { background: #111; height: 600px; width: 600px; float: left; } 
    
    #col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; } 
    
    
    
    #container #footer { float: left; width: 870px; } 
    
    
    </style> 
    
    
    <style type="text/css">
    
    ul {
    	list-style-type:none;
    	margin-left: 0px;
    	padding-left: 0px;
     }
    ul li {
    	float: left;
    	padding-top: 0px;
    	padding-right: 15px;
    	padding-bottom: 0px;
    	padding-left: 0px;
          }
    
    
    div.sc_menu {
    /* Set it so we could calculate the offsetLeft */
    position: relative;
    height: 300px;
    width: 250px;
    overflow: auto;
    }
    ul.sc_menu {
    display: block;
    height: 300px;
    /* max width here, for users without javascript */
    width: 250px;
    padding: 15px 0 0 15px;
    /* removing default styling */
    margin: 0;
    background: #000;
    list-style: none;
    }
    .sc_menu li {
    display: block;
    float: left;
    padding: 0 0;
     
    }
    .sc_menu a {
    display: block;
    text-decoration: none;
    }
    .sc_menu span {
    display: none;
    margin-top: 0px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
    }
    .sc_menu a:hover span {
    display: block;
    }
    .sc_menu img {
    border: 0px white solid;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    width: 175px;
    margin-left:35px;
    margin-right:15px;
    filter:alpha(opacity=85);
    opacity: 0.75;
     
    }
    .sc_menu a:hover img {
    border: 0px;
    filter:alpha(opacity=100);
    opacity: 1;
    width: 175px;
     
    position: relative;
     
    }
    </style>
    <script src="js/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="js/virtualpaginate.js"></script> 
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/> 
    
    </head> 
    
    <body> 
    <div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1> 
    
    	<div id="col1" align="center"> 
    
    		<div id="accordion"> 
      
    			<h2><strong>ABOUT MY WORK </strong></h2>
        	 
    	
    			<div class="pane" style="display:block" align="left">
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>
    		
    			</div>
     
     
     
     
    			<h2><strong>RECENT AWARDS</strong></h2> 
    	
    			<div class="pane" align="left"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>	
    		
    			</div>	
     
     
    			<h2><strong>PREVIOUS EXHIBITIONS</strong></h2> 
    	
    			<div class="pane" align="center"> 
    				<p>	
    					Gertrude Herbert
    
    					"A Sense of Place 2010"
    
    					Augusta, GA
    
    					September 17th - November 5th, 2010
    
    					http://www.ghia.org/
    				</p>	
    			</div>	 
     
     
    			<h2><strong>CONTACT INFORMATION</strong></h2> 
    	
    			<div class="pane" align="center"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    			</h6>	
    		
    			</div>	
     
     		<script> 
    		$(function() { 
    		 
    		$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    		});
    		</script>
     
    		</div> 
    
     
     
                     
    	</div> 
    
    
    
    
    <div id="col2outer"> 
    
    	<div id="col2mid" align="center"> <p>PORTFOLIO</p> 
    	
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/EVA_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h5>"Sitting Nude" 2010 <p></h5>
    				<h6>Medium: paper crochet<br>
    				Dimensions: 24" x 22" x 32"<br>
    				</h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/Newsocchio_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    		
    		<a href="images/work/Tandem Rowing_1920.jpg" rel="lightbox"><img src="images/work/Tandem Rowing_1920s.jpg"></a>
    		
    		
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="smurfitkappa.php"><img src="images/portfolio/homepage/skpack-472x224.png" alt="Smurfit Kappa, Ireland" class="img" /></a> 
    				<h6>Date: January 2008 / Work: Web Design / Client: <strong>Smurfit Kappa, Ireland</strong></h6> 
    		</div> 
    			
    	
     
    	<!-- Pagination DIV --> 
        <div id="gallerypaginate" class="paginationstyle"> 
         	<span class="flatview"></span> 
        </div> 
     
    	<!-- Initialize  --> 
    	<script type="text/javascript"> 
        
    		var gallery=new virtualpaginate({
    			piececlass: "virtualpage", //class of container for each piece of content
    			piececontainer: 'div', //container element type (ie: "div", "p" etc)
    			pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
    			defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
    			persist: false //Remember last viewed page and recall it when user returns within a browser session?
    		})
    		
    		gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
        
        </script> 
    	
    	
    	
    	
    	
    	</div> 
    
    	<div id="col2side" align="center"> <p>UPCOMING EVENTS</p> 
    	<h6 align="left">
    	Cherry Creek Art Festival<br>
    	Denver, CO<br>
    	July 2nd - 4th, 2011<br>
    
    <a href="http://www.cherryarts.org" target="_blank">http://www.cherryarts.org/</a><br><br>
    	</h6>
    	
    	
    	
    	
    	</div> 
    	
    </div> 
    
    <div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div> 
    
    </body>
    
    <script type= "text/javascript">/*<![CDATA[*/
    $(function(){
     
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
    ul = $('ul.sc_menu'),
    ulPadding = 15;
     
    //Get menu width
    var divWidth = div.width();
     
    //Remove scrollbars
    div.css({overflow: 'hidden'});
     
    //Find last image container
    var lastLi = ul.find('li:last-child');
     
    //When user move mouse over menu
    div.mousemove(function(e){
    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
    });
    });
    /*]]>*/</script> 
     
     
    <script> 
    		$(document).ready(function(){
    		    base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
    		    
    			$(".lightbox").lightbox({
    			    fitToScreen: true,
    			    imageClickClose: false
    		    });
    			
    			$(".lightbox-2").lightbox({
    			    fitToScreen: true
    	
     
    		    });
    			
    	
    		    
    		    
    		});
     
    	</script> 
    
    
    
     </html>
    Thank you in advance for the help!!!

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You can have 100 CSS files if you want, and have them constantly overwriting each others rules too.

    What problems are you having when merging the two?

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well that is great news!

    The problem I am encountering is that after I added the stylesheet for the lightbox, the accordion function stopped working.

    I assumed it was because I was was duplicating stylesheet definitions and causing a conflict... but does it seem that something else may be the issue?

    Thanks!

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Maybe you can show your 2 stylesheets code to have a better view?

  • #5
    New Coder
    Join Date
    Jun 2010
    Location
    usa
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <link rel="stylesheet" type="text/css" href="styles/default.css">
    <link rel="stylesheet" type="text/css" href="styles/form.css">

    This is the procedure to add two style sheets.You can add any number of style sheets.

  • #6
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Try putting your accordian code within the ready function with your lightbox code:

    Code:
    $(document).ready(function(){
    		    base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
    		    
    			$(".lightbox").lightbox({
    			    fitToScreen: true,
    			    imageClickClose: false
    		    });
    			
    			$(".lightbox-2").lightbox({
    			    fitToScreen: true
    		    });
    
                        $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    
    		});

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Wojje,

    Your answer sounds promising, but I am a bit of a newbie at this...

    Where do I insert that? between <script> tags?
    Also, does that replace the two stylesheet codes?

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Pressed send before I meant to....

    I really appreciate your help with this! Ii am pretty new to this level of coding so thank you for your guidance!

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i feel i should mention (because no one else did) that you should also be aware that any local style will override style sheet... so most likely you will not encounter a problem (in this situation) but something to be aware of

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thank you everyone for your responses thus far... I still cant quite seem to get this to work for some reason. I have inserted Wojjie's code and replaced the ready section, but the tabs/accordion still does not work... below is what my code currently looks like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title> 
    
    <style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } 
    
    p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
    h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
    h5 { color: white; font-family: arial; font-size: 16px;}
    h6 { color: white; font-family: arial; font-size: 12px;}
    a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
    
    
    #container { width: 1100px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; } 
    
    
    #container #col1 { background: #000; height: 600px; width: 250px; float: left; } 
    
    
    #container #col2outer { width: 850px; float: right; margin: 0; padding: 0; } 
    
    #col2outer #col2mid { background: #111; height: 600px; width: 600px; float: left; } 
    
    #col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; } 
    
    
    
    #container #footer { float: left; width: 870px; } 
    
    
    </style> 
    
    
    <style type="text/css">
    
    ul {
    	list-style-type:none;
    	margin-left: 0px;
    	padding-left: 0px;
     }
    ul li {
    	float: left;
    	padding-top: 0px;
    	padding-right: 15px;
    	padding-bottom: 0px;
    	padding-left: 0px;
          }
    
    
    div.sc_menu {
    /* Set it so we could calculate the offsetLeft */
    position: relative;
    height: 300px;
    width: 250px;
    overflow: auto;
    }
    ul.sc_menu {
    display: block;
    height: 300px;
    /* max width here, for users without javascript */
    width: 250px;
    padding: 15px 0 0 15px;
    /* removing default styling */
    margin: 0;
    background: #000;
    list-style: none;
    }
    .sc_menu li {
    display: block;
    float: left;
    padding: 0 0;
     
    }
    .sc_menu a {
    display: block;
    text-decoration: none;
    }
    .sc_menu span {
    display: none;
    margin-top: 0px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
    }
    .sc_menu a:hover span {
    display: block;
    }
    .sc_menu img {
    border: 0px white solid;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    width: 175px;
    margin-left:35px;
    margin-right:15px;
    filter:alpha(opacity=85);
    opacity: 0.75;
     
    }
    .sc_menu a:hover img {
    border: 0px;
    filter:alpha(opacity=100);
    opacity: 1;
    width: 175px;
     
    position: relative;
     
    }
    </style>
    <script src="js/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="js/virtualpaginate.js"></script> 
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/> 
    		
    </head> 
    
    <body> 
    <div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1> 
    
    	<div id="col1" align="center"> 
    
    		<div id="accordion"> 
      
    			<h2><strong>ABOUT MY WORK </strong></h2>
        	 
    	
    			<div class="pane" style="display:block" align="left">
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>
    		
    			</div>
     
     
     
     
    			<h2><strong>RECENT AWARDS</strong></h2> 
    	
    			<div class="pane" align="left"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>	
    		
    			</div>	
     
     
    			<h2><strong>PREVIOUS EXHIBITIONS</strong></h2> 
    	
    			<div class="pane" align="center"> 
    				<p>	
    					Gertrude Herbert
    
    					"A Sense of Place 2010"
    
    					Augusta, GA
    
    					September 17th - November 5th, 2010
    
    					http://www.ghia.org/
    				</p>	
    			</div>	 
     
     
    			<h2><strong>CONTACT INFORMATION</strong></h2> 
    	
    			<div class="pane" align="center"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    			</h6>	
    		
    			</div>	
     
     		<script> 
    		$(function() { 
    		 
    		$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    		});
    		</script>
     
    		</div> 
    
     
     
                     
    	</div> 
    
    
    
    
    <div id="col2outer"> 
    
    	<div id="col2mid" align="center"> <p>PORTFOLIO</p> 
    	
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/EVA_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h5>"Sitting Nude" 2010 <p></h5>
    				<h6>Medium: paper crochet<br>
    				Dimensions: 24" x 22" x 32"<br>
    				</h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/Newsocchio_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    		
    		<a href="images/work/Tandem Rowing_1920.jpg" rel="lightbox"><img src="images/work/Tandem Rowing_1920s.jpg"></a>
    		
    		
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="smurfitkappa.php"><img src="images/portfolio/homepage/skpack-472x224.png" alt="Smurfit Kappa, Ireland" class="img" /></a> 
    				<h6>Date: January 2008 / Work: Web Design / Client: <strong>Smurfit Kappa, Ireland</strong></h6> 
    		</div> 
    			
    	
     
    	<!-- Pagination DIV --> 
        <div id="gallerypaginate" class="paginationstyle"> 
         	<span class="flatview"></span> 
        </div> 
     
    	<!-- Initialize  --> 
    	<script type="text/javascript"> 
        
    		var gallery=new virtualpaginate({
    			piececlass: "virtualpage", //class of container for each piece of content
    			piececontainer: 'div', //container element type (ie: "div", "p" etc)
    			pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
    			defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
    			persist: false //Remember last viewed page and recall it when user returns within a browser session?
    		})
    		
    		gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
        
        </script> 
    	
    	
    	
    	
    	
    	</div> 
    
    	<div id="col2side" align="center"> <p>UPCOMING EVENTS</p> 
    	<h6 align="left">
    	Cherry Creek Art Festival<br>
    	Denver, CO<br>
    	July 2nd - 4th, 2011<br>
    
    <a href="http://www.cherryarts.org" target="_blank">http://www.cherryarts.org/</a><br><br>
    	</h6>
    	
    	
    	
    	
    	</div> 
    	
    </div> 
    
    <div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div> 
    
    </body>
    
    <script type= "text/javascript">/*<![CDATA[*/
    $(function(){
     
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
    ul = $('ul.sc_menu'),
    ulPadding = 15;
     
    //Get menu width
    var divWidth = div.width();
     
    //Remove scrollbars
    div.css({overflow: 'hidden'});
     
    //Find last image container
    var lastLi = ul.find('li:last-child');
     
    //When user move mouse over menu
    div.mousemove(function(e){
    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
    });
    });
    /*]]>*/</script> 
     
     
    <script> 
    		$(document).ready(function(){
    		    base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
    		    
    			$(".lightbox").lightbox({
    			    fitToScreen: true,
    			    imageClickClose: false
    		    });
    			
    			$(".lightbox-2").lightbox({
    			    fitToScreen: true
    		    });
    
                        $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    
    		});
     
    	</script> 
    
    
    
     </html>

    Does anyone have an idea of what I am missing? Thanks in advance!!

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I've done some code clean-up and was able to determine that I may have been on the wrong track... it looks like the line which is causing the conflict (discovered after trial-and-error) is:

    <script type="text/javascript" src="js/prototype.js"></script> (which came as part of the lightbox code I downloaded here: http://www.huddletogether.com/projec...tbox2/#example)

    Whenever I remove this line, the accordion works again (but the lightbox doesnt of course).

    The code from prototype.js is too long to post here, but here is a link: http://www.huddletogether.com/projec...s/prototype.js

    This code is way over my head, but does anyone see what about this would create a conflict with the accordion?

    Here is my cleaned-up main code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title> 
    
    <style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } 
    
    p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
    h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
    h5 { color: white; font-family: arial; font-size: 16px;}
    h6 { color: white; font-family: arial; font-size: 12px;}
    a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
    
    
    #container { width: 1100px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; } 
    
    
    #container #col1 { background: #000; height: 600px; width: 250px; float: left; } 
    
    
    #container #col2outer { width: 850px; float: right; margin: 0; padding: 0; } 
    
    #col2outer #col2mid { background: #111; height: 600px; width: 600px; float: left; } 
    
    #col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; } 
    
    
    
    #container #footer { float: left; width: 870px; } 
    
    
    </style> 
    
    
    
    <script src="js/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="js/virtualpaginate.js"></script> 
    
    <!-- conflict causer
    <script type="text/javascript" src="js/prototype.js"></script>
    -->
    
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/> 
    
    </head> 
    
    <body> 
    <div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1> 
    
    	<div id="col1" align="center"> 
    
    		<div id="accordion"> 
      
    			<h2><strong>ABOUT MY WORK </strong></h2>
        	 
    	
    			<div class="pane" style="display:block" align="left">
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>
    		
    			</div>
     
     
     
     
    			<h2><strong>RECENT AWARDS</strong></h2> 
    	
    			<div class="pane" align="left"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>	
    		
    			</div>	
     
     
    			<h2><strong>PREVIOUS EXHIBITIONS</strong></h2> 
    	
    			<div class="pane" align="center"> 
    				<p>	
    					Gertrude Herbert
    
    					"A Sense of Place 2010"
    
    					Augusta, GA
    
    					September 17th - November 5th, 2010
    
    					http://www.ghia.org/
    				</p>	
    			</div>	 
     
     
    			<h2><strong>CONTACT INFORMATION</strong></h2> 
    	
    			<div class="pane" align="center"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    			</h6>	
    		
    			</div>	
     
     		<script> 
    		$(function() { 
    		 
    		$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    		});
    		</script>
     
    		</div> 
    
     
     
                     
    	</div> 
    
    
    
    
    <div id="col2outer"> 
    
    	<div id="col2mid" align="center"> <p>PORTFOLIO</p> 
    	
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/EVA_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h5>"Sitting Nude" 2010 <p></h5>
    				<h6>Medium: paper crochet<br>
    				Dimensions: 24" x 22" x 32"<br>
    				</h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/Newsocchio_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    		<a href="images/work/Tandem Rowing_1920.jpg" rel="lightbox"><img src="images/work/Tandem Rowing_1920s.jpg"></a>
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="smurfitkappa.php"><img src="images/portfolio/homepage/skpack-472x224.png" alt="Smurfit Kappa, Ireland" class="img" /></a> 
    				<h6>Date: January 2008 / Work: Web Design / Client: <strong>Smurfit Kappa, Ireland</strong></h6> 
    		</div> 
    			
    	
     
    	<!-- Pagination DIV --> 
        <div id="gallerypaginate" class="paginationstyle"> 
         	<span class="flatview"></span> 
        </div> 
     
    	<!-- Initialize  --> 
    	<script type="text/javascript"> 
        
    		var gallery=new virtualpaginate({
    			piececlass: "virtualpage", //class of container for each piece of content
    			piececontainer: 'div', //container element type (ie: "div", "p" etc)
    			pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
    			defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
    			persist: false //Remember last viewed page and recall it when user returns within a browser session?
    		})
    		
    		gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
        
        </script> 
    	
    	
    	
    	
    	
    	</div> 
    
    	<div id="col2side" align="center"> <p>UPCOMING EVENTS</p> 
    	<h6 align="left">
    	Cherry Creek Art Festival<br>
    	Denver, CO<br>
    	July 2nd - 4th, 2011<br>
    
    <a href="http://www.cherryarts.org" target="_blank">http://www.cherryarts.org/</a><br><br>
    	</h6>
    	
    	
    	
    	
    	</div> 
    	
    </div> 
    
    <div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div> 
    
    </body>
    
    
     
    
    
    
    
     </html>

    THANK YOU!!

  • #12
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    if you post a link to your page (or pm it to me), it might be easier to try to help find the conflict between the two javascripts. As an instant suggestion, you may have some function that is common - in name - to both JS scripts. one of them may need to be changed.

    As a suggestion for the future, if something stops working completely in such a scenario, I think it is unlikely to be the css. the presenational aspects might break but funtionality shouldn't. I mean, even if the lightbox css were busted in this scenario, the aspects that the JS creates should still show, such as the rotating wheel and the 'close' icons. Unappealing to the eye, yes; but it wouldn't actually stop working unless there was a JS issue.

    even the accordion script should stil make its output, however dis-jointed its appearance but by outputting its images, you would know its the css and not the JS causing the issue.

    hth
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    prototype and jQuery are two competing JavaScript libraries and they both use the dollar sign as an object reference; this is most likely to cause the conflicts that you are experiencing.

    It is possible to make use of the jQuery noConflict() method so that these two libraries can co-exist, but it needs a little care in applying it correctly.

    It might be easier (although just a suggestion ) to find a jQuery version of the lightbox, in which case you won't need to worry about conflicting libraries.

    Perhaps this one?
    Last edited by AndrewGSW; 05-14-2011 at 10:32 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #14
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Andrew,

    Great suggestion and much appreciated! However, as soon as I add the following from the lightbox link you provided:
    Code:
    <script type="text/javascript" src="js/jquery.js"></script>
    my accordions stop working again

    I imagine is must be causing a conflict with:
    Code:
    <script src="js/jquery.tools.min.js"></script>
    which is being used by the accordion script

    any thoughts?

    Edit: Actually, even if I remove the jquery.tools.min.js, the lightbox isn't working for me... grrr... here is my full code now:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title> 
    
    <style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } 
    
    p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
    h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
    h5 { color: white; font-family: arial; font-size: 16px;}
    h6 { color: white; font-family: arial; font-size: 12px;}
    a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
    
    
    #container { width: 1100px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; } 
    
    
    #container #col1 { background: #000; height: 600px; width: 250px; float: left; } 
    
    
    #container #col2outer { width: 850px; float: right; margin: 0; padding: 0; } 
    
    #col2outer #col2mid { background: #111; height: 600px; width: 600px; float: left; } 
    
    #col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; } 
    
    
    
    #container #footer { float: left; width: 870px; } 
    
    
    </style> 
    
    
    
    <!--<script src="js/jquery.tools.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/> 
    
    <script type="text/javascript" src="js/virtualpaginate.js"></script> 
    
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
    
    
    <script type="text/javascript">
    $(function() {
    
    	$('#gallery a').lightBox(); // Select all links in object with gallery ID
    
    
    });
    </script>
    
    
    
    
    
    </head> 
    
    <body> 
    
    
    <div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1> 
    
    	<div id="col1" align="center"> 
    
    		<div id="accordion"> 
      
    			<h2><strong>ABOUT MY WORK </strong></h2>
        	 
    	
    			<div class="pane" style="display:block" align="left">
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>
    		
    			</div>
     
     
     
     
    			<h2><strong>RECENT AWARDS</strong></h2> 
    	
    			<div class="pane" align="left"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    				</h6>	
    		
    			</div>	
     
     
    			<h2><strong>PREVIOUS EXHIBITIONS</strong></h2> 
    	
    			<div class="pane" align="center"> 
    				<p>	
    					Gertrude Herbert
    
    					"A Sense of Place 2010"
    
    					Augusta, GA
    
    					September 17th - November 5th, 2010
    
    					http://www.ghia.org/
    				</p>	
    			</div>	 
     
     
    			<h2><strong>CONTACT INFORMATION</strong></h2> 
    	
    			<div class="pane" align="center"> 
    	
    				<h6 align="left">
    					Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    					While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    					<a href="readmore.html">read more</a>
    			</h6>	
    		
    			</div>	
     
     		<script> 
    		$(function() { 
    		 
    		$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    		});
    		</script>
     
    		</div> 
    
     
     
                     
    	</div> 
    
    
    
    
    <div id="col2outer"> 
    
    	<div id="col2mid" align="center"> <p>PORTFOLIO</p> 
    	
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/EVA.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h5>"Sitting Nude" 2010 <p></h5>
    				<h6>Medium: paper crochet<br>
    				Dimensions: 24" x 22" x 32"<br>
    				</h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/Newsocchio.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    		<div id="gallery">
    		<a href="images/work/TandemRowingl.jpg"><img src="images/work/TandemRowing.jpg"></a>
    		</div>
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="smurfitkappa.php"><img src="images/portfolio/homepage/skpack-472x224.png" alt="Smurfit Kappa, Ireland" class="img" /></a> 
    				<h6>Date: January 2008 / Work: Web Design / Client: <strong>Smurfit Kappa, Ireland</strong></h6> 
    		</div> 
    	
     
    	<!-- Pagination DIV --> 
        <div id="gallerypaginate" class="paginationstyle"> 
         	<a href="#" rel="previous"><<</a>&nbsp&nbsp&nbsp<span class="flatview"></span>&nbsp&nbsp<a href="#" rel="next" class="imglinks">>></a>
        </div> 
    	
    
     
    	<!-- Initialize  --> 
    	<script type="text/javascript"> 
        
    		var gallery=new virtualpaginate({
    			piececlass: "virtualpage", //class of container for each piece of content
    			piececontainer: 'div', //container element type (ie: "div", "p" etc)
    			pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
    			defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
    			persist: false //Remember last viewed page and recall it when user returns within a browser session?
    		})
    		
    		gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
        
        </script> 
    	
    	
    	
    	
    	
    	</div> 
    
    	<div id="col2side" align="center"> <p>UPCOMING EVENTS</p> 
    	<h6 align="left">
    	Cherry Creek Art Festival<br>
    	Denver, CO<br>
    	July 2nd - 4th, 2011<br>
    
    <a href="http://www.cherryarts.org" target="_blank">http://www.cherryarts.org/</a><br><br>
    	</h6>
    	
    	
    	
    	
    	</div> 
    	
    </div> 
    
    <div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div> 
    
    </body>
    
    
     
    
    
    
    
     </html>
    Last edited by rsantamarina; 05-14-2011 at 11:19 PM.

  • #15
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The order of loading the scripts is significant. In particular, the jQuery library should be loaded before any plug-in that uses it.

    I would, personally, load all the .css first, then all the .js files. You can also put both the accordian and lightbox script in one code block within the <head> - delete the <script> block that you currently have within the <body>.

    Code:
    <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js/virtualpaginate.js"></script> 
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
    <!-- is the accordian another script file that's missing from this list? -->
    <!-- do the lightbox and accordian scripts need to be loaded in a certain order? -->
    
    <script type="text/javascript">
    $(function() {
    	$('#gallery a').lightBox(); // Select all links in object with gallery ID
    	$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    });
    </script>
    It might be worth making sure all these .js files are up-to date versions (so that they can work together).

    And, of course , check that the filenames and paths are correct.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    rsantamarina (05-15-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •