jeffman

Please do the JavaScript Tutorial and come back with questions the tutorial doesn't answer.

1. Write a function that captures the select element's onchange event. 2. The function gets the selected index. If the index is 0 or 1, hide the textareas. If the index is 2, show the textareas. 3. There are two ways to change visibility. 3a. Change the CSS display property of the textareas (or a div that contains both of them).Use display:none to hide something. Use display:block or display:inline (or any other value) to make it visible. 3b. Change the CSS visibility property. Usevisibility:hidden to hide something. Use visibility:visible to make it visible. Try both. Changing visibility has a very different effect than changing display.

Have you copied that correctly? There is no position-left property. There is a left property, but it can be used only when the position property is set to something other than the default value, which is static.

You THINK you are returning an array with the value of $passerrors. That would look like this: return $passerrors; What you are actually returning is the RESULT of an assignment: return $passerrors['nopassindb']='........' Since the result of a simple assignment is the value being assigned, you are actually returning '........', which of course cannot be passed on to foreach.

The buttonheading div is positioned absolutely on the right side of its container div. If you change the positioning mode from absolute to something else or nothing, the icons will move. The icons float to the right of the buttonheading div. If you change or remove the float rule, the icons will move. It would be helpful if you explain where you want them.

It's almost like this author went out of his way to confuse people. 1. You could get some argument here, but it's not important. There is 1 object. (To be more specific, there is 1 object in the global context.) That object is called star (lowercase). It has 14 properties (which we can also call elements). They are named "Polaris" "Mizar" and so on. Each of those properties is an object of type Star (uppercase). 2. In the world where JavaScript meets the HTML DOM, it is wrong to call these objects collections. That term is reserved for a collection of DOM nodes. Most nodes are HTML elements that are a part of your HTML document. Node collections are returned by special DOM methods. You don't need to know what that means yet. All you need to know is that the word collection has a special meaning here. The star (lowercase) object created above is a lot like a JavaScript array and like an array created in most languages that use the term "array." It is not a true JavaScript array because it does not have direct access to array methods. I personally find it useful to create an array when all the elements are of the same type and I might want to use native array methods. I create objects when I need the properties to be of different types, and especially when one or more of them will be a method (function). 3. Not a typo. Star (uppercase) is a function being used as an object constructor. (The word new when it is called makes it a constructor). Constructors name the type of object, and their return value IS an object. 4. Language is tricky, and this is where the author could have helped us out by not naming the global object star (lowercase). The properties of star (lowercase) are the Star (uppercase) objects named "Polaris" and so on. Those names are not properties of the Star (uppercase) objects. The properties of the Star (uppercase) objects are "constellation," "type," "spectralClass," and "mag." (Note the spelling. These properties are identified in the constructor.) When the author refers to the "stars" he means the properties/elements of the star (lowercase) object, and when he refers to the properties of the "stars" he is referring collectively to all the properties of all the objects of type Star (uppercase). BTW, I hate the author's use of the term "pseudo-class" here because that term has a special meaning in CSS. In fact, it's 100% incorrect to use the word class in JavaScript. The correct word is prototype. It is similar to class, so using words like "class" is useful in early lessons for the sake of readers who understand what a class is in other OOP languages, but it should be discarded quickly. I hope some of that helps.

Is it possible that when you run the file normally it goes through Apache, but when you get it through AJAX, it comes through the Mac file system? If the browser and the server are on the same machine, I can see how that might happen. If the server is remote, then probably not.

Google animated dropdown menus

Also, trying to insert a script into innerHTML doesn't work. I think it used to in the old days, and this might be a security measure to prevent code injection. Since you're using it anyway, jQuery has a technique for inserting scripts dynamically. Basically, it runs the script through eval(), which you could also do. Like a normal .js file, you can't have script tags in an external script you load this way.

