RN_MODULE_HEAD and jquery

Palbin · Posted: Sun Jan 17, 2010 5:43 pm

Try this

Code:

   //Create tool tips
   $("li[title]").cluetip( {
      splitTitle: "|",
      arrows: true,
      dropShadow: false,
      positionBy: "mouse",
      cluetipClass: "rounded"
   });

Palbin · Posted: Sun Jan 17, 2010 5:57 pm

I don't think you are doing your selector right $("li.title"). If you already know the following please disregard. Your selector is looking for

Code:

<li>

tags with a class of "title" ie

Code:

I don't see any of these.

Examples:
$("li#title") - Looks for an li tag with id="title". It should only find one since you should not have multiple elements with the same id.

$("li.title") - Will find all li tags with class="title".

$("li[title]") - Will find all li tags with an attribute of title defined (This is the one I think you want to be using.)

The second issue I see is that you are not defining these class/attributes to the li tags, but the label tags within. So you need to either move them to the li tag or change your selector to $("label[title]")

fkelly · Posted: Sun Jan 17, 2010 6:38 pm

Bingo! Making the rc_header.php use inline JS seems to have done the trick.

/jquery.cluetip-min.css is (I'm pretty sure) just a minimized version of /jquery.cluetip.css so either should work ... no? with the minimized one being slightly more efficient.

The a (anchor) tag works but the li one does not. I think that's because there is a style for "a" in the cluetip.css file. I'm working with the non-minimized one and trying by experiment to figure out how this all works. If I modify the

Code:

.cluetip-default #cluetip-title a {
xolor: #d9d9c2;
color: #000000;
font-size: 0.95em;
}

in the css file in any way for the #cluetip-title I don't seem to get any effect. I tried boosting the font-size to something huge just to see and that didn't take either. The theme css file seems to control the presentation of the title a. However, the jquery cluetip for my anchor does now work. I guess I need to get my jquery book out.

fkelly · Posted: Sun Jan 17, 2010 6:49 pm

No, actually, if I modify the rc_header.php to do this:

Code:

<?php
$inlineJS = '
<script type="text/javascript">
$(function() {
$("label.title").cluetip({splitTitle: "|"});
});
$(function() {
$("a.title").cluetip({splitTitle: "|"});
});
</script>';
addJSToHead($inlineJS, 'inline');
?>

I get jquery cluetips for both the label element and the anchor element. So that's cool. Now to understand the mechanism better. Thanks for all the help.

fkelly · Posted: Mon Jan 18, 2010 9:27 am

Looking further in the light of day and playing with different versions of view source (actually editing them and reloading so I could see the differences).

There was genius at work in designing the approach we've taken for 2.4 and up but it's difficult for us mortals to get our hands around (obviously from the length of this thread). Please bear with me and let's start with header.php:

down at line 89 of my 2.40.01 version we do this:

Code:

if (defined('RN_MODULE_HEAD')) include_once 'modules/' . $name . '/' . RN_MODULE_HEAD;
writeHEAD();

The writehead function is in mainfile and does this:

Code:

Looking at that sequence, any javascript code you define in RN_MODULE_HEAD is going to go up NEAR THE TOP of your head section before the contents of headCSS and headJS arrays are included. So, if you need your code AFTER THE jquery related includes you need to do what Palbin suggested earlier in the thread -- write your RN_MODULE_HEAD like this (for example):

Code:

<?php
$inlineJS = '
<script type="text/javascript">
$(function() {
$("label.title").cluetip({splitTitle: "|"});
});
$(function() {
$("a.title").cluetip({splitTitle: "|"});
});
</script>';
addJSToHead($inlineJS, 'inline');
?>

And it helps to understand what the addJSTohead mainfile function does, which briefly is to build an array of Javascript code that will LATER get included by the writeHEAD function. In essence your Javascript code is being dumped into an array of contents that will be included later. If you take the approach that I was trying of writing your MODULE_HEAD code like this:

Code:

<?php
echo '
<script language="JavaScript" type="text/javascript">
$(function() {
$("a.title").cluetip({splitTitle: "|"})
});
</script>';
?>

Then when module head is included it will dump the Javascript code out directly BEFORE writeHEAD has a chance to process it.

