[WSG] JavaScript as External File vs. Internal Code and linking to images
Recently, I experimented with changing check boxes with JavaScript. If the user clicked on the words next to the check box, then the box would be checked, once checked if the user clicked again, then the box would be unchecked. I wound up having to apply the same code to the check box itself in order to get it to work. In addition, I added code that would change the background image of the page to either a solid color, if checked, or back to the original image, if unchecked. It did not work. So after changing it some more and still getting no results (I think I even asked here), I did some research and found another way to link images directly in JavaScript. I should make note that all the code was in an external file at the time. The following is the structure of the site: -container (the name of the containing folder for all files) || --index.html (home page where the code will be used) --scripts (the scripts folder, contains all the scripts) | ---scripts.js (the scripts file itself) ^^ --styles (stylesheets folder located directly within the container folder) || ---styles.css (contains style declarations) ^^ --images (located directly within the container folder) | ---linkedimage.png (the image to be changed in page background) I hope the structure above makes sense. Anyway, while linking the image in the scripts.js file, I found it never switched back, yet the code never showed any problems. When I found the other way to link images directly in JavaScript, I changed the image link code to what would amount to being directly in the HTML file itself: The first is the original way I linked it the second is the new way. - (../images/linkedimage.png); - from above, changed to - (images/linkedimage.png); After the change above, the code worked. I went back to reading about the JavaScript standard, I thought that JavaScript was read like an external CSS file was read, where you would have to use the (../) part to link to the image if it was in a different folder one level above the current folder. (as the first line of code above is.) Is that not how JavaScript works? When it comes to linked images? -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] JavaScript as External File vs. Internal Code and linking to images
Brett Patterson wrote: Recently, I experimented with changing check boxes with JavaScript. If the user clicked on the words next to the check box, then the box would be checked, once checked if the user clicked again, then the box would be unchecked. Sounds like a label would have been easier. I thought that JavaScript was read like an external CSS file was read, where you would have to use the (../) part to link to the image if it was in a different folder one level above the current folder. (as the first line of code above is.) Is that not how JavaScript works? When it comes to linked images? You aren't reading the resource at the URL from JavaScript though - you are changing the DOM so it references a different URL (and it is still using the URI of the HTML document as a base). -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] JavaScript as External File vs. Internal Code and linking to images
Brett, CSS is defining the image links, so the paths are relative to the CSS file itself. JavaScript is a bit different. It is basically just setting properties on the HTML elements and this is no different to setting those properties yourself. As such, any image references are relative to the HTML page and not the JS file. Does that help? (Disclaimer: I know this isn't the 100% perfect explanation of DHTML but it serves the purpose of answering this question. If you're a JS nut, please don't pounce.) Thanks, Tatham Oddie callto:+61414275989 call:+61414275989, callto:+61280113982 call:+61280113982, skype:tathamoddie?call skype:tathamoddie, msnim:chat?contact=tat...@oddie.com.au msn:tat...@oddie.com.au, http://tatham.oddie.com.au/ tatham.oddie.com.au From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Brett Patterson Sent: Wednesday, 7 January 2009 12:08 AM To: wsg@webstandardsgroup.org Subject: [WSG] JavaScript as External File vs. Internal Code and linking to images Recently, I experimented with changing check boxes with JavaScript. If the user clicked on the words next to the check box, then the box would be checked, once checked if the user clicked again, then the box would be unchecked. I wound up having to apply the same code to the check box itself in order to get it to work. In addition, I added code that would change the background image of the page to either a solid color, if checked, or back to the original image, if unchecked. It did not work. So after changing it some more and still getting no results (I think I even asked here), I did some research and found another way to link images directly in JavaScript. I should make note that all the code was in an external file at the time. The following is the structure of the site: -container (the name of the containing folder for all files) || --index.html (home page where the code will be used) --scripts (the scripts folder, contains all the scripts) | ---scripts.js (the scripts file itself) ^^ --styles (stylesheets folder located directly within the container folder) || ---styles.css (contains style declarations) ^^ --images (located directly within the container folder) | ---linkedimage.png (the image to be changed in page background) I hope the structure above makes sense. Anyway, while linking the image in the scripts.js file, I found it never switched back, yet the code never showed any problems. When I found the other way to link images directly in JavaScript, I changed the image link code to what would amount to being directly in the HTML file itself: The first is the original way I linked it the second is the new way. * (../images/linkedimage.png); * from above, changed to * (images/linkedimage.png); After the change above, the code worked. I went back to reading about the JavaScript standard, I thought that JavaScript was read like an external CSS file was read, where you would have to use the (../) part to link to the image if it was in a different folder one level above the current folder. (as the first line of code above is.) Is that not how JavaScript works? When it comes to linked images? -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] JavaScript as External File vs. Internal Code and linking to images
:) I like the disclaimer. Thanks to both of you, that does explain it. By the way, I am not a JS nut. :) I am new. -- Brett P. On Tue, Jan 6, 2009 at 8:23 AM, Tatham Oddie tat...@oddie.com.au wrote: Brett, CSS is defining the image links, so the paths are relative to the CSS file itself. JavaScript is a bit different. It is basically just setting properties on the HTML elements and this is no different to setting those properties yourself. As such, any image references are relative to the HTML page and *not* the JS file. Does that help? (Disclaimer: I know this isn't the 100% perfect explanation of DHTML but it serves the purpose of answering this question. If you're a JS nut, please don't pounce.) Thanks, Tatham Oddie call:+61414275989 callto:+61414275989, call:+61280113982callto:+61280113982, skype:tathamoddie, msn:tat...@oddie.com.au, tatham.oddie.com.au *From:* li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] *On Behalf Of *Brett Patterson *Sent:* Wednesday, 7 January 2009 12:08 AM *To:* wsg@webstandardsgroup.org *Subject:* [WSG] JavaScript as External File vs. Internal Code and linking to images Recently, I experimented with changing check boxes with JavaScript. If the user clicked on the words next to the check box, then the box would be checked, once checked if the user clicked again, then the box would be unchecked. I wound up having to apply the same code to the check box itself in order to get it to work. In addition, I added code that would change the background image of the page to either a solid color, if checked, or back to the original image, if unchecked. It did not work. So after changing it some more and still getting no results (I think I even asked here), I did some research and found another way to link images directly in JavaScript. I should make note that all the code was in an external file at the time. The following is the structure of the site: -container (the name of the containing folder for all files) || --index.html (home page where the code will be used) --scripts (the scripts folder, contains all the scripts) | ---scripts.js (the scripts file itself) ^^ --styles (stylesheets folder located directly within the container folder) || ---styles.css (contains style declarations) ^^ --images (located directly within the container folder) | ---linkedimage.png (the image to be changed in page background) I hope the structure above makes sense. Anyway, while linking the image in the scripts.js file, I found it never switched back, yet the code never showed any problems. When I found the other way to link images directly in JavaScript, I changed the image link code to what would amount to being directly in the HTML file itself: The first is the original way I linked it the second is the new way. - (../images/linkedimage.png); - from above, changed to - (images/linkedimage.png); After the change above, the code worked. I went back to reading about the JavaScript standard, I thought that JavaScript was read like an external CSS file was read, where you would have to use the (../) part to link to the image if it was in a different folder one level above the current folder. (as the first line of code above is.) Is that not how JavaScript works? When it comes to linked images? -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Re: JavaScript as External File vs. Internal Code and linking to images
After the change above, the code worked. I went back to reading about the JavaScript standard, I thought that JavaScript was read like an external CSS file was read, where you would have to use the (../) part to link to the image if it was in a different folder one level above the current folder. (as the first line of code above is.) Is that not how JavaScript works? When it comes to linked images? HI Brett, Your directory structure is good. I usually use: / Root directory -- /images --/css --/scripts And you are correct that Javascript scripts should be linked as an external file. As for linking for images, I use relative paths (i.e. ../ ) while on my local machine and change to absolute paths when uploading to the web server (i.e. /images/some_image.jpg ). The reason why is because even if you move your HTML pages around, the path will always point to the image. HTH, Elle *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] JavaScript as External File vs. Internal Code and linking to images
Recently, I experimented with changing check boxes with JavaScript. If the user clicked on the words next to the check box, then the box would be checked, once checked if the user clicked again, then the box would be unchecked. As someone has mentioned, that's precisely what putting the text into a label does (without the need for any javascript at all). I'm just curious to know if you are using labels and/or if there was something in your scenario that meant labels weren't producing the effect you wanted? -- --- http://weblog.200ok.com.au/ --- The future has arrived; it's just not --- evenly distributed. - William Gibson *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] issues with too many divs
Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Checking My Page
Marvin Hunkin wrote: Hi. well, got some suggestions, from a friend. and now uploaded my latest files to http://drop.io/startrekcafe/ so, take a look, give me feedback, and any other suggestions, i might need, or if my page, style sheet, and the nav links.css, looks fine and it looks professional, and the fonts, colours, and the page looks fine, then give me some feedback. cheers Marvin. Marvin I don't know what you think you have up there, but drop.io is not a web hosting site, it is a dropbox or collaborative filesharing site. So, when you copy your index.html file up there, what I see is a _link_ to an index.html file, with links to download it, send it to someone, comment on it, rename it or delete it, plus some image thumbnails. It's not interpreting your html files as I think you want them to be (as I verified by downloading and viewing the index file). Regards ~mark *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] issues with too many divs
Using too much markup just for styling purposes isn’t recommended. I find that using adjacent sibling and child selectors usually helps avoid a large case of multi-div-itis. —Pascal On 07/01/2009, at 4:35 PM, Ben Lau wrote: Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** --- Simon Pascal Klein Concept designer (w) http://klepas.org (e) kle...@klepas.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Checking My Page
Hi My sister was only able to afford a house because a hurricane made her eligible for a spacial deal. Lots of luck finding something where transportation isn't such an issue. Lots of places open now. Yes, I am planning on Ian's party so getting a ride home shouldn't be a problem. David is as can be expected. Funeral is today so he's on his way to Belfast. LL xx --Original Message-- From: Marvin Hunkin Sender: li...@webstandardsgroup.org To: wsg@webstandardsgroup.org ReplyTo: wsg@webstandardsgroup.org Subject: [WSG] Checking My Page Sent: Jan 7, 2009 05:15 Hi. well, got some suggestions, from a friend. and now uploaded my latest files to http://drop.io/startrekcafe/ so, take a look, give me feedback, and any other suggestions, i might need, or if my page, style sheet, and the nav links.css, looks fine and it looks professional, and the fonts, colours, and the page looks fine, then give me some feedback. cheers Marvin. E-mail: startrekc...@gmail.com MSN: sttartrekc...@msn.com Skype: startrekcafe We Are The Borg! You Will Be Assimilated! Resistance Is Futile! Star Trek Voyager Episode 68 Scorpian Part One *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** Sent from my BlackBerry® wireless device *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
