Icy Phoenix

     
 

Home » Forum » Icy Phoenix Support » Older Versions Archive » Old Styles Topics

The time now is Thu 04 Sep, 2025 13:12 • All times are UTC + 1 Hour [DST enabled]
View previous topic Recent Topics Enable KB mode Download Topic Printable Version Email to a Friend View next topic

SOLVED Adding XS Dropdown & OnClick Menus


Post new topic  Reply to topic  		Page 1 of 1
 
 
Offline tc1967uk Male
 
avatar
Joined: March 2007
Posts: 129
Location: england.png
 
 
Reply with quote Download Post 
Post Adding XS Dropdown & OnClick Menus 
 
Hi

I've tried to integrate XS_Dropdown_&_OnClick_Menus_1.1.0 into IP 1.2.0.27 as I did in previous versions.  I've removed the following from overall_header.tpl, which did removed the menu options on the header:

Code: [Download] [Hide]
  1. <tr>  
  2.     <td class="forum-buttons" colspan="3" width="100%">  
  3.         <a href="{FULL_SITE_PATH}{U_PORTAL}">{L_HOME}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  4.         <a href="{FULL_SITE_PATH}{U_INDEX}">{L_INDEX}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  5.         <!-- BEGIN switch_upi2db_off -->  
  6.         <a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  7.         <!-- END switch_upi2db_off -->  
  8.         <!-- BEGIN switch_upi2db_on -->  
  9.         <span style="vertical-align:top;">{L_POSTS}:&nbsp;</span><a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a><span style="vertical-align:top;">&nbsp;•&nbsp;</span>{L_DISPLAY_U}<span style="vertical-align:top;">&nbsp;•&nbsp;</span>{L_DISPLAY_M}<span style="vertical-align:top;">&nbsp;•&nbsp;</span>{L_DISPLAY_P}&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  10.         <!-- END switch_upi2db_on -->  
  11.         <!-- BEGIN switch_user_logged_in -->  
  12.         <a href="{FULL_SITE_PATH}{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  13.         <!-- END switch_user_logged_in -->  
  14.         <a href="{FULL_SITE_PATH}{U_SEARCH}">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  15.         <a href="{FULL_SITE_PATH}{U_FAQ}">{L_FAQ}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  16.         <!-- BEGIN switch_user_logged_out -->  
  17.         <a href="{FULL_SITE_PATH}{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;  
  18.         <!-- END switch_user_logged_out -->  
  19.         <a href="{FULL_SITE_PATH}{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT2}</a>  
  20.     </td>  
  21. </tr> 


and inserted the following 3 sections of code:




