Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Boring: Nov 29, 2004; nuhhh

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?

Only registered members can see post attachments!

# ? Mar 9, 2010 18:00

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 19:26

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Boring posted:

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?

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

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

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

spiritual bypass: Feb 19, 2008; Grimey Drawer

Actually, that SVG mouseover is not working for me in Firefox 3.6 on Linux either.

# ? Mar 10, 2010 00:06

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

rt4 posted:

Actually, that SVG mouseover is not working for me in Firefox 3.6 on Linux either.

That's irritating.

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

spiritual bypass: Feb 19, 2008; Grimey Drawer

It seems to be getting the onmouseover and onmouseout events, but I'm not seeing anything on my screen.

code:

function onmouseover(evt) {
   document.defaultView.parent.spacemouseover(7);
}

This shows up when I use paused mode, but nothing happens when I step into.

# ? Mar 10, 2010 00:24

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

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

Plorkyeran: Mar 22, 2007; To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed

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

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

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 was messing around with it a bit more just now, trying some different things in the js code for the black lines, which is probably why it didn't work for the black 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

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

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:

<path d="M900 100 L700 100"
      id="shcanal99"
      onmouseover="document.defaultView.parent.canalmouseover(99)"
      />

...

<path d="M900 100 L700 100"
      id="canal99"
      onmouseover="document.defaultView.parent.canalmouseover(99)"
      onclick="document.defaultView.parent.canalclicked(99)"
      onmouseout="document.defaultView.parent.canalmouseout(99)"
      />

then not only will the onmouseover/onmouseout properties work for that element, they will also work for every other element (the ones I am adding using JavaScript). If I comment out the above lines, then it goes back to the way it was before, with none of the onmouseover/onmouseout stuff working. This has to be a bug in Opera, I see no other explanation for it.

# ? Mar 10, 2010 16:54

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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.)
}
?>

2) use my frameworks localization inside a single messages file, and force it to be PHP parsed

code:

<Files Messages.js>
ForceType application/x-httpd-php
<Files>
// then the file Messages.js looks like:
MyApp.Messages = {
  badLogin: "<?php echo PHPApp::lang('badLogin');?>",
  youSuck: "<?php echo PHPApp::lang('youSuck');?>",
  // etc
}

Anyone have any suggestions / horror stories / good ideas?

# ? Mar 10, 2010 16:57

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

Hammerite posted:

...

then not only will the onmouseover/onmouseout properties work for that element, they will also work for every other element (the ones I am adding using JavaScript). If I comment out the above lines, then it goes back to the way it was before, with none of the onmouseover/onmouseout stuff working. This has to be a bug in Opera, I see no other explanation for it.

... and if I put in only one of those elements, and give it an onmouseover property but not an onmouseout property, then onmouseover events work on all elements, but onmouseout events don't work on any. :2bong:

# ? Mar 10, 2010 17:14

ronin109: Aug 23, 2002

Lumpy posted:

How are people doing localization with external .js files?

Similar to your code snippet, I've done something like this previously:

php:

<?
echo '<script src="js/lang/messages-' + $_SESSION['lang'] + '.js"></script>';
?>

Then, in my "js/lang/" folder, I'd have each language file named like so:

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

smug forum asshole: Jan 15, 2005

Can anyone recommend a good Javascript book?

# ? Mar 11, 2010 18:16

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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

epswing: Nov 4, 2003; Soiled Meat

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

HFX: Nov 29, 2004

epswing posted:

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.

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

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

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

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

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!!!!! :bubblewoop:

# ? Mar 21, 2010 10:23

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

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:

<!--[if IE]>
<object src="blanksvg.svg" classid="image/svg+xml" id="boardSVG" width="960" height="1100"></object>
<![endif]-->
<![if !IE]>
<object data="blanksvg.svg" type="image/svg+xml" id="boardSVG" width="960" height="1100"></object>
<![endif]>

Here is the <body> tag for the page:

code:

<body onLoad="buildboard();">

The function buildboard() is in an external .js file. Here it is:

code:

function buildboard() {
    determinelocationvisibility();
    if ( numbgpictures ) { addpictures(); }
    addlocationnames();
    if ( numvirtualconnections && displayvirtualconnections ) {
        addvirtualconnections();
    }
    if ( railphase ) {
        if ( displaycanals ) { addlinks(false); }
        addlinks(true);
    } else {
        if ( displayrails ) { addlinks(true); }
        addlinks(false);
    }
    addindustryspaces();
    if ( nummoneysymbols ) {
        addmoneysymbols();
    }
}