Now, I'm sure there may be some circumstances where you might want some Javascript code to go at the top of the Head section and then some after the jquery and other includes. This should be doable by just using the two different approaches.

At least at this point I can get some jquery code to execute and with that to start with can explore further. Perhaps down the road we can (a) expand the wiki to give examples or (b) write a sample jquery module that illustrates the various approaches that can be taken. I'll be glad to help once I learn a good bit more.

fkelly · Posted: Mon Jan 18, 2010 11:11 am

I'm trying now to modify the cluetip.css file. I am just trying at this point to track down how this thing works and no modifications to the css file seem to have any effect on the appearance of my cluetips. I am using the non-minified one. If I eliminate it entirely from being included I get kind of a transparent cluetip so I know that it has some effect. But I'd assume (incorrectly that if I went to):

Code:

.cluetip-default #cluetip-title a {
color: #d9d9c2;
font-size: 0.95em;
}

and modified the font-size to 4.95 ems I'd see something humongous on my page. I've tried clearing cache, shutting down Firefox and the like. I even tried IE but I can see no effect of changing the css file.

I just want to make sure I am not beating my head against a wall unnecessarily. If we are pulling the stylesheet via AJAX or something like that I could be changing the css file till the cows come home to no effect.

spasticdonkey · Posted: Mon Jan 18, 2010 11:21 am

I ran into issues with inherited classes, where it was pulling the id or class from a <div> that the element was nested in. The firebug addon for mozilla was really handy for tracking these css issues as they compound and get confusing real quickly....

So if you have firebug you can right click on any page element and choose "inspect element" and you will see all the associated style info. You may see that it was being overridden by another class.. just a suggestion, but this was exactly what I was talking about with it not being as easy to implement as boxover.. But once it's working it's very nice... Smile

fkelly · Posted: Mon Jan 18, 2010 3:20 pm

I run 64bit windows with Mozilla. Previous attempts to install Firebug had dead ended. Firebug would install but wouldn't start. Worse, firebug did something that screwed up Javascript applications in some sites I used ... they wouldn't start either. And if you uninstalled firebug it didn't fix the Javascript problem. You had to create an entirely new Mozilla profile and then re-import your settings to fix it.

After I read your suggestion I decided to bite the bullet and try again. Again no luck. Googling around I came up with one suggestion to install the 64bit version of Mozilla known as Namoroka. Did that and all is working well with Firebug. Yeah!

Using Firebug I've figured out that the default class that cluetips is using is:

Code:

.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 4.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}

from the cluetips.css file (note I boosted the font-size so that even I could see when my changes were taking effect). Also, it took it a while to sink in here that the classes in the cluetips css file were only affecting what was in the cluetip box. I've also been able to apply css code to the rc_header.php javascript that I'm using. So that gives a little control and makes me feel like I'm really doing a bit of jquery.

Someone might ask "what's wrong with the default values of cluetips" and the answer is really nothing. I just need something to practice on.

spasticdonkey · Posted: Mon Jan 18, 2010 4:12 pm

fkelly wrote:

Someone might ask "what's wrong with the default values of cluetips" and the answer is really nothing. I just need something to practice on.

Cool sounds like you just "having fun" now.. Very Happy

Although I think if the cluetips are viewable by the public they should be styled by theme, that's why I like RN_MODULE_CSS for that....

define ('RN_MODULE_CSS','yourfile.css');

since it will look in
themes/YOUR_THEME/style/
for the file..

I wouldn't want light blue cluetips in the CT_RN theme, for instance.

Guardian2003 · Posted: Mon Jan 18, 2010 4:15 pm

I had similar issues when developing a module where the JS I needed was getting loaded before the main jquery library but I didn't look into it any further and just made a modified header.php for the module and used that instead.
Maybe to remove any problematic situations, it might be possible to add an integer to the aray building to force a specific load order e.g.

Code:

addJSToHead('includes/jquery/jquery.js', 'file', '1');
addJSToHead('includes/jquery/jquery.cluetip.min.yui.js', 'file', '2');

This could then also be used to ovverride any hard coded loading order in 'core' files i.e. jquery or jquery extensions/classes

