RuneVillage.com

Re: Need help with drop-down javascript menu

2012-05-30T13:35:42-06:00

WOOP! I love you.

Statistics: Posted by A5chow — May 30th, 2012, 1:35 pm

Re: Need help with drop-down javascript menu

2012-05-30T01:11:02-06:00

Posting to let you know that I'm taking a look at it when I have some spare time between classes tomorrow.

EDIT: It's actually pretty simple. The slideshow snippet you use uses a property called z-index, which allows you to order the rendering of overlapping containers. A higher z-index equates to a higher priority. Add this to your CSS:

Code: Select all

div.dropdown, div.dropdown div.item {
         z-index: 15;
}

This will render dropdown menus and their items above the slideshow.

Statistics: Posted by Ventrue — May 30th, 2012, 1:11 am

Re: Need help with drop-down javascript menu

2012-05-16T12:25:25-06:00

Okay, so my next step was to make a slideshow and I followed one of the examples online. However, I'm assuming that because the example used "position:absolute;" it appears on top of Ventrue's menu.

Is there a way to fix it without having to use another javascript slideshow?

Here it is live: http://silverbergandsons.com/beta/

And here's the code:

Code: Select all

S. Silverberg & Sons Jewelers - Tucson, Arizona - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry.

Thank you very much in advance!

P.S. Please ignore the sloppiness of the code, I'll be fixing that later.

Statistics: Posted by A5chow — May 16th, 2012, 12:25 pm

Re: Need help with drop-down javascript menu

2012-05-05T18:09:03-06:00

Oops, hehe, I have no idea why I keep saying "Java". I've been told too many times to stop doing that. I've corrected it in my original post!

The menu works fabulously in both Chrome and IE! I'm so happy. You have no idea how long I've been working on this menu issue... Trying so many different tutorials and examples.

YOU'RE THE BEST, VENTRUE.

Statistics: Posted by A5chow — May 5th, 2012, 6:09 pm

Re: Need help with drop-down javascript menu

2012-05-05T18:01:10-06:00

A5chow wrote:

Hurray! That worked! I guess I can remove the absolute positions too.

However, it appears funnily for IE...

IE is always a pain to get working properly. In the css for "div.item" change "display: inline-block" to "display: inline".

A5chow wrote:

And I'm not quite sure why the 5th to 8th sub menus don't appear. I tried studying the Java thinking that it's a matter of modifying some of the values, but that's not the case. And not all of the buttons will have a scroll down menu though.

First of all, it's not Java. It's Javascript. I know that seems like a minor difference, but they're really two completely different beasts. I only correct you in case you need help in the future.

It actually is part of the Javascript. In the $(window).load() function, there's this line:

Code: Select all

