PDA

View Full Version : Multiple Columns in drop down box?



mikeybags
05-03-2007, 07:33 PM
1) Script Title:
AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:
Hi there,

I am using the script designed above to create drop down boxes on my site. The problem is a couple of them have MANY (30+) options in the drop down, so it adjusts to start at the top of the page when you hover over it. Here's the link, so you can see.

http://www.ucslhh.com/ucsl.html

The first 2 ("league info" and "season info") work fine, but you'll see what I mean when you hover over "clubhouses".

There are so many options that you have to scroll down to see them all.

I was wondering if there's a way to make that drop down box become 2 columns, that way the links will start BELOW the actual image they're coming off of (as they do on the first 2), it won't go all the way to the bottom of the screen, and it's easier to find the option needed without having to scroll down. Is it possible?

Thanks in advance,

Mike

jscheuer1
05-04-2007, 05:14 AM
This worked out well here. First, I made up a class in the stylesheet for the clubhouse menu (note - these styles will get added to the #dropmenudiv a ones, but only for links with the class="clubs"):


<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal small-caps 10px Agency;
line-height:18px;
z-index:1;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: light;
}

#dropmenudiv a.clubs {
width:50%;
float:left;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: lightgray;
}

.style1 {color: #FFFFFF}
</style>

Next, I inserted the class name for each link in that menu's array:


var menu3=new Array()
menu3[0]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T10.htm" target="1">Anaheim Angels</a>'
menu3[1]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T25.htm" target="1">Arizona Diamondbacks</a>'
menu3[2]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T14.htm" target="1">Atlanta Braves</a>'
menu3[3]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T0.htm" target="1">Baltimore Orioles</a>'
menu3[4]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T1.htm" target="1">Boston Red Sox</a>'
menu3[5]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T19.htm" target="1">Chicago Cubs</a>'
menu3[6]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T5.htm" target="1">Chicago White Sox</a>'
menu3[7]='<a class="clubs" href="http://ucslh . . . etc.

Finally, I edited the call for menu3 to allow it to be wide enough for two columns:


<a href="default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu3, '250px')" onMouseOut="delayhidemenu()"><img src="images/ucsl_10.jpg" alt="" width=85 height=22 border="0"></a>

Notes: The clubs class adds to the #dropmenudiv a styles as I said and actually changes the width to 50%. The float left appears to be required to create the columnar look. However, a float often needs to be later cleared. I didn't do that in this case as, it didn't seem to be necessary.

mikeybags
05-04-2007, 06:07 AM
Wow, that's awesome. Thank you very much.

Now I'm more than likely going to run into that problem with the "salaries" one too, because it's going to have a similar number of links. Should I just put them as the class "clubs" as well (in the link for that menu's) array, or should I add another class in the style sheet for them separately, as you did with that? I'm assuming I can just give them the class "clubs", since I'm not doing anything really different there, but I just wanted to make sure. As you could probably tell if you viewed the code, I've never done this before, and am just taking the learn as I go approach, after my friend got it all started.

Thanks again, I really appreciate it.

jscheuer1
05-04-2007, 06:16 AM
You can probably use the same class for salaries, as long as you make sure that the menu call (the 'finally' part from my last post) for the salaries drop down is set wide enough to allow two columns.

mikeybags
05-04-2007, 09:35 AM
Yup, that worked.

On a semi-unrelated note...is there a way to make it so the links don't change color after they are visited? Right now it's set to have them all blue (I'd prefer black, but that's no big deal), but when you click them they become purple, which I definitely want to do away with. I don't see anything in the code for visited links.

jscheuer1
05-04-2007, 03:04 PM
You can add a rule like that:


#dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
color: #000000;
}

boogyman
05-04-2007, 04:56 PM
You can add a rule like that:


#dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
color: #000000;
}

that only accounts for the visited, he said he would prefer it to all be black so I would add that into your declaration



#dropmenudiv a:link, #dropmenudiv a.clubs:link { /*original color*/
color: #000000;
}
#dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
color: #000000;
}
#dropmenudiv a:active, #dropmenudiv a.clubs:active { /*while link is being clicked color*/
color: #000000;
}
#dropmenudiv a:hover, #dropmenudiv a.clubs:hover { /*mouseover color*/
color: #000000;
}


or you can just do a generic one to cover all your bases


#dropmenudiv a, #dropmenudiv a.clubs{ /*color for all link states*/
color: #000000;
}



Note: if you want all of your links on the page to be this way, get rid of the prefix's and just set

a { /*color for all link states*/
color: #000000;
}

jscheuer1
05-04-2007, 05:04 PM
that only accounts for the visited, he said he would prefer it to all be black so I would add that into your declaration

. . .

or you can just do a generic one to cover all your bases


#dropmenudiv a, #dropmenudiv a.clubs{ /*color for all link states*/
color: #000000;
}



Note: if you want all of your links on the page to be this way, get rid of the prefix's and just set

a { /*color for all link states*/
color: #000000;
}


These last two ideas won't work in IE, perhaps others.

mikeybags
05-04-2007, 05:25 PM
Awesome, that worked! Looks much better now.

Now one of the people who visited is having a problem. I don't have any in FF or IE, but he does in IE 7.

all the links(except for the news link) for me send me to www.ucslhh.com/default/

then i get a no web page found error...

internet explorer 7 is my browser...even that on says default on it