Palbin · Posted: Mon Jan 18, 2010 5:18 pm

As long as in you include the following in your code it "should" load currently I believe.

Code:

addJSToHead('includes/jquery/jquery.js', 'file');
addJSToHead('includes/jquery/jquery.cluetip.min.yui.js', 'file');

The key is not taking for granted that some other code is loading the library.

fkelly · Posted: Tue Jan 19, 2010 8:40 am

Making progress, but having some difficulty getting my head around the jquery css and how to refer to it in the header js file. Some of this is due to my lack of expertise with css but I've been googling and reading and still have questions.

The jquery cluetip.css has a section like this:

Code:

.cluetip-default {
background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 4.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}
.cluetip-default #cluetip-title a {
color: #d9d9c2;
font-size: 0.95em;
}
.cluetip-default #cluetip-inner {
padding: 10px;
font-size: 4.2em;
}
.cluetip-default div#cluetip-close {
text-align: right;
margin: 0 5px 5px;
color: #900;
}

By my reading something like ".cluetip-default #cluetip-title a" would be read as "the class is "cluetip-default" and the id is #cluetip-title a" -- or does the space delimiter before the "a" do something different to it?

More to the point, how would you set up your html to refer to the different classes here? My header php file within my module does something like this:

Code:

$inlineJS = '
<script type="text/javascript">
$(function() {
$("#xyz").cluetip({splitTitle: "|"});
});
$(function() {
$("a.title").cluetip({splitTitle: "|"});
});
</script>';
addJSToHead($inlineJS, 'inline');
?>

I've been fooling with ids and if I give a label within my code the id 'xyz'
I can get the jquery to recognize that. I can even add the jquery css to it, something like:

$("a.title").cluetip({splitTitle: "|"}).css("font-size", .4em)

and it will modify the font of the label but it will have no effect on the cluetip itself. The cluetip seems to be picking up the font-size from the class ".cluetip-default #cluetip-inner {" ...

Perhaps I need to look in the Javascript to figure out how this works? Or perhaps I could put the question this way ... what would the html be to reference back to: ".cluetip-default #cluetip-title a {" ... in other words a cluetip title with a link ('a'). Or if I wanted my cluetips for a elements to be different from my cluetips for label elements, is there an easy way to do that using the pre-existing classes.

TIA.

spasticdonkey · Posted: Wed Jan 20, 2010 3:43 am

If I understand correctly, you are having trouble styling the cluetip differently for elements and label items? Try this, where yourfirststyle and yoursecondstyle are your different cluetip styles

Code:

$inlineJS = '
<script type="text/javascript">
$(function() {
$("#xyz").cluetip({cluetipClass: 'yourfirststyle',splitTitle: "|"});
});
$(function() {
$("a.title").cluetip({cluetipClass: 'yoursecondstyle',splitTitle: "|"});
});
</script>';
addJSToHead($inlineJS, 'inline');
?>

You can look at the jtip or rounded theme in the css for examples....

fkelly wrote:

By my reading something like ".cluetip-default #cluetip-title a" would be read as "the class is "cluetip-default" and the id is #cluetip-title a" -- or does the space delimiter before the "a" do something different to it?

I would kind of look at it like an "if" statement
If the class is cluetip-default, and the id is cluetip-title, and if it's a link, do this... For example you could build upon this giving different styles to links within class cluetip-default and id cluetip-title, depending or whether the links is unvisited, visited, hover, or active...

Code:

/* unvisited link */
.cluetip-default #cluetip-title a:link {color: #d9d9c2;}
/* visited link */
.cluetip-default #cluetip-title a:visited {color: #000000;}
/* mouse over link */
.cluetip-default #cluetip-title a:hover {color: #ffffff;}
/* selected link */
.cluetip-default #cluetip-title a:active {color: #012345;}

Dawg · Posted: Tue Jan 26, 2010 5:31 am

There are some very DRASTIC differences between my RN and the latest and greatest RN concerning Jquery. I am running jQuery 1.2.6, where RN latest is running jQuery JavaScript Library v1.3.2

I do not even think I have the function addCSSToHead

All of this needs to be stand alone....

Hmmmm....I will have to think about this.

Dawg