|
Boz0r posted:I'm trying to make checkboxes that can change the border of a table and it works perfectly in Chrome, Firefox and newer IEs, but in IE 6 and 7 it's giving me beef. Out of curiousity, why are you futzing with element.attr instead of just element.bind or element.click?
|
# ? Oct 20, 2011 00:09 |
|
|
# ? May 16, 2024 18:42 |
|
Because I know poo poo all about Javascript . I'll try those two function out and see if they make a difference.
|
# ? Oct 20, 2011 11:23 |
|
Boz0r posted:
You're also using both onclick and onClick. Is "onClick" a thing that exists? Edit: Use your browser's developer tools to inspect your elements. And use a function as your onclick handlers, not a string Wheany fucked around with this message at 12:29 on Oct 20, 2011 |
# ? Oct 20, 2011 12:27 |
|
Boz0r posted:Because I know poo poo all about Javascript . I'll try those two function out and see if they make a difference. Valid reason :P But yeah, jquery has .bind('action', function(){}) on pretty much any element, and it does it's own behind-the-scenes backwards compatibility poo poo, I believe. You may want to try using .bind('click', function(){ do poo poo here }) instead and see if you have any more luck with it.
|
# ? Oct 20, 2011 18:45 |
|
I'm looking for a solution to a page where I have multiple tasks and categories listed. Each task though has a set of operations attached to it, like complete, delete, edit, move etc. I'm trying to find a good way to show these options maybe via a tooltip after clicking on a settings icon. I've been looking at Jquery QTip to do it but, has anyone seen an example of something similar elsewhere on the web so I can see how it looks? Every tooltip example I see is usually text, im looking for more of a list of icons/buttons that users can interact with.
|
# ? Oct 20, 2011 20:27 |
|
That bind function works but apparently that's not the only problem. I'm trying to make a red border on a row or table whenever a checkbox is checked. The very annoying thing is, though, that one of them works and the other doesn't.code:
code:
code:
EDIT: The alerts are just there because I'm trying to debug. Also, the correct alerts are triggered, so I'm pretty sure it's the test.css() lines that screw it up, but I don't know what else to use. Boz0r fucked around with this message at 10:25 on Oct 24, 2011 |
# ? Oct 24, 2011 10:16 |
|
Does the first function (updateBorder0?) work in all browsers? Try code:
and then add some css: code:
Wheany fucked around with this message at 11:17 on Oct 24, 2011 |
# ? Oct 24, 2011 11:14 |
|
code:
EDIT: I think I've gotten some of it down now, actually. I've gotten it to style the rows by adding this CSS: code:
Boz0r fucked around with this message at 12:08 on Oct 24, 2011 |
# ? Oct 24, 2011 12:01 |
|
Boz0r posted:
As I recall (I don't have Windows handy to check), styling TRs are notoriously tetchy. You may want to consider trying code:
Also, you know, just adding a border to a TR in the stylesheet declaration and see if that shows up. If it doesn't, you'll have to find another workaround (perhaps apply a background color to each table cell instead of a border to the row?)
|
# ? Oct 24, 2011 12:08 |
|
Just when you think you've tried everything, I finally get it to work:code:
|
# ? Oct 24, 2011 12:49 |
|
http://jsfiddle.net/JwcWj/7/code:
|
# ? Nov 1, 2011 05:35 |
|
huhwhat posted:http://jsfiddle.net/JwcWj/7/ Because an array, in Javascript, appears to be an Object, which means that instead of storing the value of the array, variables store the reference to it instead. If you're not familiar with references, think of it like going to a party, and someone hands you a name tag that says "Hello, my name is data", which you put on. And then someone else walks up to you and hands you a nametag that says "Hello, my name is TEMP", which you also put on. Now if someone says "Data, paint your hand blue", nobody is going to say "Holy poo poo TEMP, why the gently caress do you have a blue hand?" Or, you know, they might, but they probably just don't... get the reference. Ursine Catastrophe fucked around with this message at 06:06 on Nov 1, 2011 |
# ? Nov 1, 2011 06:02 |
|
Thanks for the help! The simplest workaround Google suggested was the slice method code:
|
# ? Nov 1, 2011 06:52 |
|
huhwhat posted:Thanks for the help! Yep. If you ever need to do something like this in another language or with another object type in Javascript, you'll want to look up how to do a deep copy (duplicating every part of the object somewhere else) vs a shallow copy (just copying the reference).
|
# ? Nov 1, 2011 11:07 |
|
OriginalPseudonym posted:Or, you know, they might, but they probably just don't... Very very nice.
|
# ? Nov 1, 2011 16:21 |
|
OriginalPseudonym posted:Yep. If you ever need to do something like this in another language or with another object type in Javascript, you'll want to look up how to do a deep copy (duplicating every part of the object somewhere else) vs a shallow copy (just copying the reference). I don't want to nitpick, but your definitions of "deep copy" and "shallow copy" are a bit different compared to what I've typically heard used with regard to JavaScript. Just copying the reference would actually be neither a deep nor a shallow copy. Those terms imply that the object contents were actually copied, instead of the reference. See John Resig's answer here: http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object
|
# ? Nov 2, 2011 00:57 |
|
Stoph posted:I don't want to nitpick, but your definitions of "deep copy" and "shallow copy" are a bit different compared to what I've typically heard used with regard to JavaScript. Just copying the reference would actually be neither a deep nor a shallow copy. Those terms imply that the object contents were actually copied, instead of the reference. I stand corrected. Thanks!
|
# ? Nov 2, 2011 01:53 |
|
Remind me - is there any way to play a sound or flash a window titlebar/entry in the task bar with Javascript alone (i.e. no Flash or external program)?
|
# ? Nov 4, 2011 17:52 |
|
Golbez posted:Remind me - is there any way to play a sound or flash a window titlebar/entry in the task bar with Javascript alone (i.e. no Flash or external program)? Yes, there is. No, really, there is, as I did it as part of a call center operator workstation app I wrote ~5 years ago to play a sound when a new call came in. It worked in IE 6 even! Sadly, as it was 5 years ago, I can't remember the exact code, but it was easy and 100% javascript. \/\/\/ I think you can call play() on embeds once you have a reference to them that's kind of what I remember doing. Lumpy fucked around with this message at 04:19 on Nov 5, 2011 |
# ? Nov 5, 2011 01:53 |
|
Golbez posted:Remind me - is there any way to play a sound or flash a window titlebar/entry in the task bar with Javascript alone (i.e. no Flash or external program)? Title is the document.title property. Sound is a little more finicky; the only way I've found when I last looked into it was to dynamically embed into a page. Assuming you have jQuery: code:
That said, this feels so silly and hackish that I can't help but feel there has to be a more sane way of doing it, but this way will work.
|
# ? Nov 5, 2011 04:03 |
|
You could use HTML5 audio and fall back to Flash on IE8 and below: http://html5doctor.com/native-audio-in-the-browser/ Edit: I think method is what this WebGL demo uses: http://lights.elliegoulding.com Stoph fucked around with this message at 22:58 on Nov 5, 2011 |
# ? Nov 5, 2011 22:56 |
|
[quote="OriginalPseudonym"] Title is the document.title property. [quote] Can I make the title bar or the entry in the task bar flash?
|
# ? Nov 6, 2011 02:04 |
|
Golbez posted:[quote="OriginalPseudonym"] Depends on your definition of "flash". You can change the text of it, so you could write a setTimeout function to flip it between "ATTENTION GETTING TEXT" and an empty string, or some other text, but since the background color of the tab is usually tied to the browser's internal color scheme, there's no way to change the color of the text, or it's background color. Just keep in mind that title text in tabbed browsers tends to be truncated.
|
# ? Nov 6, 2011 03:30 |
|
OriginalPseudonym posted:Depends on your definition of "flash". You can change the text of it, so you could write a setTimeout function to flip it between "ATTENTION GETTING TEXT" and an empty string, or some other text, but since the background color of the tab is usually tied to the browser's internal color scheme, there's no way to change the color of the text, or it's background color. I mean, how the task bar entry for a program will flash in certain situations (like a new message, etc)
|
# ? Nov 6, 2011 07:50 |
|
You can't do that, but if you can limit yourself to WebKit browsers you could use the notifications API: http://stackoverflow.com/questions/2271156/chrome-desktop-notification-example
|
# ? Nov 6, 2011 08:44 |
|
I am trying to load a basic ESRI ArcGIS map in a GWT project. The javascript ArcGIS API is written in Dojo, and seems to require you to use dojo.addOnLoad() to make sure the code that initializes the map object doesn't run until after the ArcGIS API is fully initialized. The problem is that when I try to use addOnLoad() in a GWT project, it never calls the function I passed it. Thus the map never gets initialized and never shows up. I tried working around this by calling the map initialization method from GWT code in a timer, which works...around 50% of the time. The rest of the time I get errors about missing dojo methods and the map never shows up. So I'm pretty sure I'm creating a race condition between my code and the dojo initialization code when I do that. Is there any other way to work around this? I can't be the only person who's ever had to use dojo and GWT together, but google's got nothing.
|
# ? Nov 8, 2011 04:17 |
|
My head is pounding from this problem so I have just about given up thinking on my own. The effect I want is this: There is a dropdown menu on the page with a preselected value (basically just a place holder), when the user makes a selection another drop down menu appears up (I also want to repaeat this process from the menu that pops up to another hidden menu but I'm sure once I find the solution it will work for both menus) Here's my code so far: <script type="text/javascript"> var selectmenu=document.getElementById("country") var chosenoption=this.options[this.selectedIndex] if (chosenoption.value!="nothing"){ function setStyle(x) { document.getElementById(x).style.visibility="visible"; } } </script> </head> <table id="limitertble" border="0"> <tr> <th scope="col"><div id="country"><form id="countrys" name="countrys" onChange="setStyle(states.id)" onSubmit="return false;" method="post" action=""> <span id="spryselect1"> <select name="country" size="1" id="country"> <option value="nothing">Country</option> <option value="usa">United States of America</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> </span> </form></div></th> <th scope="col"><div id="state"><form id="states" style="visibility:hidden" name="states" method="post" onSubmit="return false;" action=""> <span id="spryselect2"> <label for="State"></label> <select name="State" id="State" size="1" onchange="setStyle(towns.id)"> <option value="StateTerritoryProvince">StateTerritoryProvince</option> <option value="ny">New York</option> <option value="az">Arizona</option> <option value="fl">Florida</option> </select> </span> </form></div></th> <th scope="col"><div id="town"> <form id="towns" style="visibility:hidden" name="towns" method="post" onSubmit="return false;" action=""> <span id="spryselect4"> <label for="Town"></label> <select name="Town" id="Town"> <option>Town</option> <option>Ronkonkoma</option> <option>Holbrook</option> </select> </span> </form> </div></th> </tr> </table> Why does this not work
|
# ? Nov 11, 2011 18:46 |
|
Mindisgone posted:My head is pounding from this problem so I have just about given up thinking on my own. The effect I want is this: There is a dropdown menu on the page with a preselected value (basically just a place holder), when the user makes a selection another drop down menu appears up (I also want to repaeat this process from the menu that pops up to another hidden menu but I'm sure once I find the solution it will work for both menus) Just skimming over it, if I'm not mistaken (the code tag is your friend, incidentally), your function definition is inside an if block? I don't think Javascript works like that, and even if it does, that seems to indicate that your function is only defined if value != "nothing", which I assume it does in fact equal on page load. But yeah move that function out of the if block and see what it does then.
|
# ? Nov 11, 2011 19:36 |
|
Although that is an excellent suggestion which I followed, the second dropdown menu remains hidden after a choice is made in the first menu so that did not work, but I am going to keep the call to the function outside the if statement so my code now says: <script type="text/javascript"> var selectmenu=document.getElementById("country") var chosenoption=this.options[this.selectedIndex] function setStyle(x){ if (chosenoption.value!="nothing"){ document.getElementById(x).style.visibility="visible"; } } </script> edit: I'm starting to wonder if the "nothing" value is actually not submitted when the page is loaded, but I have seen websites that create this effect without the use of a submit button to send the form the selected value. Mindisgone fucked around with this message at 20:40 on Nov 11, 2011 |
# ? Nov 11, 2011 20:37 |
|
ok, so after some critical thinking () I came up with this: <script type="text/javascript"> function setStyle(x){ if (document.getElementById("country").selectedIndex != 0){ document.getElementById(x).style.visibility="visible"; } else { document.getElementById(x).style.visibility="hidden"; } } </script> now this works except if you reselect "country" (essentially my placeholder option) it doesn't re-hide the second menu...any suggestions
|
# ? Nov 11, 2011 22:04 |
|
Mindisgone posted:ok, so after some critical thinking () I came up with this: Because you have a <div id="country">. The div's selectedIndex is undefined, and undefined is always != 0 (which is why the second <select> appears when you select a value).
|
# ? Nov 11, 2011 22:46 |
|
Mindisgone posted:code:
|
# ? Nov 11, 2011 23:07 |
|
Wheany posted:Because you have a <div id="country">. The div's selectedIndex is undefined, and undefined is always != 0 (which is why the second <select> appears when you select a value). THANK YOU VERY MUCH! I never would've guessed the div tag was messing me up like that, I just canned it altogether so now I'm a happy camper.
|
# ? Nov 11, 2011 23:36 |
|
Mindisgone posted:THANK YOU VERY MUCH! I never would've guessed the div tag was messing me up like that, I just canned it altogether so now I'm a happy camper. Well, I didn't even notice you had a div tag with the same id, I just ran you code and used a breakpoint inside the setStyle function and a watch to see that document.getElementById("country") was returning a HTMLDivElement.
|
# ? Nov 12, 2011 06:51 |
|
OriginalPseudonym posted:Just skimming over it, if I'm not mistaken (the code tag is your friend, incidentally), your function definition is inside an if block? I don't think Javascript works like that, and even if it does, that seems to indicate that your function is only defined if value != "nothing", which I assume it does in fact equal on page load. JavaScript uses function scope, which means the scope of variables is the currently executing function, unlike lexical scoping where code:
All functions are defined in the current scope, even if they come after the current position where the code is executing. That is why it's best to put functions at the top, so there is no confusion. Variables on the other hand, are declared in the current scope but are not defined until the execution actually reaches where they are defined. That's why it's best to put variables at the top (even higher than those functions I just talked about), so there is no confusion. So basically, if you put a function inside an if statement, it is always pointless. code:
Stoph fucked around with this message at 23:38 on Nov 12, 2011 |
# ? Nov 12, 2011 23:33 |
|
I thought it was worth mentioning that I cleaned the function up a bit and here it is: <script type="text/javascript"> function setStyle(x, y, z){ if (document.getElementById(x).selectedIndex != 0){ document.getElementById(y).style.visibility="visible"; } else { document.getElementById(y).style.visibility="hidden"; document.getElementById(z).style.visibility="hidden"; } } </script> Whenever a select statement calls it it's like this: onChange="setStyle(country.id,states.id,towns.id)" and the more drop downs you need to nest just pass another variable through the call and add another hidden line in the else statement
|
# ? Nov 13, 2011 00:45 |
|
Stoph posted:The above is valid JavaScript, unfortunately. Only if by "JavaScript" you mean the Mozilla-proprietary dialect. It's not valid standard ECMAScript. To more specific, a FunctionDeclaration is not a kind of Statement, and only statements are permitted inside a Block. It is, however, a kind of SourceElement (SourceElement ::= FunctionDeclaration | Statement) so it's permitted at top-level code or function top-level. Further, what you have there cannot be a statement expression for a function expression since statement expressions cannot start with function (12.4). Also, well, to quote ECMA262-5.1: quote:NOTE
|
# ? Nov 13, 2011 00:45 |
|
Ok I have seen this many times referring to making level 2 interdependent lists: <form name="classic"> <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px"> <option selected>Select A City</option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> </select> <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)"> </select> </form> <script type="text/javascript"> var countrieslist=document.classic.countries var citieslist=document.classic.cities var cities=new Array() cities[0]="" cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"] cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"] cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"] function updatecities(selectedcitygroup){ citieslist.options.length=0 if (selectedcitygroup>0){ for (i=0; i<cities[selectedcitygroup].length; i++) citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1]) } } </script> I understand the following code but I have a couple of questions. One is if I have to make a 3rd level list (say for example I want my level 2 to be states and the 3rd level to be cities) do I just make a 2nd level array in the above code and nest another if & for statement in the above for statement? Maybe a couple of separate functions that can be called would be better? My second question is I have text documents made with states and other documents with cities, does JS have a function for reading from a document like PHP? Or can JS directly reference PHP scripts?
|
# ? Nov 13, 2011 01:25 |
|
Stoph posted:Variables on the other hand, are declared in the current scope but are not defined until the execution actually reaches where they are defined. That's why it's best to put variables at the top (even higher than those functions I just talked about), so there is no confusion. This is (maybe) incorrect. Javascript hoists variable declarations to to the top of their scope. They are not given a value until their first assignment, but they "exist" as soon as the scope is touched: So if you do this: code:
code:
I could be missing the semantics of your use of "declared" and "defined"... I consider them "defined" but pointing the value undefined which, now that I think of it, is really splitting hairs, but regardless, it's still good to show folks what happens under the hood. Lumpy fucked around with this message at 01:38 on Nov 13, 2011 |
# ? Nov 13, 2011 01:36 |
|
|
# ? May 16, 2024 18:42 |
|
Mindisgone posted:Ok I have seen this many times referring to making level 2 interdependent lists: USE CODE TAGS FOR THE LOVE OF PETE To answer your second question, client-side javascript cannot touch the file system. You can call PHP functions in the same domain with AJAX, or if the server is set up for it, in outside domains with JSONP.
|
# ? Nov 13, 2011 01:39 |