PDA

View Full Version : Image Shows Wrongly in All Levels Navigational Menu



mindretreat
02-02-2009, 06:24 PM
1) Script Title: All Levels Navigational Menu (v2.1)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm
3) Describe problem:

I need to show images of my product after each menu choice.

The path where the image should appear is Our Brands --> Living Earth Crafts --> Cuvee Pro Salon --> Cuvee Classic

I can get it correctly in windows. However in FireFox and Safari. the image shows incorrectly when the mouse reaches "Cuvee Pro Salon" level

The url is www dot medispaboutique dot com.


I appreciate assistance regarding this problem.

Thank You very much in advance.

ddadmin
02-02-2009, 07:20 PM
So to clarify, are you saying the image appears correctly in Windows for all browsers? In other words, the issue with Firefox and Safari is on a Mac? In Win XP FF3.x, I see an image appearing at the very end.

mindretreat
02-02-2009, 07:37 PM
The code functions correctly only in Windows. The image should appear only when mouse is over the third choice "Cuvee Classic"

However In Firefox and Safari, both the right arrow and image appear wrongly when mouse is on the first choice "Cuvee Pro Salon", or any choice on that level of menu. It should appear only on the third choice "Cuvee Classic".

The below code is the only code I added.
<ul><img src="oakworks_celesta_maxx.jpg" border="0"> </ul>

It may be the code I am using. Is there an alternative simpler code that functions correctly in all browsers Win/Firefox/Safari?

Thank You.

mindretreat
02-03-2009, 03:29 AM
Sorry I missed your previous question. I only test on Windows-based systems, not Mac.

The code seems to work on IE, but not Firefox and Safari. Although you can see a picture using Firefox, the picture appears whenever mouse is on that level of menu is reached, no matter whether cursor is over the third choice "Cuvee Classic".

However, the picture should appear only on the third choice "Cuvee Classic" as I added the code for the picture only on the third choice.

Thank You.

mindretreat
02-03-2009, 04:14 AM
Hi,

I have uploaded a more clearer example with 3 pictures for 3 different choices. The url is www dot medispaboutique dot com.


If you follow the below path using IE, you can see 3 pictures corresponding to three diferent choices

The path where the image should appear is Our Brands --> Living Earth Crafts --> Cuvee Pro Salon --> Cuvee Pro Salon/Contemporary/Classic

However for Firefox and Safari, you only see 1 picture and it does not change at all.

Also, is it possible to make the images clickable to go the url of the specific page?

Please kindly assist.

Thank You.

ddadmin
02-03-2009, 08:15 AM
Instead of making the changes you currently have to the HTML for the drop down menus, it's best to just use the default, and substitute a particular menu item's text with the IMG tag instead. For example:


<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul>
<li><a href="#"><img src="test.gif" style="border:0" /></a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#"><img src="test.gif" style="border:0" /></a></li>
</ul>
</li>

You may have to tweak the CSS applied to the drop down menu UL a bit to get it to look exactly the way you want, but this is far better than making structural changes to the menu as you currently have, which produces something the script may not be able to handle predictably.

mindretreat
02-03-2009, 10:17 AM
Thank you for your suggestion. I have tried this approach very early as it is easy to implement.

I have uploaded your suggested code and an image of a logo.

The path where the logo image should appear is Our Brands --> Living Earth Crafts --> Cuvee Pro Salon --> Cuvee Traditional


Please kindly take a look with Firefox or Safari browser compared to IE. You will find that it does not work with Firefox or Safari, but seem to work with IE.

Please further assist.

ddadmin
02-04-2009, 03:17 AM
Looking at your page's source, there are HTML errors with your nested list. For example, in the below:


<li><a href="#">Cuvee Pro Salon</a></li>

<ul>
<img src="europeantouch_rinato.jpg" border="0">
</ul>

The parent LI element should wrap around the child UL, ie:


<li><a href="#">Cuvee Pro Salon</a>

<ul>
<a><img src="europeantouch_rinato.jpg" border="0"></a>
</ul>
</li>

Notice the IMG element is also surrounded by a A element, which isn't necessary by default, but based on the default CSS used to style the menu, is. Make sure your HTML list are properly nested throughout.

mindretreat
02-04-2009, 09:30 AM
Thanks DD Admin!

Your code now worked now in all IE, Firefox and also Safari browsers. I have uploaded the latest version. The url is www dot medispaboutique dot com.

There are some other problems which I need your kind assistance:
a) Is there a way to display the model pictures without the border of the drop-down menus. I tried twesking the CSS and found it affects globally all drop-down menus. Can the CSS affect only the menu at the level of the model pictures.
b) Unique In IE, the drop-down menu has a white bottom border despite the border bottom being set to "none". Firefox and Safari browsers seemd ok.
c) In Firefox and Safari browsers, the right side of the top menu has a white space due to number of buttons. My table row is set at 930px, but the menu occupies perhaps only 920. How do I fill in this space so the top menu appears to cover the entire length?

Looking forward to your help again.

Thank You in advance.

