PDA

View Full Version : Need help with external javascript



ctryluv
07-18-2013, 03:27 PM
Hi, I have downloading a script from http://javascriptkit.com/script/script2/plusimageviewer.shtml. It took me awhile but I was pretty much able to figure out how to set the caption box where I wanted it, or so I thought. I discovered after I started to add images that the setting worked fine for the first couple of images, but then started getting shorter, so that I had to start editing images in order to make it line up. If you look at the example, you will see two pictures with little caption boxes that say full size image. Down toward the bottom of the page it tells you to edit the caption offset which is what I did, and it worked fine for the first few images but all of the ones after the caption box ends up higher than it should be. I have made sure that my images are all the exact same size. Anyone have any ideas??

Beverleyh
07-18-2013, 04:06 PM
If you post a link to your actual page so we can see the problem you're describing, it will make it easier to offer specific help.

ctryluv
07-19-2013, 10:59 PM
Thanks for replying Beverly. Here is a link to one of the pages that I am using the script on. Not sure if you can get to the .js files or css file from there but if not, let me know and Ill figure out a way to get it here. The link in the post above does have access to the files but you cant see the changes I made to them there. Thanks!!

http://everything-spn.com/monsters.html
Angela

Beverleyh
07-20-2013, 03:54 AM
I don't know it its the *only* problem, but there doesn't appear to be a valid DOCTYPE in use in the web page. You're using HTML5 tags so make sure the top of the doc starts with;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />and also put this as the first JavaScript, in the <head> section so older IE browsers can utilise html5 tags too;
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
This might not be the ultimate fix to your problem but a valid and compliant DOCTYPE can sometimes improve things. Once that's in place, see if things look better and retort back.

ctryluv
07-21-2013, 05:26 PM
Hi Beverly, I added the things you told me to add, and the page still looks ok, but it doesn't appear to have changed anything in the spacing. The caption boxes are where they need to be but the images are still the same size as I had them before to make them fit. If I can't fix it, it's not a real big deal. This is a class assignment for one of my college courses so as long as it looks ok I dont think he will have an issue with it. Would still like to get it fixed though, lol. Thanks for all of your help!

ajfmrf
07-21-2013, 10:15 PM
I am not quite sure what you are looking for.But I am using firefox and played with the page a little here:
http://www.web-user.info/test/monsters/monsters.html

When I look at it (FF) the 'view larger image' link is below the image now.Each thumb has the link to the left,below the image.

The spacing looks fine to me though so I am not sure what you are talking about.

Beverleyh
07-22-2013, 08:54 AM
ajfmrf, If you could hold off jumping in while I'm in the middle of helping somebody, that would be great - its pointless us both spending time on something unless you're offering a correction to an answer, have anything informative to add or you are providing further support because the original helper's input has been exhausted. It would also be good to provide an explanation if you have offered a solution rather than ask people to visit your website and hunt for your changes themselves.

--------------------------

Hi ctryluv,