Code: [Download] [Hide]
  1. <!-- [BEGIN] XS Dropdown & OnClick Menus -->  
  2. <script type="text/javascript">  
  3.  
  4. /***********************************************  
  5. * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)  
  6. * This notice MUST stay intact for legal use  
  7. * Visit http://www.dynamicdrive.com/ for full source code  
  8. ***********************************************/  
  9.  
  10. //Contents for Main Links  
  11. var menu1=new Array()  
  12. menu1[0]='<a href="http://www.mysite.com/forum/index.php"><img src="images/icon_dot.gif"> <alt title="Home" />&nbsp;Home</a>'  
  13.  
  14.  
  15.  
  16. //Contents for Help  
  17. var menu2=new Array()  
  18. menu2[0]='<a href="http://www.mysite.com/forum/contact_us.php"><img src="images/icon_dot.gif"> <alt title="Contact us" />&nbsp;Contact us</a>'  
  19.  
  20.  
  21.  
  22. //Contents for login and my links  
  23. var menu3=new Array()  
  24. menu3[0]='<a href="{U_LOGIN_LOGOUT}"> <img src="images/icon_dot.gif"> <alt title="Log in / Log out" />&nbsp;Log in / Log out </a>'  
  25.  
  26.  
  27.           
  28. var menuwidth='150px' //default menu width  
  29. var menubgcolor='#F8F8F8'  //menu bgcolor  
  30. var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)  
  31. var hidemenu_onclick="yes" //hide menu when user clicks within menu?  
  32.  
  33. /////No further editting needed  
  34.  
  35. var ie4=document.all  
  36. var ns6=document.getElementById&&!document.all  
  37.  
  38. if (ie4||ns6)  
  39. document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')  
  40.  
  41. function getposOffset(what, offsettype){  
  42. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;  
  43. var parentEl=what.offsetParent;  
  44. while (parentEl!=null){  
  45. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;  
  46. parentEl=parentEl.offsetParent;  
  47. }  
  48. return totaloffset;  
  49. }  
  50.  
  51.  
  52. function showhide(obj, e, visible, hidden, menuwidth){  
  53. if (ie4||ns6)  
  54. dropmenuobj.style.left=dropmenuobj.style.top=-500  
  55. if (menuwidth!=""){  
  56. dropmenuobj.widthobj=dropmenuobj.style  
  57. dropmenuobj.widthobj.width=menuwidth  
  58. }  
  59. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")  
  60. obj.visibility=visible  
  61. else if (e.type=="click")  
  62. obj.visibility=hidden  
  63. }  
  64.  
  65.  
  66. function iecompattest(){  
  67. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body  
  68. }  
  69.  
  70. function clearbrowseredge(obj, whichedge){  
  71. var edgeoffset=0  
  72. if (whichedge=="rightedge"){  
  73. var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15  
  74. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth  
  75. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)  
  76. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth  
  77. }  
  78. else{  
  79. var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset  
  80. var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18  
  81. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight  
  82. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?  
  83. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight  
  84. if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?  
  85. edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge  
  86. }  
  87. }  
  88. return edgeoffset  
  89. }  
  90.  
  91. function populatemenu(what){  
  92. if (ie4||ns6)  
  93. dropmenuobj.innerHTML=what.join("")  
  94. }  
  95.  
  96.  
  97. function dropdownmenu(obj, e, menucontents, menuwidth){  
  98. if (window.event) event.cancelBubble=true  
  99. else if (e.stopPropagation) e.stopPropagation()  
  100. clearhidemenu()  
  101. dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv  
  102. populatemenu(menucontents)  
  103.  
  104. if (ie4||ns6){  
  105. showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)  
  106. dropmenuobj.x=getposOffset(obj, "left")  
  107. dropmenuobj.y=getposOffset(obj, "top")  
  108. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"  
  109. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"  
  110. }  
  111.  
  112. return clickreturnvalue()  
  113. }  
  114.  
  115. function clickreturnvalue(){  
  116. if (ie4||ns6) return false  
  117. else return true  
  118. }  
  119.  
  120. function contains_ns6(a, b) {  
  121. while (b.parentNode)  
  122. if ((b = b.parentNode) == a)  
  123. return true;  
  124. return false;  
  125. }  
  126.  
  127. function dynamichide(e){  
  128. if (ie4&&!dropmenuobj.contains(e.toElement))  
  129. delayhidemenu()  
  130. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))  
  131. delayhidemenu()  
  132. }  
  133.  
  134. function hidemenu(e){  
  135. if (typeof dropmenuobj!="undefined"){  
  136. if (ie4||ns6)  
  137. dropmenuobj.style.visibility="hidden"  
  138. }  
  139. }  
  140.  
  141. function delayhidemenu(){  
  142. if (ie4||ns6)  
  143. delayhide=setTimeout("hidemenu()",disappeardelay)  
  144. }  
  145.  
  146. function clearhidemenu(){  
  147. if (typeof delayhide!="undefined")  
  148. clearTimeout(delayhide)  
  149. }  
  150.  
  151. if (hidemenu_onclick=="yes")  
  152. document.onclick=hidemenu  
  153.  
  154. </script>  
  155. <!-- [END] XS Dropdown & OnClick Menus --> 







