Document.ready() in jQuery

Hi,
On jsf fragement page, I want to do something when the is loaded. So, in jQuery, I do this.
<af:resource xmlns:af="http://xmlns.oracle.com/adf/faces/rich type="javascript">
$(document).ready(function() {
// Handler for .ready() called.
alert('load');
$("input[name='" + "T:prof:businessS:viewbusiness:oliit4" + "']").attr("readonly", true);
</af:resource>
The ready() is called only when the page is just loaded. If I go to another page, and come back to the page, ready() is not invoked. If I hit “F5” to refresh the page, I got the alert. Is it supposed to fire the alert every time a page is loaded or “clicked”?
Thank you.

can you try having a pageTemplate and use the template in all your page..
and inside the pageTemplate you can have the following code
<af:clientListener method="loadJquery()" type="load"/>and at the top you can have as
function loadJquery() {
$(document).load().scrollTop(0); // or any other code
}

Similar Messages

JQuery $(document).ready

Hi, I was wondering is there something in Spry that equals
what is $(document).ready in jQuery? This is called when the DOM is
ready but page images might still be loading and this would be
called before window.onload...
Thanks

Spry.Utils.addLoadListener(function(){
i think.
function from SpryDOMUtils.js

Get jQuery Document Ready to work in a Custom Layout Page

Hi
Working with a branding company I have placed my Bootstrap and JQuery files at the bottom of my custom Master page
</footer>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">//<![CDATA[
//]]>
</script>
<script type="text/javascript" src="/Style%20Library/Client/js/bootstrap.min.js">//<![CDATA[
//]]>
</script>
<script type="text/javascript" src="/Style%20Library/Client/js/bootstrap-datepicker.js">//<![CDATA[
//]]>
</script>
All good! Now if I add a $(document).ready(function() below the above definitions and say have a date picker widget marked up this
works.
I have noticed that in my case I am unable to run document ready function at the custom page layout level- only the one in the custom master file is ever executed - I have tried moving the above definition files into the header as per the sample in
Bootstrap2.html but SharePoint simply removes them during the conversion. Moving the same document ready function out of the master into the layout page doesn't work
I guess my question is am I am have a unique document ready function at the page layout level as this I would have thought this would be possible - In my case I need my JQuery functon to perform some runtime branding that is unique per page
Daniel
Freelance consultant

for a quick and dirty implementation, I coded this up which works. I will see about the other implementation as suggested by Hugh as I am not entirely happy about loading the document ready as there is a slight delays as the body class is set and the
page is rendered
var bodyCSS ;
function SetBodyCSS()
var ctx = new SP.ClientContext();
var site = ctx.get_site();
var web = ctx.get_web();
// construct a json object
ctx.load(web);
ctx.executeQueryAsync(function(s, a){
var siteBodyContainerCSS = {
"Sales": "Pink",
"IT": "burgundy"
// lookup the class to set from the title
bodyCSS = siteBodyContainerCSS[web.get_title()];
// only bother to set if not null , undefined or empty
if (bodyCSS)
$('#s4-bodyContainer').removeClass("default");
$('#s4-bodyContainer').addClass(bodyCSS);
else
alert( ' no body css class defined for ' + web.get_title()) ;
// now call this to get the body css class
//]]>
</script>
</a>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(function () {
/* your code here */
SetBodyCSS();
}, "sp.js");
$('#dp6').datepicker();

How to use dynamic id of text box document.getElementById in JQuery

Dear Sir,
I am having code in ajax
I am bringing id from ajax
code is for text box id='textbox1"+i+"'
here id name I am giving textbox and i is my increamented value and appending with textbox
the id is dynamically generating it is like textbox0 on next textbox2
But
how I ll use the same dynamically generated id in on of my jquery function using document.getElementbyid
I am not good in jquery.
please help
regards sanat

That is a JQuery question, i.e. a JavaScript question, and this is a Java forum. Locking.

How top Open a Excel Document from share point document library using jquery

How top Open a Excel Document from share point document library using jquery

Hi,
According to your post, my understanding is that you want to open excel file via JQuery.
To open excel file, we can use the following code.
<script type="text/javascript">
function openExcel(strFilePath) {
var yourSite = "http://www.yoursite.com";
openExcelDocPath(yourSite + strFilePath, false);
function openExcelDocPath(strLocation, boolReadOnly) {
var objExcel;
objExcel = new ActiveXObject("Excel.Application");
objExcel.Visible = true;
objExcel.Workbooks.Open(strLocation, false, boolReadOnly);
</script>
For more reference:
http://www.kavoir.com/2009/01/using-javascript-to-open-excel-and-word-files-in-html.html
http://www.dotnetspider.com/resources/43453-Open-Word-Excel-files-using-Javascript.aspx
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support

Lightbox and jquery.js conflict

Hi I have a query.js and a lightbox.js javascripts running on the same page and they are conflicting. They both work great seperately but when combined the scripts stop working.
I found a forum that is closed that reference's this solution:
   <script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
However, I am unsure of what to do with it. The forum referenced changing the name of the 'someid' but I don't know what to change it to.
Here is my conflicting codes:
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
   <script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
            jQuery(document).ready(function(){
                //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
                //Caption Sliding (Partially Hidden to Visible)
                jQuery('.boxgrid.caption').hover(function(){
                    jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
                }, function() {
                    jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
        </script>




<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/videobox.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="scripts/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="scripts/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery('.boxgrid.caption').each(function (){
                    jQuery(this).mouseenter (function(){
                        jQuery(this).find(".cover").animate({top:'50px'},{queue:false,duration:160});
                    jQuery(this).mouseleave (function(){
                        jQuery(this).find(".cover").animate({top:'150px'},{queue:false,duration:160});
                jQuery("a.external").fancybox();
</script>

Adjustments to a jQuery file

Hi,
I have a jQuery image slide show gallery I placed onto a website. I changed the overall dimensions of the image space & container as I'd like the photos to appear at a specific dimension.
However, the controls that actually activate the before and next are now missing or hidden somewhere. How can I manipulate so everything rescales in one go accordingly?
Thank you!

OK,
The developer encourages end-users to manipulate as needed.
He recommends modifying the function call to include whatever dimensions are required, by citing this example:
jQuery(document).ready(function(){
    jQuery('#slideshow').fadeSlideShow({
        width: 800,
        height: 600
So, I only wanted to change the width to 1100, but I see no change whatsoever onscreen, when I edit that function.
To take it a step farther, I went into the class ID style called 'slideshow', and also tried editing the width in there to 1100; still no luck.
Any advice?
ul#slideshow{list-style:none;border:1px solid #999;padding:2px;margin:auto;margin-top:5%;width:640px;height:480px;overflow:hidden;}

Integrating Flash as a HTML5 Componant (with JQuery)

Hello,
i am strugling to make the flash componant fit as a html5 valid componant inside JQuery. Here is what i have so far:
<script>
jQuery(document).ready(function(){
jQuery('body').data('videoCriteria', {'dom':'domVideoResults', 'q':'', 'username':'remi2611', 'category':'', 'feed':'most_viewed', 'time':'today',
'type':'2', 'pageNumber':'1', 'nb_display':'10', 'safeSearch':'none'});
jQuery('body').data('social_buttons', 0);
youtube_wpress_displayVideosList();
</script><noscript>
Visitez notre blog voyage!
</noscript>
Any clue on how this could be done ?

Hello,
i am strugling to make the flash componant fit as a html5 valid componant inside JQuery. Here is what i have so far:
<script>
jQuery(document).ready(function(){
jQuery('body').data('videoCriteria', {'dom':'domVideoResults', 'q':'', 'username':'remi2611', 'category':'', 'feed':'most_viewed', 'time':'today',
'type':'2', 'pageNumber':'1', 'nb_display':'10', 'safeSearch':'none'});
jQuery('body').data('social_buttons', 0);
youtube_wpress_displayVideosList();
</script><noscript>
Visitez notre blog voyage!
</noscript>
Any clue on how this could be done ?

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.

Open a SharePoint List item in Modal Pop up in SP 2013 fails after you filter or sort the list

Sorry for the long post. This has been killing me. I had this script working perfectly fine in SharePoint 2010 (online) and basically i have a source custom list (list A) with a hyperlink column and a Destination List with say title and my name.
Source List (list A) looks like this with these 2 columns
Title Test Link
A Link 1
B Link 2
C Link 3
Each of these links link to the actual list item in the destination list, so for example, link 1 is/sites/2013DevSite/Lists/Destination%20List/EditForm.aspx?ID=1
So basically i want anytime the Link are clicked that point to another list's item to open in a modal dialog and the script below worked perfectly fine in SharePoint 2010 (online)
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
jQuery(document).ready(function() {
jQuery('a[href*="EditForm.aspx"]').each(function (i, e) {
// Store the A tag's current href in a variable
var currentHref = jQuery(e).attr('href');
jQuery(e).attr({
'href': 'javascript:void(0);',
// Use the stored href as argument for the ShowInModal functions parameter.
'onclick': 'ShowInModal("' + currentHref + '");'
function ShowInModal(href) {
SP.UI.ModalDialog.showModalDialog({title: "Edit Item", url: href});
</script>
All it does is find the href tags for that particular value Editform.aspx and the pop modal works in SP 2010 online. So the site page is designed in such a way there is a content editor web part with the reference to this javascript file and the sharepoint
list is right beneath it and this worked perfectly opening in modal windows in SP 2010.
Since migration to 2013, this is what exactly happens
1.) when you come to the site page, the modal works,
2.) If you filter or sort on say the Title or Test Link column in Source list (lets say you select the Value A), the script does not fire at all, if i hover over the hyperlink, the who hyperlink is shown and does not open the hyperlink in the modal pop up.
- This is important because i want to be able to sort on a particular item...
Could someone please let me know what am i doing wrong and why is this not working when i sort the list. Thanks for all the help.
Once again i am trying to open a sharepoint list item in Sharepoint 2013 from another list using Jquery

A ListItem has its own unique row id so in all likelihood, an insert with the same data will result in a new list entry. The Lists Web Service however, has an UpdateListItem method which will take an update request. [refer
http://msdn.microsoft.com/en-us/library/office/websvclists.lists.updatelistitems(v=office.15).aspx ]
There is another note in the conference (marked answered) to your List Item Update problem. Probably worth a try too. [refer
http://social.msdn.microsoft.com/Forums/en-US/bee8f6c6-3259-4764-bafa-6689f5fd6ec9/how-to-update-an-existing-item-in-a-sharepoint-list-using-the-wss-adapter-for-biztalk?forum=biztalkgeneral ]
Regards.

PLEASE Help with HTML code for email background image...

Hi there!
i have a background image that I want to pop into an html email widget for the email's background... here is the web link I created in Photoshop: file:///C:/Users/Rachel/Desktop/iMuse%20Clients/LeadMachine360/Email%20Signatures/tileabl e-metal-textures-2.html
If anyone could please help me out that would be AWESOME! I've attached pics of the background & I'm using Infusionsoft email builder which allows for HTML widgets. I have a code that I use for my landing pages & webforms which works, tried that but no dice!
Any help would be much appreciated - I'm an html newbie!
Here is the code that I use for landing pages & works great, tried it for the email & it was a fail:
<style>
#mainContent .background, {
      background: url('file:///C:/Users/Rachel/Desktop/iMuse%20Clients/LeadMachine360/Email%20Signatures/ti leable-metal-textures-2.html') no-repeat center center fixed;
    background-size: cover;
</style>
<script src="file:///C:/Users/Rachel/Desktop/iMuse%20Clients/LeadMachine360/Email%20Signatures/ti leable-metal-textures-2.html">
</script>
<script>
jQuery(document).ready(
      function(){
      jQuery(' table.bodyContainer').removeAttr('bgcolor');
</script>
thanks in advance!
Muse

Not sure what you expect. Your URL is absolute and pointing to a local file resource. It's not a proper relative HTML link. Beyond that it's toatlly unclear how you actually plan to load your image and where they are hosted, so nobody can tell you anything. Either way, there is an obviously painful lack of understanding of even the most basic web techniques, so the best advise anyone would give you is to spend some time with a web search and actualyl learn some of that stuff...
Mylenium

Sharepoint 2013 - Remove "Recent" from left menu

Hello All -
My client has requested that she be able to remove (or hide) the "Recent" menu header from the left menu in Sharepoint 2013. This is for specified site collections/sites/pages, not farm-wide.
So far, I've tried to do this via JQuery by adding the following code
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".ms-core-listMenu-item:contains('Recent')").parent().hide();
</script>
via both a script web-part and via a content editor web-part (using embed code), but to no avail. I've also tried adding the code above to a .js file (without the script tags) and calling it as
<script type="text/javascript" src="/_layouts/15/menu.remove.recent.js"></script>
instead, but it still doesn't work.
I've checked the page source and I can see the script is included. The "Recent" menu item however, is still there. My prefered solution would be to hide the menu item rather than remove it - I suspect removing it will probably cause issues as Sharepoint
likely expects it to be there.
There's no requirement to use JQuery - it just seemed to me to be the best way. I would also rather not edit master pages unless there's no other choice.
Any ideas?
sysadmin

Hi xida,
You need to reference the JQuery library, then add the code in the Content Editor Web Part in the view page (e.g. AllItems.aspx) of the Pages library, then the "Recent section" will be hidden when you access this AllItems.aspx page.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".ms-core-listMenu-item:contains('Recent')").parent().hide();
</script>
Thanks
Daniel Yang
TechNet Community Support

I would like to customise the Stock level/out of stock

Can someone please help me with this js?
I would like to customise the Stock level/out of stock.
<script type="text/javascript">
jQuery(document).ready(function(){
var productName = jQuery('.details h5').text();
    jQuery('.main-frame p.breadcrumbs').append("<span> : " + productName + "</span>");
jQuery(document).ready(function(){
    jQuery('#zoom img').wrap('<span style="display:inline-block"></span>').css('display', 'block').parent().zoom({on:'click'});
    function AddProductExtras(catalogId,productId,ret) {
          var td = document.getElementById('catProdTd_'+productId);
          if (td.innerHTML == 'This item is made to order - please allow 3 to 5 weeks for delivery')
             td.innerHTML = 'Product added successfully. Please allow 2 - 3 days for delivery.';
</script>
<div class="shop-product-large clear">
<div class="image">
<p>
<a href="#" id="zoom">
<span style="cursor: move;"><img alt="" src="{tag_largeimage_path}" width="600" height="360" /></span>
</a></p>
{tag_relatedproducts,2,true}
</div>
<div class="details">
<br />
<h5>{tag_name}</h5>
<h4>{tag_custom3}</h4>
<br />
<div class="description">
<p2>{tag_description}
<br />
<br />
<p5>Size:</p5>
{tag_custom1}
<br/>
<p5>Colour:</p5>
{tag_custom2}
<br/>
<p5>Materials:</p5>
{tag_custom4}</p2>
</div>
<ul>
    <li class="price"><strong>{tag_saleprice} <h9>(inc. GST)</h9></strong></li>
    <li class="instock"><p5>In Stock:</p5> <p2>{tag_instock}</p2></li>
    <li class="quantity"><p5>Quantity:</p5> {tag_addtocartinputfield}</li><br/>
    <li class="quantity">{tag_addtocart,<img alt="" src="/images/btn-add-cart.gif" />}</li>
    </ul>
</div>
</div>

I have amended to;
<script type="text/javascript">
jQuery(document).ready(function(){
var productName = jQuery('.details h5').text();
    jQuery('.main-frame p.breadcrumbs').append("<span> : " + productName + "</span>");
jQuery(document).ready(function(){
    jQuery('#zoom img').wrap('<span style="display:inline-block"></span>').css('display', 'block').parent().zoom({on:'click'});
jQuery(document).ready(function AddProductExtras(catalogId,productId,ret) {
          var td = document.getElementById('catProdTd_'+productId);
          if (td.innerHTML == 'This item is made to order - please allow 3 to 5 weeks for delivery')
             td.innerHTML = 'Product added successfully. Please allow 2 - 3 days for delivery.';
</script>
<div class="shop-product-large clear">
<div class="image">
<p>
<a href="#" id="zoom">
<span style="cursor: move;"><img alt="" src="{tag_largeimage_path}" width="600" height="360" /></span>
</a></p>
{tag_relatedproducts,2,true}
</div>
<div class="details">
<br />
<h5>{tag_name}</h5>
<h4>{tag_custom3}</h4>
<br />
<div class="description">
<p2>{tag_description}
<br />
<br />
<p5>Size:</p5>
{tag_custom1}
<br/>
<p5>Colour:</p5>
{tag_custom2}
<br/>
<p5>Materials:</p5>
{tag_custom4}</p2>
</div>
<ul>
    <li class="price"><strong>{tag_saleprice} <h9>(inc. GST)</h9></strong></li>
    <li class="instock"><p5>In Stock:</p5> <p2>{tag_instock}</p2></li>
    <li class="quantity"><p5>Quantity:</p5> {tag_addtocartinputfield}</li><br/>
    <li class="quantity">{tag_addtocart,<img alt="" src="/images/btn-add-cart.gif" />}</li>
    </ul>
</div>
</div>
but still not working

I want to load external content, which is a dynamic animation containing scripts js and css.

Edge Animate CC 2014 - code (eg. compositionReady). How to enter the code to work.
Edge Animate - compositionReady
sym.$("container01").load("page.html #box01");
This is the file to be loaded - page.htm
<head>
<script src="http://example.com/inc/carousel.js?ver=4.1"></script>
</head>
Body
<body>
<div id="box01">
<style type="text/css" media="screen">
#box01 { height: 1%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px; }
</style>
<script>
jQuery(document).ready(function(){jQuery('#gallery').carousel({ buttons: true, interval: true, });});
</script>
</div>
</body>
On the page.html and ID = "box01" is dynamic content (gallery)
which loads a by means of an additional js script.
How do I load the page to see it animate edge?
I load through an iframe, but I need only a part of the page. So one div.
Something is missing, as in this writing is not working.
Is loaded into the container only one photo and no animation offset.
I greet.

If you're using Fluid Grid Layouts, none of these methods will work. I think the very best you can do is determine the min-height required for desktops & tablets. Mobile devices don't need min-height because those divisions will stack on top of each other.
To illustrate with a working example,
http://alt-web.com/FluidGrid/Fluid2.html
The relevant CSS code:
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
.gridContainer >div {min-height: 255px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 1025px) {
.gridContainer >div {min-height: 325px;}
Nancy O.

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

Document.ready() in jQuery

Similar Messages

Maybe you are looking for