The integer numbgpictures is equal to 1. The function addpictures() is in the same file as buildboard(). Here it is:

code:

function addpictures() {
    var thegroup = document.getElementById('boardSVG').contentDocument.getElementById('backgroundpicturesgroup');
    var dummyelt;
    var i;
    for (i=0;i<numbgpictures;i++) {
        if ( ( prettyboard && pictureexistspretty[i] ) ||
             ( !prettyboard && pictureexistscompact[i] )
             ) {
            dummyelt = document.createElementNS(svgns,'image');
            dummyelt.setAttributeNS(xlinkns,
                                    'href',
                                    'http://brass.orderofthehammer.com/gfx/' + backgroundpicturefilenames[i]
                                    );
            if ( prettyboard ) {
                dummyelt.setAttribute('x',bgpxpositionspretty[i]);
                dummyelt.setAttribute('y',bgpypositionspretty[i]);
            } else {
                dummyelt.setAttribute('x',bgpxpositions[i]);
                dummyelt.setAttribute('y',bgpypositions[i]);
            }
            dummyelt.setAttribute('width',bgpwidths[i]);
            dummyelt.setAttribute('height',bgpheights[i]);
            thegroup.appendChild(dummyelt);
        }
    }
}

IE stops trying at the line where dummyelt.setAttributeNS is called. (It does not seem to have any problem with createElementNS.) The following appears in the console under "Scripts":

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

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

How about replacing this line:

code:

            dummyelt = document.createElementNS(svgns,'image');

... with this?

code:

            var mockDocument =  document.getElementById('boardSVG').contentDocument;
            dummyelt = mockDocument.createElementNS(svgns,'image');

# ? Mar 22, 2010 06:01

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

Nigglypuff posted:

How about replacing this line:

... with this?

I tried changing the function to each of the following:

code:

