Home •  Forum •  FAQ •  Search •  Recent Topics •  Memberlist •  Register •  Log in 
Forum » Icy Phoenix Support » Older Versions Archive » Old Styles Topics

SOLVED Adding XS Dropdown & OnClick Menus

Reply to topic

 

tc1967uk
Quote
Posts: 129
Wed 09 Apr, 2008 21:33
Subject: 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

Profile PM  
tonyf12
Quote
Posts: 204
Wed 09 Apr, 2008 21:44
Subject: 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.

Profile PM   Website
moreteavicar
Quote
Posts: 608 Location: Classified
Wed 09 Apr, 2008 22:50
Subject: 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

Profile PM  
tc1967uk
Quote
Posts: 129
Sat 12 Apr, 2008 10:47
Subject: 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?

Profile PM  
Inactive User
Quote

Sat 12 Apr, 2008 12:27
Subject: 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! :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>'

tc1967uk
Quote
Posts: 129
Sat 12 Apr, 2008 17:41
Subject: 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. :mryellow:

Profile PM  
Inactive User
Quote

Sun 13 Apr, 2008 01:12
Subject: 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? :mryellow:


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" />

Reply to topic
 

Page 1 of 1


  
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

   

This is a "Lo-Fi" version of our main content. To view the full version with more information, formatting and images, please click here.

Powered by Icy Phoenix based on phpBB
Generation Time: 0.1522s (PHP: 13% SQL: 87%)
SQL queries: 11 - Debug Off - GZIP Enabled