for (var i = 1; i < 5; i++) {

Change the 5 to 9. It's a for loop that iterates through every possible item. Another solution that may work for you is:

Code: Select all

for (var i = 1; i < $('div[id*=item].item').length; i++) {

This checks for the number of "div" tags that have the class property "item" as well as an id property starting with "item".

A5chow wrote:

Thank you again and again for your help, Ventrue.

You're more than welcome.

Statistics: Posted by Ventrue — May 5th, 2012, 6:01 pm

Re: Need help with drop-down javascript menu

2012-05-05T16:33:45-06:00

Hurray! That worked! I guess I can remove the absolute positions too.

However, it appears funnily for IE...

And I'm not quite sure why the 5th to 8th sub menus don't appear. I tried studying the Java Javascript thinking that it's a matter of modifying some of the values, but that's not the case. And not all of the buttons will have a scroll down menu though.

Thank you again and again for your help, Ventrue.

Statistics: Posted by A5chow — May 5th, 2012, 4:33 pm

Re: Need help with drop-down javascript menu

2012-05-03T17:04:12-06:00

A5chow wrote:

Ooh, I see. Thanks, Ventrue! Missed that part.

EDIT: Okay, I've uploaded it to the main directory, changed the source location and the sub menus are appearing funnily in the center of the main menu as opposed to where I mapped their positions. Why is that so?

Refresh http://silverbergandsons.com/beta/ventruemenu.htm

EDIT: Try changing

Code: Select all

$(document).ready(function(){

Code: Select all

$(window).load(function(){

Statistics: Posted by Ventrue — May 3rd, 2012, 5:04 pm

Re: Need help with drop-down javascript menu

2012-05-02T23:30:57-06:00

Statistics: Posted by A5chow — May 2nd, 2012, 11:30 pm

Re: Need help with drop-down javascript menu

2012-05-02T21:43:42-06:00

Code: Select all

This needs to point to the location of the jquery javascript file on your host. jQuery is a javascript library that makes javascript much easier to use.

1. Download jquery from http://jquery.com
2. Put it on the web server in a location you desire. I usually place my scripts in a folder called 'scripts'.
3. Change the line shown above to something along the lines of:

Code: Select all

So, if you place it in the html's home director, you can simply put for the src attribute, src="jquery.js"

Statistics: Posted by Ventrue — May 2nd, 2012, 9:43 pm

Re: Need help with drop-down javascript menu

2012-05-01T13:51:45-06:00

OKAY! So here's my futile attempt at Ventrue's dropdown menu example with using DIV's instead of lists.

It's doing something really funky with the submenu items, however.... I was fiddling with the absolute positions of each of the subitem menus but nothing appears to be moving.

Now what did I do wrong? Here's the uploaded version: http://silverbergandsons.com/beta/ventruemenu.htm

Thanks for your help, guys! Greatly appreciated!

Code: Select all

Dropdown Menus on Centered "menu bar" example.

Statistics: Posted by A5chow — May 1st, 2012, 1:51 pm

Re: Need help with drop-down java menu

2012-04-22T09:51:00-06:00

Sorry, guys! I've been working on another urgent project at work and this has been placed on hold. I'll get back to it soon. Thank you very, VERY much for the suggestions, Ventrue, Reggie, and Demon. I really appreciate it. Will post my results here once I'm done !

Statistics: Posted by A5chow — April 22nd, 2012, 9:51 am

Re: Need help with drop-down java menu

2012-04-20T00:50:27-06:00

*Sigh* I was actually somewhat excited to see a topic on coding/scripting, but there hasn't been any reply to my suggestions.

Statistics: Posted by Ventrue — April 20th, 2012, 12:50 am

Re: Need help with drop-down java menu

2012-04-14T18:14:00-06:00

Now that i use a fone as my only access point, i wish I had been in charge of the mobile runevillage initiative. X.x

Statistics: Posted by Demon — April 14th, 2012, 6:14 pm

Re: Need help with drop-down java menu

2012-04-09T14:02:48-06:00

drop down menus browsing on a phone is a nightmare, Remember to make it phone compatible too

Statistics: Posted by reggie — April 9th, 2012, 2:02 pm

Re: Need help with drop-down java menu

2012-04-05T19:53:26-06:00

An important note is that whitespace does make a difference with "inline-block" elements. So make sure all top-level menu items are on one line with no spaces between them.

I wrote a quick and simple example of drop down menu code. I didn't combine it into a reusable javascript menu handler, but it should suffice for your understanding and simplicity. It includes a "timeout" variable so the menu won't disappear immediately after leaving the bounds of that menu item or dropdown menu.

Example

The solution above doesn't handle users resizing the page though. That can be fixed by applying a function that repositions all the dropdown menus when the page is resized.

You may want to check out these solutions.

Statistics: Posted by Ventrue — April 5th, 2012, 7:53 pm

Re: Need help with drop-down java menu

2012-04-05T19:36:41-06:00

I told you someone could help. also, this is a javascript menu, nota java menu. I would agree with the inlines, rather than floating. there are a few tricks using absolute positioning to hide them.. its mostly preference. It has the potential to be jumpy if you don't do it right, but it should be fine. if I had access to the server id give you the menu I made for the homepage. Best of luck though!

Statistics: Posted by Demon — April 5th, 2012, 7:36 pm

Re: Need help with drop-down java menu

2012-04-05T18:34:32-06:00

1. you need to add "padding-left: 0px;" to the css entry "#menu ul"
2. Same as 1, with "padding-left: 0px;" being added to the css entry "#menu"
3. The best way to do this is to first create a

around your menu. Give this the background image you desire. Then, set your menu to have the attributes "display: block" and "text-align: center;" which will center it within the div.

I made a quick example, which can be found here

If I may offer you a big suggestion, it would be to avoid using the css "float" attribute. It's a nasty little bugger, it is handled differently in browsers. It's much easier to work with "display: inline-block" instead, at least in my opinion.

Furthermore, I've found it useful to make drop-down menus separate from the menu itself, and create a simple javascript handler that will position the drop-down menus underneath the proper menu. Then, you can create a function for "onmouseover" events that displays the correct menu. I have an example for this too somewhere else, I'll see if I can find it.

Hope this helps.

P.S: If you have Google Chrome, you can use the developer tools that come with it to easily see changes to your page because you can edit the HTML, CSS, and Javascript code in-browser, and it'll automatically update your changes.

Statistics: Posted by Ventrue — April 5th, 2012, 6:34 pm

Need help with drop-down javascript menu

2012-04-04T12:53:11-06:00

Hello!

I'm working on building a website for the job I work at right now. I need help in figuring out why the menu isn't working out...

So here is what I've built so far: http://silverbergandsons.com/beta/

Here is the html:

Hidden:

Here is the CSS:

Hidden:

And here is the javascript:

Hidden:

1. I can't figure out why the list items are shifted over to the right like there's an invisible bullet there... this applies to the submenu too.
2. When I use width:100% for the background of the menu, it stretches out the page to the right side... Probably has sometime to do with the invisible bullets in problem #1.
3. I can't get the images/menu buttons centered in the page...

If anyone could be of assistance, it would be GREATLY appreciated.

Statistics: Posted by A5chow — April 4th, 2012, 12:53 pm