|
awesome thanks! got it working. you completely rule. one last question, since adding the javascript for the showhide, my menu is all spaced out (see attached image) and no amount of css tinkering seems to be able to get the menu options closer together. It all stems from the 'design' menu button (the button that has the drop down showhide menu) not actually showing up as anything on my dreamweaver (sorry) design page, how can i change its padding etc? also, any idea why it has a retarded blue box around the showhide menu button if i preview it in firefox?
|
# ? Mar 9, 2010 18:00 |
|
|
# ? May 17, 2024 15:19 |
|
Boring posted:awesome thanks! got it working. you completely rule. Your reset.css should be fixing any padding issues. If you aren't using a reseet.css, shame on you. http://meyerweb.com/eric/tools/css/reset/ Since you are adding elements w/ javascript, that could be why it doesn't show up right in any WYSIWYG "preview" pane or whatever.. I could be wrong though, since I have not used Dreamweaver.
|
# ? Mar 9, 2010 19:30 |
|
This page appears the way I expect it to in Firefox and in Opera. But if you mouse over the black and blue lines in Firefox, you will notice they expand in size. In Opera, this doesn't work, although other javascript events fire as expected; for example, clicking one of the square black-and-white images causes all of those images to go transparent. How come Opera doesn't like my onmouseover effects? (I looked in Tools>Advanced>Error Console, but there was nothing there.) The page does not display correctly in IE, but I think this is an issue with SVG Web.
|
# ? Mar 10, 2010 00:02 |
|
Actually, that SVG mouseover is not working for me in Firefox 3.6 on Linux either.
|
# ? Mar 10, 2010 00:06 |
|
rt4 posted:Actually, that SVG mouseover is not working for me in Firefox 3.6 on Linux either. On reading your post, I went and updated Firefox to the latest version, but I still find that the onmouseover effect is working. I don't suppose you have firebug installed? If you have, does it say anything?
|
# ? Mar 10, 2010 00:17 |
|
It seems to be getting the onmouseover and onmouseout events, but I'm not seeing anything on my screen.code:
|
# ? Mar 10, 2010 00:24 |
|
I've been fiddling with this for a bit, and the only conclusion I can come to is: Opera doesn't seem to support the "onmouseover" property, or at least, not if it's a property of an element of an SVG image that was added after page load using JavaScript. I tried changing the code that adds the onmouseover property from dummysheath.setAttribute('onmouseover','document.defaultView.parent.railmouseover('+i+')'); to dummysheath.setAttribute('onmouseover','alert("Hi")'); and it still didn't work; yet I can use the exact same code (either of those two lines) to add the "onclick" attribute to my new element, and it will behave like it should. Also, if I assign the functionality I wanted for the "onmouseover" event to the onclick element instead, then the expected behaviour is exhibited when I click; so there is no fault (according to Opera) with the code that is being run, it's just that Opera refuses to notice the onmouseover event. To reiterate: I have this page http://orderofthehammer.com/svgtest.htm The behaviours it should show are: 1) When you move the mouse close to one of the blue or black lines on the image, the line width should increase. 2) When you move the mouse away, the line should go back to its original width. 3) When you click one of the lines, it should display an alert() box saying "You clicked blah" 4) When you click one of the square black-and-white images on the page, all of the square black-and-white images should go translucent. If you click again, they should go back to being opaque. At the moment, Firefox (running on my machine) exhibits all 4 behaviours. Opera exhibits only 3 and 4. Chrome exhibits all four behaviours, but it also exhibits a fifth (undesirable) behaviour: it detects the onclick event even outside the clipping path of images (so you can click on certain parts of the image that ought to have no effect, and it will behave as though you clicked on one of the black-and-white images.)
|
# ? Mar 10, 2010 03:04 |
|
The mouseover event works correctly for the blue (but not the black) lines for me with Opera 10.50. The click event works for both types of lines.
|
# ? Mar 10, 2010 04:22 |
|
Plorkyeran posted:The mouseover event works correctly for the blue (but not the black) lines for me with Opera 10.50. The click event works for both types of lines. I just went and made sure I have the latest version of Opera, and my version was outdated so I updated it, but it still isn't working - I wish I knew why it is working inconsistently across different machines.
|
# ? Mar 10, 2010 04:38 |
|
OK, this gets increasingly bizarre. I have found that if I add to the SVG file itself (the source file, which had been empty but for a few <g> elements) the following:code:
|
# ? Mar 10, 2010 16:54 |
|
How are people doing localization with external .js files? A couple ideas that occur to me are: 1) include different message file(s) based on session (or whatever) settings php:<? switch( $_SESSION['lang'] ) { case 'en': echo '<script src="English.Messages.js"></script>'; break; case 'es': echo '<script src="Spanish.Messages.js"></script>'; break; //(etc.) } ?> code:
|
# ? Mar 10, 2010 16:57 |
|
Hammerite posted:...
|
# ? Mar 10, 2010 17:14 |
|
Lumpy posted:How are people doing localization with external .js files? php:<? echo '<script src="js/lang/messages-' + $_SESSION['lang'] + '.js"></script>'; ?> messages-en.js messages-es.js etc... ronin109 fucked around with this message at 06:16 on Mar 11, 2010 |
# ? Mar 10, 2010 20:03 |
|
Can anyone recommend a good Javascript book?
|
# ? Mar 11, 2010 18:16 |
|
smug forum rear end in a top hat posted:Can anyone recommend a good Javascript book? That would greatly depend on your pre-existing knowledge of JS, and experience with other languages and object oriented programing in general. Are you just starting out? Have 12 years of Java development experience?
|
# ? Mar 11, 2010 19:50 |
|
smug forum rear end in a top hat posted:Can anyone recommend a good Javascript book? http://oreilly.com/catalog/9780596517748 It's only 150 pages, and it is Truth. It's good for beginner and advanced JS developers that want to brush up on fundamentals. I call it mom, because when I'm writing JS, I always go running back to mommy. I think it's a good starting point before jumping into other more library-specific books. epswing fucked around with this message at 21:31 on Mar 11, 2010 |
# ? Mar 11, 2010 21:28 |
|
epswing posted:http://oreilly.com/catalog/9780596517748 I can confirm this book is good in so far as telling you about Javascript more then just the basic here is how you create a function, etc. For pure syntax and reference java script: The Definitive Guide is a good place to start also. You could also throw any CLOS / Scheme book in there as worth reading if you want to understand more about Javascript.
|
# ? Mar 11, 2010 21:58 |
|
I have some code which works in Firefox, Opera and Chrome. However, I use setAttributeNS all over the place, and IE doesn't "do" that. How can I modify my code to get IE to work with it?
|
# ? Mar 21, 2010 02:16 |
|
Are you calling setAttributeNS on DOM nodes from the page itself, or external XML nodes? I don't think it's possible to reimplement the method on nodes that don't already support it, but you might be able to work around the need to use it. Post some code!!!!!
|
# ? Mar 21, 2010 10:23 |
|
Nigglypuff posted:Are you calling setAttributeNS on DOM nodes from the page itself, or external XML nodes? I don't think it's possible to reimplement the method on nodes that don't already support it, but you might be able to work around the need to use it. Post some code!!!!! I am using JavaScript to create, style and add DOM nodes to an SVG image in the page. (Yes, I am aware that IE versions 8 and lower do not support SVG; I am using the SVG Web alpha.) The following is the code that includes the SVG file in the page: code:
code:
code:
code:
IE posted:LOG: Error while firing onload: Object doesn't support this property or method You can see this page here. Hammerite fucked around with this message at 22:41 on Mar 21, 2010 |
# ? Mar 21, 2010 16:04 |
|
How about replacing this line:code:
code:
|
# ? Mar 22, 2010 06:01 |
|
Nigglypuff posted:How about replacing this line: code:
code:
In the second case, neither IE nor Firefox throws an error, but the picture does not display. Looking in Firebug shows that the image element exists and has the "href" attribute, but with a null namespace. If in the second case I change the first argument of setAttribute from 'href' to 'xmlns:href', Firefox still doesn't show anything, but in IE the "Object doesn't support this property or method" message comes back.
|
# ? Mar 22, 2010 15:04 |
|
I also tried the following:code:
|
# ? Mar 22, 2010 17:08 |
|
Which IE?
|
# ? Mar 22, 2010 17:26 |
|
"Version: 8.0.6001.18882"
|
# ? Mar 22, 2010 18:30 |
|
OK, so I'm making a custom site using the Google Data API, but I'm having trouble getting this HTML stuff right. What I'm trying to do is make a blockquote that calls my function calcRoute("string") where string is an address. My code looks like this:code:
code:
code:
almostkorean fucked around with this message at 14:58 on Mar 23, 2010 |
# ? Mar 23, 2010 14:55 |
|
almostkorean posted:OK, so I'm making a custom site using the Google Data API, but I'm having trouble getting this HTML stuff right. What I'm trying to do is make a blockquote that calls my function calcRoute("string") where string is an address. My code looks like this: You're missing a quote after the equals sign on the onClick attribute (and the corresponding one after the "hideContacts();" call to close it off). So your HTML string will look something like this: code:
code:
vvv Duh, yes, do what Nigglypuff says. I was focusing too much on the exact bug you posted instead of realizing a much better way of doing it. Flobbster fucked around with this message at 23:22 on Mar 23, 2010 |
# ? Mar 23, 2010 16:57 |
|
You don't need to be generating JS source as a string from existing JS code. It's an escaping nightmare, it's harder to read, and it severely increases the potential for XSS vulnerabilities in your app. It's almost never helpful. Instead of the above, you could do this: code:
|
# ? Mar 23, 2010 23:00 |
|
I'm trying to figure out a method of storing a unique reference to each tag on a particular page. I won't have any ability to edit the page content and I'll the generated UID to stay the same on every page refresh. Since browsers don't generate any kind of UID for elements, I was thinking that the only method to do this would be to execute a script which walks the DOM and creates a UID for each it comes across. I don't know how accurate this will be, especially considering I'll need to ensure it creates the same UID for the tag each time the script crawls the page. Can anyone think of any other, more accurate ways of mapping a page? I know that crazyegg.com monitor their clicks on an element level, but how they do it is beyond me.
|
# ? Mar 24, 2010 15:43 |
|
Every element on a page can be uniquely identified by at least one CSS selector, even if it does not have an ID of its own. For example:code:
You could of course store the resultant key differently, but if you express it as a normal CSS selector, you gain the advantage of being able to use a library like jQuery to find the element again by searching for it. As long as the basic structure of the document doesn't change between reloads, such a CSS selector should always identify the same element.
|
# ? Mar 24, 2010 16:10 |
|
Hanpan posted:I'm trying to figure out a method of storing a unique reference to each tag on a particular page. I won't have any ability to edit the page content and I'll the generated UID to stay the same on every page refresh. I can't think of any reason why you would need to store a reference to every element on a web page? What is the problem you are trying to solve that requires you to do that? A click event bubbles up the DOM hierarchy so, clicking within a DIV element on a page will trigger an onclick listener on the DIV, it's parent, its parent's parent, etc... all the way up to the document. So, simply adding a click event listener to the document would allow you to determine what element was clicked on the page. This is likely the basis of how crazyegg.com tracks clicks.
|
# ? Mar 24, 2010 17:19 |
|
ronin109 posted:I can't think of any reason why you would need to store a reference to every element on a web page? What is the problem you are trying to solve that requires you to do that? I am attempting to track clicks on specific page elements in order to collect metric data. The problem with event bubbling is that it will give me the element which triggered the click, but there is no reference I can rely on to obtain the exact same element again at a later date. Unless I am missing something, the click event won't give me the exact road map to a particular element either, will it?
|
# ? Mar 24, 2010 20:27 |
|
Hanpan posted:I am attempting to track clicks on specific page elements in order to collect metric data. The problem with event bubbling is that it will give me the element which triggered the click, but there is no reference I can rely on to obtain the exact same element again at a later date. I don't know your specific requirements but, if you need to track clicks on specific elements than is there any reason the following won't work? 1. Add a namespaced attribute id on each HTML element you want to track click events on: code:
|
# ? Mar 24, 2010 21:39 |
|
ronin109 posted:I don't know your specific requirements but, if you need to track clicks on specific elements than is there any reason the following won't work? Unfortunately, I won't have access to the page code in order add in these tags. I appreciate what I am asking seems impossible, but the guys at CrazyEgg seemed to have cracked it (ouch) somehow and I'm dying to know how. Perhaps their system isn't as accurate as they are making out.
|
# ? Mar 24, 2010 23:05 |
|
Hanpan posted:Unfortunately, I won't have access to the page code in order add in these tags. I appreciate what I am asking seems impossible, but the guys at CrazyEgg seemed to have cracked it (ouch) somehow and I'm dying to know how. The best thing I can think of to do: Add a document.onlick event which checks the "target" property of the event. target should give the originally clicked element no matter if it bubbled up. Using that element object, build some sort of xpath string that identifies it in the hierarchy.
|
# ? Mar 25, 2010 01:59 |
|
I am trying to get a small box to appear on mouseover of a rectangular area in an image. Actually, multiple areas with an individualized box for each. The boxes are going to have some links and maybe an image or something. The box should "hold" after your mouseover to give you time to move your cursor into the box, which should stay up until you move out of the box. Is this possible? I feel like those stupid text-link ads that show a box do this kind of thing all the time, although with text instead of a mapped out area on an image. Google hasn't really helped me out much because I have quite a bit of confusion on how to actually use Javascript to make this happen.
|
# ? Mar 25, 2010 02:29 |
|
ChrizpG posted:I am trying to get a small box to appear on mouseover of a rectangular area in an image. Actually, multiple areas with an individualized box for each. The boxes are going to have some links and maybe an image or something. The box should "hold" after your mouseover to give you time to move your cursor into the box, which should stay up until you move out of the box. Make an imagemap and tie js events to it.
|
# ? Mar 25, 2010 05:27 |
|
dizzywhip fucked around with this message at 21:53 on Nov 9, 2020 |
# ? Mar 26, 2010 09:52 |
|
mit_senf posted:I'm very doubtful at this point, but is there any way to do proper sound effects in a browser with Javascript? It's kind of depressing because making games in Javascript is a lot of fun SoundManager2 is a full-featured sound library for the browser environment. Its interface is pure Javascript, but internally it is implemented using an invisible flash file, so it is not 100% native. Hopefully the scriptable <audio> element will gain traction soon, and provide an alternative backend for the library
|
# ? Mar 26, 2010 10:13 |
|
|
# ? May 17, 2024 15:19 |
|
You could use the HTML5 audio tag. Though not all browsers support it. Then again not all browsers support HTML5 canvas either. Also, it's possible to generate the sound dynamically in javascript if you want : http://alerttheinternet.com/projects/toneGenerator/ That example is terribly un-cross-browser-compatible, since it requires support for html5 audio and data:URIs but works for me in firefox at least.
|
# ? Mar 26, 2010 15:35 |