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
Announcement
Collapse
No announcement yet.
Frames ? Layers ? I just want to scroll
Collapse
X
-
Here's how they did that. It's clean and simple.
Code: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>
NormanNorman - www.drillpine.biz
Edinburgh, U K / Bitez, Turkey
-
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
HTML Code:<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>
HTML Code:<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
Comment
-
The only problem is that a blank space, the height as specified in the CSS
Also post a URL so we can see rather than having to rely on a description of a visual effect.
NormanNorman - www.drillpine.biz
Edinburgh, U K / Bitez, Turkey
Comment
-
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
Comment
-
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....
NormanNorman - www.drillpine.biz
Edinburgh, U K / Bitez, Turkey
Comment
-
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.
NormanNorman - www.drillpine.biz
Edinburgh, U K / Bitez, Turkey
Comment
-
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:Code:<!-- 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 -->
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.
Comment
-
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
Comment
Comment