Need help with external javascript

**ctryluv** · 07-23-2013, 07:38 PM

Hi Beverly, I changed everything that you asked me to change but over here, those captions are all over the place. Maybe it's because I'm using chrome, I don't know. Anyway, take a look at it and see how it looks at your end. Thanks!!!

**Beverleyh** · 07-23-2013, 10:43 PM

Hi,

I can see you've made some of the changes but there are still a few missing, so let me recap on what is left to do.

1. The main issue is with the "plusimageviewer1.js" file. Assuming that the only alteration you made to the original was to the captionoffset values, you still need to change this line;

Code:

captionoffset: [0, 145],  //additional offset of caption relative to bottom left edge of image

To this line;

Code:

captionoffset: [5, -35],  //additional offset of caption relative to bottom left edge of image

I know [0, 145] is what you think you need, but you seem to be confused with the coordinates of the starting position (the bottom left corner of the thumbnail) so bear with me for now and go with my red values. If you changed anything else in the code, download the original again from the demo page, making sure you rename it to "plusimageviewer1.js" because that's the name of the file linked in your web page, and replace it, just to make sure. The positive 145 value that you currently have is making the caption appear way below the images that it's attached to - like a few inches if we're talking old-school non-web speak. You maybe can't see that clearly from your first linked image because you have a thumbnail of the Arachne monster with a larger Changeling pic defined so its a bit confusing when non-corresponding images pop up. So change the values in the js file to the ones highlighted in red and upload the revised file. You'll need to do a refresh to see the changes (CTRL+F5 as a hard-refresh in windows, which loads all the web page assets in again from scratch)

2. Remove align="left" from your img tags. This is a deprecated attribute in HTML5 so its not actually doing anything except bloating out your markup with invalid code. Your image tags are sat inside of paragraph tags (<p>) which have a default left alignment anyway, so you don't need to attempt to specify it separately with invalid attributes.

There are also a few other issues but make these changes first and then we'll work through those afterwards.

**ctryluv** · 07-24-2013, 01:06 AM

I could swear I changed those, lol. Maybe I just forgot to upload them! Ill get them up asap!

**ctryluv** · 07-24-2013, 01:18 AM

ok, they are uploaded!

**ctryluv** · 07-24-2013, 02:20 AM

Youre not going to believe this but I think it's working. I have to change the img tags on the other pages, and I am going to resize the thumbnails to doublecheck, but it looks right. For whatever reason, everytime I re-uploaded the js file, it did not overwrite. I ended up having to delete the one and then re-upload it. I will let you know what happens when I get the other things done. I would love to get your feedback on the other issues you said you seen and Ill work on those too. Thanks!!!!

**Beverleyh** · 07-24-2013, 09:08 AM

One of the other things to look at is image optimisation. Your thumbnail pics already look optimised but I noticed the banner and background pic need some attention - definitely the big background pic. Run those 2 though DD's image optimisation tool: http://tools.dynamicdrive.com/imageoptimizer/ and convert the background.png to the jpg format, selecting the one returned at 60% quality, will reduce it's size from 1MB to 78kb - that's a 92% saving which means it will load 10 times faster! Speed is very important on the web so optimise everything as much as you can - here's an article with more information and reasons: http://webdesign.about.com/od/speed/...mall-gains.htm

Another issue I noticed is tied to the background image, or rather what's behind the background image. Now, yesterday when I quickly viewed your website on an old PC with a slow internet connection, the background image didn't load - it just timed out. That's not your web pages fault but it made it easier to see that you haven't defined a background colour as a fallback. With no dark picture background, and no dark background colour, I couldn't read your white text! The easiest fix is to change these styles before the </head> tag (Something else to fix is that you still have a duplicate style block after the </head> tag and before </body> which you need to delete right away) Anyway, change these styles before the </head> tag;

Code:

body

{background-image:url("./images/monsters.png");

background-repeat:repeat-n;

background-position:top center;

background-attachment:fixed}

To this;

Code:

body { background:#000 url("./images/monsters.png") top center no-repeat fixed; }

This is CSS shorthand, when you can string related attributes together (in this case, all background-related) to help with optimisation. Also notice the #000 part which is the hexadecimal colour-value for black. Putting #000 as the background colour, before the background image url, will make the web page background black, and provide a safety net for times when that big pic doesn't load. BTW, I also corrected your background-repeat value; repeat-n doesn't actually exist, so I'm guessing that you meant no-repeat

Some other things to fix;

- Be consistent with you letter-case in markup tags. I see uppercase and lowercase dotted around, but its best to use lowercase. As taken from about.com ( http://webdesign.about.com/od/html5t...-sensitive.htm );

Convention in HTML 5 is to Use Lowercase
While it is valid to write tags using any case you prefer when writing HTML 5, the convention is to use all lowercase for tags and attributes. This ensures that if an HTML 5 document is one day converted to XHTML, there will be less difficulty for the developers. Plus lowercase letters are easier to read than uppercase letters, and most HTML editors insert tags as lowercase by default.

- <center> tags are deprecated/not valid in HTML5. You've used them a few times, but this ones sticks out due to the href being iffy;

Code:

<center><b><a href="A HREF="http://www.everything-spn.com/">HOME</a></B></center>

It's better to format it like this - in a paragraph tag styled with text-align:center; ;

Code:

<p style="text-align:center;"><b><a href="http://www.everything-spn.com/">HOME</a></b></p>

That's all I can see while skimming through your source code, but to be safe, you should consider running your page through the WC3 validator and fixing anything it flags: http://validator.w3.org/

**ctryluv** · 07-24-2013, 02:47 PM

Thank you so much for all of your help Beverly! I will work on correcting everything above. You said that the background thing is still css, right? One of the requirements for the assignment is that we have an internal css script, so I need to make sure that will count! I'll get all of this done and then on to trying to figure out the stupid mobile device thing he wants lol. Thanks so much again!!!

**Beverleyh** · 07-24-2013, 02:58 PM

Yes, the background change is still CSS, so where you currently have this before the </head> tag;

Code:

<style type="text/css">
body

{background-image:url("./images/monsters.png");

background-repeat:repeat-n;

background-position:top center;

background-attachment:fixed}

</style>

You can change it to this;

Code:

<style>
body { background:#000 url("./images/monsters.png") top center no-repeat fixed; }
</style>

Everything has just been condensed into one line, but it's still CSS, and still in an internal stylesheet, so it still qualifies by my reckoning.

One thing about HTML5 - you can omit the type="text/css" part in the <style> tag, (that includes the linked ones in the head section), and it will still be perfectly valid.

You can also omit type="text/javascript" from <script> tags too

See how your markup is getting lighter and lighter with all these little nips & tucks - it all helps with optimisation and faster load-times