javascript won't validate

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

In the process of trying to perfect my website and implement some useful recommendations I received over in the 'Website Reviews' forum, I ran into a perplexing problem which is way beyond my troubleshooting powers.

On my Portfolio and Catalogue pages, I have a little java script to show enlarged images in tooltips when you mouse over the thumbnails. the script comes from here, and it works perfectly fine. However, when I run the site through the W3C markup validation, these pages throw up 51 errors - all of which seem to relate to the way the javascript is inserted into the html.

I really like the mouseover effect and wouldn't want to lose it, but I'd like the site to be valid html........ Can anyone think of a compromise?

Two other things I'm having trouble with - one, the index page is doing a very weird thing in Firefox (works fine in IE, shockingly - this is probably the first time I'm writing these words :) where the title and nav bar slip downwards for some reason (on all other pages they sit as they should). Now I haven't done anything to the code that I'm aware of to make them do this (well obviously I have done something but I am unaware of it) - if anyone can find it I'll be very grateful as it's driving me to distraction.

two - and this is a little one but again it just bugs me - if you look at the left-hand side menu which is included in the left panel on every page except the frontpage, you see that on the 'about us' page it is a few pixels to the right in comparison to all the other pages. Again I can't find what's making it move like this.....

I'm sorry this is such a mess of a post, hope the questions are reasonably clear. I won't post code as I don't know where the errors are and it would be too much to post it all - the site is http://www.celandinewebdesign.com

any help greatly appreciated.

c
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9101
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Everywhere you see an img tag in your html change it from something like this:

Code: [ Select ]
onmouseover="Tip('<img src=\'images/chantalvega400.jpg ...


to something like this:

Code: [ Select ]
onmouseover="Tip('<' . 'img src=\'images/chantalvega400.jpg ...


I had this problem with some of the javascript on ozzu and doing the above for img tags or any tags it was complaining about within the javascript seemed to fix the problem. Let me know if that helps.

You could also try to escape it, which means instead of typing it as '<' you would type it as '&lt' -- but I believe that would make your html not parse.

The other option would be to put all of your javascript in an external file, and then link to that file through your header so that the w3c parser doesn't even see it.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

It helps in terms of validation, but the javascript won't work any more - i.e. you don't see the enlarged image on rollover, only alt text.

Thanks for trying :)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9101
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

If you tried my first tip of doing something like:

Code: [ Select ]
onmouseover="Tip('<' . 'img src=\'images/chantalvega400.jpg ...


It might not be working because Tip is a function and its only expecting one argument. Try doing this:

Code: [ Select ]
onmouseover="var tempVar = '<' . 'img src=\'images/chantalvega400.jpg ...'; Tip(tempVar)"


Of course you know that the ... means fill in the parts I left out. My method will work, you just have to make sure you use javascript that parses correctly.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

The entire string now reads:


Code: [ Select ]
onmouseover="var tempVar = '<' . 'img src=\'images/chantalvega400.jpg\' width=\'400\'>.'; Tip(tempVar)">


and doesn't work. but I'm presuming it's because I'm doing something wrong at the tail end. I'm sorry, I've only been doing this for 4 months and I'm not always sure how to put things together....

I've tried just adding your tail bit of code to the string as it was, i.e.

Code: [ Select ]
width=\'400\'>.')">'; Tip(tempVar)"


but that doesn't work. I'm sure I'm making a very basic mistake somewhere......
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9101
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Try this instead (using + instead of . to combine):

Code: [ Select ]
onmouseover="var tempVar = '<' + 'img src=\'images/chantalvega400.jpg\' width=\'400\' + '>.'; Tip(tempVar)"


See if that works.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

no good. in browser view the entire thumbnail disappears. in dreamweaver designer view I can see code showing up in the image, highlighted in yellow.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9101
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Can you change it somewhere on your website with what I said with just one of your thumbs, and then I can take a look to see if you implemented it right?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Ok coming up in 5 min, on the english 'Portfolio' page, first image - Chantal Vega (as we've been using that one as an example.....)
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

It's up - on the English Portfolio page (celandineportfolio_en)

Sorry to be so much trouble. If it won't work I'll just find a different way to code the tooltip...........
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9101
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

You did make the change to that one image thumb which is good (you replaced the . with +'s), however you didn't fix the rest of the thumbs which is causing javascript errors which makes so nothing functions. Please fix the entire page and let me know when you have done that.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Ok, the whole 'celandineportfolio_en' page is now done.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Code: [ Select ]
function my_tip(html){
  Tip('<' + html + '>');
}
  1. function my_tip(html){
  2.   Tip('<' + html + '>');
  3. }


Code: [ Select ]
onmouseover="my_tip('img src=\'images/beba400.jpg\' width=\'400\');"
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Nope, won't show the rollover.

Of course maybe I'm just doing it wrong. If in any of the places it says 'html' I'm actually supposed to enter some html code, I didn't.

I've put it in pretty much just as above - (the colon in the second row after 'Tip' is mine, but it didn't work without it either)

Code: [ Select ]
function my_tip(html){
  Tip:('<' + html + '>');
}
  1. function my_tip(html){
  2.   Tip:('<' + html + '>');
  3. }

into the css and

Code: [ Select ]
onmouseover="my_tip('img src=\'images/beba400.jpg\' width=\'400\');"


into the html.

is that even close to what you had in mind, joebert?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Add this to the end of the tooltip script. (wz_tooltip.js)
Exactly as it is, it's javascript, not CSS.
Code: [ Select ]
function my_tip(html){
  Tip('<' + html + '>');
}
  1. function my_tip(html){
  2.   Tip('<' + html + '>');
  3. }


It's a helper function that adds the <> characters, then passes it along to the normal function.
That way you can still pass the HTML for the image like you're doing, but you don't have to add the <> characters & the validator has nothing left to complain about.
Quick & dirty, isn't going to work for anything other than images, but less complicated.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Still doesn't work......... maybe I'm inserting it wrong. I tried adding it to the very end of wz_tooltip.js, I tried adding it one line before the end, I tried adding it somewhere in the middle....................... but I don't know anything about writing javascript so I'm probably making some basic mistake....

thanks for helping guys - if you think of any other things I could try I'll give anything a go. If not I'll just let it sit as it is until I find a validator-friendly way of doing the rollovers........... it's not the end of the world I guess.

thanks again for putting so much effort into it. it really is appreciated.

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 22 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.