Can we access content page element from master page using javascript?

Question

Can we access an element of a content page from master page using JavaScript? Suppose I have a link like:<a id="myLink" class="styleLink runat="server"></a> in all my content pages that uses the master page. I want to add one plugin for all links which are having the css class "styleLink". I can do it by adding ('.styleLink').ToolTip() this line in all my content pages. But I want to do it from master page so that plugin will be applied to all the links which are having css class "styleLink" and I need not require to go each content page and add this line of code.Can anyone help me how to do this if it is possible?

Answer 1

in your master page, put your scripts at the bottom, just before the </body> tag and it should work.

at the end of the day, you're master and client pages combine to render one single HTML page.

scripts at the bottom will fire when the page is loaded. If you use a domready event that jQuery has then you could put the scripts anywhere and they should still work.

Answer 2

You could use the livequery plugin for jQuery, located here. You can find how to bind the tooltip function to livequery in the following answer: using-jquery-tooltip-at-runtime-by-livequery

Livequery is a plugin for jQuery which allows you to bind eventhandlers and plugins to content which is loaded in dynamically.

Answer 3

If what you're asking for is that new DOM elements that match a bound selector get the events you had previously assigned to that selector, you just need to update jquery.tooltip.js to handle the nicer features of jQuery 1.4

Open the unminified version in your favorite code editor and make the following replacements (double-quotes encapsulate strings):

".bind(", ".live("
".unbind(", ".die("
".click(", ".live('click', "
".mouseover(", ".live('mouseover', "
".mouseout(", ".live('mouseout', "

jQuery#live is similar to .bind in syntax, however, it applies the event to not just the elements on the current document, but to every element that matches the original selector as well.