ddadmin
02-05-2009, 07:06 AM
What you can do is apply a CSS class to the UL that directly contains the images to try and style it and its menu items as desired. For example, in the below chunk of code, you'd add the code in red:


<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul class="customstyle">
<li><a href="#"><img src="test.gif" style="border:0" /></a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#"><img src="test2.gif" style="border:0" /></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

Inside ddlevelsmenu-base.css is the default style that applies to the sub menus in general. Add to it something like the below that targets the aforementioned UL specifically:


ul.customstyle{
border-width: 0;
}

ul.customstyle li a{
border-bottom-width: 0;
background: white;
}

It's up to you to get the CSS right as you see fit.

mindretreat
02-06-2009, 08:34 PM
Hi DD Admin,

It works good now.

I am also using Featured Content Slider v2.4. I only need the contents to scroll through themselves and want to remove the entire pagination links.

In order to achieve that, ami I correct to remove the following codes in red or is there an easier way to do it?

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

Thank You.

ddadmin
02-07-2009, 01:01 AM
Please start a new thread when asking a new question, whether on the script same or different (as in this case).

mindretreat
02-15-2009, 04:02 AM
Hi DD Admin,

I realised the all images in the drop-down menu does not show in Safari. You can try this path in Safari.

Our Brands --> Bentlon --> Treatment Chair ...and all the pictures does not show

The pictures shows only in Firefox and IE.

Please kindly help.

mindretreat
02-23-2009, 02:25 PM
Hi,

The pages I created in the root folder has no problems in accessing the arrow graphics files in the folder ddlevelfiles.

However, when I created a page in a folder in the root directory, the arrow gifs no longer show up. It can show up only when I copy the arrow graphics within that folder itself.

I tried to add ../ in fron of the path, but it does not work.
arrowpointers:{
downarrow: ["../ddlevelsfiles/arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]

Can someone please help me how to path correctly? Thank You.

Original code in ddlevelsmenu.js file
arrowpointers:{
downarrow: ["ddlevelsfiles/arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
rightarrow: ["ddlevelsfiles/arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
showarrow: {toplevel: false, sublevel: true} //Show arrow images on top level items and sub level items, respectively?

mindretreat
05-12-2009, 01:59 PM
Hi,

I have managed to implement the website, but I have over 400 images, each with a chunk of code similar to the above.

As the code and images are found in the menu system, they are present in every of my web page and take over 400 sec to load on a 56k connection.

Is there a way to load the codes and images on the menu only once and keep the code lean?

Thank You.

ddadmin
05-12-2009, 08:26 PM
Have you tried just specifying absolute URLs to the arrow images inside the .js file:


arrowpointers:{
downarrow: ["http://mysite.com/images/ddlevelsfiles/arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
rightarrow: ["http://mysite.com/images/ddlevelsfiles/arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
showarrow: {toplevel: false, sublevel: true} //Show arrow images on top level items and sub level items, respectively?

This way, all your pages can simply reference the same ddlevelsmenu.js file on your site, and the arrow images will work regardless.

mindretreat
05-13-2009, 06:02 AM
Thanks DD Admin,

The main problem are the actual pictures, and not the arrows which are small in size. In post#10, you can see the below:



<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul class="customstyle">
<li><a href="#"><img src="test.gif" style="border:0" /></a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#"><img src="test2.gif" style="border:0" /></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>


So, now I have over 400 "test.gif" of different names, and also each will lead to a different link. The codes are too bulky and takes forever to load.

Can I out all these images and links that these images lead to in a single file and only load when mouse over, or at least load only once on index page rather than every time I go to each new page within my website?

Please further assist.

Thank You.

mindretreat
05-14-2009, 11:22 AM
Hi DD Admin,

Can I ask whether is can your suggestion work for all other images other than the arrows for my code?

Thank You in advance.

ddadmin
05-14-2009, 11:42 PM
I'm not sure there's too much you can do in this case. Just as if you were displaying a bunch of different images on different pages, how would you minimize the loading time?

If all your pages reference the same set of test.gif, test2.gif etc, one thing that could cut down on the loading time is to specify absolute URLs to them throughout:


<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul class="customstyle">
<li><a href="#"><img src="http://mysite.com/images/test.gif" style="border:0" /></a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#"><img src="http://mysite.com/images/test2.gif" style="border:0" /></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

This way, the browser will cache the images when a different page tries to show the same image. But other than that, I'm not sure there's much you can do. Perhaps try optimizing the images (http://tools.dynamicdrive.com/imageoptimizer/) themselves?

mindretreat
05-15-2009, 10:45 AM
Hi,

All the pages in my website will reference the same set of test.gif, test2.gif etc, so I will try your suggestion. Am I right to say that the images need to be loaded for only 1 time, then stored in user's computer's cache, and reloaded from there if I use absolute URLs for the image locations.


Thank You.

ddadmin
05-15-2009, 04:23 PM
Am I right to say that the images need to be loaded for only 1 time, then stored in user's computer's cache, and reloaded from there if I use absolute URLs for the image locations.

Yep, it should maximize the chances of the browser caching those images.