Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Flyout Menu 4.0.x Needs Work, but hey.. getting there
 
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features
 
Thread Tools Search this Thread
  #1  
Old 08-14-2004, 06:17 PM
 
1320AutoSports 1320AutoSports is offline
 

Advanced Member
  
Join Date: Apr 2003
Posts: 89
 

Default Flyout Menu 4.0.x Needs Work, but hey.. getting there

Since I know little about programming, I figure most can help.. I got the flyout menu to work on 4.0.1 (sure it will work on 4.0.0) but here is the code.

Create new file named dropdown.tpl and paste this into it and save
Code:
{* dropdown.tpl from Ben Kevan www.mtgcardhouse.com *} {literal} <script language="JavaScript1.2"> //Pop-it menu- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var linkset=new Array() //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT {/literal} {section name=cat_num loop=$categories} {assign var="temp" value="0"} {section name=cat loop=$allcategories} {if $allcategories[cat].parentid eq $categories[cat_num].categoryid_path} {$temp} {if $temp gt 0} linkset[{$smarty.section.cat_num.index}] +='<div class="menuitems">{$allcategories[cat].category}</div>' {else} linkset[{$smarty.section.cat_num.index}] ='<div class="menuitems">{$allcategories[cat].category}</div>' {/if} {math equation="temp+1" temp=$temp assign=temp} {/if} {/section} {/section} {literal} ////No need to edit beyond here var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 var ns6=document.getElementById&&!document.all var ns4=document.layers function showmenu(e,which){ if (!document.all&&!document.getElementById&&!document.layers) return clearhidemenu() menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : "" menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj if (ie4||ns6) menuobj.innerHTML=which else{ menuobj.document.write('<layer name=gui bgColor=#081589 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>') menuobj.document.close() } menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height eventX=ie4? event.clientX : ns6? e.clientX : e.x eventY=ie4? event.clientY : ns6? e.clientY : e.y //Find out how close the mouse is to the corner of the window var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.contentwidth) //move the horizontal position of the menu to the left by it's width menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth else //position the horizontal position of the menu where the mouse was clicked // menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX //same concept with the vertical position if (bottomedge<menuobj.contentheight) menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight else menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY menuobj.thestyle.visibility="visible" return false } function contains_ns6(a, b) { //Determines if 1 element in contained in another- by Brainjar.com while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function hidemenu(){ if (window.menuobj) menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide" } function dynamichide(e){ if (ie4&&!menuobj.contains(e.toElement)) hidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) hidemenu() } function delayhidemenu(){ if (ie4||ns6||ns4) delayhide=setTimeout("hidemenu()",500) } function clearhidemenu(){ if (window.delayhide) clearTimeout(delayhide) } function highlightmenu(e,state){ if (document.all) source_el=event.srcElement else if (document.getElementById) source_el=e.target if (source_el.className=="menuitems"){ source_el.id=(state=="on")? "mouseoverstyle" : "" } else{ while(source_el.id!="popmenu"){ source_el=document.getElementById? source_el.parentNode : source_el.parentElement if (source_el.className=="menuitems"){ source_el.id=(state=="on")? "mouseoverstyle" : "" } } } } if (ie4||ns6) document.onclick=hidemenu </script> {/literal}

Replace your categories.tpl file with:
Code:
{* $Id: categories.tpl modified by Ben Kevan www.mtgcardhouse.com*} {capture name=menu} <div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)"> </div> {if $config.General.root_categories eq "Y"} {section name=cat_num loop=$categories} {assign var="tmp" value="0"} {if $allcategories[cat].parentid != $categories[cat_num].categoryid_path} {assign var="tmp" value="1"} {/if} <font class=CategoriesList> <a href="home.php?cat={ $categories[cat_num].categoryid }" class="VertMenuItems" {if $tmp eq 1}onMouseover="showmenu(event,linkset[{$smarty.section.cat_num.index}])" onMouseout="delayhidemenu()"{/if}> { $categories[cat_num].category|escape }</a></font> {/section} {else} {section name=cat_num loop=$subcategories} <font class=CategoriesList> <a href="home.php?cat={ $subcategories[cat_num].categoryid }" class=VertMenuItems> { $subcategories[cat_num].category|escape }</a></font> {/section} {/if} {/capture} { include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }

Lastly add:
Code:
{ include file="dropdown.tpl" }
into your home.tpl in the head section

As you see, you do not need to modify the categories.php since we can now just check to see if productid mathes categoryid_path.

BUGS:
When you hover over something with no categories it reports, undefined (working on fixing that)

for example. please go to

www.mtgcardhouse.com/store/home.php

Again I need all the help I can get since I am new to this programming stuff, and have never done it in my life. Thanks

EDIT: UPDATED CODE
Reply With Quote
  #2  
Old 08-18-2004, 07:14 AM
 
1320AutoSports 1320AutoSports is offline
 

Advanced Member
  
Join Date: Apr 2003
Posts: 89
 

Default

Anyone else try this?

I have it working here:

www.mtgcardhouse.com/store
Reply With Quote
  #3  
Old 09-04-2004, 11:12 AM
 
windance windance is offline
 

Member
  
Join Date: Aug 2004
Posts: 15
 

Default fly out

But uhm, doesn't 4.0.3 have a flyout menu choice during install now?
__________________
X-Cart Version 4.03Gold, X-AOM 4.03, X-Fancycat 4.03, X-RMA 4.03
Hosting with EWDhosting - and VERY glad I am.
Reply With Quote
  #4  
Old 01-26-2005, 11:26 AM
 
Danielle Danielle is offline
 

Senior Member
  
Join Date: Jan 2005
Posts: 138
 

Default

Is there a flyout menu choice in the latest version? If so, I missed it during install, can I add it now?
__________________
Danielle
X-Cart Pro 4.0.10
X-Gift-Registry
X-AOM
Reply With Quote
  #5  
Old 01-26-2005, 12:34 PM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default

That would be the X-Cart Fancy Categories mod. I don't recommend it though, slows your site WAY down.....

The site mentioned above appears extremely slow for me as well...not sure if it is the categories mod or just a bad connection.....
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #6  
Old 04-29-2005, 06:34 AM
  Owl's Avatar 
Owl Owl is offline
 

Advanced Member
  
Join Date: Mar 2003
Location: Sweden
Posts: 92
 

Default

Woho, an MTG shop =) i used to love magic cards
__________________
-----------------------------------
4.2 rox...

http://www.fivestar.nu | www.nystil.se | www.hidealite.se
Reply With Quote
  #7  
Old 04-29-2005, 07:56 AM
 
sstillwell@aerostich.com sstillwell@aerostich.com is offline
 

eXpert
  
Join Date: Jun 2004
Location: Duluth, MN
Posts: 242
 

Default

Hmmm, the example site is quite slow (1 minute load time). Maybe just where I am, but slow.

Also in FF the menus are a bit too far to the right.

I used a different product, and mine are static, but you can see "fly out" menus on the left menu at:
http://www.aerostich.com
__________________
No longer using Xcart, was good while it lasted.
Reply With Quote
  #8  
Old 05-20-2005, 12:39 PM
 
sstillwell@aerostich.com sstillwell@aerostich.com is offline
 

eXpert
  
Join Date: Jun 2004
Location: Duluth, MN
Posts: 242
 

Default

Ok, for those that are asking what I used. I got the javascript here
http://www.ricom.co.uk/resources.php

I also edited alittle bit to make it do what I wanted (like transparency for FF).

There are some other JS menus out there but this one was free, open, and it was very configurable.
__________________
No longer using Xcart, was good while it lasted.
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 12:14 PM.

   

 
X-Cart forums © 2001-2018