But what goes in href if you don't have anything to actually link to? One example is a page I've written that is entirely self-contained, and all href's that drive the interface end up pointing to #. Is this acceptible in edge cases like these with the unobtrusive approach?
If someone has JS turned off the markup is essentially meaningless, so I was wondering how people deal with this lapse in the separation between behavior and structure.
I just wanted to get your opinions on this: I have several pages with page-specific JavaScript (i.e. script I know cannot be reused...it can only be run against elements found only on that page).
My question is, would you recommend just putting it in SCRIPT tags in the header, or should I create thispage.js so that the code is separated into another file? It slows the request because the browser has to ask for another external file, but keeps code out of the HTML doc.
I have an old web application I did where browsers with dynamic capabilities received a drop down menu on the top of the page and a fold out on the left hand side of the page and non-dynamic browsers received two static menus. This was done via server side detection of browser capabilities and branching the application. Over time needless to say the capabilities between the dynamic and static sides got seriously out of whack.
Now the drop-down menu was not done unobtrusively, it was done via mouseovers and the like.
Obviously it makes sense to change the menus to be done by catching events. But I would also like to redo the dynamic and static branching.
The way I figured would be as follows:
The static menus are placed inside of noscript elements. The dynamic menus are loaded with display set to none. Script writes in a new css changing dynamic menu display to block.
As I understand noscript is considered bad via unobtrusive javascript theory, however I have a hard time seeing how one could make a menu that would display properly as a static menu yet also function as a drop down or fold out (especially fold out), collapsible expandable menus are easy since they basically have the menu order placed in the structure needed.
So I'm wondering if anyone has reasonable suggestions on how to succeed.
On another subject, anyone know what the effect of a bunch of links inside a noscript element that mirror a bunch of links in the normal page will do to Google's algorithms?
I'm wondering what the best practice is for a particular task I'm trying to accomplish. I'm using two sets of radio buttons for a user to select values from. These values then go into a couple of tables to show some heat loss calculations depending on the values chosen I want the tables to have the relevant values filled in. Is the best way to accomplish this a long list of if then else type statements or is there a better way of doing this?
I am looking for advice on what is "best practice" regarding looping through a form to check its checkboxes and associated data fields.
Here is what I am trying to do (Here is the page I am working on: http://www3.telus.net/thothworks/LinLeastSqPoly4.html). I provide a form for a user to enter up to twenty (M = 20) data pairs. The user need not enter data for all twenty pairs, but the user must indicate that data is present by checking the checkbox beside each valid pair.
If a checkbox is checked, two things happen:
i) a counter, numRows, is incremented to keep track of the total number of valid pairs entered.
ii) the associated two data values (being x and y) are checked to ensure that they are valid numbers and, if so, are entered in an array for use later.
Previously, my forms were small, and I was able to examine each checkbox of a form individually: "if (checkbox1.checked) do action A; if (checkbox2.checked) do action B; if (checkbox3.checked) do action C; etc."
However, now that my form has twenty checkboxes, and may get bigger, I would like to learn how to accomplish this task with a concise loop. Following is my first attempt and it seems to work. If anyone can suggest improvements for this code ....
I have a photo blog [url] and want to create an effect that fades-in the displayed picture when the page is loaded.
An important requirement for me would be that the page also has to work without Javascript.
Currently I am using the following small plugin:
It is called directly beneath the <img> element:
This way it works fine with the current versions of Firefox and IE. I did not test other browsers or versions yet. I tried to call it in $(document).ready but then IE might display the picture shortly before it is hidden and faded-in.
Since I am not 100% happy with having the code in the middle of the HTML and with depending on the timing of execution to avoid flickering I wanted to ask for other solution or best practices to achieve what I would like to do.
One solution that came to my mind is to do create the image in JScript and only fade it in after it is loaded. To work without Javascript I could still put the <img> element where it was but within a <noscript> element. But not sure how well the <noscript> is supported by older or exotic browsers.
First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem.The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. I do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site [URL].
which is placed in the body section of the page. Anyhow, my problem is that it works fine, but only once, right as the page loads. I have tried removing window.onload, but then it doesn't work at all. How can I get this to work every time I blur from the text field?
I want to display the div marked 'General overview' by default, and to hide all of the other divs (section1, section2, section3 and section4) but would like to swap out the 'general' div with the other divs as the corresponding links are moused over.
e.g. mousing over the Section 2 link will replace the 'general' div with the 'section2' div. On mousing out, it will revert back to the 'general' div. Mousing over the Section 4 link will replace the 'general' div with the 'section4' div. On mousing out, it will revert back to the 'general' div. Etc etc....
I was reading through a book that talked about unobtrusive javascript, and it gave this example of how to trigger a function instead of using an inline onmouseover event handler.
document.getElementById("RandomElementId").onmouseover=RandomFunction; I thought this would be cool, but I can't seem to find a way to pass parameters to the function this way. I assumed you just use RandomFunction(parameter1,parameter2); but no go.
Is there a different syntax for this, or does this technique forbid using parameters?
From my understanding the main feature of unobtrusive JavaScript is to remove event handing from the markup.The main reason for doing this is to avoid repetition of code.There are also other reasons but that is the main one. e.g. no having to write <tag onclick="function()" > over and over again. This traditional event handling method makes code less maintainable.However is it worth writing unobtrusive code when we consider the following:
1, Server sider scripting laguages can be used to avoid code repetition. e.g. we can use a loop to add multiple onclick event handlers to all the elements of a navigation list. Thus we would only have to write onclick="function()" once.
2, Unobtrusive coding makes the code harder to follow.It is easier to look at the markup to find out what happens when an event occurs on an element rather than having to look through wades of JS code to find the correct event listener. This is especially true when a team is working on a project. It is easier to find out what another person has done when the traditional model of event handling is used.
3, Unobtrusive coding means longer and more complicated code. Also there there is a need for having to deal with browser differences.I know this can be reduced using libraries such as JQuery. Is it worth using such a library?
without outside extensions (http://remi.org/2009/01/06/using-firebug-to-debug-unobtrusive-javascript), how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events? for instance, i have a website i log into that has a "submit" button. the button itself only has this code:
obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.
I am trying to create a basic unobtrusive form validation function but I am having some issues/questions. Basically I am checking if any of the form fields have <= 3 characters, and if they do so, then I make those fields' backgrounds and borders red. Also in the empty <span> tags I insert an error message. My issues/questions are:
#1: So when I say if (fieldVals<=3) this means that the errors should appear if the values are 1,2 or 3 characters long, right? It does not do that though, when I insert one character in any of the form fields the errors go away, but they should not, right?
#2: How do I cancel the form from submitting if errors are visible and vice versa? When I use the return false when errors are visible, the code does not even run. What is going on? return true does the same.
#3: When I use a submit button(type="submit") instead of just a button(type="button"), the code does not run? What am I doing wrong?
I am not trying to use this on a website, I am just trying to learn how to use unobtrusive javascript. That's why I am only checking for empty fields. If I learn how to do this first, later I will try to add email check, date check etc.
I have a simple button in my HTML. I also have a function in my external JavaScript file. This function calls an alert box with some text. Now, I also have a global variable in my JavaScript that gets the button by id, then assigns the onclick event handler to it which in turn is assigned the call to my alert box function. Simple right?
Problem: The alert box shows up when the page loads as well as when the button is clicked. This is not desirable. code...
I want to create a website where you can practice mathematical skills through gaming, but I don't know which web program will be the best for that type of game. I want to learn javascript because I know it is the most widely used language, but I also want to use c# because I have more knowledge in c++ so I'm guessing it will be easier for me to use. And then there's flashplayer, which I've heard is even more easier to use out of all of them. So I ask which console is the best choice?
I'm working on some code and am running into brick walls. I'm trying to write out Javascript with Javascript and I've read the clj Meta FAQ and didn't see the answer, read many similar posts (with no luck though), and searched through the IRT.ORG Faqs (www.irt.org/script/script.htm).
The Javascript is designed to open an popup window and then inside that window call another script which will resize that window. There may be another way around this but the reason I tried this approach initially was that I wanted to call the onload handler in the popup window to resize the image only after the image had completely loaded. I've had some code in the primary Javascript file (showimage.js) before that works if the image has been cached but on the first load, it doesn't resize properly which tells me it is probably because it is trying to resize the window based on the image size but it isn't completely known at that point. So I removed that code and tried placing the resizing code in the second Javascript file (resizewindow.js). BTW I've tried other code to open a popup image and automatically size it ie Q1443 at irt.org but that doesn't do exactly what we need.
Even if there is another way to do this with one file, I still want to figure out why this isn't working in case I run into it in the future.
I thought what I would need to do to use document.writeln to write Javascript would be to escape any special characters and to break apart the script tag ie
document.writeln('</SCRIPT>');
would become
document.writeln('</SCR' + 'IPT>');
I have a HTML page and 2 Javascript files. All files are in the same directory and have permissions set correctly.
Here are the 3 files (keep in mind wordwrap has jacked up the formatting):
index.html ---------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> <SCRIPT type="text/javascript" LANGUAGE="JavaScript1.1" SRC="showimage.js"> </SCRIPT> </head>
<body> Click the house<BR> <A ONCLICK="newWindow1('house1.jpg','Nice House')"><IMG SRC="house1thumb.jpg"></A> </body> </html>
showimage.js ------------ function newWindow1(pic,sitename) {
resizewindow.js --------------- function resizewindow() { // Do resizing here. // Right now this isn't being executed alert("resizing window"); }
Can anyone provide some pointers as to why this javascript is failing? I'm using IE6 on Win2k and when I click on the image to open the popup window, it does open the window but it is white with no content and the system immediately goes from about 4% CPU usage to 100% and consistently stays there until I kill that window with the task manager.
Attached is a simple HTML file that adds and delete rows. In the add row function I set an attribute "onClick" this triggers the testMessage() function. When I try this in Firefox it works just fine however on IE it just refuses to work.
What is interseting is the ROW that already exists has a similar 'onClick' event which works when the page is loaded, but subsequent "row" additions to the table to not work in IE. Code:
I'm getting errors in Firefox everytime I try to run this frame resize code, but it works fine in IE. I can't seem to figure out what the problem is with it.
The error is: Error: theFrame has no properties Line: 8
The line that the javascript console is showing an error for is in italics.
I'm already past the basics of Javascript, and i need something that takes me to the other level and teaches me the new technologies and cool stuff (drag&drop, AJAX, OOP in javascript, maybe XUL...etc). So far i found these two books:
1. Sitepoint's "The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks". 2. Worx's "Professional JavaScript for Web Developers (Wrox Professional Guides)"
Both seems to cover very insteresting topics, but i can only buy one of them. So which one do you suggest?
and by the way, i've read the sample chapter 5 of Sitepoint's book, and it seems like the author(s) just put the solutions/codes there and let you figure them out on your own. Is this how the rest of the chapters are?
This is a question about defensive web browsing. Ocassionally I run into a page whose JavaScript does something that I find obnoxious. I would like to turn off JavaScript only for that page (instead of disabling it globally). It would be cool if there were some way to do this through a "bookmarkable" JavaScript snippet using the javascript: pseudoprotocol. Does anyone know any trick to do any of this?
