| Author |
Message |
nuken
RavenNuke(tm) Development Team
Joined: Mar 11, 2007
Posts: 2024
Location: North Carolina
|
 Posted:
Wed May 13, 2009 3:58 pm |
|
Here is an easy way to utilize the boxover.js with links and images in the nukeWYSIWYG editor.
In either Link Properties or Image Properties under the Advanced tab, you can put in the Advisory Title field
with what ever information between the[] you want to be in the boxover. An easy and neat way to utilize the boxover.js that is already being called in your RavenNuke site.
Example:
 |
_________________
Only registered users can see links on this board! Get registered or login! |
|
  
|
|
kguske
Site Admin
Joined: Jun 04, 2004
Posts: 6437
|
| Posted:
Thu May 14, 2009 10:04 am |
|
Very nice! Thanks for posting this. |
_________________
I search, therefore I exist...
Only registered users can see links on this board! Get registered or login! |
|
|
|
|
spasticdonkey
RavenNuke(tm) Development Team
Joined: Dec 02, 2006
Posts: 1693
Location: Texas, USA
|
| Posted:
Thu May 14, 2009 10:25 pm |
|
yes, very nice! i use boxover for a variety of purposes, so though I would share too 
here's an example of an extra class i added to includes/nukeSEO/nukePIE.css to use as an imageviewer
Code:.nukePIEhdr4 {padding:1px; border:1px solid #000000; background-image: url(background.jpg); color:#000000; width:120px}
.nukePIEbody4 {padding:1px; width:400px}
|
Example of Use
Code:<img src="images/imageSM.gif" width="200" height="109" title="cssbody=[nukePIEbody4] cssheader=[nukePIEhdr4] header=[SPW-251 SdKfz-251] body=[<img src="images/image.png">] singleclickstop=[On]" border="0" />
|
Result
notice you can use html in the boxover header and body, just have to replace < " > with < " > and do not use the [ or ] characters |
| |
|
|
|
|
kguske
|
| Posted:
Fri May 15, 2009 4:33 am |
|
Also nice, thanks! Maybe we should title this: "Boxover: it's already there so why not use it?" |
| |
|
|
|
|
nuken
|
| Posted:
Fri May 15, 2009 5:21 am |
|
Wow... That is very cool spastic. Very useful little piece of javascript. |
| |
|
|
|
|
spasticdonkey
|
| Posted:
Fri May 15, 2009 7:32 am |
|
Here's another example of using boxover as an imageviewer, but with a border instead of floating...
CSS
Code:.nukePIEhdr3 {padding:1px; border:1px solid #000000; background-image: url(camoback3.jpg); color:#000000; width:400px}
.nukePIEbody3 {border:1px solid #000000; width:400px}
|
HTML
Code:<A HREF="ww2archives-world-war-II-photos.html" title="cssbody=[nukePIEbody3] cssheader=[nukePIEhdr3] header=[126. USS SHAW exploding during the Japanese raid on Pearl Harbor. December 7, 1941. 80-G-16871] body=[<img src="images/ww2/medium/ww2-126.jpg" width="400" />] singleclickstop=[On]"><IMG SRC="images/ww2/small/ww2-126H.jpg" HEIGHT=75 WIDTH=94 BORDER=0 /></A>
|
NOTE: Make sure the popup image is the same width as the div, in this case 400px.
RESULT:
 |
| |
|
|
|
|
kguske
|
| Posted:
Fri May 15, 2009 7:44 am |
|
Sweet! A different type of "lightbox" function. More choice = better. |
| |
|
|
|
|
CodyG
Life Cycles Becoming CPU Cycles
Joined: Jan 02, 2003
Posts: 714
Location: Vancouver Island
|
| Posted:
Fri May 15, 2009 9:23 am |
|
Can boxover.js be used for links?
I've tried something like this and it doesn't work.
Code:<a href="domain.com/module/somemodule/index.php" header=[something] body=[something]> somelink</a>
|
|
_________________
"We want to see if life is ubiquitous." D.Goldin |
|
|
|
|
spasticdonkey
|
| Posted:
Fri May 15, 2009 9:27 am |
|
yes it can be used for links, try:
<a href="index.php" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=[something] body=[something] singleclickstop=[On]"> somelink</a> |
| |
|
|
|
|
nuken
|
| Posted:
Fri May 15, 2009 9:33 am |
|
it has to be called under title. title="header=[something] body=[something]"
In the nukeWYSIWYG editor under image properties Advanced tab in the Advisory Title field all you need to do is put Code:header=[something] body=[something]
|
and it will use the default colors for boxover.js which are light blue header and white body. That can be changed in the boxover.js file. |
Last edited by nuken on Fri May 15, 2009 10:55 am; edited 1 time in total |
|
|
|
|
nuken
|
| Posted:
Fri May 15, 2009 9:36 am |
|
You got to love the RavenNuke bling.... Great idea of utilizing the boxover.js Spastic. I'm sure many users will thank you. |
| |
|
|
|
|
CodyG
|
| Posted:
Fri May 15, 2009 10:28 am |
|
When keeping it simple is my fav motto, I don't know why I love the bling, I just do. :-/
Quite a few of my sites are geared toward the elders. They have complained that the header links are not clear enough. For example: Calendar.
You and I would think this word is explanation enough but not everyone agrees. So, I'm going to try the boxover.js method to expand Link awareness: ie: Calendar will boxover with View Activities | Submit an Event.
I hope it works with a maxed out accessibility browser. |
| |
|
|
|
|
CodyG
|
| Posted:
Fri May 15, 2009 10:38 am |
|
nuken... thanks for the clue and = signs were required
for example.
Code:<a href="modules.php?name=GCalendar" title="header=[Calendar] body=[View Activities | Submit an Event]">This Month</a>
|
|
| |
|
|
|
|
nuken
|
| Posted:
Fri May 15, 2009 10:56 am |
|
oops.... I changed it. Thanks. |
| |
|
|
|
|
CodyG
|
| Posted:
Fri May 15, 2009 11:19 am |
|
I get an answer... I have another question. 
in boxover.js
on line 35
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif"> '+dvHdr.innerHTML;
What does it mean and where is the info.gif? |
| |
|
|
|
|
spasticdonkey
|
| Posted:
Fri May 15, 2009 12:28 pm |
|
i think that is used for the nukeSEO admin boxover
and boxover will work with any type of title, div, image, a, or anything else that has a title field
the only downside to boxover is search engines will index the title as it appears, since it doesn't load the js file... But I'm willing to live with that.. |
| |
|
|
|
|
spasticdonkey
|
| Posted:
Fri May 15, 2009 1:50 pm |
|
Well since we are brainstorming here for all things boxover, here's another
This one is dependant on the Only registered users can see links on this board! Get registered or login! module from Slaytanic Scripts; so if you have it setup give it a spin. Just made a couple minor edits to the current modules block, and voila
Mouseover module descriptions!!
blocks/block-Modules.php
FIND:
Code:/* Now we make the Modules block with the correspondent links */
$content .= '<strong><big>·</big></strong> <a href="index.php">'._HOME.'</a><br />';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
}
}
}
|
Replace with:
Code:/* Now we make the Modules block with the correspondent links */
$content .= '<strong><big>·</big></strong> <a href="index.php">'._HOME.'</a><br />';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
$resultmn = $db->sql_query('SELECT description FROM ' . $prefix . '_keywords WHERE title=\'' . $m_title . '\'');
$rowmn = $db->sql_fetchrow($resultmn);
$modmn = $rowmn['description'];
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a><br />';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a><br />';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a><br />';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a><br />';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a><br />';
}
}
}
|
one may wish to edit this mod so that it only displays to registered users, for SEO reasons... i actually used this for something else and threw it together in a few minutes
so here's that edit, making it display only to registered users, replace as above using this instead:
Code:/* Now we make the Modules block with the correspondent links */
$content .= '<strong><big>·</big></strong> <a href="index.php">'._HOME.'</a><br />';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
if(is_user($user)){
$resultmn = $db->sql_query('SELECT description FROM ' . $prefix . '_keywords WHERE title=\'' . $m_title . '\'');
$rowmn = $db->sql_fetchrow($resultmn);
$modmn = $rowmn['description'];
$motitle ='title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]"';
}else{
$motitle ='title="'.$m_title2.'"';
}
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
}
}
}
|
|
| |
|
|
|
|
nextgen
Worker
Joined: Sep 28, 2006
Posts: 241
|
| Posted:
Fri May 15, 2009 2:52 pm |
|
some excellent ideas here guys. Thanks so much for these. |
_________________
alterednuke.com Your source for Ravennuke themes. |
|
|
|
|
CodyG
|
| Posted:
Fri May 15, 2009 5:28 pm |
|
That menu boxover is exactly the type of functionality I'm looking for!!
Unfortunately, the site for the Dynamic Keywords module is down, atm. I'll try later. |
| |
|
|
|
|
spasticdonkey
|
| Posted:
Fri May 15, 2009 5:58 pm |
|
cool...
I'm not an SQL expert so I have no idea how efficient the DB calls are, but if you are displaying to reg. users only it couldn't be too detrimental to your site performance. Maybe someone with more knowledge in that area can let me know how I did 
Even if you later decide to use nukeSEO Dynamic HEAD Tags (of which I'm salivating over) you should still be able to run Dynamic Keywords (DK) too, just remove the core edits. Might actually be better, as you can tailor your DK descriptions more toward humans, and forget the SEO...
On a related note, you might find it's difficult to come up with descriptions for every module (i did, have 67 modules on one site, lol), but the boxover script degrades nicely, if the [body] is missing it isn't displayed
btw, i think the problem atm with sourceforge is the subdomains... try this route for DK
http://sourceforge.net/project/showfiles.php?group_id=154326&package_id=206774 |
| |
|
|
|
|
Guardian2003
Site Admin
Joined: Aug 28, 2003
Posts: 6799
Location: Ha Noi, Viet Nam
|
| Posted:
Sat May 16, 2009 1:38 am |
|
This is fantastic to see community members contributing their idea's on getting the most from what is already available.
I have made this post a Sticky. |
| |
|
|
|
|
spasticdonkey
|
| Posted:
Sat May 16, 2009 10:35 am |
|
| nuken wrote: | | You got to love the RavenNuke bling.... |
maybe we need a RavenNuke Bling forum
I should really be working on other things this morning, but this is so much more fun
If you really want to be descriptive about your modules, how about adding a module icon to the mouseover?
i used some tango icons for the sake of a quick example, but you could really go whatever direction you want For this example we'll use .png images but that can be changed in the edit below. Just keep them all the same px size and format.
Create a folder images/modlogo and add an image for each module, naming it as it appears in the module directory, i.e. Members_List.png , Your_Account.png , etc...
here is an example with only a few images
http://www.rtsforce.com/images/icons/mini3/modlogo.zip
it is also set to default to logo.png for any modules that don't have an icon
so after you have been playing with icons for hours (lol) and created one for each module in the menu, you are ready for the edit
Replace as above (this only displays to reg. users)
Code:/* Now we make the Modules block with the correspondent links */
$content .= '<strong><big>·</big></strong> <a href="index.php">'._HOME.'</a><br />';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
if(is_user($user)){
// logo config
$mlogowidth = 32; // logo width
$mlogoheight = 32; // logo height
$mlogoext = 'png'; // logo file extension i.e. jpg gif png
// logo config
$modlogo = "images/modlogo/$m_title" . ".$mlogoext";
if(!(file_exists($modlogo))) $modlogo = "images/modlogo/logo.$mlogoext";
$resultmn = $db->sql_query('SELECT description FROM ' . $prefix . '_keywords WHERE title=\'' . $m_title . '\'');
$rowmn = $db->sql_fetchrow($resultmn);
$modmn = $rowmn['description'];
$motitle ='title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=[<div style="FLOAT: left; MARGIN: 2px 2px 0.2em 0.2em; WIDTH: '.$mlogowidth.'px"><img src="'.$modlogo.'" height="'.$mlogoheight.'" width="'.$mlogowidth.'" border="0" /><br /> </div>'.$modmn.'] singleclickstop=[On]"';
}else{
$motitle ='title="'.$m_title2.'"';
}
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<strong><big>·</big></strong> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
}
}
}
|
edit this part of the code to suit your needs, defining the image width, height, and file extension
Code: // logo config
$mlogowidth = 32; // logo width
$mlogoheight = 32; // logo height
$mlogoext = 'png'; // logo file extension i.e. jpg gif png
// logo config
|
one last note, the taller your image, the longer your description will have to be, or the image will hang over the bottom side of the boxover... have fun! |
| |
|
|
|
|
nextgen
|
| Posted:
Sat May 16, 2009 8:05 pm |
|
A word of warning for Autotheme users. Most of the above edits will not show when using a basic autotheme. You will need to do some extra coding in your autothemes config to have the edits to work. |
| |
|
|
|
|
nextgen
|
| Posted:
Tue Sep 01, 2009 6:41 pm |
|
Hey guys can i use this in the Messages module > For Links etc |
| |
|
|
|
|
kguske
|
| Posted:
Wed Sep 02, 2009 8:39 am |
|
More RavenNuke(tm) bling on the way with nukeSEO(tm) DH!
nukeSEO(tm) DH requires nukeNAV(tm), which uses 2 jQuery plugins: ColorBox (for modal popups) and clueTip (for tooltips).
ColorBox will be loaded all the time and will enable lightbox popups for images simply by adding a link to the image with the class colorbox on the link. BLING!
Last night, I tested some simple changes to FCKeditor, based on nuken's cool Slimbox and Facebox addons for nukeWYSIWYG(tm), to make it even easier to take advantage of this and even have image galleries (popup an image, then have next, previous to show the next image - or whatever link in the modal popup) simply by specifying the same rel= attribute on the links. BLING! BLING!
clueTip can replace BoxOver and has an advantage over BoxOver: it uses the same title tag to define the content of the popup, but instead of using header=[something] body=[something], it uses a delimiter | between the popup title and body for even better SEO, so something like this:
Code:... title="Tooltip Title|Tooltip body"...
|
BLING! BLING! BLING!
One disadvantage of clueTip vs. Boxover: you can't define the popup style on the fly in clueTip. It needs a class with existing CSS.
If I get a chance, I'll do a little YouTube demo... |
Last edited by kguske on Wed Sep 02, 2009 1:09 pm; edited 1 time in total |
|
|
|
|
|
|
![[Valid RSS]](https://www.ravenphpscripts.com/images/valid-rss.png "Validate my RSS feed"){kind=small}
