Page 1 of 5 123 ... LastLast
Results 1 to 10 of 46

Thread: Adding text box into existing page

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

    Default Adding text box into existing page

    Evening,
    Here is the page http://www.theatticbanwell.co.uk/slideshow.html

    I would like to be able to make use of the space to the right of the main image.
    I would like to add a text box so I can add some information about the current image loaded.
    Could you advise how I could insert this.

    As you then scroll through the images itís respective information would also be shown.

    This would only apply for pc at present.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    644
    Thanks
    96
    Thanked 25 Times in 25 Posts

    Default

    That slideshow takes up the full width, you would have to make columns and have the slider on the left column and put text in the right column.

  3. The Following User Says Thank You to mlegg For This Useful Post:

    theremotedr (02-15-2018)

  4. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    I was thinking something along the lines like so,

    Click image for larger version. 

Name:	new screen.jpg 
Views:	38 
Size:	89.2 KB 
ID:	6254

  5. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    Here is my effort so far, please take a look http://www.theatticbanwell.co.uk/slideshow.html

    I have placed the main image where i think i need it to be.
    i have then made an edit to the text which should be centered below it.

    Can you advise how i place a text box to the right of this main image.

    Thanks

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,159
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default


    Quote Originally Posted by theremotedr View Post
    Can you advise how I place a text box to the right of this main image.
    I did not think that to be a reasonable or easily coded idea,
    so made something that should work on all devices.

    Check out the attachment and follow the simple instructions.

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

  7. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Evening,
    Ok ive applied that and now see the text box above the main image,thanks very much.

    Before i start adding text i have noticed something so best i mention before i start.

    I will add / delete items as they become sold or for sale meaning my thumbnail images are named at present 194, 195, 196 ,197 etc etc
    As 195 becomes sold i will delete it.

    As something becomes ready for sale and lets say there are another 3 photos i will then continue from the last number so it will be 198, 199, 200
    Currently the numbers in the js file represent the slide position number so the 3rd image is my photo named 100

    Does this matter or not,i mean will any of your code be damaged etc ?
    Does this make sense ?

    If i select the first thumbnail and then use the arrows on my keyboard i see the image change no problem but the text doesnt change.

    Selecting the thumbs or selecting the arrows on the screen etc by using the mouse works fine.

    Many thanks

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,159
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default

    Hi there theremotedr,

    The code does not involve the images at all.

    I was unaware about the keyboard activation, but will look that for you.

    coothead
    ~ the original bald headed old fart ~

  9. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    I also see another issue.
    Please can you do this to see the issue.
    We are looking at the text in the text box.

    In the html file you have wrote <div id="info">This is the first image of 88 <br> in the gallery slider.</div>

    Then in the js files i have done this,
    Code:
                   '1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.',
                   '2 Heading away from Morissions,going down Wolvershill rd, go over M5 then turn right.',
    			   '3 This is slide 3',
    			   '4 This is slide 4',
    			   '5 This is slide 5',
    			   '6 This is slide 6',
    			   '7 This is slide 7',
    			   '8 This is slide 8',
    			   '9 This is slide 9',
    Here we go,
    Please refresh screen,
    The first image is shown & the text show is <div id="info">This is the first image of 88 <br> in the gallery slider.</div>

    Now click the arrow to the right of the main image.
    Now image 2 is shown BUT sometimes the text is shown still for image 1.
    So now click the back button to the left of the main image.
    It now reads what i wrote in the js file 1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.

  10. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,159
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default

    Hi there theremotedr.

    in the html file it should be...

    Code:
    
                    <div id="info-holder">
                     <div id="info">1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.</div>
                    </div>
    ...which now matches this...

    Code:
    
       var info = [
                   '1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.',
                   '2 Heading away from Morissions,going down Wolvershill rd, go over M5 then turn right.',
    ...in the js file

    Here is the amended javascript file.

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

  11. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Coothead many thanks for that,seems to have done the trick.

    My question is now how to somehow link the text in the js file to the code in the html file.
    When i say link i mean i need to somehow have a connection between the two for when i add the information etc.

    This isnt easy to explain by writing here but if i had an invisible note in the html file & js file next to where i type then i know when i am typing its for the correct photo etc.

    Did i explain correctly or did i get you lost ??

    Thanks for the help so far.

Similar Threads

  1. Adding a function to existing Jquery script
    By arn in forum Looking for such a script or service
    Replies: 1
    Last Post: 11-02-2010, 12:17 AM
  2. Replies: 0
    Last Post: 10-01-2009, 11:53 AM
  3. adding drop-down menus to an existing website
    By legalwalleye in forum CSS
    Replies: 10
    Last Post: 09-18-2008, 05:14 PM
  4. Adding mouse over to existing script
    By stcrim in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-15-2007, 01:45 AM
  5. Help adding hyperlink to existing slideshow
    By carriehoff in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-06-2005, 02:15 PM

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
  •