Code: [Download] [Hide]
  1. <script type="text/javascript">  
  2.  
  3. <!--  
  4. function help_popup(help_key)  
  5. {  
  6.         window.open('dl_help.php?help_key=' + help_key, '_blank', 'height=400,resizable=yes,width=550');;  
  7. }  
  8. //-->  
  9. </script>  
  10.  
  11. <SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>  
  12. <!-- Popup Generator -->  
  13. <!--  
  14. var win=null;  
  15. function NewWindow(mypage,myname,w,h,pos,infocus){  
  16. if(pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}  
  17. if(pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;}  
  18. else if((pos!='center' && pos!="random") || pos==null){myleft=0;mytop=20}  
  19. settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no";win=window.open(mypage,myname,settings);  
  20. win.focus();}  
  21. // -->  
  22. </script>  
  23.  
  24. <SCRIPT LANGUAGE="Javascript">  
  25. var win = null;  
  26. function Gk_PopTart(mypage,myname,w,h,scroll)  
  27. {  
  28.   LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;  
  29.   TopPosition = (screen.height) ? (screen.height-h)/2 : 0;  
  30.   settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable=yes';  
  31.   win = window.open(mypage,myname,settings);  
  32. }  
  33. </SCRIPT>  
  34.  
  35. <SCRIPT LANGUAGE="Javascript">  
  36. var win = null;  
  37. function Gk_PopTart(mypage,myname,w,h,scroll)  
  38. {  
  39.   LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;  
  40.   TopPosition = (screen.height) ? (screen.height-h)/2 : 0;  
  41.   settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable=yes';  
  42.   win = window.open(mypage,myname,settings);  
  43. }  
  44. </SCRIPT>  
  45.  
  46. <SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>  
  47. <!-- Popup Generator -->  
  48. <!--  
  49. var win=null;  
  50. function NewWindow(mypage,myname,w,h,pos,infocus){  
  51. if(pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}  
  52. if(pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;}  
  53. else if((pos!='center' && pos!="random") || pos==null){myleft=0;mytop=20}  
  54. settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ",scrollbars=yes,location=yes,directories=no,status=no,menubar=no,toolbar=no,resizable=no";win=window.open(mypage,myname,settings);  
  55. win.focus();}  
  56. // -->  
  57. </script>  
  58.  
  59.  
  60. </head> 



Code: [Download] [Hide]
  1. <!-- [BEGIN] XS Dropdown & OnClick Menus -->                  
  2.  
  3. <a href="javascript:void(1);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '180px')" onMouseout="delayhidemenu()">Main Links</a>  &nbsp;<img src="images/menu_sep.png"/>  
  4.  
  5. <a href="javascript:void(2);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '180px')" onMouseout="delayhidemenu()">Help</a>  &nbsp;<img src="images/menu_sep.png"/>  
  6.  
  7. <a href="javascript:void(3);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '180px')" onMouseout="delayhidemenu()">Login / My Links</a> &nbsp;<img src="images/menu_sep.png"/>                  
  8.  
  9. <!-- [END] XS Dropdown & OnClick Menus --> 
    



It does create the menu, but it's above the logo instead of under it (see below), plus it's aligned on the left instead of in the middle.  Can anyone help?


 untitled1
 



 
Edited by brandsrus, Sat 12 Apr, 2008 23:45: next time, code in the code tags, thanks
#1  Wed 09 Apr, 2008 21:33
tc1967ukSend private message  
Back to topPage bottom
Sponsors
Icy Phoenix is an open source project, you can show your appreciation and support future development by donating to the project.

Support us
 
Offline tonyf12 
Contributor
avatar
Joined: March 2007
Posts: 204
Location: blank.gif
 
 
Reply with quote Download Post 
Post Re: Adding XS Dropdown & OnClick Menus 
 
I don't entirely know how the template works but my guess would be to move it down a <tr> and put text-align:right into your CSS.
 




____________
CivUnited
 
#2  Wed 09 Apr, 2008 21:44
tonyf12Send private messageVisit poster's website  
Back to topPage bottom
Offline moreteavicar 
Staff
avatar
Joined: August 2006
Posts: 608
Location: blank.gif Classified
 
 
Reply with quote Download Post 
Post Re: Adding XS Dropdown & OnClick Menus 
 
Yes, its all within a table, so you need to put it in both <tr> and <td> e.g.:

<tr>
<td class="forum-buttons" colspan="3" width="100%">

and close with:

</td>
</tr>

Note the colspan is important as the header table is divided into 3 columns

*Edit - moved to templates and styles
 



 
#3  Wed 09 Apr, 2008 22:50
moreteavicarSend private message  
Back to topPage bottom
Offline tc1967uk Male
 
