Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> FCKeditor/WYSIWYG Issues
Author Message
nuken
RavenNuke(tm) Development Team


Joined: Mar 11, 2007
Posts: 2024
Location: North Carolina

PostPosted: Wed May 13, 2009 3:58 pm Reply with quote

Here is an easy way to utilize the boxover.js with links and images in the nukeWYSIWYG editor.

Image

In either Link Properties or Image Properties under the Advanced tab, you can put in the Advisory Title field

Code:
header=[] body=[]


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:
Image

_________________
Only registered users can see links on this board! Get registered or login! 
View user's profile Send private message Send e-mail Visit poster's website
kguske
Site Admin


Joined: Jun 04, 2004
Posts: 6383

PostPosted: Thu May 14, 2009 10:04 am Reply with quote

Very nice! Thanks for posting this.

_________________
I google, therefore I exist...
Only registered users can see links on this board! Get registered or login!
 
View user's profile Send private message
spasticdonkey
RavenNuke(tm) Development Team


Joined: Dec 02, 2006
Posts: 1693
Location: Texas, USA

PostPosted: Thu May 14, 2009 10:25 pm Reply with quote

yes, very nice! i use boxover for a variety of purposes, so though I would share too Smile

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=[&lt;img src=&quot;images/image.png&quot;&gt;] singleclickstop=[On]" border="0" />


Result
Image

notice you can use html in the boxover header and body, just have to replace < " > with &lt; &quot; &gt; and do not use the [ or ] characters Smile
 
View user's profile Send private message Visit poster's website
kguske
PostPosted: Fri May 15, 2009 4:33 am Reply with quote

Also nice, thanks! Maybe we should title this: "Boxover: it's already there so why not use it?" Smile
 
nuken
PostPosted: Fri May 15, 2009 5:21 am Reply with quote

Wow... That is very cool spastic. Very useful little piece of javascript.
 
spasticdonkey
PostPosted: Fri May 15, 2009 7:32 am Reply with quote

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=[&lt;img src=&quot;images/ww2/medium/ww2-126.jpg&quot; width=&quot;400&quot; /&gt;] 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:
Image
 
kguske
PostPosted: Fri May 15, 2009 7:44 am Reply with quote

Sweet! A different type of "lightbox" function. More choice = better.
 
CodyG
Life Cycles Becoming CPU Cycles


Joined: Jan 02, 2003
Posts: 712
Location: Vancouver Island

PostPosted: Fri May 15, 2009 9:23 am Reply with quote

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 
View user's profile Send private message
spasticdonkey
PostPosted: Fri May 15, 2009 9:27 am Reply with quote

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
PostPosted: Fri May 15, 2009 9:33 am Reply with quote

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
PostPosted: Fri May 15, 2009 9:36 am Reply with quote

You got to love the RavenNuke bling.... Great idea of utilizing the boxover.js Spastic. I'm sure many users will thank you.
 
CodyG
PostPosted: Fri May 15, 2009 10:28 am Reply with quote

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
PostPosted: Fri May 15, 2009 10:38 am Reply with quote

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
PostPosted: Fri May 15, 2009 10:56 am Reply with quote

oops.... I changed it. Thanks.
 
CodyG
PostPosted: Fri May 15, 2009 11:19 am Reply with quote

I get an answer... I have another question. Wink

in boxover.js
on line 35
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif">&nbsp;&nbsp;'+dvHdr.innerHTML;

What does it mean and where is the info.gif?
 
spasticdonkey
PostPosted: Fri May 15, 2009 12:28 pm Reply with quote

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 Smile

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
PostPosted: Fri May 15, 2009 1:50 pm Reply with quote

Well since we are brainstorming here for all things boxover, here's another Smile

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 Smile

Mouseover module descriptions!! Smile
Image

blocks/block-Modules.php
FIND:

Code:
/* Now we make the Modules block with the correspondent links */


$content .= '<strong><big>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
        } elseif ($view == 2 AND is_admin($admin)) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'">'.$m_title2.'</a><br />';
        } elseif ($view > 3 AND in_groups($groups)) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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 Smile

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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
        } elseif ($view == 2 AND is_admin($admin)) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
        } elseif ($view > 3 AND in_groups($groups)) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
        }
    }
}
 
nextgen
Worker
Worker


Joined: Sep 28, 2006
Posts: 227
Location: Maryland

PostPosted: Fri May 15, 2009 2:52 pm Reply with quote

some excellent ideas here guys. Thanks so much for these.

_________________
alterednuke.com Your source for Ravennuke themes. 
View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger MSN Messenger
CodyG
PostPosted: Fri May 15, 2009 5:28 pm Reply with quote

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
PostPosted: Fri May 15, 2009 5:58 pm Reply with quote

cool... Smile
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 Rolling Eyes

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 Smile

Image

btw, i think the problem atm with sourceforge is the subdomains... try this route for DK Only registered users can see links on this board! Get registered or login!
 
Guardian2003
Site Admin


Joined: Aug 28, 2003
Posts: 6793
Location: Ha Noi, Viet Nam

PostPosted: Sat May 16, 2009 1:38 am Reply with quote

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.
 
View user's profile Send private message Send e-mail
spasticdonkey
PostPosted: Sat May 16, 2009 10:35 am Reply with quote

nuken wrote:
You got to love the RavenNuke bling....

maybe we need a RavenNuke Bling forum Smile

I should really be working on other things this morning, but this is so much more fun
Smile

If you really want to be descriptive about your modules, how about adding a module icon to the mouseover?

Image

Image

i used some tango icons for the sake of a quick example, but you could really go whatever direction you want Smile 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 Only registered users can see links on this board! Get registered or login!

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 Smile

Replace as above (this only displays to reg. users)
Code:
/* Now we make the Modules block with the correspondent links */


$content .= '<strong><big>&middot;</big></strong>&nbsp;<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=[&lt;div style=&quot;FLOAT: left; MARGIN: 2px 2px 0.2em 0.2em; WIDTH: '.$mlogowidth.'px&quot;&gt;&lt;img src=&quot;'.$modlogo.'&quot; height=&quot;'.$mlogoheight.'&quot; width=&quot;'.$mlogowidth.'&quot; border=&quot;0&quot; /&gt;&lt;br /&gt;&nbsp;&lt;/div&gt;'.$modmn.'] singleclickstop=[On]"';
   }else{
   $motitle ='title="'.$m_title2.'"';
   }
    if ($m_title != $main_module) {
        if ($view == 0) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
        } elseif ($view == 2 AND is_admin($admin)) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<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>&middot;</big></strong>&nbsp;<a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a><br />';
        } elseif ($view > 3 AND in_groups($groups)) {
            $content .= '<strong><big>&middot;</big></strong>&nbsp;<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! Smile
 
nextgen
PostPosted: Sat May 16, 2009 8:05 pm Reply with quote

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
PostPosted: Tue Sep 01, 2009 6:41 pm Reply with quote

Hey guys can i use this in the Messages module > For Links etc
 
kguske
PostPosted: Wed Sep 02, 2009 8:39 am Reply with quote

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 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> FCKeditor/WYSIWYG Issues

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©