JQuery conflicting with spry

Hi,
I'm trying to use jquery with spry generated content. In the
code below, I attempt to add a click event listener to fire an
alert box. It seems as though the code does not work with the spry
generated regions. Any ideas?
Thanks
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript"
src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript"
src="includes/SpryData.js"></script>
<script language="javascript"
src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var xmlStr = "<?xml version=\"1.0\"
encoding=\"iso-8859-1\"?> \
<employees xmlns=\"
http://www.foo.com/employees\">
<employee> \
<id>55555</id> \
<lastname>Smith</lastname> \
<firstname>Edward</firstname> \
<phone>(415) 333-0235 </phone> \
<username>esmith</username> \
</employee> \
<employee> \
<id>44444</id> \
<lastname>Johnson</lastname> \
<firstname>Neil</firstname> \
<phone>(415) 333-9475 </phone> \
<username>njohnson</username> \
</employee> \
<employee> \
<id>33333</id> \
<lastname>Williams</lastname> \
<firstname>Steve</firstname> \
<phone>(415) 333-4573 </phone> \
<username>swilliams</username> \
</employee> \
<employee> \
<id>22222</id> \
<lastname>Jones</lastname> \
<firstname>John</firstname> \
<phone>(415) 333-9345 </phone> \
<username>jjones</username> \
</employee> \
<employee> \
<id>54125</id> \
<lastname>Brown</lastname> \
<firstname>Joe</firstname> \
<phone>(415) 333-5938 </phone> \
<username>jbrown</username> \
</employee> \
</employees>";
var dsEmployees = new Spry.Data.XMLDataSet(null,
"/employees/employee");
var xmlDOMDocument = Spry.Utils.stringToXMLDoc(xmlStr);
dsEmployees.setDataFromDoc(xmlDOMDocument);
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".elements").click(function() {
alert("hello");
//jQuery(this).addClass("selected");
</script>
<style type="text/css">
.selected {
border:1px solid;
</style>
</head>
<body>
<div class="elements">hello</div>
<div id="container" spry:region="dsEmployees">
<div class="elements"
spry:repeat="dsEmployees">{firstname}</div>
</div>
</body>
</html>

Try puting the jquery in a seperated <script> tag.
jquery and spry doesnt play nice together when they are in
the same tag. (alteast thats how i fixed my jquery problem)
If this doesnt help, try using a older version of jquery (as
test ofcourse)
I remember i had some problems with jquery and Spry when i
updated jquery to its latest function.

Similar Messages

  • JQuery Conflicts with Muse and Plugins

    Hello Community,
    Recently, we ran into problems with jquery libraries (and my programmers were unable to fix it...suggesting I just make a stand-alone page in Dreamweaver/Komodo) when trying to insert that awesome LayerSlider from CodeCanyon. The problem: Muse calls an older jquery library than the one the LayerSlider needs (and once we updated it to the newest jquery standard, Muse no longer worked!). Hmmm. I wonder if there can be any type of fix for this as well????
    Has anyone got a work around to this (besides creating the page in its entirety with an IDE, then FTPing it after the Muse FTP in order to overwrite the index.html? (That's what we will have to do, since we definitely want that LayerSlider on the home page)).
    Thanks,
    Skyborn Manager

    Design work! Anything server-side unless I either revert to an older version of DW or cobble in the 3rd party fix to restore all the server-side functionality.   I love Muse because I can make things look the way I want them too very easily.  Here is a sample basic dialog.  Clearly does not look like the "canned" jquery dialog with the canned ui-dialog-titlebar or ui-dialog-content. For this one I've used a blank compo, single t/t, set the container to transparent enabled a close button, layered in a rectangle for the tombstone and a seperate one for the actual content, stylized the close button to get my "look".  Then tweaked the jquery to get rid of the padding, borders and corner radius, so I can set radius individually.  Not very elegant but the only way I could get a "title bar" to look like I wanted and a "content" area slightly smaller so as to complement the slide action, giving the effect that the "content" is retracting up into the "title bar" on collapse, like you see with an accordian.
    There are multiple dialogs on the page. Triggers appear to be "menu items".  When a target is triggered the target needs to allow a user to min/max/dock/collapse the different dialogs. 
    I don't mind using Muse in conjunction with DW, not a problem.  Just need to figure out how to get the look in Muse coupled with the functionality in DW.  Now since I exported to html I do have the .png files so...... maybe a way to use the .png files in DW instead...........

  • Using jQuery plugin with spry framework

    I am trying to integrate jQuery countdown plugin to my old spry pages:
    http://keith-wood.name/countdown.html
    However, it seems that spry kills jQuery plugin.
    I  am sure the jQuery countdown plugin works well without loading spry js.
    Please tell me hot to use both spry and jQuery on the same page.
    Thanks

    It is quite possible that the two will clash.
    But I have a problem in helping you because the page that you quoted does not contain Spry nor is there a Spry.js file.
    Please explain what it is that you want to do.
    Gramps

  • Jquery Conflict with Adobe BC

    Hi,
    We have implemented a nice tab look in HTML5, you can see the awesome functionality in this link:
    http://technology-day.incompanywebs.com/costa-rica-noticias.html
    The Problem
    When we get the HTML code directly from the server where the link above is hosted, and we upload the file into adobe bc, just the page, with no template associated, the tabs won't work. You can see what happens here:
    http://technologyday.businesscatalyst.com/elsalvador/noticias
    For some weird reason the tabs won't work. We tried using the "<script>$j = jQuery.noConflict();</script>" but it won't work.
    We also notice that there are some errors present in the console, but they are pretty much the same that show up in the working site. Any ideas on how to solve this would be greatly appreciated. Here is the code for the page also.
    http://jsfiddle.net/b5YC3/
    Message was edited by: Liam Dilley - moved code over to a jsfildde.

    If you use your browsers inspect tool, view the console or use say firebug you can easily see any errors you have.
    I can see your using foundation for your framework and using the foundation tabs js.
    http://technologyday.businesscatalyst.com/js/foundation/foundation-tab.js
    Is the path you have but it is not there on the server.

  • Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

    Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
    The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
    I realize the images are not ideally sized - I'll fix those once I get the pages to function.  Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
    The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
    I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
    I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
    Thanks in advance.
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reardan Area Chamber of Commerce</title>
    <meta name="description" content="home page for Reardan Area Chamber of Commerce" />
    <meta name="keywords" content="Reardan WA, chamber of commerce" </>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript">  </script>
    <script type="text/xml">
    </script>
    <style type="text/css">
                                  #slideshow { 
                                      padding: 10px;
                                            margin:0; 
                                  #slideshow-caption{
                                            padding:0;
                                            margin:0;
                                  #slideshow img, #slideshow div { 
                                      padding: 10px;
                                      background-color: #EEE;
                                      margin: 0;
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background: #004B8D;
              margin: 0;
              padding: 0;
              color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
               /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    .left
    position:absolute;
    left:0px;
    .center
    margin:auto;
    width:95%;
    .box
              position:relative;
              left:-90px;
              width:950px;
              height:350px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              z-index:1000;
    .slide{
        position:absolute;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
              color: #42413C;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #6E6C64;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
              text-decoration: none;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
              width: 960px;
              min-height:900px;
              padding:5px 0px 0px 0px;
              background: #E8F8FF;
              margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
              background: #E8F8FF;
              padding:10px 5px 0px 5px;
    .sidebar1 {
              float: left;
              width: 225px;
              margin: 60px;
              color: #FFFF0D;
              background: #595FFF;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
        z-index:-1;
    .sidebar2 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:2;
    .sidebar3 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:3;
    .content {
              padding: 0px 0px 0px 0px;
              width: 780px;
              float: left;
              background: #E8F8FF;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
              list-style: none; /* this removes the list marker */
              border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
              margin-bottom: 50px; /* this creates the space between the navigation on the content below */
              font: Arial Black, Verdana, , Helvetica, sans-serif;
              font-size:1.3em;
              font-weight:bold;
              z-index:2;
    ul.nav li {
              border-bottom: 0px solid #FFFF66; /* this creates the button separation */
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
              padding: 3px 0px 5px 0px;
              display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
              width: 185px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
              text-decoration: none;
              color: #FFFF0D;
              background: #595FFF;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
              background: #595FFF;
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
              color: #FFFFFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background:  #595FFF;
              color: #FFFF0D;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
              float: right;
              margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->
      <a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
      <p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="about.html">About Us</a></li>
          <li><a href="history.html">Reardan History</a></li>
          <li><a href="activities.html">Activities</a></li>
          <li><a href="business.html">Business<br />
            Directory</a></li>
          <li><a href="about.html">Join the<br />
            Chamber</a></li>
           <li><a href="links.html">Links<br />
      <span style="font-size: 85%">Tourism</span><br />
          </a></li>
        </ul>
         <!-- end .sidebar1 --></div>
    <br />
    <br />
    <br />
    <br />
    <div class="box" +"slide">
      <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
                               slideshowAddCaption=true;
    $(window).load(function() {
      $('#slideshow').cycle({
                        after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'blindX',// name of transition effect
                        pause:                              false,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              100,  // speed of the transition (any valid fx speed value)
                        sync:                              true,     // true if in/out transitions should occur simultaneously
                        timeout:                    5000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              true,
                        height:                       '300px',
                        width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshowOnCycleAfter() {
              if (slideshowAddCaption==true){
                                  $('#slideshow-caption').html(this.title);
    // EndOAWidget_Instance_2559022
      </script>
      <div id="slideshow">
        <!--All elements inside this will become slides-->
        <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
        <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
        <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
      <!--It is safe to delete this if captions are disabled-->
      <div id="slideshow-caption"></div></div>
    <div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
    Local News item
    <br />
    Another New item</p>
      <p align="center">lots of news this week<br />
        <br />
        <br />
        <br />
      </p>
    </div>
    <div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
      <div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
    <div class="content"><br />
    <br />
    </div>
    <div class="footer">
            <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
              <span style="font-size: x-small">[email protected]  - 509.796.2102</span><br />
            </p>
            <!-- end .footer -->
    </div></body>
    </html>

    If you DO want the slideshow overlaping the navigation try the below css:
    .sidebar1 {
        float: left;
        width: 225px;
        margin: 60px 0px 60px 60px;
        color: #FFFF0D;
        background: #595FFF;
        border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
    .box {
    float: left;
    margin-left:-60px;
    width:700px;
    height:350px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;

  • Spry Conflicts with LightBox and ThickBox?

    i have tried to use both Lightbox2 and Thickbox on a page
    with a Spry dataset and both will not work (they work fine on
    non-Spry pages). It's just a simple gallery-style page. Any ideas
    on how to make them compatible?

    Sorry for the confusion, but I do have it set up correctly on
    my local machine. I only posted the HTML file so you could download
    it. I have all the included files in the right locations here
    (because it works using either SPRY 1.5 or Slimbox when I test it).
    Spry is definitely conflicting with Slimbox. I just made a
    simple test file, got slimbox working and slowly added the Spry
    pieces. It broke when I added the spry:region call in the div:
    <div id="content" spry:region="portfolio_xml">
    I don't understand these people that say they are using Spry
    and Slimbox without issues. Would be nice to see an example.

  • Problem with Spry Menu Bar 2.0 (1.0) re - CSS

    Hello:
    I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0)  that I have created.  Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage.  Hence I have elected to post my issue here rather than on the spry page.
    I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI.  The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
    However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc.  The end result is that all the padding, background colours, background images, and text colours are lost.  So long as the CSS remains within the head this doesn't happen.
    My thinking is that this must have to do with issues of specificity, inheritence, etc.
    The site can be viewed at the following URL: http://www.aclco.org/testing/index.html.  In its current form all CSS related to the menu bar is found in the head of each page.  (see CSS below).
    My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar.  My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
    Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
    Steve Webster
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
        font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 0px 18px 0px 5px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none none;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 10px 10px 10px 10px;
        width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
        background-color:#2E35A3;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>
    The CSS governing the site generally is reproduced below:  (my belief is that it is the a:link, a:visited,  a:hover, a:active styles that may be in conflict).
    @charset "utf-8";
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        min-height: 0; /* This is necessary to overcome the "haslayout" bug that is found in Windows 7 in conjuction with IE8.  For More information see: URL -- http://reference.sitepoint.com/css/haslayout.html */
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
        color: #000000;
        list-style-image: none;
        background-color: #FCFCFC;
    h1,h2,h3,h4,h5,h6 {
    color:#000066;
    a:link {
        color: #151A96;
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
        color: #1B8DCD;
    a:hover {
        text-decoration: none;
        color: #F30A0A;
    a:active {
        text-decoration: underline;
        color: #151A96;
    #container {
        width: 960px;   
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        text-align: left; /* this overrides the text-align: center on the body element. */
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
        background-repeat: repeat-y;
    #header {
            padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
            width:960px;
            height:332px;
            background-image:
            url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
            background-repeat:no-repeat;
    #header h1 {
        margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        display:none;
    #header img {
        display: none;
    #Main_nav_contents {
        padding: 0;
        margin-top: 0px;
        height: 39px;
        width: 950px;       
        padding-top: 275px; 
        padding-left: 39px;
        z-index: 3; 
    #MenuBarVertical {
        margin-bottom: 50px;
        padding-top: 50px;
        padding-bottom:200px;
        padding-left: 15px;
        padding-right: 15px;
    .mainContent_left {
        margin: 0;/* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
        padding-left:30px;
        padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        width: 600px;
        float: left;
    .sidebar_right {
        float: right; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:0;
        margin-right:10px;
        font-size:90%;
    .mainContent_right {
        margin-left: 10px;
        padding-left:30px;
        padding-right:20px;
        width: 600px;
        float: right;
    .sidebar_left {
        float: left; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:30px;
        margin-right:0;
        overflow: hidden;
        font-size:90%;
    .main_content_centered {
        width: 650px;
        margin-left: 155px;
    .main_content_centered_header {
        margin-left: 75px;
    .sidebar_textbox {
        margin: 0px;   
        width: 260px;
        padding: 2px;
    .sidebar_textbox_header {
        width:255px;
        height:58px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20He ader.png);
    .sidebar_textbox_background_middle {
         width: 255px;   
        padding-top: 12px;   
        padding-bottom: 10px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Mi ddle.png);
        background-repeat: repeat-y;
    .sidebar_textbox_content {
        /* The width and padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within the background of the text box */
        width: 230px;
        padding-left: 20px;
        padding-right: 40px;
    .sidebar_textbox_footer {
        width:255px;
        height:64px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Foo ter.png);
    #issues_menu a:link {
        color: #151A96;
        text-decoration: none;
        font-weight:bold;
    #issues_menu a:visited {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #issues_menu a:hover {   
        color: #F30A0A;
        font-weight:bold;
        font-style: oblique;
        text-decoration: none;
    #issues_menu a:active {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #archives {
        padding-top: 15px;
        padding-right: 15px;
        padding-bottom: 20px;
        padding-left: 0px;
    .landscape_textbox {
        width: 500px;
        margin-right: 0px;
        margin-left: 30px;
        padding-top:35px;
        padding-bottom: 25px;
        font-style: normal;
        font-weight: normal;
    .landscape_textbox_hdr {
        width:500px;
        height:38px;
        margin:auto;
        padding:0;
        background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
    .landscape_textbox_middle {
        width:auto;
        margin:auto;
        padding-top: 12px;
        padding-bottom: 12px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/landscapte%20Textbox%20 Middle.png);
        background-repeat:repeat-y;
    .landscape_textbox_content {
        width:450px;
        padding:25px;
    .landscape_textbox_ftr {
        width:500px;
        height:44px;
        margin:auto;
        padding:0;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20F ooter.png);
    #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        width: 960px;
        height: 222px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
        background-repeat:no-repeat;
    #footer p {
        margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align:center;
        margin-left: 50px;
        margin-right: 50px;
        padding: 10px;
        font-size: small;
    #footer h5 {
    text-align:center;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .dropcap {
        display: block;
        float: left;
        line-height: 80%;
        font-size: 250%;
        font-weight: bolder;
        color: #000066;   
        padding: .03em .1em 0 0;
    .red_arrows {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);   
    .blue_bullets {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);   
    .attention {
        color: #F30A0A;
        font-size:x-large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .attention_small {
        color: #F30A0A;
        font-size:large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .table {
        table-layout:fixed;
    .blue {
        color: #00F;
    #container .mainContent_left p .blue {
        color: #0303A0;

    Hello Martin:
    Thanks for your input.  However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
    For example, the menu only works in IE 6.0 if the css remains in the head.  I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed).  Both should work -- and yet it doesn't.
    If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0.  If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu.   This has been verified using a cross browser testing.  If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
    The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
    So for me, at least, the issue remains baffling.
    I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees.  The spry framework in this regard is not well documented.  I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
    I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
    Thanks,
    Steve.

  • Slimbox not working with Spry Dataset

    Hi there,
    I'm trying to populate a page with Spry Dataset and use Slimbox2 to show a set of 4 images when a thumbnail is clicked.
    The original webpage WITHOUT Spry Dataset is here:
    http://shadowmuseum.com/portfolio/p-web.html
    Currently it works with just slimbox, but as soon as I add a Spry Dataset, the large images won't load anymore. When a thumbnail is clicked on, it opens the 1st large image of the set in a new page, completely removing the lightbox effect.
    I've scouted the internet for solutions; it's been suggested that slimbox doesn't work because spry doesn't have time to load the content first. But I'm not savvy with javascript at all, so have no idea how to work around it....
    Any help would be greatly appreciated.
    Thanks a lot.
    P.S. Below is the HTML code for the page with both spry & slimbox:
    <!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"><!-- InstanceBegin template="/Templates/bone.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="keywords" content="Shadow Museum, design, photography, london, web, web design, ana, ana lorraine lui, benjamin, backhouse, E1, E8, N16, graphic design, st martins, creative, agency, bespoke, multi-disciplinary" /><meta name="description" content="London based bespoke multi-disciplinary creative agency. Services include web design, photography, print design, and filmmaking." />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Shadow Museum || London-based bespoke multi-disciplinary creative agency</title>
    <script type="text/javascript" src="../zzAssets/scripts/Lightbox/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="../zzAssets/scripts/Lightbox/js/slimbox2.js"></script>
    <script src="../zzAssets/scripts/SpryAssets/xpath.js" type="text/javascript"></script>
    <script src="../zzAssets/scripts/SpryAssets/SpryData.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../zzAssets/scripts/Lightbox/css/slimbox2.css" type="text/css" media="screen" />
    <!-- InstanceEndEditable -->
    <link href="../zzAssets/scripts/main.css" rel="stylesheet" type="text/css" />
    <script src="../zzAssets/scripts/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../zzAssets/scripts/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../zzAssets/scripts/clock/clockp.js"></script>
    <script type="text/javascript" src="../zzAssets/scripts/clock/clockh.js"></script>
    <!-- InstanceBeginEditable name="head" -->
    <script type="text/javascript">
    <!--
    var dsWeb = new Spry.Data.XMLDataSet("p-web.xml", "portfolio/project");
    dsWeb.setColumnType("info", "html");
    //-->
    </script>
    <!-- InstanceEndEditable --><!-- InstanceParam name="footer" type="boolean" value="true" --><!-- InstanceParam name="clock" type="boolean" value="true" -->
    </head>
    <body>
    <div id="clock_a"></div>
    <div id="menu">
      <ul id="mainMenu" class="MenuBarHorizontal">
        <li><a href="../index.html">Home</a>      </li>
        <li><a href="../news/news.html">News</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">About</a>
            <ul>
              <li><a href="../about/our_story.html">Our Story</a></li>
              <li><a href="../about/our_values.html">Our Values</a></li>
            </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Services</a>
          <ul>
            <li><a href="../services/web_design.html">Web Design</a></li>
            <li><a href="../services/print_design.html">Print Design</a></li>
            <li><a href="../services/photography.html">Photography</a></li>
            <li><a href="../services/filmmaking.html">Filmmaking</a></li>
            </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
          <ul>
            <li><a href="p-web.html">Web Design</a></li>
            <li><a href="p-print.html">Print Design</a></li>
            <li><a href="p-photography.html">Photography</a></li>
            <li><a href="p-filmmaking.html">Filmmaking</a></li>
          </ul>
        </li>
        <li><a href="../contact/contact.html">Contact</a></li>
      </ul>
    </div>
    <!-- InstanceBeginEditable name="content area" -->
    <div id="content">
      <div id="p-web">
        <h2>Web  Portfolio</h2>
         <div class="SpryHiddenRegion" spry:region="dsWeb">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr spry:repeat="dsWeb">
            <td align="center" valign="top">
                   <a href="../zzAssets/images/p-web/{pic1}" rel="{label}" title="{title}"><img src="../zzAssets/images/p-web/{thm}" width="180" height="130" /></a>
                   <a href="../zzAssets/images/p-web/{pic2}" rel="{label}" title="{title}"></a>
                   <a href="../zzAssets/images/p-web/{pic3}" rel="{label}" title="{title}"></a>
                   <a href="../zzAssets/images/p-web/{pic4}" rel="{label}" title="{title}"></a>
              </td>
            <td align="left" valign="top">
                   <h3>{title}</h3>
                   {info}
                   <p><a href="http://{url}" target="_blank">{url-label}</a></p>
              </td>
          </tr>
        </table>
         </div>
        <p> </p>
      </div>
    </div>
    <!-- InstanceEndEditable -->
    <div id="footer">
      <div id="watermarkRight">
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="top">©2009 Shadow Museum | Company Number 6576238
              | <a href="../terms.html" class="colourless">Terms &amp; Conditions</a></td>
            <td align="right" valign="top">contact us: <a href="mailto:[email protected]">[email protected]</a></td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("mainMenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    <!-- InstanceEnd --></html>

    You are not re-initializing the lightbox library code after Spry have generated the markup.
    You can use the Spry region observer onPostUpdate to get notified of region re-generation and recall the initialization code of the lightbox.

  • Bootstrap3/BC Menu dropdown conflict with module_photogallery

    I'm building a site using Bootstrap3 framework, with BC Dynamic Menu (with jQuery courtesy Joe Watkins) for main navigation.  Dropdowns (click or hover) working beautifully until I add a photogallery module, then the dropdown links disappear on click, which is a major problem on touchscreens.  I've removed all things piece-by-piece to determine the dropdown links disappear 100% of the time when a photogallery module is on the page, and work appropriately 100% of the time without a photogallery present (well, 1 exception - i'm seeing same issue on Layouts/OnlineShop/large_product.html).
    Does anyone have any recommendations to fix this conflict with my Menu Nav dropdown links and the photogallery module?  Really, really appreciate any suggestions.  Unfortunately, the site nav is rendered non-functional on touchscreens due to these disappearing dropdown link conflicts (only Home and Smile Gallery links are not dropdowns).
    EXAMPLES
    Here are 3 examples of pages with a photogallery/dropdown conflict on click.  To test issue, click the main nav dropdown links (e.g. "Locations, Treatment, etc":
    Smile Gallery
    Rapid City, SD
    Spearfish, SD
    I'm right in the middle of transitioning this site to the responsive framework, so not all links will work. Here are 3 examples of Nav links working properly on click (no photogallery module):
    Results - Before & After
    Evaluation
    Smile For A Lifetime
    REFERENCE
    I do not understand jQuery very well, I've pieced together what I could to make it all work.  Here are the 2 scripts I use to get the BC Menu to work: 
    // - - - - -  Dropdown Menu v2 - JOE WATKINS.IO Dropdown Menu Toggle - - - - - - - - - - -
    dropdownNavTweak : function(){
    var $navContainer = $(".nav"),
      $dropdownItems = $navContainer.find("li.dropdown");
      $dropdownItems.each(function(){
      var $parentItem = $(this).find("a:first");
      $parentItem.addClass("dropdown-toggle").attr("data-toggle","dropdown").append(" <em class='icon-caret-down'></em>");
      $(this).children("ul").removeClass().addClass("dropdown-menu");
      $dropdownItems.show();  // shows dropdown images to prevent flicker - use CSS to hide " .nav li.dropdown {display:none;}" or ".navbar-nav li.dropdown {display:none;}" or  ".navbarMinor-nav li.dropdown {display:none;}"
    },  // end dropdownNavTweak  (Comma needed if others follow}
    ... and ...
    //////- -MENU- //////// 
    jQuery(document).ready(function ($) {
        jQuery('.navbar .dropdown').hover(function() {
            jQuery(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(200).slideDown();
        }, function() {
            var na = $(this);
            if (jQuery('.spanFloatLeftIfMobile').css('float') == "none") {
                na.find('.dropdown-menu').first().stop(true, true).delay(500).slideUp('fast', function(){ na.removeClass('extra-nav-class') })

    Hi Matthew,
    Having a super quick look at the code I'd say it's because of:
    ul.dropdown li.selected a {
        color: #ff871f;
    This affects all the child elements.
    To override this down the line you could do something like:
    ul.dropdown li.selected ul li a {
        color: #fff;
    This would override the parent link color when selected.
    You could probably then also add:
    ul.dropdown li.selected ul li.selected a {
        color: #ff871f;
    For the dropdown selected states.
    That's a quick look though so don't quote me too much

  • K7N2 DELTA ILSR has conflicted with ram....

    K7N2 DELTA ILSR has conflicted with this ram....
    http://www.kingmax.com/product/pro_superMPXB62D-383.htm
    I got 2 * 256MB DDR 400 of the above ram.
    Is there any conflicted with K7N2 DELTA??
    amd 2500+
    thank you
    BIOS version 7.4

    Quote
    Originally posted by utada
    I have already brought kingmax
    These boards are very picky with RAM. As Bonz has pointed out their is an approved list near the top of the Forum but unfortunately I don't beleive Kingmax is on it. Sometimes the generic RAMS run, sometimes not. It seems to be hit or miss. If you want a recommendation of good quality RAM I would suggest MUSHKIN first and CORSAIR second. Good Luck
    Rob

  • Flash Player 10 does not work in IE or Firefox. What could it conflict with?

    I'm  using Firefox 3.6.8 (and sometimes IE 8.0.6001.18702IC) on Windows XP Pro, SP 3.
    For some weeks now, I have been unable to hear any sounds on anything Flash-based, from YouTube to games at MSN.com or embedded videos on any site using Flash.  Initially I had assumed it to be because of having QuickTime installed because I know QT likes to hijack everything.  I uninstalled QT (and Real Player) and Flash Player then reinstalled Flash Player (and Shockwave Player just in case) and guess what?
    Yup.  Nothing.  When I uninstalled everything, I used a program called Revo Uninstaller, which includes a registry cleaning option.  I then used Abexo and WinASO's registry cleaners to make sure I got everything else that even looked like QuickTime off my hard drive.
    When I reinstalled Flash, the following programs appeared in C:\Windows\system 32\Macromed\Flash:
    Flash 10i.ocx (10.1.82.76)
    FlashUtil10i_ActiveX (10.1.82.76)
    FlashUntil10i_Plugin (10.1.82.76)
    genuinst (6.0.2800.1531)
    FlashUtil10i_ActiveX.dll (10.1.82.76)
    NPSWF32.dll (10.1.82.76)
    KB931433
    FlashInstall
    Install
    Flashplayer.xpt
    When I check IE's "Tools" and look for add-ons, it says that Flash (Shockwave Flash) is enabled.  I even enabled the other Adobe add-ons for Acrobat and such just to be sure.  Firefox shows Shockwave Flash and Shockwave for Director both to be enabled.  The Flash control panel settings don't help: I have all sites set to store about 100 KB on my computer to make sure there's enough room for everything but still nothing.
    Before anyone asks, my audio drivers are up to date, thanks to the manufacturer's website.  I have DirectX 9.0c installed and everything else works fine.  I can play audio and video elsewhere with no problems.  It's only Flash that's showing me this trouble and there's no hint as to what else could be interfering with Flash.
    Any ideas?

    Well, great.  I tried the uninstall/reinstall before, but not with the uninstaller, so I was hopeful that this time might do it.  No such luck.  The video still plays, but no sound.
    All the sound settings are working with everything else from games to media players.  I set Windows' firewall to allow both the ActiveX and plugin for Flash, just in case.
    In the Flash folder, I now have:
    Flash10l.ocx (10.1.102.64)
    Flash Util10l_ActiveX (10.1.102.64)
    FlashUtil10l_Plugin (10.1.102.64)
    Genuinst (6.0.2800.1531)
    FlashUtil10l_ActiveX.dll (10.1.102.64)
    NPSWF32.dll (10.1.102.64)
    And the setup and text files that went with 'em.
    I've also done a system restart since then and zip.
    I went through IE and Firefox and looked for any file associations (like .flv) that I could manually change over to using Flash, but no go.  The settings panels for Flash have all been set to allow YouTube specifically (as a test) and to allow 10KB of storage space for all affected sites.
    Now what?  I'm really not looking forward to a reformat and reinstall, but it's looking like that's what it's going to take.
    Date: Sun, 14 Nov 2010 17:37:07 -0700
    From: [email protected]
    To: [email protected]
    Subject: Flash Player 10 does not work in IE or Firefox. What could it conflict with?
    Something is strange with your list of modules; you list FlashUntil10i_Plugin (10.1.102.64), but this is really 10.1.85.3
    I recommend that you uninstall Flash Player completely (using http://kb2.adobe.com/cps/141/tn_14157.html), then restart Windows, and delete all remaining files in C:\Windows\system32\Macromed\Flash.
    Next reinstall both ActiveX (http://fpdownload.adobe.com/get/flashplayer/current/install_flash_player_ax.exe) and the plugin (http://fpdownload.adobe.com/get/flashplayer/current/install_flash_player.exe).
    After that, if the problem persists, have a look at this page http://kb2.adobe.com/cps/837/cpsid_83739.html
    >

  • Performance issues with Spry

    Hi all,
    I'm facing some performance issues with Spry. I'm using it
    for handling a menubar acting as a rollover menu : its color
    changes under mouse cursor, and a submenu does appear at the same
    time.
    I have no problem when working with Firefox, but in IE6, it
    renders too slowly
    Is there something I've missed in the configuration or code
    (or is there some tips for this kind of problem) ?
    For information, I used UL and LI html tags, and I've
    configured Spry to render these as a menubar (with multiple levels)
    Thanks for your response

    Sorry, there are no public access to this application
    :-(

  • Problem with spry in IE

    hey guys im having a problem with Spry in IE only..
    Ive tried the corrent browsers and it seems to be working well
    Firefox
    Opera
    Safari
    but Internet Explorer is not working the menus just wont drop down past my flash player?
    any help would be great
    heres the link to my temp site so you guys can see what i mean
    www.dreamcatchermeadows.com/new_site/site/index.html
    any help would be great
    Thanks

    i checked the compatability button on dream weaver and this come up
    Dreamweaver Browser Compatibility Check
    14-February-2011 at 01:26:05 PM GMT-08:00.
    Target Browser Errors Warnings
    Internet Explorer 6.0
    1
    0
    Internet Explorer 7.0
    1
    0
    Internet Explorer for Macintosh 5.2
    1
    0
    Firefox 1.5
    1
    0
    Netscape 8.0
    1
    0
    Opera 8.0
    1
    0
    Opera 9.0
    1
    0
    Safari 2.0
    1
    0
    Total
    8
    0
    Details:
    #000000
    #000000
    Error
    Found 1 errors in SpryMenuBarHorizontal.css
    Firefox 1.5; Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0
    line 19
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    End of report.

  • The action could not be completed because of a conflict with the original item. The conflict may have occurred when an existing item was updated on another computer or device. Open the item again and try making your changes. If the problem continues, cont

    I have a user on an iMac 10.6 connected to our domain.  She uses Outlook web access for email on our exchange server.  Last week she received the following message which is randomly preventing her from sending emails.  She claims no attachment was involved in the original email when this all started.  I have not been able to look at her account as she is out of the office but maybe someone else dealt with this issue.  I realize this may not be Mac related but thought I'd give it a try.  She did say it occurred once over two days while working on a PC but it continued over the past weekend.
    If an internal user tries to send a message with infected attachment using Outlook Web Access, it may report the following error message: The action could not be completed because of a conflict with the original item. The conflict may have occurred when an existing item was updated on another computer or device. Open the item again and try making your changes. If the problem continues, contact technical support for your organization.
    This is because F-Secure Anti-Virus for Microsoft Exchange has detected a virus in the attachment. If the user tries to send the message again, the message will be sent but without the attachment. At the same time a blank message with an attachment named "Attachment_information.txt" will remain in the user's Drafts folder. The "Attachment_information.txt" will contain information about the virus detected in the message.

    PS - have found other posts indicating that clips smaller than 2s or sometimes 5s, or "short files" can cause this. Modern style editing often uses short takes ! Good grief I cannot believe Apple. Well I deleted a half a dozen short sections and can export, but now of course the video is a ruined piiece of junk and I need to re-do the whole thing, the sound etc. which is basically taking as much time as the original. And each time I re-do it I risk again this lovely error -50 and again trying to figure out what thing bugs it via trial and error instead of a REASONABLE ERROR MESSAGE POINTING TO THE CLIP IT CAN'T PROCESS. What a mess. I HATE this iMovie application - full of BUGS BUGS BUGS which Apple will not fix obviously, since I had this product for a few years and see just hundreds of hits on Google about this error with disappointed users. Such junk I cannot believe I paid money for it and Apple does not support it with fixes !!!
    If anyone knows of a GOOD reasonably priced video editing program NOT from APPLE I am still looking for suggestions. I want to do more video in future, but obviously NOT with iMovie !!!

  • Need to Install Safari 6.0.2 on a white Intel core duo iMac. Had to throw out 6.0.3 because of conflict with required software. Downloaded wrong version that was for Mountain lion (I am running 10.7.5). It installs but won't open.

    Need to Install Safari 6.0.2 on a white Intel core duo iMac. Had to throw out 6.0.3 because of conflict with required software. Downloaded wrong version that was for Mountain lion (I am running 10.7.5). It installs but won't open, says it is for Mountian Lion.
    Of course I can't throw it away since I get a message it's part of the sytem. I can show package contents and throw those away, but evidently not a good idea!!

    Need to Install Safari 6.0.2 on a white Intel core duo iMac. Had to throw out 6.0.3 because of conflict with required software. Downloaded wrong version that was for Mountain lion (I am running 10.7.5). It installs but won't open, says it is for Mountian Lion.
    Of course I can't throw it away since I get a message it's part of the sytem. I can show package contents and throw those away, but evidently not a good idea!!

Maybe you are looking for

  • Payment cards - third party products

    Dear All, I am looking for some third party companies to use payment cards in SAP. We want to use the authorization and settlement functions using RFCs or other communication methods. Any ideas? Thanks Matthias

  • Content Server: Connect Error: Connect to Host/Port error: NIECONN_REFUSED

    Hi I am monitoring my Content Server on CCMS and I constantly receive the following error: 10.07.2007 15:21:07 Requests ContRep:ZP User:APALACIO HTTP_GET_FILE Connect Error: Connect to Host 10.201.1.128 Port 1090 error: NIECONN_REFUSED That does <b>n

  • Horizontal line on Macbook display

    Hello everyone! I'm writing regarding my brother´s Macbook. The computer is about 1 month old now. He's been very satisfied with his first mac until now. A couple of days ago when his computer woke up from sleep it had this horizontal line (1px high)

  • Impossible d'accéder aux films et vidéos dans itunes

    quand je suis sur itunes, je n'ai acces qu'à la musique, le dossier film est visible mais inaccessible, impossible d'y placer quoi que ce soit, les commandes cessent de fonctionner. Ce problème ne se produit pas avec la musique. Où est le bug ?

  • Catalog manger "search and replace " using xml script

    Hi , we have renamed 6 rpd columns names in rpd & alias is not removed yet .In catalog manager i can search and replace using string .But it takes lot time as they are stored in different reports , which are existing . I am trying to use xml script f