avatar
Joined: March 2007
Posts: 129
Location: england.png
 
 
Reply with quote Download Post 
Post Re: Adding XS Dropdown & OnClick Menus 
 
Thanks moreteavicar, that worked.

I've got it in the right row now, but I can't get it aligned correctly.  I tried to edit style_ice.css, but I can't get the menu to stay in the middle of the row AND get the menu options and their bullet points aligned on the left at the same time.    Can anyone help?
 



 
#4  Sat 12 Apr, 2008 10:47
tc1967ukSend private message  
Back to topPage bottom
 Inactive User 
avatar
 
Reply with quote Download Post 
Post Re: Adding XS Dropdown & OnClick Menus 
 


After you have centred the main menu's, try this example for the dropdown's:

Code: [Download] [Hide] [Select]
//Contents for Main Links
var menu1=new Array()
menu1[0]='<div align="left"><a href="h**p://***.mysite.com/forum/index.php"><img src="images/icon_dot.gif"> <alt title="Home" />&nbsp;Home</a></div>'


You may also want to try <div id="whatever and add it to the .css?

You should also change alt to alt="" and title="home" to title="" as the image has no significance because you are using "Home" as the anchor. Else if the image was to get "Lost" for whatever reason, you would end up with >"Home" "Home"<

Edit:

Oops!   I've only just noticed that the strings you are using contain other errors.

Use this example instead: And title is not really required.

Code: [Download] [Hide] [Select]
//Contents for Main Links
var menu1=new Array()
menu1[0]='<div align="left"><a href="h**p://***.mysite.com/forum/index.php"><img src="images/icon_dot.gif" alt="" border="0" />&nbsp;Home</a></div>'

 
 
#5  Sat 12 Apr, 2008 12:27
 
Back to topPage bottom
Offline tc1967uk Male
 
avatar
Joined: March 2007
Posts: 129
Location: england.png
 
 
Reply with quote Download Post 
Post Re: Adding XS Dropdown & OnClick Menus 
 
Worked a treat, Lopalong - thanks.

I kept the Alt Title stuff as I thought it was best practice to have text show up (at least in Firefox, it doesn't seem to work in IE) when you hover your cursor over it.   I believe people with sight problems can use software to read the links out to them?  It all seems to work nicely now, anyway.  
 



 
#6  Sat 12 Apr, 2008 17:41
tc1967ukSend private message  
Back to topPage bottom
 Inactive User 
avatar
 
Reply with quote Download Post 
Post Re: Adding XS Dropdown & OnClick Menus 
 
tc1967uk wrote: [View Post]
Worked a treat, Lopalong - thanks.

I kept the Alt Title stuff as I thought it was best practice to have text show up (at least in Firefox, it doesn't seem to work in IE) when you hover your cursor over it.   I believe people with sight problems can use software to read the links out to them?


That's very thoughtful of you.

This example for "Hover over the image" should work in both IE and FF, maybe it's because it was wrapped-out that it didn't work.

Code: [Download] [Hide] [Select]
<img src="images/icon_dot.gif" alt="Home" title="Home" border="0" />

 
 
#7  Sun 13 Apr, 2008 01:12
 
Back to topPage bottom
Post new topic  Reply to topic  Page 1 of 1
 


Display posts from previous:    

HideWas this topic useful?

Link this topic
URL
BBCode
HTML

Home » Forum » Icy Phoenix Support » Older Versions Archive » Old Styles Topics

The time now is Thu 04 Sep, 2025 13:12 • All times are UTC + 1 Hour [DST enabled]
View previous topic Recent Topics Enable KB mode Download Topic Printable Version Email to a Friend View next topic




 
Permissions List
You cannot post new topics
You cannot reply to topics
You cannot edit your posts
You cannot delete your posts
You cannot vote in polls
You cannot attach files
You can download files
You cannot post calendar events

  

 
 Powered by Icy Phoenix based on phpBB
Lo-Fi Version - Privacy Policy - Cookie Policy
Generation Time: 0.1703s (PHP: 12% SQL: 88%)
SQL queries: 11 - Debug Off - GZIP Enabled
Design by Luca Libralato