Topic: Vertical Fly-Out Menu in a Block

[jjwinc]

My ultimate goal is to have a "Member's Only" Left Block that contains a vertical flyout navigation bar which will be seen only after the user logs in. 

I built the block and the flyout menu (using PluginLab's Vertical CSS Image Flyout Menu Maker for Dreamweaver), but, what I figured would happen is happening.  When I mouse over a menu item that has a sub menu, the flyout isn't flying out on top of all other items, but is rather "flying under" causing a scroll bar to be shown.

I am by no means a CSS expert, but I do know my way around a little.  I played with the z-index, but that's not cutting it.  I started hunting for another CSS Property that I could change for the block itself, but before I dig into all of that, I wanted to see if anyone knew how to fix this easily.

If you want to see what I'm talking about, you can check it out here:

http://www.atu85.org/v2
ID: test
PW: testing

[jjwinc]

I need to add an update to this posting.  Turns out that the Left Block Vertical CSS menu is working just fine in IE, but there appears to be an issue when displaying it in Firefox.  IE layers the menu OVER the other blocks, while Firefox displays it under the Left Block, causing scroll bars.  This probably means that the PluginLab plug-in I am using for Dreamweaver is the culprit, not SP.

If anyone has seen this behavior before and could offer guidance, I'm all ears. 

[Eliana Tamerin]

Do you mind posting the css of the menu and any other css you changed?

[AngelinaBelle]

I see this issue in IE8 running as IE8, but not when running in IE7 compatability.
Just looking at it in IE8 developer tools, I can see that the z-heights are a little odd, but I cannot figure out why.  You'd think putting the submenus in divs with z=50 would make them float way out on top of all the other divs, but IE8 says the divs inside the divs inside the z=50 divs have z=0 somehow.
 
I'm not sure if IE 8 is rendering it correctly or not.

[AngelinaBelle]

There's another example of a similar problem at http://simpleportal.net/index.php?topic=5347.0
 

[jjwinc]

Do you mind posting the css of the menu and any other css you changed?

Thank you for the offering of help.  I haven't added any custom CSS, but here's the CSS that's generated by the the VI Menu plug-in, which ultimately calls javascript to do the bulk of the work.  If you'd like to see the script, too, let me know.  I also have a ticket in with the PluginLab help desk. 

Code: [Select]

<div id="PLVIMGMCWeZCDiv" style="position:relative;width:150px;height:175px;z-index:50;white-space:nowrap;direction:ltr;">
  <div id="PLVIMGMCWeZCMain" style="width:100%;height:100%;">
    <ul style="margin:0px;padding:0px;font:normal normal normal 12px Verdana,Arial,Helvetica,sans-serif;">
  <li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="http://atu85.org/v2/index.php?action=profile" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">My&nbsp;Profile</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="http://atu85.org/v2/index.php?action=pm" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">My&nbsp;Messages</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="http://atu85.org/v2/index.php?action=calendar" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Events&nbsp;Calendar</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Newsletter</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Political&nbsp;Action</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Resources</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">ATU&nbsp;Business</a></li>
</ul>
</div>
<script type="text/javascript" src="../Pluginlab/Scripts/PLVIM.js">/* PLVIMMenu script ID:PLVIMGMCWeZC */</script>
</div>

[AngelinaBelle]

Is it possible to force createMenu menues to be vertical?

[jjwinc]

Is it possible to force createMenu menues to be vertical?

I was looking into that...so I could simply do away with the external plugin/javascript all together.  Anyone know if I can mod createMenu easily to make it vertical?  (looking at the code now)


<edit> Doing a little learnin' today, looking into the possibility of scrapping the VI Menu from the DW plug-in and just using createMenu from within SMF. 

In Subs_Menu.php, I see there are two options for a "menu_Type", dropdown and sidebar.  I'm not really sure how to form that call to createMenu() in a Left Side Block to change those values, and I want to make sure my assumptions are correct. 

[antechinus]

Eliana pointed me at this. Flyout  and/or drop menus need to have absolute positioning if they have to overlap other elements. Just using z-index by itself is not enough. You need to use z-index and absolute positioning. Take a look at the css for the RC3 Curve menus (which still need a bit of tweaking for RC4 but work as is).

Also I think you are on the right path re dumping that plug-in. The code it turned out is rubbish. This is quite usual for any "site builders" or whatever that I've seen. They all seem to turn out crappy code.

[AngelinaBelle]

I just worked out today that CreateMenu is used to create the admin and help menu/sidebar.  So that's what the two options do. Might not be exactly what you want.
 
I think the code you want for the fly-out menu might wind up being based on the sp_menu block. If you are using the standard menu bar, all you need to do is customize the CSS.  Otherwise, you'll need to write a function that works from a passed-in array instead of $context['...
 
 

[jjwinc]

I just worked out today that CreateMenu is used to create the admin and help menu/sidebar.  So that's what the two options do. Might not be exactly what you want.
 
I think the code you want for the fly-out menu might wind up being based on the sp_menu block. If you are using the standard menu bar, all you need to do is customize the CSS.  Otherwise, you'll need to write a function that works from a passed-in array instead of $context['...

It took me a bit to realize that the dropdown and sidebar values apply to the state of the menu (collapsed or normal (not collapsed)).  I didn't realize that it applied to just the admin and help menus, though.  Thank you for the info.

Interestingly enough, I added a Simple Portal Menu block, which just takes the main menu and makes it a vertical block and it, too, has the same problem in Firefox.  The flyouts are flying under the frame.  Again, it works fine in IE. 

http://www.atu85.org/v2
ID: test
PW: testing

This leads me to believe that my plug-in for DW may not be the issue.  Is this something that has always been like this?  I see the other thread (that happens to be watching my thread) is having the same issue.

http://simpleportal.net/index.php?topic=5347.msg32478#msg32478

[AngelinaBelle]

I've just had a good look at your site, and poked around in the CSS using the IE8 "developer tools".  I saw that this problem happens when overflow: auto is applied to the <div class="sp_block that contains the menu block code.
 
I'm using SMF 2.0RC3 and SimplePortal 2.3.2, and <div class=sp_block does not appear in the menu block (though it does appear in several other blocks on the portal page http://www.rockhallsailingclub.org/smf2test/ps.php) 
 
I don't know why this causes the problem, but I know that you can get a quick fix this way:
Themes/default/css/portal.css

Code: (find) [Select]

div.sp_block
{
 overflow: auto;
 padding: 0 0.5em;
}


Code: (replace) [Select]

div.sp_block
{
/* overflow: auto; */
 padding: 0 0.5em;
}


[jjwinc]

That worked like a charm, but all of the other blocks had the same property, causing my photo in the Welcome block to spill over outside of the borders.  So...I think we're a lot closer. 

I have learned one thing based on what you just told me.  I learned that IE is doing it incorrectly (ignoring the overflow: auto) and FF is handling it correctly (but we could've probably guessed that). 


In the Block that I have created, can I use the Style Options for Custom Title/Body Style at the bottom to control the overflow?  I saw other posts where you can control the title and body styles, but I think this is different because it's a div that applies to the whole block.

If not, I would like to see something added where I can control this, either in the Style Options area for the block or maybe a tick box asking if you would like overflow to be clipped, auto, visible, etc.

[AngelinaBelle]

There is a report that FF 3.6.3 has the same problem IE8 has.
I think the problems you are having are exactly why overflow was put into the CSS.
You could try resizing your images to make it fit where it should.
 
I hope nathaniel can step in and offer some advice when he gets a chance.
 
I don't have this problem at
rockhallsailingclub.org/smf2test/ps.php
I am running SP 2.3.2 on SMF 2.0RC3, and SP 2.3.2 does not do <div class="sp_block  for the sp_menu block.  I keep getting lost in the code, and cannot find where SimplePortal decides whether or not to wrap the block in "sp_block".
 
 

[jjwinc]

Actually, that would be a good place for me to start.  I need to upgrade from 2.3.1 to 2.3.2.  I had another posting about a problem I had with that upgrade and I got an answer, but I've yet to try it...been pulled this way and that with "life" things. 

Maybe I'll give that a try after the Penguins beat up on the Habs tonight <hockey reference>  Don't worry, no playoff beard here. 

Thank you for all the guidance and input thus far.  It's greatly appreciated.

[jjwinc]

I upgraded to 2.3.2 and I now see what you mean.  The Menu block created through SP does not wrap (overflow off) while the "member's only" block that I created still does.

I'm still sifting through code to see if I could put something together (and my skill level is just enough to get me in trouble).  If someone could lend a hand or offer suggestions, it would be greatly appreciated. 

[jjwinc]

Good morning...

I still do not have a solution to this problem.  Would the next step be for me to post it in Blocks and Modifications or would this be a better candidate for the Bug Report forum? 

[jjwinc]

<crickets>   

[AngelinaBelle]

You are using a custom HTML block for the menu?

The CSS fix I gave above doesn't do the job? Of course, it has to be applied again after the upgrade.
 
If that does not do what you need, then, yes, I think a little custom coding in Portal.template.php could help.

[jjwinc]

The solution you provided above does work, but it impacts all blocks on the page, which causes a problem if the page is resized or if there's an overflow where I'm expecting scroll bars.

I think I'm looking for a fix that will apply to just the menu block that I've built (not the menu block that comes with SP).  I've been pulled in so many directions I haven't had a chance to play with this one in a week or so.  Would you know the area in Portal.template.php that would need to be changed?

Is there any way to check the name of the sp_block before setting the overflow?  Maybe set it to NOT overflow in the CSS and then check the name of the block in hard code and say something like "if <> menu, overflow:auto" or something along those lines?! 

[AngelinaBelle]

I know some block template improvements are coming in 2.4, but I haven't looked at them. That makes me a pretty lousy beta tester. You might put in a feature request to allow the admin to choose whether or not to have the "force scroll bars" CSS class applied to individual blocks.
 
I have thought of a pretty ugly hard-coded way to go about it, but it ought to work.
 
In SimplePortal 2.3.2 for SMF 2.0RC3, in Portal.template.php, you will find

Code: [Select]

$block['type'] == 'sp_menu' in two functions -- template_block_core and template_block_curve.
This is where the code decides to use a different CSS class on the block depending on the value of $block['type'].
 
$block['type'] is not going to help you in this case, of course.
 
But $block['id'] can help you.  Suppose your block id is 86. Then, for template_block_core, you could make a change like:

Code: (find) [Select]

<td class="sp_block_padding', ($block['type'] == 'sp_menu') ? '' : ' sp_block',


Code: (replace) [Select]

<td class="sp_block_padding', (  ($block['type'] == 'sp_menu' || $block['id'] == 86) ? '' : ' sp_block'  ),

For the function template_block_curve, you'd make a similar change. I haven't had a look at that yet. I may not be available to do that for a couple of days, but perhaps, if you get stuck, a dev or experienced community member may be able to give you a couple of pointers.

[jjwinc]

Your suggestion is making sense to me and I'm trying to make the updates, but I'm not seeing the code to which you are referring.  I, too, am running SP 2.3.2 and SMF 2.0RC3. 

First, I only see the $block['type'] == 'sp_menu' once and it's in template_block_core.  Secondly, it looks a little different.  You'll see your coding suggestion in there (block.id=21), but it doesn't do anything on my site.

Code: [Select]

function template_block_core($block)
{
global $settings;
echo '
<div class="', ($block['type'] == 'sp_menu' || $block['id'] == 21) ? '' : 'sp_block', !empty($block['style']['no_body']) ? '' : ' tborder', '">
<table class="sp_block">';


[AngelinaBelle]

That's good -- for non-curve-type themes. For core-type-themes, you need to find the similar thing in function template_block_curve
 
Something like:

Code: (find) [Select]

<div class="', $block['type'] != 'sp_menu' ? 'sp_block' : 'sp_content_padding'


Code: (replace) [Select]

<div class="', ( ($block['type'] == 'sp_menu' || $block['id'] == 21 )? 'sp_content_padding'  : 'sp_block' )

 

[jjwinc]

I'm wondering if I'm not looking at old template or something.  I just double checked to make sure I was running the latest/greatest of everything...and I am.  Here's my entire template_block_curve section found in Portal.template.php in the Themes/default directory.  None of it looks like what you're describing above, though, the one section near the bottom starting with

Code: [Select]

<div id="sp_block_' . $block['id'] . '"', empty($block['style']['body']['class'])
...looks like a section of interest.

Code: [Select]

function template_block_curve($block)

{

global $settings;



if ($block['collapsed'] && empty($block['force_view']))

$block['style']['body']['style'] .= 'display: none;';



if (empty($block['style']['no_title']))

{

echo '

<h3 class="', $block['style']['title']['class'], '"', !empty($block['style']['title']['style']) ? ' style="' . $block['style']['title']['style'] . '"' : '', '><span class="left"></span><span class="right"></span>';



if (empty($block['force_view']))

echo '

<a class="sp_float_right" style="padding-top: 7px;" href="javascript:void(0);" onclick="sp_collapseBlock(\'', $block['id'], '\')"><img id="sp_collapse_', $block['id'], '" src="', $settings['images_url'], $block['collapsed'] ? '/expand.gif' : '/collapse.gif', '" alt="*" /></a>';



echo '

', parse_bbc($block['label']), '

</h3>';

}



echo '

<div id="sp_block_' . $block['id'] . '"', empty($block['style']['body']['class']) ? '' : ' class="' . $block['style']['body']['class'] . '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>

<span class="topslice"><span></span></span>

<div class="sp_content_padding sp_block">';



$block['type']($block['parameters'], $block['id']);



echo '

</div>

<span class="botslice"><span></span></span>

</div>

<br />';

}


[AngelinaBelle]

I forgot you are still at simpleportal 2.3.1.

Code: (find, SimplePortal 2.3.1, template_block_curve) [Select]

<div class="sp_content_padding sp_block">'


Code: (replace) [Select]

<div class="', ( ($block['type'] == 'sp_menu' || $block['id'] == 21 )? 'sp_content_padding'  : 'sp_block' ), '">'

I do recommend coming up to SimplePortal 2.3.2, if at all possible.
 
 

[jjwinc]

Something is amiss...I am running 2.3.2, or at least that's what it says under General Information on the Configuration tab.  Before I do anything, should I fix this?

[AngelinaBelle]

Your profile says you are running SimplePortal 2.3.1, and I just assumed that was true.
 
Please have a look at the file  Portal.template.php and see what it says about version.
 

[jjwinc]

Thanks for the reminder...I updated my Profile.  I  took a look at Portal.template.php and here's what it says at the top:

Code: [Select]

<?php
// Version: 2.0 RC3; Post

[AngelinaBelle]

That looks like the top of Post.template.php.
That happens to me ALL THE TIME.

[jjwinc]

 

How embarrassing...LOL

Code: [Select]

<?php

// Version: 2.3.1; Portal

[AngelinaBelle]

That happens to me all the time. You have there a file from SimplePortal 2.3.1 -- not the latest and greatest.
 
Is that the only one? Or do you have other SimplePortal 2.3.1 files in /Templates/default/ or in /Sources/?
 
You should take a quick peek and decide if you want to manually copy the files into place or uninstall SimplePortal and re-install it (after making sure you have proper permissions, of course).
 
After that, you should have an easier time finding SimplePortal 2.3.2 strings. 

[jjwinc]

The rest of the Portal.xx.php files all say 2.3.2.  I haven't had a chance to check the source directory yet.  I will do so when I'm back at my desk.  I looks like I'll just need to upload Portal.template.php and I should be good.  I'll let you know how it turns out (probably tomorrow).

Thank you again for all the guidance.  It's greatly appreciated.

[AngelinaBelle]

... and then you'll be ready to apply the changes.
 
Enjoy

[jjwinc]

Okay, looks like something didn't take with the last upgrade I performed.  the Portalxx.php files in the Sources directory all have either v2.3 or v2.3.1 in them.  Assuming they should say v2.3.2, I'm going to do an uninstall and reinstall.  I need to browse the documentation before I do to make sure I'm not going to lose my blocks and articles as they stand now.
 

Code: [Select]

<?php

/**********************************************************************************

* PortalMain.php                                                                  *

***********************************************************************************

* SimplePortal                                                                    *

* SMF Modification Project Founded by [SiNaN] (sinan@simplemachines.org)          *

* =============================================================================== *

* Software Version:           SimplePortal 2.3                                    *

* Software by:                SimplePortal Team (http://www.simpleportal.net)     *

or

Code: [Select]

<?php

/**********************************************************************************

* PortalBlocks.php                                                                *

***********************************************************************************

* SimplePortal                                                                    *

* SMF Modification Project Founded by [SiNaN] (sinan@simplemachines.org)          *

* =============================================================================== *

* Software Version:           SimplePortal 2.3.1                                  *

* Software by:                SimplePortal Team (http://www.simpleportal.net)     *

[jjwinc]

I'm happy to report that all of my files are now 2.3.2 AND I installed the coding changes you requested and...<drum roll>...it works in both IE and Firefox!

http://www.bowlthis.com/v2
ID: test
PW: testing


For those of you that may follow this thread, here are the changes that I finally made.  I'm using SMF 2.0 RC3 and SP 2.3.2.  In Portal.template.php in the Themes/Default directory, line 122, I changed this:

Code: [Select]

<td class="sp_block_padding', ($block['type'] == 'sp_menu') ? '' : ' sp_block', empty($block['style']['body']['class']) ? '' : ' ' . $block['style']['body']['class'], '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>';
to this...

Code: [Select]

<td class="sp_block_padding', ($block['type'] == 'sp_menu' || $block['id'] == 21) ? '' : ' sp_block', empty($block['style']['body']['class']) ? '' : ' ' . $block['style']['body']['class'], '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>';
Make sure to put the $block['id'] of the block you want to change (don't leave it 21).  The block ID can be obtained by going into Admin --> Simple Portal --> Blocks and editing the block in question.  The block ID will be displayed in the URL while you're in edit mode.



Next, on line 171, I changed:

Code: [Select]

<div class="', $block['type'] != 'sp_menu' ? 'sp_block' : 'sp_content_padding', '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>';
to this...

Code: [Select]

<div class="', (($block['type'] == 'sp_menu' || $block['id'] == 21) ? 'sp_content_padding' : 'sp_block'), '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>';

This time, please note, not only do you add your block ID, but you also have to switch sp_block and sp_content_padding and put parentheses around everything.  If you copy/paste this code, you should be good (just remember to change the block ID to your block ID.

Also note, change has been made to this code based on the next two follow-up messages.  The code above is correct.



Thank you for all of your help!  On to the next update!   

[jjwinc]

AngelinaBelle,

Okay, so...I got a little too happy, too soon; there's still a problem.  The menu is flying out over the other blocks, but now it appears that ALL blocks have the overflow turned off because we're back to an image in a completely different block overlapping, too.  It's happening in both IE and FF.  It's almost like the Block.ID is being ignored.  The good news is, you have a copy of my code above.  :-) 

I may just add a bunch of blank lines in the Welcome block and call it a day, but since we've (read you've) worked on this so long, I thought I'd run it by you once more time.

[AngelinaBelle]

It's probably doing just what it was told to do. 
Try this instead.

Code: [Select]

<div class="', (($block['type'] == 'sp_menu' || $block['id'] == 21) ? 'sp_content_padding' : 'sp_block'), '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>';

Because you generally don't want sp_content_padding when it is not an sp_menu block.
 
----
Edit: fixed typo in code

[jjwinc]

I stared at that code a thousand times and the != didn't even register.  LOL  That latest change worked (but I had to change it to == rather than the single equal sign).   

This is what it looks like now:

Code: [Select]

<div class="', (($block['type'] == 'sp_menu' || $block['id'] == 21) ? 'sp_content_padding' : 'sp_block'), '"', !empty($block['style']['body']['style']) ? ' style="' . $block['style']['body']['style'] . '"' : '', '>';


Problem solved!  Thank you, AngelinaBelle!

[AngelinaBelle]

   typo.  Good eye. Have fun!