Announcement

Collapse
No announcement yet.

Frames ? Layers ? I just want to scroll

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Frames ? Layers ? I just want to scroll

    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

    #2
    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>
    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
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      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>
      and i tried

      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
      Last edited by namunday; 12-Oct-2004, 09:31 PM. Reason: mistake

      Comment


        #4
        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
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          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
          Last edited by namunday; 13-Oct-2004, 08:35 AM. Reason: mistake

          Comment


            #6
            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
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


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

              Comment


                #8
                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
                Norman - www.drillpine.biz
                Edinburgh, U K / Bitez, Turkey

                Comment


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

                  Comment


                    #10
                    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 -->
                    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.

                    Comment


                      #11
                      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


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

                        Comment

                        Working...
                        X