...

View Full Version : How Can I Incorporate Two Stylesheets?



rsantamarina
05-12-2011, 04:36 AM
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):



<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:



<!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!!!

Wojjie
05-12-2011, 05:12 AM
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?

rsantamarina
05-12-2011, 05:42 AM
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!

Dr3am3rz
05-12-2011, 05:44 AM
Maybe you can show your 2 stylesheets code to have a better view?

mahesh2010
05-12-2011, 06:45 AM
<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.

Wojjie
05-13-2011, 12:48 AM
Try putting your accordian code within the ready function with your lightbox 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});

});

rsantamarina
05-14-2011, 03:26 AM
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?

rsantamarina
05-14-2011, 03:32 AM
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!

alykins
05-14-2011, 06:52 AM
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 :)

rsantamarina
05-14-2011, 10:07 PM
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:



<!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!!

rsantamarina
05-14-2011, 10:32 PM
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/projects/lightbox2/#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/projects/lightbox2/js/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:



<!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!!

bazz
05-14-2011, 10:56 PM
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

AndrewGSW
05-14-2011, 11:25 PM
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 (http://leandrovieira.com/projects/jquery/lightbox/)?

rsantamarina
05-15-2011, 12:08 AM
Andrew,

Great suggestion and much appreciated! However, as soon as I add the following from the lightbox link you provided:


<script type="text/javascript" src="js/jquery.js"></script>

my accordions stop working again :(

I imagine is must be causing a conflict with:


<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:



<!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>

AndrewGSW
05-15-2011, 12:48 AM
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>.


<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.

rsantamarina
05-15-2011, 01:01 AM
Andrew,

THAT DID IT!!!!!

You are brilliant!! thank you so much for your help with this!!

AndrewGSW
05-15-2011, 01:02 AM
I can't be sure if your version of 'jquery.tools.min.js' is intended to replace the standard jQuery library, or whether it supplies additional functionality.

<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.tools.min.js"></script>
Try deleting one of these and test the page.

Oh, and remove the blank lines between the </body> and </html> tags - there shouldn't be anything between these two.

Added: Just saw your post. No problems (but still remove the blank lines:) ).

rsantamarina
05-15-2011, 01:18 AM
Andrew,

Thank you! I have removed the blank lines as you suggsted... however.........

I just discovered that the accordion does NOT work in IE9... Chrome and Firefox both do fine...

any ideas what might be tripping up IE9 for the accordion?



<!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; margin-top: 0px;}
a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}


#container { width: 1000px; 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: 750px; float: right; margin: 0; padding: 0; }

#col2outer #col2mid { background: #000; height: 600px; width: 500px; float: left; }

#col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; }

#col2outer #portfolio { background: #000; height: 450px; width: auto; float: center; }

#col2outer #pages { background: #000; height: 50px; width: 250px; float: bottom; margin: 20px; }

#container #footer { float: left; width: 870px; }


</style>


<link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.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.5.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>


</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>


</div>




</div>




<div id="col2outer">

<div id="col2mid" align="center"> <p>PORTFOLIO</p>

<div id="portfolio">

<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/EVA.jpg" title="Sitting Nude, 2010"><img src="images/work/EVA.jpg" class="img" /></a>
<h5>"Sitting Nude" 2010 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 24" x 22" x 32"<br>
</h6>
</div>
</div>


<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Corset.jpg" title="Corset, 2009"><img src="images/work/Corset.jpg" class="img" /></a>
<h5>"Corset" 2009 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 30" x 20" x 3"<br>
</h6>
</div>
</div>

<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Browsing2.jpg" title="Browsing 2, 2010"> <img src="images/work/Browsing2.jpg" class="img" /></a>
<h5>"Browsing 2" 2010 <p></h5>
<h6>Medium: paper crochet, book<br>
Dimensions: 8" x 11" x 10"<br>
</h6>
</div>
</div>

<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/ShapingTheVoid.jpg" title="Shaping The Void, 2010"><img src="images/work/ShapingTheVoid.jpg" class="img" /></a>
<h5>"Shaping The Void" 2009 <p></h5>
<h6>Medium: paper crochet, pencils<br>
Dimensions: 22" x 14" x 14"<br>
</h6>
</div>
</div>


<div class="virtualpage hidepiece">
<a href="images/work/TandemRowingl.jpg" rel="lightbox"><img src="images/work/TandemRowing.jpg"></a>
</div>


</div>


<!-- Pagination DIV -->
<div id="pages">
<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>
</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 SHOWS</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>

rsantamarina
05-15-2011, 01:23 AM
Andrew,

Nevermind, you already answered that... I had an outdated jquery.tools.min.js file... 1.2.5 works great!

THANKS AGAIN!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum