Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Fixed container on page but scrolling text comments within.

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default Fixed container on page but scrolling text comments within.

    Hi,
    Here is the page in question.
    https://www.theremotedoctor.co.uk/motorcyclekeys.html?

    Looking on the pc there is quite a large amount of space not being use.
    I wish to make use of this so please see my screenshot.

    Below the current container with some text & tel number in will be a fixed container currently shown by a white rectangle box.
    The container will be like a window where within i place to have shown some text reviews from customers.
    As the list gets longer i should then see a drag handle where users can click or pull etc to then be able to read the comments that are currently out of view.

    Im not sure how to achieve this but once the container is in place i can follow how to add more text reviews & will then style it myself.
    The container should be the same width as the main container with large image & thumbs
    Thanks
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4373.jpg 
Views:	20 
Size:	92.7 KB 
ID:	6557  

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,307
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Quote Originally Posted by theremotedr View Post
    Hi,
    Looking on the pc there is quite a large amount of space not being use.

    What you seem to forget is that PC users have various screen sizes.

    Mine, for instance is 1366x768 and there is absolutely no space at
    all
    below the slider images. The scroll comes into operation with the
    addition of "Keys Supplied, Cut & Cloned...." text.



    You should always code for all possible considerations.

    I have, though, corrected and validated the HTMl file - ( see attachment )

    If you do decide to use the file then change this...
    Code:
        margin: auto;
    ...in the .footer CSS to this...
    Code:
        margin: 2em auto;

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    I have used the file as per last post.

    My request is then out the window for what i thought.

    Ok many thanks

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,307
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Quote Originally Posted by theremotedr View Post

    My request is then out the window for what i thought.

    Not necessarily.

    It just means that the user, like me for instance, would need to
    initially scroll the window to display the "Reviews" and then would
    be able to scroll them.

    Check out the attachment to see a possible solution.

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    That looks ok with me.

    Is there a way to save rows upon rows of the same code going down my page in the file.
    Example.

    This below over & over again BUT just with a different review & customers name ?

    Code:
       <div id="reviews">
          <blockquote>
            "Customers feedback review will be placed here"
          </blockquote>
          <cite>
             John Smith
          </cite>
          <br>
          <hr>
       </div>
    
    I mean set something up so i just type the review & customers name.
    Like a css template if there is such a thing.
    
    Do you see what i mean ?
    
    Thanks

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,307
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Quote Originally Posted by theremotedr View Post
    .Is there a way to save rows upon rows of the same code going down my page in the file.

    You are probably thinking of using PHP include.

    Check out the attachment to see an example.

    You will need to upload the "Reviews" folder to your
    server to see it work - ( PHP does not work locally )

    This is the index.php...
    PHP Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>Untitled document</title>

    <link rel="stylesheet" href="css/screen.css" media="screen">

    </head>
    <body>

    <div id="reviews">
     <?php include('reviews.txt'); ?> 
    </div>

    </body>
    </html>
    This is the reviews.txt...
    Code:
    <blockquote>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus tortor, malesuada et condimentum sed, pretium quis felis. Sed vitae leo dapibus, imperdiet risus in, ullamcorper sapien. Cras sit amet auctor neque.   
    </blockquote>
    <cite>
    Fred Flinstone
    </cite><br>
    10th July 2022
    <hr>
    
    <blockquote>
    "Quisque convallis velit eu dui scelerisque ultricies. Duis quis ex vel elit pretium tempor. Aliquam tempor nisl eu odio ultricies, ut rhoncus eros luctus. Duis urna libero, elementum in pharetra vestibulum, tincidunt quis lacus."   
    </blockquote>
    <cite>
    Joe Blogs
    </cite><br>
    16th August 2022
    <hr>
    
    <blockquote>
     "Suspendisse potenti. Mauris at dui nulla. In tincidunt nibh non nunc feugiat, sollicitudin tincidunt sapien tristique. Integer tempor mauris in neque sollicitudin vestibulum. Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit."  
    </blockquote>
    <cite>
    John Smith
    </cite><br>
    19th August 2022
    <hr>

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Place folder in my root or take out items in that folder & then place in root ?

    I have tried both but dont see the contents of the 3 feedback in the txt file
    Last edited by theremotedr; 08-19-2022 at 08:08 PM.

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,307
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Quote Originally Posted by theremotedr View Post
    Place folder in my root or take out items in that folder & then place in root ?

    place it in root and link to it like this...

    https://www.theremotedoctor.co.uk/Reviews/index.php

    ...or this...

    https://www.theremotedoctor.co.uk/Reviews/

    coothead
    ~ the original bald headed old fart ~

  9. #9
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Getting confused here.

    Where do I put the link you mention ?
    In the div ID reviews ?

    Do I delete the existing text that we had in the div Id reviews ?

    You say link to it so do I either of the files or explain as currently I’ve used both.

  10. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,307
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Quote Originally Posted by theremotedr View Post
    Getting confused here.

    Ok let's walk you through it...

    1. Make a copy of your motorcyclekeys.html file and save it as motorcyclekeys.php.
    2. Position this code...
      Code:
      <div id="reviews">
       <?php include('reviews.txt'); ?> 
      </div>
      ...as shown here...
      Code:
        <div class="footer">
         <p>Keys Supplied, Cut & Cloned In W-S-M, Postal service available for some models</p>
         <P>For more information please contact Ian</P>
         <p>  07899 827427  </p>
        </div>
      
        <div id="reviews">
          <?php include('reviews.txt'); ?> 
        </div>
      ... in the motorcyclekeys.php
    3. Save file.
    4. Upload the motorcyclekeys.php file to the same location as your motorcyclekeys.html file.
    5. Add this CSS...
      Code:
      #reviews {
         max-width:  55em;
         max-height: 10em;
         padding: 1em;
         margin: auto;
         border: 1px solid #000;
         box-sizing: border-box;
         background-color: #fff;
         overflow-Y: scroll;
         text-align: center;
      }
      blockquote{
         text-align: left;
      }
      cite {
         color: #099;
      }
      hr {
         width: 50%;
         margin: 1em   auto;
      }
      ...to your bike-slider.css file.
    6. Save file.
    7. Upload the reviews.txt file to the same location as your motorcyclekeys.html file.
    8. Test https://www.theremotedoctor.co.uk/motorcyclekeys.php.


    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Replies: 3
    Last Post: 03-16-2013, 01:40 AM
  2. Fixed position relative to parent container
    By windbrand in forum JavaScript
    Replies: 11
    Last Post: 03-05-2013, 07:12 PM
  3. Replies: 1
    Last Post: 04-13-2009, 05:53 AM
  4. Replies: 8
    Last Post: 09-27-2008, 03:05 AM
  5. move content container according to page scrolling
    By amit_patel in forum JavaScript
    Replies: 1
    Last Post: 04-16-2008, 11:53 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •