swapping text on mouseclick/mousedown... how

Hi.

Aha, a new question has arisen.
Some of the text that swaps, requires words with apostrophes (e.g. Nico's) but when I put in an apostrophe it affects the code, rather than just being part of a word in the text, and stops the swapping text working.

How can I add apostrophes to words without it affecting the code? Without them text has punctuation errors which I really can't leave.

Thanks

Hmm, well you could store the messages inside variables and pass those to the function instead. You would only have to do this for the ones with the apostrophes although you might decide to do it for all of the messages in the long run for consistency. You could declare the variables at the end of the script right after the last function (or anywhere in the script tag outside of the functions) like this:



and then call the function for that thumb with:



You can use single quotes inside a string declared as a variable like that as long as it begins and ends with the double quotes.

A string in JavaScript can be surrounded in double quotes or signle quotes, so you can do as Rich says, or if you need both inside the string, you can "escape" them by putting a backslash (\) before them.

This works with man characters:
\' = single quote IF the string is surounded in single quotes (otherwise take the \ away).
example: 'Fred\'s cat is black'
\" = double quote IF the string is surounded in double quotes (otherwise take the \ away).
example: "Fred's cat is called \"Tommy\"."
\n = new line.
example: "Line one.\nLine two."
whan you actually want \n to appear in the string just like that, you need to escape the backslash: \\ = \ (e.g. \n = new line but \\n = the actual characters "\n" ).

Yay! I have apostrophes. I couldn't have borne to leave them out.

Thank you!!

Hi,
I got the text to swap on mouseclick, be formatted and include punctuation, much to my delight. However, two further questions have now arisen...

Q1. The text swapping is perfect in IE but in Netscape and Mozilla, the inital text on display, when the page opens, is slightly differently positioned than the text attached to the horizontal thumbnails, you can see it 'jump' when one is clicked. Any way round this? I tried various things but with no success.


Q2. How do I include a linked url in the swapping text?


The site is temporarily at...

http://elainemjohnston.mysite.freeserve.com/


While I'm here, digressing a tad, can anyone advise me on how to make an animation with a pic that fades in, look smooth, I tried in Flash but it wasn't great, it was jerky and the quality of the image deteriorated badly, and I tried in Image Ready, which I know even less about than Flash, but, although the image quality is fine, the fade in is mighty jerky. I've messed about with frame rates but I don't seem to be getting it right.



Thank you.

Ah, just realised that Q2. was not particularly clear.

What I mean is, how do I include a piece of text in my swapping text which is inked to elsewhere, like another page or site? E.g. if I had the phrase, Ozzu forum site, in the swapping text with a link to the forum site, how would I write that into the swapping text?

Thanks.

#1 - I'd have to see it to get an idea.

#2 - Lets see the code for the swapping text.
But if it's in a JavaSCript string then just do it as normal but escape the double-quotes <a href=\"www.url.com\">...

hi LJ,
you can see the site and get to its code here...
http://elainemjohnston.mysite.freeserve.com/

its temporary home until I move it to its own domain, where there will be no frame with the Freeserve banner at the top.

Thanks for having a look for me.

well #1 I can't really tell what stops it working, that code is so badly layed out and made hard to read!

#2 you are currently swapping an image not text.

so I recommend getting some better (and more suited) scripting done.

The text swapping is taking place on subpages like this one:

http://elainemjohnston.mysite.freeserve.com/prop.html

(The main page is just using dreamweaver functions to swap an image of text.)

On the subpages when onmousedown occurs over the horizontal thumbnails a function is called that changes the innerHTML of a div with the id "caption" that is being used as a container.




The changing of className was discarded because it didn't suit cerio's needs and the second argument is being passed as an empty string. The div itself has no longer has a css class applied to it, so I don't think that's what causes the text to change position. Also I didn't experience the problem when I tested it. so I think the problem is most likely related to the html that is being passed to the function.

I'm not sure why escape characters are being mixed with regular html tags like in this example:



The only thing you need to escape is quotation marks that would break the function call and as LazyJim pointed out you can do that by placing a backslash before the quotes.

I also noticed the use of linebreaks (<br>) inside h1 tags to create spacing. Rather than putting linebreaks inside the h1 tag I think it would be better to apply a css class to the h1's that appear inside the caption div and use margin-bottom to create the spacing.

I also noticed that <br/> tags are being used which is technically incorrect because there should be a space between the r and the forward slash, i. e. <br />. I'm not sure what ramifications that has but since regular <br> is being used as well and the document does not appear to be intended to conform to xhtml I would just use the plain <br> tag.

I think that if the string of html being passed to the function is cleaned up and css is used to create your spacing that the problems with text shifting will go away. It looks like mozilla is ignoring at least one of the line breaks after the swapping occurs - although I'm really not certain why.

As far as passing a link I think you should be able to do that just by passing the a tag and escaping the quotes in the manner that LazyJim recommended.

ah my apologies - I forgot it was onCLick - I couldn't see any text changing on the sub pages

Hi,
thanks for replies.

Can anyone tell me why code changes? all those &lt;br/&gt; in there were not originally like that, they were <br/> but seem to have changed all by themselves. Only the later ones added, stayed as typed. It's not the / that does it, I don't think, as I've had them change when <br> is typed too.

Someone told me to type <br/> rather than <br> but I'll revert to just putting <br> as you say the other is not quite right and unneccesary anyway. I tend to tamper with code very little, as I know almost nothing about it, I leave as much as I can to Dreamweaver.

Hi,
'I think that if the string of html being passed to the function is cleaned up and css is used to create your spacing that the problems with text shifting will go away. It looks like mozilla is ignoring at least one of the line breaks after the swapping occurs - although I'm really not certain why. '

...I'm afraid I don't know what that means. I assume the cleaning up is reverting all the <br> that seem to have changed to &lt;br/&gt; back to their original form.

I know nothing about CSS, other than using it to format text within Dreamweaver, which writes it for me, so I haven't a clue how to use css to create spacing. I'll see what I can find out about that.

Thanks for your help. Soooooo much to learn.

The first thing I would try is fixing and moving the line breaks out of the h1 tag. Where you have:



change it to:



Since the escape characters for the angle brackets (<>) are apparently being converted before they are passed - since the text wouldn't show up correctly at all if they weren't - it might not be necessary to edit them all. However, it would make it a lot easier to read if they were cleaned up.

Replacing the linebreaks with css entirely would reduce the amount of html markup and also make it easier to read. In Dreamweaver you could edit the class that you already use to format the h1 and add the spacing by going into the box category where you will find the margin and padding properties that can be used to add space inside and outside an element.

hi.
Great, I'll have a go at that. I'll carry out your first suggestion, which looks pretty fool-proof, then try the second. At least if I mess up the second, the first will still be an improvement.

Again, your explanation is nice and clear. Thank you so much.

I'll get the hang of this stuff someday!