Adding text box into existing page

[theremotedr]

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.

[mlegg]

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.

[theremotedr]

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

6254

[theremotedr]

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

[coothead]

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

[theremotedr]

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

[coothead]

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

[theremotedr]

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,

'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.

[coothead]

Hi there theremotedr.


in the html file it should be...



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



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

[theremotedr]

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.

[coothead]

Hi there theremotedr,



use this amended HTML...



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.tmpl.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.elastislide.js"></script>
<script src="js/info.js"></script>
<script src="js/gallery.js"></script>

The info.js file contains just 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.',
'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',
'10 This is slide 10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
'31',
'32',
'33',
'34',
'35',
'36',
'37',
'38',
'39',
'40',
'41',
'42',
'43',
'44',
'45',
'46',
'47',
'48',
'49',
'50',
'51',
'52',
'53',
'54',
'55',
'56',
'57',
'58',
'59',
'60',
'61',
'62',
'63',
'64',
'65',
'66',
'67',
'68',
'69',
'70',
'71',
'72',
'73',
'74',
'75',
'76',
'77',
'78',
'79',
'80',
'81',
'82',
'83',
'84',
'85',
'86',
'87',
'88',
'89',
'90'
];

...which is what you probably require.

Check out the attachment for the two js files.



coothead

[theremotedr]

Hi,
Thanks for that,now applied.


Here is an example that i will face very soon no doubt.

Lets just use thumbnail 2 in this case.

I sell this item & now as its sold i need to delete it so its not shown in the slide show.
So not only do i delete the image but i also need to delete the text above its main image of which lives in the info js file you just sent.

BUT

When i delete the description in the info js file the problem you will have is then the description of the thumbnail after will be above the thumbnail before.
Thus having the text above the main image out of sync with the image that its supposed to be describing.

Does this make sense as you know what im like!

[coothead]

Hi there theremotedr,


Note the last item in an array must not have a trailing comma.

It may prevent the code from running. :eek:

So this...



'87 Alice in wonderland chair',
'88 Alice in wonderland chair',
];

...should be this...



'87 Alice in wonderland chair',
'88 Alice in wonderland chair',
'89 Alice in wonderland chair'
];



coothead

[theremotedr]

OK,
I thought it was a mistake so i added it ha ha.

Does this now rule out my last post #12 or will my last post still be valid ?

[coothead]

Hi there theremotedr,


this...



'85 Alice in wonderland chair',
'86 Alice in wonderland chair',
'87 Alice in wonderland chair',
'88 Alice in wonderland chair'
];

...should be this...



'85 Alice in wonderland chair',
'86 Alice in wonderland chair',
'87 Alice in wonderland chair',
'88 Alice in wonderland chair',
'89 Alice in wonderland chair'
'89 Alice in wonderland chair'
];
...as you have five chairs.

Re: post #12

I would suggest that you just remove the numbering of the info.
It will make it a great deal easier for you when adding or removing items.



coothead

[theremotedr]

Ok,
I thought they had to stay as you sent me them like that,shows what i know.

Just to confirm the following please then i will continue tomorrow.

I have removed all the numbers in the info js file, So do i also delete the 1 at the start of that line of code in the html file or do i leave it ?


<div id="info">1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.</div>

In your last post you wrote,


'85 Alice in wonderland chair',
'86 Alice in wonderland chair',
'87 Alice in wonderland chair',
'88 Alice in wonderland chair',
'89 Alice in wonderland chair'
'89 Alice in wonderland chair'


Was the last 2 a typo as 2 x , , are missing & should only be one,like so ?


' Alice in wonderland chair',
' Alice in wonderland chair',
' Alice in wonderland chair',
' Alice in wonderland chair',
' Alice in wonderland chair'


Many thanks for your valid time spent helping me.
I hope to help you out again in the future.

[coothead]

1. So do I also delete the 1 at the start of that line of code in the html file or do i leave it?
2. Was the last 2 a typo as 2 x , , are missing & should only be one,like so ?