when i goto league info...all i get is a web page that is a bigger version of the info on the front page...

just trying to help you out with the info


Does anyone know why he'd be having this problem? Everything works fine for me, so I'm a little lost here...I probably slopped up some code that effects him but not me, I'd imagine...

jscheuer1
05-04-2007, 05:51 PM
Your friend has javascript disabled and is talking about the link behavior with no drop downs. Without javascript enabled the 'header' links are active. You should either configure them to lead to alternate, javascript disabled content or to a page (perhaps targeted into the iframe) that informs folks that they need to enable javascript to view the page properly.

mikeybags
05-05-2007, 02:40 AM
Your friend has javascript disabled and is talking about the link behavior with no drop downs. Without javascript enabled the 'header' links are active. You should either configure them to lead to alternate, javascript disabled content or to a page (perhaps targeted into the iframe) that informs folks that they need to enable javascript to view the page properly.

Yup, that had to be what it was, because I messed with my own settings and disabling javascript gave me the same problem as him. I created a page informing people that they need to enable javascript, but am uncertain of how to direct it to the IFrame.

Also, I had 2 questions (that don't have to do with the drop downs) if you don't mind me asking...sorry to be playing 20 questions here.

1)I had to create a weird jpg image with black on the sides and white in the middle, because if I gave the whole page a black background it would give the IFrame a black background as well, which wouldn't be a problem except that alot of these pages are automatically generated by a program, so there's no way for me to change the font color and stuff like that easily. The JPG image isn't a big deal, but it's pretty tacky, because if your browser isn't maximized, it throws everything off and the background is no longer flush with the rest of the page. Is there a way for me to set the IFrame to always have a black background and not use the background of the entire page, that way I can just make the main page background back (in order to keep the black sidebars)?

2)Some of the pages that open in the IFrame are quite a bit bigger than the iframe, but in reality they're not (alot of wasted space). For example, the page under "All-Time Stats" called "All-Time Standings". You have to scroll WAY right to read it all, when really that space isn't all being used. Is there a way to resize that down to the size of the frame so you don't have to do all of that scrolling? I realize this may be a bad idea, because some of the links contain LOTS of info and it would look bad compressed down, so I'm kind of unsure of this....I just figured I'd ask though.

Thanks again, and sorry for being another annoying newbie that has a million questions.

jscheuer1
05-05-2007, 03:43 AM
I'll have to think about those other two questions. You could try putting the iframe in a division and using a tiled background image of the desired color for that division or just the desired color as a background color for that division:


<div style="width:618px;height:363px;background-color:white;">
<iframe name="iframe1" src="news.html" frameborder="1" width="618" height="363"></iframe>
</div>

You really should use a name for the iframe that isn't just the number 1 - iframe1 would be good for instance, but you would then have to change every reference to it elsewhere in your code.

To target the iframe (I'm using the name iframe1 instead of 1 as the target) with your non-javascript advisory page, let's say it is called no_script.htm:


<a href="no_script.htm" target="iframe1" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '96px')" onmouseout="delayhidemenu()"><img src="images/ucsl_08.jpg" alt="" width="96" height="22" border="0"></a>

mikeybags
05-05-2007, 05:15 AM
The division for the IFrame works flawlessly, at least in my IE and FF! I was able to now set the background of the main page to black and get rid of that tacky jpg I threw up there to cover up the problem. Awesome!

I also followed your advice on the error page going into the frame. I changed all of the frame names (which was relatively easy, first searching and replacing all target="1" to target="iframe1", then searching all instances of "frame" and making sure I had them labeled right. The search and replace feature made it easy and it only took about 5 minutes, probably less.

The resizing of stuff into the iframe would be nice, but I'm still uncertain of whether it would work out with how much stuff is on some of those pages. I guess if it's possible I'll check it out, but it's probably not the biggest deal.

Thanks for all of your help. People like you are what make the internet a great place.

I'll check back to see if you figure anything out on that 2nd question, but don't go crazy over it for me.

mikeybags
05-05-2007, 11:55 PM
Ugh...another dumb question.

When viewed in 1024 by 768 resolution (as I use), it all fits the screen very nicely. My cousin uses a 1280 by 1024 resolution though, and when viewed on that the whole site remains the same size it would be (in pixels), so it looks very small to her. Is there a way to make it scale to the amount of room that's on the screen (the whole site)? I doubt there is, but if there's a way to make it fit better on any resolution without redoing everything, that would be great. If not, is there a way to at least lengthen the IFrame down to go to the bottom of the available screen space? I tried doing weird things such as specifying the height of the IFrame as "100&#37;", but that didn't have any effect...and nothing else seemed to do anything positive? Is anything like this possible, or am I SOL now that I'm at the point I am? Last thing..whether it is or isn't possible, is there a way to make the whole thing I made center itself, regardless of resolution? Again, it's centered at 1024x768, but at 1280x1024 it's way toward the left...and it would definitely look better centered. This has to be something easy that I'm overlooking...

psyco
05-18-2008, 03:32 AM
what if i wanted a 3rd column?

jscheuer1
05-18-2008, 10:02 AM
what if i wanted a 3rd column?

Generally, after so much time (the last post in this thread was over a year ago), and if you have your own question, you should start your own thread. In fact, if you want more help with this, please do so. However, using 33% in place of 50% should do the trick, as long as the drop down is set to wide enough a width to fit 3 columns across.

If you want more help, Please Start a New Thread.