What you're saying is the .transistor div doesn't show up? This ruleset in boxSlider.css does that. When I use the Inspect Element tool to turn off the display rule, all the contents of that div are displayed. Or do I misunderstand something? .transistor{ margin:auto; background:#eee; display: none;}

Start over. Don't use document.write(). Don't use prompts. Don't validate using while loops. Put a text input on the page. Get its value when the user blurs (clicks outside the input). Evaluate the whole string at that time. Here's a basic tutorial on handling events. Instead of creating a button, create a text input. Instead listening for an onclick event, listen for an onblur event. Ask questions.

1. create a class that applies only to the <a> elements in the list. <a> elements not in the list would belong to a different class or no class. That looks like this: a.listLink:hover, a.listLink:active{background-color:#7A991A;} with HTML like this: <li><a href="#home" class="listLink">Home</a></li> or 2. Change the selector so that it applies only to <a> elements contained by <li> elements. That looks like this: li a:hover, li a:active{background-color:#7A991A;} and no change to the HTML is required.

As I said, I was specifically NOT answering as a philosopher. I do that as my day job (college English professor) but I usually take off that hat when I come to this board. The best place to have that discussion would be focused on topics like information theory, linguistics, artificial intelligence . . .

Philosophers might make a distinction between data and information, but as a developer I would not find a distinction useful. What I can say is this. Information is very hard to work with when it does not have a predictable structure. When information has a structure, you can use standardized methods for accessing any chunk of information you want. A table is a common way of giving information a structure. XML is another way of giving information a structure. It doesn't turn anything into information. It's a way of helping you access information. From what I understand from their web page, JDOM is a special Java interface for reading XML. Your slideshow is discussing the way JDOM works, not the way XML works. I would not use that explanation of JDOM to try to learn anything about XML. That would be like trying to understand a potato by reading the instructions for using a potato peeler.

You have confused the 'background' property with the 'background-image' property. 'background' can be assigned multiple values, including the image URL, repeat, coordinates, and so on. 'background-image' can only be assigned the value of a URL. Try removing '0 0 repeat-x' from your rule.

I tried a simplified version of your code in FF 19 for Mac and it works just fine.

Yeah. If you want to animate something, you need to take it out of the flow. That means positioning, and absolute positioning is easiest to work with. The default behavior is for the coordinates of absolutely positioned elements to be relative to the window. If you want to position them relative to their container, the container needs to have positioning also. You can find this piece of information all over the place, but if you're not looking for it, you'll probably miss it, but even if it is the answer to your problem (as here) it's hard to know what question to ask that leads to this answer. So it's like the answer is hiding in plain sight. The math starts with the coordinates of the mouse pointer. If the element you're animating is positioned relative to the window, then there is a 1-1 correspondence between the coordinates of the element and the pointer (adjusting for the position of the pointer relative to the top-left corner of the element). If the element is positioned relative to its container, then you need to add an offset to the mouse coordinates to get the element's coordinates. So what works with one positioning mode will be offset in the other positioning mode. The offset begins (jumps) as soon as you start the animation. After that, the element's movements mimic the pointer movements, but at the offset.

More or less as I explained. The difference is that you used relative coordinates for the chips, and they won't work when the positioning is absolute. So first I had to convert things from ems to px so I could add the border and padding correctly. Then I translated your relative coordinates into absolute ones. It's an approximation, so make changes as you like. Pts might work better than px. Just be consistent or the math doesn't work. Obviously, if you change the font size, you'll want to change the chip height. With the chips located, now, it was just a matter of changing the positioning mode of .chip and .fridge. Below I've pasted only the values I changed to get you the results I think you want. .chip {position:absolute;padding: 7px;height: 15px;} #chip2 {top: 38px;}#chip3 {top: 76px;}#chip4 {top: 109px;}#chip5 {top: 147px;}#chip6 {top: 180px;}.fridge {position: relative;}

This was what confused me and a few others I expect. I still don't know what it means, but now I know it doesn't matter. You haven't posted your CSS, so I'll make some guesses. Some of this you may have already done. No biggie. 1. Position the chips absolutely. Position the fridge relatively. That will make sure the chips are positioned relative to the fridge, not the window. 2. Give the chips initial coordinates. (For example, position them randomly across the face of the fridge). If you don't, they will initially stack up at the 0,0 position of the fridge. 3. Don't assign the fridge coordinates (unless you want to). Relative positioning this way only affects the contents, not the fridge itself. 4. Give the fridge a defined height or it will have no height at all. When the chips are removed from the "flow," they don't affect the size of their container.

Pfft. Took me long enough!

Creating and setting an attribute actually causes an HTML tag to contain an attribute. You can read it if you examine the innerHTML or use the inspect tool in your browser. Setting a property just using dot notation doesn't do that. Likewise, if you write a non-standard attribute in your HTML document, you probably can't read it using dot notation, but you should be able to read it using getAttribute.

Creating the text node (your first technique) is probably more "correct," but I usually use innerHTML to add text to an element. Curiously, I rarely use it to add HTML to an element. Options are weird, though. There have been methods for adding options dynamically before all the DOM methods were standardized. I think all the browsers support both of your techniques, but I'd check it out anyway. And don't worry about which technique benchmarks faster. Either way should work with no noticeable latency.

You probably want to check the value (not the innerHTML) of "#firstname". If it == "", put up your error message.

Obviously, this is a problem: var error = ""; if(error == "")

Here's a bare-bones system that you can adapt. There is nothing magical in the image names (they don't need to be numbered) or the id names or the function names. <!DOCTYPE html> <html> <head> <script type="text/javascript"> function changePic () { document.getElementById("mainpic").src = this.getAttribute("data-picname"); } function init () { document.getElementById("thumb1").onclick = changePic; document.getElementById("thumb2").onclick = changePic; document.getElementById("thumb3").onclick = changePic; } window.onload = init; </script> </head> <body> <img src="starter.jpg" id="mainpic"> <img src="thumb1.jpg" id="thumb1" data-picname="big1.jpg"> <img src="thumb2.jpg" id="thumb2" data-picname="big2.jpg"> <img src="thumb3.jpg" id="thumb3" data-picname="big3.jpg"> </body></html>