1. Yes
2. Yes, I am sorry about that, I must have suffered a little Brain Fart.



coothead

[coothead]

Hi there theremotedr,


I have noticed that sometimes the code would freeze, so
I have amended the javascript to prevent that happening

You might also find it helpful to number the HTML thumbnail li elements and the info.js.
This would enable you to amend matching items when sold.

See the attachment.



coothead

[theremotedr]

Hi,

I will change these files now.

Can you show me an example please of numbering them so i can follow / edit from there.

[coothead]

Hi there theremotedr,


I have already done it in the amended files. :)

Examples...

HTML



<li data-num="1"><img src="images/thumbs/007.jpg" alt="Shabby Chic Furniture In Banwell BS29 6LB" data-large="images/fulls/007.jpg" data-description="Please select an image below <br> to be shown a larger version"></li>
<li data-num="2"><img src="images/thumbs/008.jpg" alt="Shabby Chic Furniture In Banwell BS29 6LB" data-large="images/fulls/008.jpg" data-description="We are 1/4 mile from Morrisons W-S-M<br> go over M5 bridge then turn in right"></li>
<!-- For sale items start here -->
<li data-num="3"><img src="images/thumbs/100.jpg" alt="Shabby Chic Furniture In Banwell BS29 6LB" data-large="images/fulls/100.jpg" data-description="Keepsake box £20 <br> H 90cm W 27cm D 35cm"></li>


JavaScript



var info = [
/*1*/ 'Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.',
/*2*/ 'Heading away from Morissions,drive down Wolvershill rd, go over M5 bridge then turn in right.',
/*3*/ 'Keepsake box',



cothead

[theremotedr]

I asked to quick before checking the files,sorry.

I will now continue.

[theremotedr]

Coothead many thanks now done.

Can you assist with the following if you have time please.
I have tried but this was the best i could get but not not i was looking for.

Top left of screen you will see below example,
Italic & font family is ok as it matches my other text on the page but you will see its two different shades/style etc ?
Just trying to get all the text the same.
6259

Also bottom on screen you will see below example,
I would like the text to be all in one line but when viewed on smaller screens it would wrap/drop to new line but the text was divided in the wrong place.
I have applied <br> to show you how i would like to see it on smaller screens.
Once done the <br> can be removed so larger screens see it all in one line.

6260

Many thanks

[coothead]

Hi there theremotedr,


1. It is just an optical illusion, bold text can appear to be darker than normal text.

2. At what width would you like text to drop below?



coothead

[theremotedr]

OK
Can we make both the same then please.

Not sure about second question,just needing it to be like so,
We are also on Facebook
"Click here to follow us"

as opposed
We are also on Facebook "Cl
ick here to follow us"

If you are doing a media query then use 32 and i will try it out from there.

Thanks

[coothead]

Hi there theremotedr,


for the first problem try this...



.header a span{
font-weight: bold;
color: #444;
}

.header a:hover span{
color: #fff;
}

For the second try this...



@media ( max-width: 30em ) {
.sub {
width: 12em;
margin: auto;
}
}



coothead

[theremotedr]

Thanks.
I will apply that when back.

Could you advise the px value please as I get confused with em values.

Thanks for your time.

[theremotedr]

Many thanks,now applied.

Thanks all.

[theremotedr]

Hi,
Just a question please if i may.

I am writing up the text for the files in the info js file but noticed some syntax errors when i type.

See this example.
Add to your child's bedroom and give them a great place to read, rock, or relax.

It doesnt like the ' in childs etc as it thinks its code ??

[coothead]

Hi there theremotdr,


you need to escape any single quotation mark that appears in the actual text....


'Add to your child\'s bedroom and give them a great place to read, rock, or relax.'


coothead

[theremotedr]

Many thanks,i will remember that.

[coothead]

Many thanks, I will remember that.
It doesn't take much to stop a script from running. :)


coothead

[theremotedr]

Yes,
I have found that out but then need to look ages for a . or a , which can be hard

[theremotedr]

Morning,
I am now looking at hiding the text box above the main image.
This would apply to mobiles & tablets
The minimum size before it would be shown is 1024px

I have applied the following then f12 on keyboard but i am still able to see it all smaller devices.


@media ( max-width: 1024px ) {
.info{
visibility:hidden;
}
AND ALSO

@media ( max-width: 1024px ) {
.info{
display:none;
}
}
}

[coothead]

Hi there theremotedr,


try it like this...



@media ( max-width: 64em ) {
#info-holder {
padding: 1em 0;
}
#info {
display: none;
}
}