I have the fix for you and I'll provide an explanation to avoid confusion. However, I've just spotted that you do not have the copyright notices for the scripts maintained in your web page, so you must make sure that you reinstate those if you continue using the script - it is in the terms and conditions and a requirement for usage. So where you have this line;
<script type="text/javascript" src="plusimageviewer1.js"></script>Change it to this;
<script type="text/javascript" src="plusimageviewer1.js">
/***********************************************
* Plus Size Image Viewer- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
Now for the problem which ultimately leads back to this plusimageviewer1.js script. It looks like you've got a bit confused with the coordinates for the caption position, so try making the changes highlighted in this line;
captionoffset: [5, -35], //additional offset of caption relative to bottom left edge of imageThat will put the captions just inside the grey shadow/border of your images, which you may or may not like but you can tweak them if you wish. If you do, just nudge the caption value up or down a few pixels at a time, and check in a browser between changes, until you're comfortable with which way they're moving (negative value can be confusing even for me so check often to avoid any major screw-ups).

Now there are some other problems with your document that you should also attempt to clean up.

- Remove align="left" from your img tags. This is a deprecated attribute in HTML5.
- Move the internal styles for your body background image into <head> section. At the moment its between the closing </head> tag and the opening <body> tag.
- Remove a few stray "length:143px" from img tags. It looks like you've mixed up the formatting for HTML4 images and HTML5 images;

HTML4 img tags look like this;
<img src="images/pic.gif" height="50" width="140" alt="an image"/>Whereas HTML5 img tags look more like this;
<img src="images/pic.gif" style="height:50px; width:140px" alt="an image"/>So you should format your images like the HTML5 example

One other thing I noticed was the mixed use of curly/smart and straight/dumb quotation marks in your markup, such as in the link line for your reset.css file and the meta tag for utf-8. The curly/smart ones look like ” - not too clear with the forum font but they're the ones you'd expect to see in typography and typically get transferred into HTML markup when a plain text editor has not been used (ie - if you've copied something direct from Word or from a web pages), but as they can interfere with code, you should change them to straight/dumb quotations marks which look like ".

ctryluv
07-22-2013, 06:55 PM
Hi Beverly, I really appreciate the help on this. I'm not quite sure how to explain it but I'll try. The way I understand it is the line in the .js file that has the captionoffset should set the caption at the exact same place in every image, I'm assuming with the settings I used, it would be 0 px from the bottom left corner, and 145 px from the top of the image. However, it doesn't do that. The page looks fine right now but that is because I had to change some of the image sizes. I kept the width the same at 150 and they started out with a length of 143, but the farther down the page it got, the farther up the caption moved so that it was actually up into the image so I had to resize the length of the image. For example, the last image on the page I had to resize to a length of 117. If you click on the monsters2 link you will see that I had to reset the bottom image all the way down to a length of 65. Otherwise the captions did not sit where they needed to. It's not a real big deal but I really wanted my thumbnails to all be the same size. I did add the copyright in as you suggested. When I tried to replace the img tags with the html5 tag it moved the caption way down the page. I did remove the stray "length:143px" from this page and will get any others on the other pages removed also. I also noticed the curly/smart and straight/dumb quotation marks when I was working with something else and it was screwing it up so I will continue to look for those and get those corrected. Thanks again for your help :)

ctryluv
07-22-2013, 07:01 PM
Oh, and I also moved the internal styles for the body background where you told me to :)

Beverleyh
07-22-2013, 07:18 PM
Hi again,

I dont see the changes in the page yet but the size of the thumbnails shouldn't matter - the caption will always appear in the same place, except the values that you were using seemed too big for the script to handle - I'm not sure why though. If you change the line in the js file to the one below, everything will be uniform. I downloaded your page and added further thumbnail images of my own, of all different sizes to test, and this definitely fixes things;
captionoffset: [5, -35], //additional offset of caption relative to bottom left edge of image
BTW - your logic for the caption placement is kind-of right, but just from the wrong place. Its position is from the very bottom left corner of a thumbnail image, so the first offset value in the js file (5 in my example above) moves the caption 5 pixels into the image. That's the easier one to get your head around. But the second offset value (-35 in my example above) needs to be a negative value to lift it upwards from the bottom corner. Do you get me? So if the second value is a positive value (no minus sign in front) then it just pushes the caption way down past the bottom of the image so its floating somewhere underneath in nothingness.

With the HTML5 image tag, it shouldn't have affected things in the way you described - it didn't for me here - but if you apply all of the changes to the page that you previously linked to, I will look at it again and then we can work on final fixes to straighten it out. There are a few other things to fix but if you could upload the revised page and js file first, it will make things easier with when we discuss the next steps.

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;
captionoffset: [0, 145], //additional offset of caption relative to bottom left edge of imageTo this line;
captionoffset: [5, -35], //additional offset of caption relative to bottom left edge of imageI 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/a/even-small-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;
body

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

background-repeat:repeat-n;

background-position:top center;

background-attachment:fixed}To this;
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/html5tags/f/are-html-5-tags-case-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;
<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; ;
<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;

<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;
<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 ;)

ctryluv
07-24-2013, 04:40 PM
Thank you so much!!!!!