function addpictures() {
    var thesvg = document.getElementById('boardSVG').contentDocument;
    var thegroup = thesvg.getElementById('backgroundpicturesgroup');
    var dummyelt;
    var i;
    for (i=0;i<numbgpictures;i++) {
        if ( ( prettyboard && pictureexistspretty[i] ) ||
             ( !prettyboard && pictureexistscompact[i] )
             ) {
            dummyelt = thesvg.createElementNS(svgns,'image');
            dummyelt.setAttributeNS(xlinkns,
                                    'href',
                                    'http://brass.orderofthehammer.com/gfx/' + backgroundpicturefilenames[i]
                                    );
            if ( prettyboard ) {
        // after this point the same as before

code:

function addpictures() {
    var thesvg = document.getElementById('boardSVG').contentDocument;
    var thegroup = thesvg.getElementById('backgroundpicturesgroup');
    var dummyelt;
    var i;
    for (i=0;i<numbgpictures;i++) {
        if ( ( prettyboard && pictureexistspretty[i] ) ||
             ( !prettyboard && pictureexistscompact[i] )
             ) {
            dummyelt = thesvg.createElementNS(svgns,'image');
dummyelt.setAttribute('href','http://brass.orderofthehammer.com/gfx/' + backgroundpicturefilenames[i]);
/*            dummyelt.setAttributeNS(xlinkns,
                                    'href',
                                    'http://brass.orderofthehammer.com/gfx/' + backgroundpicturefilenames[i]
                                    );
*/            if ( prettyboard ) {
        // after this point the same as before

In the first case, the behaviour of IE is not changed, nor is that of Firefox.

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

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

I also tried the following:

code:

function addpictures() {
    var thesvg = document.getElementById('boardSVG').contentDocument;
    var thegroup = thesvg.getElementById('backgroundpicturesgroup');
    var dummyelt;
var dummyattr;
    var i;
    for (i=0;i<numbgpictures;i++) {
        if ( ( prettyboard && pictureexistspretty[i] ) ||
             ( !prettyboard && pictureexistscompact[i] )
             ) {
            dummyelt = thesvg.createElementNS(svgns,'image');
dummyattr = thesvg.createAttributeNS(xlinkns,'href');
dummyattr.nodeValue = 'http://brass.orderofthehammer.com/gfx/' + backgroundpicturefilenames[i];
/*            dummyelt.setAttributeNS(xlinkns,
                                    'href',
                                    'http://brass.orderofthehammer.com/gfx/' + backgroundpicturefilenames[i]
                                    );
*/            if ( prettyboard ) {
                dummyelt.setAttribute('x',bgpxpositionspretty[i]);
                dummyelt.setAttribute('y',bgpypositionspretty[i]);
            } else {
                dummyelt.setAttribute('x',bgpxpositions[i]);
                dummyelt.setAttribute('y',bgpypositions[i]);
            }
            dummyelt.setAttribute('width',bgpwidths[i]);
            dummyelt.setAttribute('height',bgpheights[i]);
            thegroup.appendChild(dummyelt);
dummyelt.setAttributeNodeNS(dummyattr);
        }
    }
}

Again, this works in Firefox but IE chokes on createAttributeNS().

# ? Mar 22, 2010 17:08

epswing: Nov 4, 2003; Soiled Meat

Which IE?

# ? Mar 22, 2010 17:26

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

"Version: 8.0.6001.18882"

# ? Mar 22, 2010 18:30

almostkorean: Jul 9, 2001; eeeeeeeee

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:

      newdiv.innerHTML = "<blockquote><div onClick=calcRoute( \" " + 
			postalAddress + " \"); hideContacts(); > " +
			 contactEntry.getTitle().getText() +
			 "</div></blockquote>";

When I run it in the debugger, postalAddress has the value:

code:

postalAddress: "1201 S. Main St. Ann Arbor, Michigan 48104-3722"

but when I look at newdiv.innerHTML in debugger it looks like this:

code:

<blockquote><div onclick="calcRoute(&quot;" 1201="" s.="" main="" st.="" ann="" ... (length: 170)

As you can see it mangles the string. What's up with that?

almostkorean fucked around with this message at 14:58 on Mar 23, 2010

# ? Mar 23, 2010 14:55

Flobbster: Feb 17, 2005; "Cadet Kirk, after the way you cheated on the Kobayashi Maru test I oughta punch you in tha face!"

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:
code:
      newdiv.innerHTML = "<blockquote><div onClick=calcRoute( \" " + 
			postalAddress + " \"); hideContacts(); > " +
			 contactEntry.getTitle().getText() +
			 "</div></blockquote>";

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:

<blockquote><div onClick=calcRoute(" 1201 S. Main St. Ann Arbor...

So each of those address parts is equivalent to an attribute with an empty value.

You'd be better off using single quotes to surround the address in your calcRoute call, making sure to escape any single quotes that might already be in the address. Something like this should work:

code:
newdiv.innerHTML = "<blockquote><div onClick=\"calcRoute('" + s.replace(/'/,'\\\'') + "'); hideContacts();\"> " + contactEntry.getTitle().getText() + "</div></blockquote>";
Fake edit: In fact, that will only deal with single quotes properly inside the address string. If you have the possibility of double quotes in the address string, you'll need to escape those too.

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

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

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:

        newdiv.innerHTML = "<blockquote><div></div></blockquote>";
        var subdiv = newdiv.firstChild.firstChild;
        subdiv.onclick = function () {
                calcRoute(postalAddress);
                hideContacts();
        };
        subdiv.innerHTML = contactEntry.getTitle().getText();

# ? Mar 23, 2010 23:00

Hanpan: Dec 5, 2004

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

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

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:

html>body>h1
#container>.nav
#player>ul>li:nth-child(1)

I don't know of any library that generates these, but it wouldn't be hard to write one. You would just walk up the DOM, recording the tag/class of each parent element (and its index if it has siblings of the same type), until you reach either the root or an element with an explicit ID attribute.
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

ronin109: Aug 23, 2002

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.

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.

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

Hanpan: Dec 5, 2004

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?

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.

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

ronin109: Aug 23, 2002

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.

Unless I am missing something, the click event won't give me the exact road map to a particular element either, will it?

You're correct, the bubbled event will not provide the exact road map to the target element. I'm still unsure why the full path is needed. I'm guessing it is because you intend to use the HTML structure of the web page as a way to ID specific elements. That approach is flawed as the slightest HTML changes will completely screw up all of the click metrics.

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:

<a href="http://www.google.com" click:id="google-link">Google</a>

2. Add a click listener on the document that checks the event target's "click:id" attribute. If the attribute exists then record the click in your click counter for that specific HTML element.

# ? Mar 24, 2010 21:39

Hanpan: Dec 5, 2004

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

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

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.

Perhaps their system isn't as accurate as they are making out.

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

ChrizpG: May 22, 2008; Beep boop.

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

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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.

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.

Make an imagemap and tie js events to it.

# ? Mar 25, 2010 05:27

dizzywhip: Dec 23, 2005

dizzywhip fucked around with this message at 21:53 on Nov 9, 2020

# ? Mar 26, 2010 09:52

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

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

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 19:26

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

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 :aaa:

:
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

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »