Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

coolMenu


Keyser Soze

Recommended Posts

Oh - but you mixup the 2 solutions. You can't have 2

oCMenu=new makeCM("oCMenu")

and 2 oCMenu.fromLeft and oCMenu.fromTop

I have commented out your code snippet below, so it will work.

Then try to ajust the oCMenu.fromLeft and oCMenu.fromTop by adding og subtracting numbers untill position is right.

Remember also the the $height calculation is in ...boxes/coolmenu.php

You have to comment that out also, if you have it elsewhere (say in ...includes/coolmenu.php

 

 

oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname
pos = findPos()
//Menu properties
oCMenu.pxBetween=0
//experiment with fromleft and fromtop - I use -2 and -7 but you can try something different and place the menu anywhere on the page
oCMenu.fromLeft=pos[0]
oCMenu.fromTop=pos[1]
oCMenu.onresize="location.reload()"
oCMenu.rows=0
// etc.


//  oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname

 //Menu properties
//  oCMenu.pxBetween=0
//  oCMenu.rows=0
 oCMenu.menuPlacement="left"
//  oCMenu.fromLeft=9
//  oCMenu.fromTop=186

 oCMenu.offlineRoot=""
 oCMenu.onlineRoot=""
 oCMenu.resizeCheck=1
 oCMenu.wait=500
 oCMenu.fillImg="cm_fill.gif"
 oCMenu.zIndex=0

 //Background bar properties
 oCMenu.useBar=1
 oCMenu.barWidth="menu"
 oCMenu.barHeight="menu"
 oCMenu.barClass="clBar"
 oCMenu.barX="menu"
 oCMenu.barY="menu"
 oCMenu.barBorderX=0
 oCMenu.barBorderY=0
 oCMenu.barBorderClass=""
//             etc. etc.

Link to comment
Share on other sites

  • Replies 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

I love this menu but It isn't working in the product's page.

 

I have the

 

INbetween the <hear></head>

<script LANGUAGE="JavaScript1.2" SRC="includes/menu_animation.js"></SCRIPT>

 

 

and the <!-- header //-->

<?php require(DIR_WS_INCLUDES . 'header.php'); ?>

<!-- header_eof //-->

right under the <body></body> right about the

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<!-- coolMenu //-->
<?php require(DIR_WS_INCLUDES . 'coolmenu.php'); ?>
<!-- coolMenu_eof //-->
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

 

and it stil doesn't work it works in all the other files.

can someone please help me.

noppie

Link to comment
Share on other sites

I love this menu but It isn't working in the product's page.

 

I have the

 

INbetween the <hear></head>

<script LANGUAGE="JavaScript1.2" SRC="includes/menu_animation.js"></SCRIPT>

 

 

and the <!-- header //-->

<?php require(DIR_WS_INCLUDES . 'header.php'); ?>

<!-- header_eof //-->

  right under the <body></body> right about the

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<!-- coolMenu //-->
<?php require(DIR_WS_INCLUDES . 'coolmenu.php'); ?>
<!-- coolMenu_eof //-->
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

 

and it stil doesn't work it works in all the other files.

can someone please help me.

noppie

What product page do you mean and why is it not working.

 

have you got the include "column left" showing?

Link to comment
Share on other sites

So has anyone got this working on STS yet?  I am still waiting for that answer... ANYONE?

 

As an experiment I got it working with my own solution to the coolmenu contribution, that I worked out so it could function with centered pages.

The solution is here:

http://www.oscommerce.com/forums/index.php?sho...00entry404481

 

I then did this to make it work with STS

 

http://www.oscommerce.com/forums/index.php?sho...ndpost&p=404481

Link to comment
Share on other sites

Oh - but you mixup the 2 solutions. You can't have 2

oCMenu=new makeCM("oCMenu")

and 2 oCMenu.fromLeft and oCMenu.fromTop

I have commented out your code snippet below, so it will work.

Then try to ajust the oCMenu.fromLeft and oCMenu.fromTop by adding og subtracting numbers untill position is right.

Remember also the the $height calculation is in ...boxes/coolmenu.php

You have to comment that out also, if you have it elsewhere (say in ...includes/coolmenu.php

 

OK - I am getting closer, I followed your instructions and now I can move the menu around and get the position right, but when I adjust the width of my browser the menu isn't adjusting to the new position, so I am still doing something wrong.

 

Here catalog>includes>coolmenu.php

 

<?php

/* ------------------------------------------------

 coolMenu for osCommerce
 
 author:	Andreas Kothe 
 url:  http://www.oddbyte.de


 Released under the GNU General Public License
 
 ------------------------------------------------ 
*/




// --- CONFIG ---

define('SHOW_COUNT','false');
define('SUB_CATEGORIES','7');





if (MAX_MANUFACTURERS_LIST < 2) {
   $cat_choose = array(array('id' => '', 'text' => BOX_CATEGORIES_CHOOSE));
} else {
   $cat_choose = '';
}

?>



   <!--  Copyright 2002 www.dhtmlcentral.com  --  modified for PHP and osCommerce by Andreas Kothe - www.oddbyte.de	-->

 <script>
 
 //Extra code to find position:
function findPos(){
if(bw.ns4){ //Netscape 4
x = document.layers.tlayerm.pageX
y = document.layers.tlayerm.pageY
}else{ //other browsers
x=0; y=0; var el,temp
el = bw.ie4?document.all["topm"]:document.getElementById("topm");
if(el.offsetParent){
temp = el
while(temp.offsetParent){ //Looping parent elements to get the offset of them as well
temp=temp.offsetParent;
x+=temp.offsetLeft
y+=temp.offsetTop
}
}
x+=el.offsetLeft
y+=el.offsetTop
}
//Returning the x and y as an array
return [x,y]
}

oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname
pos = findPos()
//Menu properties
oCMenu.pxBetween=0
//experiment with fromleft and fromtop - I use -2 and -7 but you can try something different and place the menu anywhere on the page
oCMenu.fromLeft=pos[1]+75
oCMenu.fromTop=pos[0]+192
oCMenu.onresize="location.reload()"
oCMenu.rows=0
// etc.


//  oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname

//Menu properties
//  oCMenu.pxBetween=0
//  oCMenu.rows=0
oCMenu.menuPlacement="left"
//  oCMenu.fromLeft=9
//  oCMenu.fromTop=186

oCMenu.offlineRoot=""
oCMenu.onlineRoot=""
oCMenu.resizeCheck=1
oCMenu.wait=500
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=0

//Background bar properties
oCMenu.useBar=1
oCMenu.barWidth="menu"
oCMenu.barHeight="menu"
oCMenu.barClass="clBar"
oCMenu.barX="menu"
oCMenu.barY="menu"
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""

etc....

 

And Here is catalog>includes>boxes>coolmenu.php

 

<?php
/* ------------------------------------------------

 coolMenu for osCommerce
 
 author:	Andreas Kothe 
 url:  http://www.oddbyte.de


 Released under the GNU General Public License
 
 ------------------------------------------------ 
*/

?>
<!-- coolMenu //-->

<!-- copyright 2003 Andreas Kothe - www.oddbyte.de // -->

<tr>
 <td> 
   <table width="125" border="0" cellspacing="0" cellpadding="0" class="infoboxborder">
     <tr>
       <td>          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="infoBoxContents">
           <tr> 
             <td colspan=3 width="100%"> <img src="images/boxes/table_categories.gif"></td>
           </tr>
           <tr> 
             <td width="100%"> 
               <?php


 $info_box_contents = array();
 if (MAX_MANUFACTURERS_LIST < 2) {
$cat_choose = array(array('id' => '', 'text' => BOX_CATEGORIES_CHOOSE));
 } else {
$cat_choose = '';
 }



//the code below ajusts the height of the coolmenu dynamically according to the number of categories in the main menu
$result=tep_db_query("select parent_id from " . TABLE_CATEGORIES . " where parent_id = '0'");
$height.= 21*mysql_num_rows($result)-21; //where A is the height of your oCMenu.level[0].height
//experiment with the multiplyer denpending on the size of your menu

$info_box_contents[] = array('text' => '<ilayer id="tlayerm"><div id="topm"><img src="images/trans.gif" width="'. BOX_WIDTH .'" height="' . $height . '"></div></ilayer>');

//BOX_WIDTH you set in .../includes/application_top.php



 new infoBox($info_box_contents);

?>
             </td>
           </tr>
         </table>
       </td>
     </tr>
   </table>    
 </td>
</tr>


<!-- coolMenu_eof //-->

 

And in the footer I now have this

 

<?php
/*
 $Id: footer.php,v 1.26 2003/02/10 22:30:54 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 require(DIR_WS_INCLUDES . 'counter.php');
?>
<table border="0" width="100%" cellspacing="0" cellpadding="1"><?php require(DIR_WS_INCLUDES . 'coolmenu.php'); ?>
<tr class="footer">
  <td align="center" class="headerNavigation"><a href="<?php echo tep_href_link(FILENAME_DEFAULT, '', 'SSL'); ?>" alt="Home" class="headerNavigation">Home</a> | <a href=games.php class="headerNavigation">Fun & Games</a><img src="images/icons/new.gif">  | <a href=ringtones/index.php class="headerNavigation" >Mobile Fun</a><img src="images/icons/new.gif">   </td>
   
 </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center" class="smallText">

etc...

 

So it is all working but it's not adjusting to the browser width. Where now?

Link to comment
Share on other sites

I am not sure what you mean by "not adjusting to the browser width".

 

Can I see a living example (you talked about using a centered page but your site fills the whole browser window).

Edited by hjp
Link to comment
Share on other sites

As you may see from the ..../boxes/coolmenu.php file, I am aming at a 1 pix gif file:

trans.gif. This is enclosed in a div in the ..../boxes/coolmenu.php file.

But I gather, that you have placed all of your oscommerce files in the catalog directory but have the index.php file in your root directory - so the path to the gif file is then wrong, and therefore my code can't find the gif file on resize check.

 

If its's true - about the catalog dir - write an absolute path to the trans.gif in the ..../boxes/coolmenu.php file. I think it should be /catalog/images/trans.gif instead.

Link to comment
Share on other sites

As you may see from the ..../boxes/coolmenu.php file, I am aming at a 1 pix gif file:

trans.gif. This is enclosed in a div in the ..../boxes/coolmenu.php file.

But I gather, that you have placed all of your oscommerce files in the catalog directory but have the index.php file in your root directory - so the path to the gif file is then wrong, and therefore my code can't find the gif file on resize check.

 

If its's true - about the catalog dir - write an absolute path to the trans.gif in the ..../boxes/coolmenu.php file. I think it should be /catalog/images/trans.gif instead.

Please disregard my last post. The path to the trans.gif file is correct, because I can see that the height is correctly calculated.

 

In stead I think you have placed the "<?php require(DIR_WS_INCLUDES . 'coolmenu.php'); ?>" incorrect in the footer.php. As I have stated in my description

under point 2:

2: in /catalog/includes/footer.php place

 

<!-- coolMenu //--><?php require(DIR_WS_INCLUDES . 'coolmenu.php'); ?><!-- coolMenu_eof //-->

 

at the very bottom

 

My code must come after the last </table> tag in order to work.

 

I can see from your source code that this is not the case.

Link to comment
Share on other sites

OK I have placed the code in the footer:

 

<?php
/*
 $Id: footer.php,v 1.26 2003/02/10 22:30:54 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 require(DIR_WS_INCLUDES . 'counter.php');
?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="footer">
   <td class="footer">  <?php echo strftime(DATE_FORMAT_LONG); ?>  </td>
   
 </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center" class="smallText">
 
<div>
<table border="1" bordercolor="white" bordercolordark="white" bordercolorlight="white">
   <tr bordercolordark="white" bordercolorlight="white">
       <td width="320" bordercolordark="white" bordercolorlight="white">
           <a href="http://www.popcorn-uk.com/catalog/all_products.php"><img src="http://www.popcorn-uk.com/catalog/images/links/all_products.GIF" width="36" height="25" border="0"></a>                    </td>
       <td width="320">
           <p align="center"><img src="http://www.popcorn-uk.com/catalog/images/cards.jpg" target="_blank" border="0"><a href="http://www.worldpay.co.uk/index.php" target="_blank"><img src="http://www.popcorn-uk.com/catalog/images/poweredByWorldPay.gif" border="0"></a>
           <table>
<TR>
<TD class=main align=middle><font size="1" face="Verdana">Copyright ? 2003 - 2004 Popcorn-uk</font></TD></TR>
<TR>
<TD class=main align=middle><font size="1" face="Verdana">Images are for illustration purposes only</font></TD></TR>
           </table>

       </td>
       <td width="320">
           <p> 
           <p align="right"><a href="http://seals.squaretrade.com/cW040/766339631.map"
target="_blank"><img ismap src="http://seals.squaretrade.com/cW040/766339631.gif"
alt="Building Trust in Transactions (tm)" border=0></a>        </td>
   </tr>
</table>
</div>

   
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
 <tr>
   <td align="center" class="smallText">

 
<?php



/*
 The following copyright announcement can only be
 appropriately modified or removed if the layout of
 the site theme has been modified to distinguish
 itself from the default osCommerce-copyrighted
 theme.

 For more information please read the following
 Frequently Asked Questions entry on the osCommerce
 support site:

 http://www.oscommerce.com/community.php/faq,26/q,50

 Please leave this comment intact together with the
 following copyright announcement.
*/


 
?>
   </td>
 </tr>
</table>
<?php
 if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center"><?php echo tep_display_banner('static', $banner); ?></td>
 </tr>
</table>
<?php
 }
?>

<?php
///////////////////
// [0001] WebMakers.com Added: Center Shop
// This goes at the very end of the footer after all the tables
///////////////////

 if ( CENTER_SHOP_ON == 'on' ) {
  
///////////////////
// [0001] close table used to center
///////////////////
?>
     </td></tr>
   </table>
<?php
   if ( CENTER_SHOP_BACKGROUND_ON == 'on' ) {
    
///////////////////
// [0001] Add color to bottom of screen for large displays - needed especially on notebooks that run at 1600x1200
// close table used for outer bgcolor around the shop
///////////////////
?>
     </td></tr>
     <tr><td height="150"> </td></tr>
   </table>
<?php
   }
 }
///////////////////
// [0001] EOF: WebMakers.com Added: Center Shop
///////////////////
///////////////////

?>
<!-- coolMenu //--><?php require(DIR_WS_INCLUDES . 'coolmenu.php'); ?><!-- coolMenu_eof //-->

 

On my screen now the coolmenu is in place when on a full screen but when a restore down on my browser it moves badly out of place.

 

Again I have left it centered so you can see.

Link to comment
Share on other sites

I don't know - it really should work. Maybe there is some hidden typo in the text of the coolmenu.php file.

The minus 135 in fromLeft and plus 107 in fromTop is far out.

 

Try to delete the lines

oCMenu.fromLeft=pos[1]-135

oCMenu.fromTop=pos[0]+107

oCMenu.onresize="location.reload()"

 

And then retype them, and start by typing

oCMenu.fromLeft=pos[1]

oCMenu.fromTop=pos[0]

 

without extra numbers. The menu should then be placed nearly correctly.

 

If that works on browser resize, you can move the menu later.

 

 

 

oCMenu.fromLeft=pos[1]-135

oCMenu.fromTop=pos[0]+107

oCMenu.onresize="location.reload()"

Link to comment
Share on other sites

I don't know - it really should work. Maybe there is some hidden typo in the text of the coolmenu.php file.

The minus 135 in fromLeft and plus 107 in fromTop is far out.

 

Try to delete the lines

oCMenu.fromLeft=pos[1]-135

oCMenu.fromTop=pos[0]+107

oCMenu.onresize="location.reload()"

 

And then retype them, and start by typing

oCMenu.fromLeft=pos[1]

oCMenu.fromTop=pos[0]

 

without extra numbers. The menu should then be placed nearly correctly.

 

If that works on browser resize, you can move the menu later.

 

 

 

oCMenu.fromLeft=pos[1]-135

oCMenu.fromTop=pos[0]+107

oCMenu.onresize="location.reload()"

Oh I see an error now.

Have I really typed

 

oCMenu.fromLeft=pos[1]

oCMenu.fromTop=pos[0]

 

in my examples?

 

because it should be

 

oCMenu.fromLeft=pos[0]

oCMenu.fromTop=pos[1]

 

Try that without adding or subtracting any numbers. I should come close.

Then try to resize your browser.

 

You can move the menu later to fit the box.

Link to comment
Share on other sites

OK have done that and now the menu moves but it changes position every time you refresh. Give it a go and tell me if you are getting the same.

Your page is not centered any longer.

 

Which browser types are you testing on?

Link to comment
Share on other sites

Regarding getting this to play well with Simple Template System: I found the easiest method is to make coolMenu a regular STS drop-in option.

 

I added these lines to includes/sts_user_code.php:

 

	$sts_block_name = 'coolmenubox';
require(STS_START_CAPTURE);
require(DIR_WS_BOXES . 'coolmenu.php');
require(STS_STOP_CAPTURE);
$template['coolmenubox'] = strip_unwanted_tags($sts_block['coolmenubox'], 'coolmenubox');

$sts_block_name = 'coolmenu';
require(STS_START_CAPTURE);
require(DIR_WS_INCLUDES . 'coolmenu.php');
require(STS_STOP_CAPTURE);
$template['coolmenu'] = strip_unwanted_tags($sts_block['coolmenu'], 'coolmenu');

 

Then in sts_template.html, modify the top of the file so it looks something like this:

 

	<html>

<head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
 <link rel="stylesheet" type="text/css" href="new_styles.css">
 <title>The Best Web Site Ever</title>
 <script LANGUAGE="JavaScript1.2" SRC="includes/menu_animation.js"></SCRIPT>
 <base href="http://localhost">
</head>

<body>

 $coolmenu

 

... and wherever I want to make room for the menu itself, add:

 

$coolmenubox

 

In addition, I completely simplified includes/boxes/coolmenu.php, so all it does is make a space:

 

<!-- coolMenu //-->

<!-- copyright 2003 Andreas Kothe - www.oddbyte.de // -->

   <td><img src="images/spacer.gif" width="100" height="28" width="600" border="0"></td>

<!-- coolMenu_eof //-->

 

(I've got coolmenu running horizontally at the top of the page.)

 

I'd been working to center my site & the menu, but decided that a finished site is cooler than a centered site, and gave up.

 

I hope this is useful information - it's an STS mod, rather than a coolmenu mod, but still -

 

Michael

Link to comment
Share on other sites

Right now your page is not centered, so I can't see if the menu changes position.

 

Or does it also change position when it is not centered? Not from my view anyhow.

 

Sorry, it is a live shop so I don't want to leave it like that and have to put old files back. I have centered it again, and put the adjusted files back into place.

 

These should be exactly where we left off last night with all the changes and checks done.

Link to comment
Share on other sites

Right now your page is not centered, so I can't see if the menu changes position.

 

Or does it also change position when it is not centered? Not from my view anyhow.

 

Sorry, it is a live shop so I don't want to leave it like that and have to put old files back. I have centered it again, and put the adjusted files back into place.

 

These should be exactly where we left off last night with all the changes and checks done.

 

Yes but that is no good. Did you not read my comments here?:

 

http://www.oscommerce.com/forums/index.php?sho...ndpost&p=446558

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...