Forums Archive Index > SmartMenus v4.x General > Relative Positioning don't works with IE for Mac
Date: 11 Jun 2003 5:07 am
I got a Problem with Relative positioning in ie 5.0 for mac (Mozilla/4.0 (compatible; MSIE 5.0; Mac_PowerPC))
Absolute Pos works fine... but relative not.. id don't displays the menu....
see example here (don't look at the design, its just for testing!) First button is relative pos, next 3 are relative...
maybe you can help me!
here is my conifg:
/* USE WORDWRAP AND MAXIMIZE THE WINDOW TO SEE THIS FILE
=================================
SmartMenus v4.7.2 Script ARRAYS
=================================
Get the menus with a great manual & examples at:
--> http://www.smartmenus.org
LEAVE THESE NOTES PLEASE - delete the comments if you want */
// === 1 === EXTRAS
s_hideTimeout=500;//1000=1 second
s_subMenuOffsetX=3;//pixels (if no subs, leave as you like)
s_subMenuOffsetY=2;
s_useSubImages=true;//globally- control in every STYLESHEET array is available
s_showLinkCursor=true;//IE4+, NS6+, Opera7+ & Konqueror
s_statusShowLinks=true;
s_keepHighlighted=true;
s_autoSELECTED=false;//make the item linking to the current page SELECTED
s_autoSELECTEDItemsClickable=false;//look at IMPORTANT NOTES 1 in the Manual
// === 2 === Default TARGET for all the links
/*for navigation to frame, calling functions or
different target for any link look at
IMPORTANT HOWTOS 1 NOTES in the Manual*/
s_target='newWindow'//(newWindow, self or top)
// === 3 === STYLESHEETS- you can define different arrays and then asign
// them to any menu you want with the s_add() function
s_CSS1=[
'#4A49A8', // BorderColor
'#CBCBEF', // BgColor
'#4A49A8', // OverBgColor
'#4A49A8', // FontColor
'#FFFFFF', // OverFontColor
'verdana,arial,helvetica,sans-serif', // FontFamily
'10px', // FontSize (css)
'1', // Netscape4 FontSize (look at KNOWN BUGS 3 in the Manual)
'bold', // FontWeight (bold/normal)
3, // ItemPadding
1, // BorderWidth
'', // IEfilter (look at Samples\IE4(5.5)Filters dirs)
'../images/arrow.gif', // ArrowImageSource
'../images/arrowover.gif', // OverArrowImageSource
7, // ArrowImageSize
5, // ArrowImageTop px (pixels from item top)
true, // ArrowImageIsVisible
true, // UseSeparators (border between items)
'#8A8CCC', // SELECTED BgColor
'#FFFFFF', // SELECTED FontColor
'../images/arrowover.gif' // SELECTED ArrowImageSource
];
// FUNCTION USED FOR RELATIVE POSITIONING
function s_getStart(a){
var bodyStyleMarginTop=0;// specify manually to kill a bug in Opera 5/6
var o=document.images['getStart'];
if(s_nS4)return a=='x'?o.x:o.y;
var oP,oC,ieWU;oP=o.offsetParent;oC=a=='x'?o.offsetLeft:o.offsetTop;
ieWU=s_iE&&s_ua.indexOf('Mac')==-1?1:0;
while(oP){if(ieWU&&oP.tagName&&oP.tagName.toLowerCase()=='table'&&oP.border&&oP.border>0)oC++;
oC+=a=='x'?oP.offsetLeft:oP.offsetTop;oP=oP.offsetParent};
if(s_iE&&document.getElementById&&s_ua.indexOf('Mac')!=-1){var f=a=='x'?document.body.currentStyle.marginLeft:document.body.currentStyle.marginTop;
f=f.indexOf('%')!=-1?(parseInt(f)/100)*(a=='x'?parseInt(document.body.offsetWidth):parseInt(document.body.offsetHeight)):parseInt(f);oC+=f};
if(s_kN31p){return a=='x'?(document.body.style&&document.body.style.marginLeft?parseInt(document.body.style.marginLeft)+oC:document.body.marginWidth?parseInt(document.body.marginWidth)+oC:document.body.leftMargin?parseInt(document.body.leftMargin)+oC:oC+10):(document.body.style&&document.body.style.marginTop?parseInt(document.body.style.marginTop)+oC:document.body.marginHeight?parseInt(document.body.marginHeight)+oC:document.body.topMargin?parseInt(document.body.topMargin)+oC:oC+10)};
return s_oP&&!s_oP7?a=='x'?oC:oC+bodyStyleMarginTop:oC};
// FUNCTION USED FOR RELATIVE POSITIONING
s_CSS2=['#ff0000','#fffbf0','#bebddf','#ff0000','#ff0000','verdana,arial,helvetica,sans-serif','12px','2','normal',5,2,'','../images/arrow2.gif','../images/arrow2.gif',7,8,false,false,'#C0C0C0','#FFFFFF','../images/arrowover.gif'];
s_CSS3=['#000000','#ffffff','#000000','#000000','#ffffff','verdana,arial,helvetica,sans-serif','10px','1','bold',3,1,'','../images/arrow3.gif','../images/arrowover.gif',7,5,true,false,'#C0C0C0','#FFFFFF','../images/arrowover.gif'];
// === 4 === MENU DEFINITIONS
s_add(
'search', // NAME
1, // LEVEL (look at IMPORTANT NOTES 1 in the Manual)
130, // WIDTH
's_getStart("y")+15', // TOP (look at IMPORTANT HOWTOS 4 in the Manual)
's_getStart("x")', // LEFT (look at IMPORTANT HOWTOS 4 in the Manual)
false, // menu is PERMANENT (you can only set true if this is LEVEL 1 menu)
s_CSS1, // Stylesheet Array to use for this menu
[ // define the items [link info,text to display]
['http://www.google.com/','Google'],
['http://www.yahoo.com/','Yahoo!'],
['http://www.altavista.com/','Altavista'],
['http://www.search.com/','CNET Search.com'],
['http://www.webcrawler.com/','Webcrawler'],
['http://www.lycos.com/','Lycos'],
['http://www.hotbot.com/','Hotbot']
]
);
s_add(
'e_mail',1,130,15,74,false,s_CSS1,
[
['http://www.emp3mail.com/','eMP3Mail'],
['http://mail.yahoo.com/','Yahoo!'],
['http://www.hotmail.com/','Hotmail'],
['http://www.themail.com/','TheMail'],
['http://www.mail.com/','Mail.com'],
['http://www.mail.bg/','Mail.bg'],
['http://www.giga.de/','Giga.de']
]
);
s_add(
'masters',1,130,15,144,false,s_CSS1,
[
['http://www.javascripts.com/','JavaScripts'],
['http://www.builder.com/','Builder'],
['http://www.webreference.com/','Webreference'],
['http://msdn.microsoft.com/','MSDN'],
['http://www.livesoftware.com/','Livesoftware'],
['http://www.perl.com/','Perl'],
['http://www.w3.org/','W3C']
]
);
s_add(
'sports',1,130,15,226,false,s_CSS1,
[
['http://www.manutd.com/','Manchester United'],
['http://www.nba.com/','NBA'],
['http://www.chelseafc.co.uk/','Chelsea FC'],
['http://www.fcbarcelona.com/','FC Barcelona'],
['http://www.lufc.co.uk/','Leeds United FC'],
['http://www.eurosport.com/','Eurosport'],
['http://www.espn.com/','ESPN'],
['http://www.sportal.com/','Sportal.com'],
['http://www.umbro.com/','UMBRO']
]
);
s_add(
'sub_demo',1,148,15,296,false,s_CSS1,
[
['show:bg_stuff;http://www.gbg.bg/','Bulgarian stuff'],
['http://www.fifa.com/','King football'],
['show:my_music','My favourite music']
]
);
s_add(
'my_menu',1,115,15,'mouseX+10',false,s_CSS1,
[
['*self*../update.html','<img src=../images/ico.gif width=12 height=12 align=top> Update SM4'],
['*self*mailto:smartmenus@smartmenus.org','Contact me']
]
);
s_add(
'permanent',1,150,200,15,true,s_CSS1,
[
['SELECTED','Permanent menu DEMO'],
['*self*../update.html','<img src=../images/ico.gif width=12 height=12 align=top> Update SM4'],
['*self*../compatibility.html','<img src=../images/ico.gif width=12 height=12 align=top> Compatibility tests'],
['*self*http://www.smartmenus.org/forum/','<img src=../images/ico.gif width=12 height=12 align=top> Forum'],
['*self*mailto:smartmenus@smartmenus.org','Contact the author']
]
);
s_add(
'mouse_relative',1,186,'mouseY+16','mouseX+16',false,s_CSS1,
[
['SELECTED','Mouse position relative DEMO'],
['NOROLL','This is a demo showing how to set the top and left position for mouse event relative position of the menus. Look inside the s_arrays.js file and find the \'mouse_relative\' menu.']
]
);
s_add(
'bg_stuff',2,130,'','',false,s_CSS1,
[
['show:bg_portals','Portals'],
['show:bg_search','Search'],
['show:bg_misc;SELECTED;http://www.gbg.bg/','Misc']
]
);
s_add(
'my_music',2,130,'','',false,s_CSS1,
[
['http://www.u2.com/','U2'],
['http://www.depechemode.com/','Depeche Mode'],
['http://www.sting.com/','Sting'],
['http://www.sade.com/','Sade'],
['http://www.garbage.com/','Garbage'],
['http://www.thecorrswebsite.com/','The Corrs'],
['http://www.republica.com/','Republica']
]
);
s_add(
'bg_portals',3,130,'','',false,s_CSS1,
[
['http://www.hit.bg/','HIT.bg'],
['http://www.dir.bg/','DIR.bg'],
['http://www.top.bg/','TOP.bg'],
['http://www.gbg.bg/','Gyuvetch'],
['http://www.search.bg/','Search.bg']
]
);
s_add(
'bg_search',3,130,'','',false,s_CSS1,
[
['http://www.search.bg/','Search.bg'],
['http://www.rambler.bg/','Rambler'],
['http://www.dir.bg/','DIR.bg'],
['http://www.mp3-bg.com/','MP3-BG.com']
]
);
s_add(
'bg_misc',3,176,'','',false,s_CSS1,
[
['http://www.news-bg.com/','News-BG'],
['http://www.bnt.bg/','Bulgarian National Television'],
['http://www.darik.net/','Darik radio'],
['http://www.7sport.net/','7 Days Sport'],
['http://www.btv.bg/','bTV'],
['show:sub4','More subs & different CSS']
]
);
s_add(
'sub4',4,130,'','',false,s_CSS3,
[
['http://yahoo.com','Yahoo'],
['NOROLL','NOROLL'],
['http://yahoo.com','Yahoo'],
['http://yahoo.com','Yahoo'],
['show:sub5','more'],
['http://yahoo.com','Yahoo']
]
);
s_add(
'sub5',5,130,'','',false,s_CSS2,
[
['http://yahoo.com','Yahoo'],
['NOROLL;http://yahoo.com','NOROLL+Yahoo'],
['http://yahoo.com','Yahoo'],
['http://yahoo.com','Yahoo'],
['show:sub6','more'],
['http://yahoo.com','Yahoo']
]
);
s_add(
'sub6',6,130,'','',false,s_CSS1,
[
['http://www.yahoo.com/','Yahoo'],
['http://www.yahoo.com/','Yahoo'],
['SELECTED;http://www.yahoo.com/','SELECTED+Yahoo'],
['http://www.yahoo.com/','Yahoo']
]
);
Date: 11 Jun 2003 5:08 am
ups.... forgot the example ;) --> http://www.root.ch/test/menu3
sorry ;)
Date: 12 Jun 2003 4:07 am
Hi,
Some guys have already reported me the problem. There's a bug in v4.7.2 in the function that finds the position of the image. I am currently preparing an update of the SmartMenus and this will be corrected in the new version.
You can get the new function at [http://www.smartmenus.org/down/relative_pos_function.zip]. Just replace the old one in the s_arrays.js with the new one and it should work.
Date: 10 Jun 2004 6:23 pm
smartmenus wrote:
You can get the new function at [http://www.smartmenus.org/down/relative_pos_function.zip]. Just replace the old one in the s_arrays.js with the new one and it should work.
I'm curious if this code was implemented in the new version of smartmenus (i.e. 5.2.2). I was currently having the same issue with the menus not displaying in MAC IE 5.1.4. I thought it was user error until I saw it function correctly in Firefox 0.8. I replaced the code with the one offered from the download. It is now viewable in Mac IE.
I'm aware that Mac IE has been discontinued, But the browser is still prominent in the mac world.
Anyways, thanks for all the help Vasil, good stuff!
Peace,
~Habitue~
Date: 11 Jun 2004 4:18 am
In v5.2 this function is a bit different from the one in the file mentioned. There is some IE5/Mac specific code, which aims to fix an issue in this browser with the body margins. I suppose there is something wrong with this code.. :? I will try to find out what's wrong asap!
Thank you very much for letting me know!
Btw, could you please send me an url where the problem occurs. I would like to take a look at the page just in case- it may be specific problem on your page.. Thanks in advance!
Date: 11 Jun 2004 5:54 am
Greetings Vasil,
Actually the probelm was resolved. I used the code offered from your .zip download above. I replaced the entire code (function) in the current version of smartmenus located in the s_arrays.js (SAMPLE FUNCTION USED FOR RELATIVE POSITIONING) with the entire code from the above mentioned download, and Viola! menus appear.
My site does not display the problem anymore. It functions perfectly in all the browsers I tested. Do you mean for me to replace the code again with the current version found in smartmenus 5.2.2. to recreate the problem? If so, let me know and I will accomadate.
regards, Habitue
Date: 11 Jun 2004 7:33 am
Yes, I understood that it works now. :D
I just wanted to take a look at the souce of your pages to see whether there is something special which may cause the problem in IE5/Mac. Thanks for the offer but I don't want you to break your configuration again.. ;) :D
I just would like to take a look at the source of one of your pages.. You don't have to do anything with the code.. ;)
Date: 14 Jun 2004 1:40 pm
Hey Vasil,
Sorry for the late reply. Here's the Url to the sample site:
--> http://www.habitue.freesites.ws/
This is just a test site to see if I can implement some technical aspects, including the smartmenus. Then when finished, I would allow it stretch to fill the screen.
First thing I wanted see if I can use the samples supplied from your .zip file to accomplish a level 1 image menu. My goal was to make the nav bar images rollover and stay on while one browses the smartmenu. Also, I wanted to make sure the menus appeared in place when the page is resized (relative position).
Second, I wanted to see if I can configure the smartmenu's to work with Dreamweaver's template system. The "sub-directories" sample gave me an idea on how to do this. The Contact page is located at a sub directory and is still able use the smartmenus javascript. This allows me to update all the pages with the main template, without breaking the menus.
Third, and most simple, was to see if the "s_autoSELECTED" would work with smartmenus, and it does, of course :wink:. I made the first item under "About Us" a link to see if would remain selected after clicking it. I know this won't work with images, but I'm looking forward to see it as an added feature in a future version.
If you need anything else Vasil, let me know.
Regards,
~Habitue~
Date: 15 Jun 2004 8:08 am
Habitue, thank you very much for the help and for your time! I highly appreciate it! :D