coothead

[theremotedr]

I have it working now but only like below with both codes as opposed to just one which i know is incorrect.


@media screen and ( max-width: 1023px ) {
.info{
visibility:hidden;
}
}
@media screen and ( max-width: 1023px ) {
#info{
display:none;
}
}

Changing visability for display and other combinations then breaks the code & doesnt work

[theremotedr]

Hi there theremotedr,


try it like this...



@media ( max-width: 64em ) {
#info-holder {
padding: 1em 0;
}
#info {
display: none;
}
}



coothead

I have used this code but didnt work for me.
My code above works but it shouldnt be 2 codes but just 1.

I have added your code & updated the site for you to take a look in real time.

Thanks

[coothead]

Hi there theremotedr,


This is caused by a rather difficult to spot error in your demo.css file....



.blink{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
}
/* Hide text box mobiles and phones less than 1024px */
@media ( max-width: 64em ) {
#info-holder {
padding: 1em 0;
}
#info {
display: none;
}
}

The highlighted closing bracket is the cause of the problem and must be removed.



coothead

[theremotedr]

Well spotted,what we talking about a few posts ago.....

I changed the 16em to 1023px
Also 1em to 16px

Thanks for the advice & support.

Have a have day.

[coothead]

Hi there theremotedr,


It took me the best part of half an hour to discover that little bugger. :eek:


coothead

[styxlawyer]

If you suspect that there may be a problem in any CSS file, just run it through CSS Lint (http://csslint.net) which will find most syntax errors in just a few seconds.

It does have a few hang-ups like warning about the use of IDs in selectors which don't make sense to me, but will find serious errors such as missing or extra braces.

[Deadweight]

@theremotedr
I checked your css file and I found one main error:
URL: http://www.theatticbanwell.co.uk/slideshow.html

CSS File: http://www.theatticbanwell.co.uk/css/demo.css
Line: 82
Style: .shadow
Value Error: border-style riged is not a border-style value : riged

I think you meant ridge

[theremotedr]

Thanks,
Another slipped through.
I have now changed it.

[theremotedr]

If you suspect that there may be a problem in any CSS file, just run it through CSS Lint (http://csslint.net) which will find most syntax errors in just a few seconds.

It does have a few hang-ups like warning about the use of IDs in selectors which don't make sense to me, but will find serious errors such as missing or extra braces.

Styxlawer,
Thanks for that,i think it will be good for me to keep.

I assume then that you use it,so please can you advise what should be done with this.

Values of 0 shouldn't have units specified.
padding:0px 5px 0px 5px;

...........................................

Use of !important
font-size: 14px !important;

.............................................

[theremotedr]

Coothead

The text box with put above the main image yesterday,i am making mistakes already.
As opposed to the data num starting like 1,2,3 etc etc can we edit the code to start 98,99,100

Then the data num can match the image.

Currently whats making me go wrong is the data num is like so,

data num 43 image 151

data num 60 image 168

data num 83 image 191

It would be easier for my brain to work like,

data num 43 image 43

data num 60 image 60

data num 83 image 83

Many thanks.

[coothead]

Hi there theremotedr,


as the numbering was only suggested to help you match each li element to
its corresponding info array item, how you do that is entirely up to you.

These numbers have no effect on the code whatsoever.

For example, if you wanted to give the third li element the attribute
data-num="193". then you would identify the third item in the
info array with /*193*/.

You could even do away with numbers if you preferred and use letters or
words instead.


coothead

[theremotedr]

Many thanks,
I have now updated them so all now correspond to my images.