Frames ? Layers ? I just want to scroll

[namunday]

I have product sections which can be quite long and i would like to be able to keep the top 100 or so pixels visable. I know about the pitfalls of frames ( in particular i believe many search engines do not search framed data and this is where we beleive much of our business will come from ) and so would prefer not to use these. I have seen some examples using layers but what i have read suggested they are compatability issues. I have seen the Upsell example page from Normans Stuff http://christysports.com/acatalog/Dynastar_Skis.html which acheives something like I am after using using DIV tags which a couple of other posts on here have suggested using. Can anyone tell me if this the best thing to use

[NormanRouxel]

Here's how they did that. It's clean and simple.

Using CSS to set the products in a scrollable window

set this CSS

DIV.productLayout {
overflow: auto;
position: static;
visibility: visible;
height: 430px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
}


In Act_ProductBody.html 


amend

  <TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

	NETQUOTEVAR:PRODUCTBULK

  </TABLE>


to be


 <div class="productLayout">
  <TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

	NETQUOTEVAR:PRODUCTBULK

  </TABLE>
 </div>

New bits are in lower case. You may have some extra code between the <TABLE...> and </TABLE> as you're using V7, so don't overwrite it. Just copy the <div...> and </div> bits into the appropriate place.

Norman

[namunday]

Norman

Thanks for that, it worls great on the product pages. The only problem is that a blank space, the height as specified in the CSS ( i am right in thinking that i was supposed to first part of your post into the bottom of the actinic.css ). in the product body i had

<TABLE WIDTH="650" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">
<br><br>
	NETQUOTEVAR:PRODUCTBULK

<script language=JavaScript>
<!--
if ( currentcol != 0 )
 {
 while ( currentcol++ < CUSTOMVAR:NUMCOLS ) document.write('<td width="' + colwidth + '%"></td>');
 document.write('</tr></table></td></tr>');
 currentcol = 0;
 }
// -->
</script>
  </TABLE>

and i tried

<div class="productLayout">
  <TABLE WIDTH="650" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

	NETQUOTEVAR:PRODUCTBULK

<script language=JavaScript>
<!--
if ( currentcol != 0 )
 {
 while ( currentcol++ < CUSTOMVAR:NUMCOLS ) document.write('<td width="' + colwidth + '%"></td>');
 document.write('</tr></table></td></tr>');
 currentcol = 0;
 }
// -->
</script>
 </table>
 </div>

and i also tried putting the script outside of the table and div tags but always got the same thing. as soon as i replaced the file with the original productbody eveything went back to normal

[NormanRouxel]

The only problem is that a blank space, the height as specified in the CSS

Sorry, I don't know what you mean here - perhaps something got left out.

Also post a URL so we can see rather than having to rely on a description of a visual effect.

Norman

[namunday]

Norman

The problem is here

You will see on this page the gap at the botton and agaon if you click on the von dutch section, but any section that is composed of just products is unaffected

I have since the removed the javascript that was just below the table as this was left over from when i was trying multiple columns but still the problem remains

[NormanRouxel]

The problem seems to be that Actinic allows products to be on those section only pages and is creating the Act_ProductBody.html code just in case, and that code contains that fixed size <div class="productLayout"> tag.

I'm not sure what you can do to fix this. Perhaps someone else....

Norman

[namunday]

doy ou know if there is a way to change which product body template is used?

[NormanRouxel]

No. However, you could try moving the line

<div class="productLayout">

to just above

NETQUOTEVAR:SECTIONLISTTOP

in Act_ProductBody.html.

This will mean that your section lists appear within the scrollable area. If they're not too big that might be OK.

Norman

[namunday]

It solves the problem but i did not want the sections to be in a scroll box

[cdicken]

The solution for this is quite advanced, but not impossible. Basically, you can do away with Act_ProductBody.html and place all the code from this template within an overall layout template e.g. Act_PrimaryProducts.html.

To do this:

Open Act_Primary.html and save it as Act_PrimaryProducts.html

Within Act_PrimaryProducts.html comment out NETQUOTEVAR:BULK and in it's place enter:

<!-- ProductBody HTML begin -->
<!-- Insert HTML for the top of the product body -->

<A NAME="sectiontop">
<DIV ALIGN="CENTER">
NETQUOTEVAR:PARENTSECTIONSTOP
</DIV>
<!-- NETQUOTEVAR:TOPLEVELSECTIONSTOP -->
NETQUOTEVAR:SECTIONLISTTOP
NETQUOTEVAR:TOPSECTIONSEPARATOR
NETQUOTEVAR:CARTERRORLISTXML
</A>
NETQUOTEVAR:HIDDENINPUT
NETQUOTEVAR:DISCOUNTINFOBULK
<BR>

<TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

	NETQUOTEVAR:PRODUCTBULK

</TABLE>


<A NAME="sectionbottom">
<DIV ALIGN="RIGHT">
NETQUOTEVAR:SINGLEADD
</DIV>
NETQUOTEVAR:BOTTOMSECTIONSEPARATOR
NETQUOTEVAR:SECTIONLISTBOTTOM
<!-- NETQUOTEVAR:TOPLEVELSECTIONSBOTTOM -->
<DIV ALIGN="CENTER">
NETQUOTEVAR:PARENTSECTIONSBOTTOM
</DIV>
</A>
<!-- Insert HTML for the bottom of the product body -->
<!-- ProductBody HTML end -->

i.e. the code from Act_ProductBody.html.

Now customise this code to include Norman's fixed scrolling box.

Now use this file as the 'Overall Layout' (within the 'Layouts' tab of the section) for any section where you want the products to appear in this way.

[namunday]

Thanks Chris

Worked a treat.

Does anyone know if it is possible to specify the scroll window as a percentage. I tried setting 60% in the css but there was no scrolling. I am trying to do it sho that people with lower resolutions do not end up with 2 scrollbars while people with higher res do not get stuck with a small window

[cdicken]

I don't think it's possible to do relative heights for divs I'm afraid. This is a limitation of CSS.