jQuery("#megathread").addClass("questions").show();

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > jQuery("#megathread").addClass("questions").show();

«‹›54 »

Howmuch: Apr 29, 2008

I want to change the css background-image along with a few other things with jquery so I have these lines in a function

code:

$("body").css("background-repeat", "no-repeat");
$("body").css("background-position", "50% 50%");
$("body").css("background-image:", "url(img/flash.jpg)");
$("body").mousemove(function(e){
      $("body").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
    });

All of these work except the background-image one.
The image file is there and I've tried inserting it in the chrome console and it shows up but running this line doesn't seem to do anything

code:

$("body").css("background-image:", "url(img/flash.jpg)");

# ? Jan 20, 2015 17:42

Adbot: ADBOT LOVES YOU

# ? May 5, 2024 09:00

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Howmuch posted:

I want to change the css background-image along with a few other things with jquery so I have these lines in a function
code:
$("body").css("background-repeat", "no-repeat");
$("body").css("background-position", "50% 50%");
$("body").css("background-image:", "url(img/flash.jpg)");
$("body").mousemove(function(e){
      $("body").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
    });
All of these work except the background-image one.
The image file is there and I've tried inserting it in the chrome console and it shows up but running this line doesn't seem to do anything
code:
$("body").css("background-image:", "url(img/flash.jpg)");

JavaScript code:

//you can pass in an object to set multiple properties in one call
$("body").css({"background-repeat": "no-repeat"}, 
              {"background-position": "50% 50%"}, 
              {"background-image": "url(img/flash.jpg)"}) //you left the : in background-image
    //chain your calls to avoid potentially expensive selector re-creation
    .mousemove(function(e){
      //this is always the current element in an event handler (when using jQuery)...
      $(this).css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
    });

//.. but it'd still be better to make the selector once and re-use it:
var $body = $('body');
/* other code, presumably */
$body.css({"whatever", "etc"})
.mousemove(function(e){
      //especially since this is going to run every time the mouse moves
      $body.css('background-position', (e.pageX - 250)+'px '+(e.pageY - 250)+'px');
    })

Munkeymon fucked around with this message at 18:01 on Jan 20, 2015

# ? Jan 20, 2015 17:53

Howmuch: Apr 29, 2008

Munkeymon posted:

JavaScript code:

//you can pass in an object to set multiple properties in one call
$("body").css({"background-repeat": "no-repeat"}, 
              {"background-position": "50% 50%"}, 
              {"background-image": "url(img/flash.jpg)"}) //you left the : in background-image
    //chain your calls to avoid potentially expensive selector re-creation
    .mousemove(function(e){
      //this is always the current element in an event handler (when using jQuery)...
      $(this).css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
    });

//.. but it'd still be better to make the selector once and re-use it:
var $body = $('body');
/* other code, presumably */
$body.css({"whatever", "etc"})
.mousemove(function(e){
      //especially since this is going to run every time the mouse moves
      $body.css('background-position', (e.pageX - 250)+'px '+(e.pageY - 250)+'px');
    })

Ah, cool. Did not know you could do that. Thanks!

# ? Jan 20, 2015 18:17

Hughmoris: Apr 21, 2007; Let's go to the abyss!

Well, I figured out the checkbox problem. If I could figure out this last issue, I think I'd be set.

I have a group of radio buttons. When I check a radio button, I want to highlight that one and remove the highlight from any others in that group. Right now, my code will highlight a radio button. However, when I select a new radio button it will highlight that in addition to leaving the old one highlighted.

Here is a very simple example on JSfiddle: http://jsfiddle.net/p9qxkb20/2/

Any ideas how to go about this?

Hughmoris fucked around with this message at 06:47 on Jan 21, 2015

# ? Jan 21, 2015 06:42

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Hughmoris posted:

Here is a very simple example on JSfiddle: http://jsfiddle.net/p9qxkb20/2/

There's no event for radio button de-checking.

http://jsfiddle.net/kyax0vrp/1/

:colbert:

# ? Jan 21, 2015 11:30

Hughmoris: Apr 21, 2007; Let's go to the abyss!

v1nce posted:

There's no event for radio button de-checking.

http://jsfiddle.net/kyax0vrp/1/

You're a genius.

# ? Jan 21, 2015 18:39

Cervix-A-Lot: Sep 29, 2006; Cheeeeesy

Fixed my issue. Not sure how or if I can even delete a post.

Cervix-A-Lot fucked around with this message at 20:03 on Jan 28, 2015

# ? Jan 28, 2015 19:02

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Was it a straight-up dumb mistake or was it something other people might benefit from? If it's the latter, don't delete your post. If it's the former, edit it to say "Edit: I am an idiot".

Etiquette.

# ? Jan 28, 2015 23:26

Cervix-A-Lot: Sep 29, 2006; Cheeeeesy

v1nce posted:

Was it a straight-up dumb mistake or was it something other people might benefit from? If it's the latter, don't delete your post. If it's the former, edit it to say "Edit: I am an idiot".

Etiquette.

More of a, " this is a stupid way to try to implement something ".

# ? Jan 29, 2015 06:30

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

Easy Mac posted:

More of a, " this is a stupid way to try to implement something ".

So put it back, and let others learn from it. If I was king for a day, I'd make "oops, figured it out" edits hat remove the original content in this forum bans. This is probably why I'm not a mod or king or whatever though. Well that and being a jerk.

# ? Jan 29, 2015 13:58

Video Nasty: Jun 17, 2003

v1nce posted:

There's no event for radio button de-checking.

http://jsfiddle.net/kyax0vrp/1/

Liar : http://jsfiddle.net/kyax0vrp/9/ :crossarms:

# ? Jan 29, 2015 15:55

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Jake Blues posted:

Liar : http://jsfiddle.net/kyax0vrp/9/

When I said "there's no event for radio button de-checking" I literally meant there are no events fired when you de-check a radio button.
As you've pointed out, there's also no change event fired on the inputs when a form reset is called.

So we have to add our own, to make this specific case work :jerkbag:

http://jsfiddle.net/kyax0vrp/10/

Not that this was part of the original question, or that I'd recommend putting form reset buttons in unless you absolutely require them.

# ? Feb 2, 2015 23:35

Video Nasty: Jun 17, 2003

You are absolutely right on that account. No event is triggered when you "reset" a form, however, there is a means to "de-check" a radio button.
:goonsay:

# ? Feb 3, 2015 23:32

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

That was never at question though.

# ? Feb 3, 2015 23:39

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Jake Blues posted:

No event is triggered when you "reset" a form, however, there is a means to "de-check" a radio button.

Because the unchecking of radio buttons doesn't fire an event, there's like a hundred ways to make it gently caress up, not just a form reset.

Like just outright modifying the property: http://jsfiddle.net/kyax0vrp/11/

It's poo poo like this which is why people use <select> boxes over radio buttons for just about everything, seeing as how they basically do the exact same thing but one isn't all kinds of hosed up.

# ? Feb 4, 2015 00:35

Hughmoris: Apr 21, 2007; Let's go to the abyss!

I'm having a problem at work and I'm curious if jQuery has the ability to help with it.

We have a program that displays forms to users using HTML. There is a variety of checkboxes, radiobuttons, textfields in the form.

What I'd like to do is when the user clicks the submit button, there would be something that fires and collects a snapshot of the HTML, and saves it to a .HTML file. This would be for audit purposes, so if a user claimed they submitted a form with certain boxes checked, we could pull up their "snapshot" and see a visual of what they had selected when they submitted the form.

Any ideas on how I could approach this?

# ? Feb 18, 2015 16:53

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

Hughmoris posted:

I'm having a problem at work and I'm curious if jQuery has the ability to help with it.

We have a program that displays forms to users using HTML. There is a variety of checkboxes, radiobuttons, textfields in the form.

What I'd like to do is when the user clicks the submit button, there would be something that fires and collects a snapshot of the HTML, and saves it to a .HTML file. This would be for audit purposes, so if a user claimed they submitted a form with certain boxes checked, we could pull up their "snapshot" and see a visual of what they had selected when they submitted the form.

Any ideas on how I could approach this?

We'll user selections aren't part of the HTML, so that wouldn't do much. You can just capture the entire post string on the receiving end (or before it's sent if you don't control both ends), and then show what values were selected if the question arises.

# ? Feb 18, 2015 18:13

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

Hughmoris posted:

I'm having a problem at work and I'm curious if jQuery has the ability to help with it.

We have a program that displays forms to users using HTML. There is a variety of checkboxes, radiobuttons, textfields in the form.

What I'd like to do is when the user clicks the submit button, there would be something that fires and collects a snapshot of the HTML, and saves it to a .HTML file. This would be for audit purposes, so if a user claimed they submitted a form with certain boxes checked, we could pull up their "snapshot" and see a visual of what they had selected when they submitted the form.

Any ideas on how I could approach this?

Is this a desktop application that happens to use HTML to render certain things, or a web application? If the latter, log every POST request from the form and you are done. If the former, then I guess you could capture the current screen as an image somehow, but that would depend entirely on the type of app and it's environment and so on. Either way, jQuery has nothing to do with the solution.

# ? Feb 18, 2015 18:46

Hughmoris: Apr 21, 2007; Let's go to the abyss!

Lumpy posted:

Is this a desktop application that happens to use HTML to render certain things, or a web application? If the latter, log every POST request from the form and you are done. If the former, then I guess you could capture the current screen as an image somehow, but that would depend entirely on the type of app and it's environment and so on. Either way, jQuery has nothing to do with the solution.

It's the former, a desktop application that uses HTML to render forms. JQuery can be used in it though. I'll ask around about capturing the current screen. All of this isn't in my job role but it's a big problem and I'm just poking around for solutions. Thanks for the advice.

Hughmoris fucked around with this message at 20:31 on Feb 18, 2015

# ? Feb 18, 2015 20:03

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

Hughmoris posted:

It's the former, a desktop application that uses HTML to render forms. JQuery can be used in it though. I'll ask around about capturing the current screen. All of this isn't in my job role but it's a big problem and I'm just poking around for solutions. Thanks for the advice.

Your best option (in my opinion) is to use jquery to serialize all of the fields and then log that serialized information to a database.

I do not believe you can take a "screenshot" with jquery (or javascript I'm general). So you need to do something to take the values that are selected.

# ? Feb 18, 2015 20:39

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

subx posted:

Your best option (in my opinion) is to use jquery to serialize all of the fields and then log that serialized information to a database.

I do not believe you can take a "screenshot" with jquery (or javascript I'm general). So you need to do something to take the values that are selected.

I'm 99% sure I read a blog post on how the Chrome team wrote a script that traverses the DOM and renders it to a canvas in order to make the screenshot you see when you submit a bug report but I can't find it now. It might be out there but it's totally pointless when you can just log the requests the form generates instead.

# ? Feb 18, 2015 20:58

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

Munkeymon posted:

I'm 99% sure I read a blog post on how the Chrome team wrote a script that traverses the DOM and renders it to a canvas in order to make the screenshot you see when you submit a bug report but I can't find it now. It might be out there but it's totally pointless when you can just log the requests the form generates instead.

I can see something like that being possible, had not thought of that. Seems like a lot of work though. I'm sticking with what I said (and you mention) of just logging the serialized values/request/whatever you want to call it.

# ? Feb 18, 2015 21:15

YO MAMA HEAD: Sep 11, 2007

http://html2canvas.hertzen.com/

This came up pretty quickly in a Google search. Seems to be what you're looking for assuming it doesn't misunderstand anything weird about your DOM?

# ? Feb 18, 2015 22:57

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Munkeymon posted:

I'm 99% sure I read a blog post on how the Chrome team wrote a script that traverses the DOM and renders it to a canvas in order to make the screenshot you see when you submit a bug report but I can't find it now. It might be out there but it's totally pointless when you can just log the requests the form generates instead.

There was this presentation: http://www.elliottsprehn.com/preso/fluentconf/#/

# ? Feb 19, 2015 04:21

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

Suspicious Dish posted:

There was this presentation: http://www.elliottsprehn.com/preso/fluentconf/#/

Looking through some of that documentation... A 14MB JSON file? Performance would be a serious issue, especially in a business environment where a lot of the PC's would be using old comuters with outdated browsers (if it would work at all in those cases, which I have doubts about).

This seems like a massive overkill for what he was looking for. If you can give us any more details about what you are wanting to achieve (we basically got that you want a way to prove that what they sent is what you saved), maybe we would be about to give a bit more in depth answer.

Is there some particular reason they believe you aren't properly saving their data? Maybe that's an issue that could be addressed rather than duplicating data.

# ? Feb 19, 2015 06:03

WORLDS BEST BABY: Aug 26, 2006

Is this the right place to post our whimsical jQuery plugins? If so, I've just released talking-text, which takes elements and then types out their text a la old RPGs like Pok�mon, Earthbound etc.

What makes it better than just a typewriter effect is that it also uses the Web Audio API to produce tones for each character typed, giving it the full retro effect. Lots of other options too for text pacing, custom callbacks, that kind of stuff.

(please feel free to use it in as many very serious client projects as possible)

# ? Feb 19, 2015 10:50

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I have no idea what I'd use that for but I love it a lot.

It goes a bit mental if you tab out during a tone in Chrome.

# ? Feb 19, 2015 11:16

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

WORLDS BEST BABY posted:

Is this the right place to post our whimsical jQuery plugins? If so, I've just released talking-text, which takes elements and then types out their text a la old RPGs like Pok�mon, Earthbound etc.

What makes it better than just a typewriter effect is that it also uses the Web Audio API to produce tones for each character typed, giving it the full retro effect. Lots of other options too for text pacing, custom callbacks, that kind of stuff.

(please feel free to use it in as many very serious client projects as possible)

This is completely awesome but it froze my Firefox 35 tab up real good - computer stopped responding, ctrl-alt-delete didn't work, etc. I was a couple of seconds from a physical-button reboot when the tab managed to close itself. Have you played with it much across browsers?

# ? Feb 19, 2015 13:41

WORLDS BEST BABY: Aug 26, 2006

Newf posted:

This is completely awesome but it froze my Firefox 35 tab up real good - computer stopped responding, ctrl-alt-delete didn't work, etc. I was a couple of seconds from a physical-button reboot when the tab managed to close itself. Have you played with it much across browsers?

I've tried it in all the major browsers including Firefox 35, and haven't come across anything like that. It's not doing anything particularly heavy, so I'm surprised that it could lock your browser up like that! I'd appreciate it if you were able to recreate it and dig up anything on it. If not, I'm glad you like it in any case!

# ? Feb 19, 2015 14:21

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I was about to post that I couldn't reproduce it, but after a few refreshes the same problem came up again. I'm running simplynoise.com in another tab - might they be interfering with one another?

The frog's voice is supposed to be declining in pitch as it goes on, right?

I've also had the bird speaking with the (last, lowest pitched) frog's voice on a refresh.

# ? Feb 19, 2015 14:54

WORLDS BEST BABY: Aug 26, 2006

Newf posted:

The frog's voice is supposed to be declining in pitch as it goes on, right?

I've also had the bird speaking with the (last, lowest pitched) frog's voice on a refresh.

I've created a monster

# ? Feb 19, 2015 15:27

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

WORLDS BEST BABY posted:

Is this the right place to post our whimsical jQuery plugins? If so, I've just released talking-text, which takes elements and then types out their text a la old RPGs like Pok�mon, Earthbound etc.

What makes it better than just a typewriter effect is that it also uses the Web Audio API to produce tones for each character typed, giving it the full retro effect. Lots of other options too for text pacing, custom callbacks, that kind of stuff.

(please feel free to use it in as many very serious client projects as possible)

Instead of using a timeout+callback to disconnect oscillators, you could try calling stop(lifetime/1000) immediately after calling start. Oh and probably then you'd want to hook onended to disconnect the node.

E: nevermind - spec says stop takes a double so that probably won't work

Munkeymon fucked around with this message at 21:03 on Feb 19, 2015

# ? Feb 19, 2015 20:54

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Newf posted:

I'm running simplynoise.com in another tab - might they be interfering with one another?

[shameless plug] http://dtanders.net/noise/ [/]

# ? Feb 20, 2015 21:33

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Munkeymon posted:

[shameless plug] http://dtanders.net/noise/ [/]

This looks (sounds?) great so far. Thanks.

# ? Feb 23, 2015 13:48

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Newf posted:

This looks (sounds?) great so far. Thanks.

I know it doesn't look good but thanks.

# ? Feb 23, 2015 18:39

darthbob88: Oct 13, 2011; YOSPOS

This may be better suited for the regular JS thread, but what's the best/easiest way to detect the addition of a new element, specifically a modal window? The method I'm using right now is

code:

 var detectElement = setInterval(function () {
        var detector = $("div#butts");
        if (detector && detector.length) {
//        do things in response to the existence of div#butts
  clearInterval(detectElement);
        }
    }, 100);

The problem is, if I include that last clearInterval call, then we won't detect div#butts if it is removed and then added again, which is undesirable, while if I drop the clearInterval, then this code will just detect div#butts again and do all those things again, every 100ms, which is expensive and has unpleasant side effects. I was considering doing some sort of event-handling, but I couldn't find any standard event for if an element is suddenly added to the DOM. I suppose I could try $("div#butts").load(function() { //do things }), but I'm not sure you can actually attach an event to an element that doesn't exist yet, nor am I confident that this event would fire each time div#butts is added. I shall find out, and return with findings.

ETA: Supposedly you can bind on dynamically created elements using jQuery.on(), but $("body").on("load", "#butts", {"foo":"bar"}, function() {alert("Things Happening")}); isn't working so far. Saddening.

darthbob88 fucked around with this message at 01:20 on Mar 17, 2015

# ? Mar 17, 2015 00:54

hedgecore: May 2, 2004

Are you triggering the modal creation? If so, ideally you'd re-architect a bit to keep state out of the DOM (in this case, "is modal showing?"). One example you alluded to would be triggering a custom event that the code you provided could listen to.

Otherwise, you could try a mutation observer. You can attach to DOM elements and listen for changes.

Example with your proposed <div id="butts"></div>: http://jsfiddle.net/ysoacdzt/

More info: http://addyosmani.com/blog/mutation-observers/
Browser support (you'll need to polyfill for IE<11): http://caniuse.com/#feat=mutationobserver

EDIT: Thought this was the JS thread. Here's a jQuery-ified fork of the above example: http://jsfiddle.net/767bz8Lp/2/

hedgecore fucked around with this message at 02:46 on Mar 18, 2015

# ? Mar 18, 2015 02:27

darthbob88: Oct 13, 2011; YOSPOS

hedgecore posted:

Are you triggering the modal creation? If so, ideally you'd re-architect a bit to keep state out of the DOM (in this case, "is modal showing?"). One example you alluded to would be triggering a custom event that the code you provided could listen to.

No, this is third-party code that listens passively for the modal window, so rearchitecting isn't an option.

quote:

Otherwise, you could try a mutation observer. You can attach to DOM elements and listen for changes.

Example with your proposed <div id="butts"></div>: http://jsfiddle.net/ysoacdzt/

More info: http://addyosmani.com/blog/mutation-observers/
Browser support (you'll need to polyfill for IE<11): http://caniuse.com/#feat=mutationobserver

EDIT: Thought this was the JS thread. Here's a jQuery-ified fork of the above example: http://jsfiddle.net/767bz8Lp/2/

Apart from the lack of IE<11 support and the loading expense of the polyfill, this looks good. Will have to get second opinion from boss on whether the additional loading expense of polyfilling is worth the improved functionality, but thanks for the answer. Why is it that IE never supports any of the cool stuff?

# ? Mar 20, 2015 02:51

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

darthbob88 posted:

No, this is third-party code that listens passively for the modal window, so rearchitecting isn't an option.
Apart from the lack of IE<11 support and the loading expense of the polyfill, this looks good. Will have to get second opinion from boss on whether the additional loading expense of polyfilling is worth the improved functionality, but thanks for the answer. Why is it that IE never supports any of the cool stuff?

Just add a modalExists variable and instead of doing clearinterval you set it to true. Also solves the recreate issue since you can have an else that sets it to false when it is removed.

# ? Mar 20, 2015 03:06

Adbot: ADBOT LOVES YOU

# ? May 5, 2024 09:00

darthbob88: Oct 13, 2011; YOSPOS

subx posted:

Just add a modalExists variable and instead of doing clearinterval you set it to true. Also solves the recreate issue since you can have an else that sets it to false when it is removed.

That would work, and next time the problem comes up I'll have to try it.

New question: Sometimes a client will load jQuery multiple times on one page, so depending on when certain scripts load, one of the plugins I need might attach to one version while another plugin gets another version. As a result, when my code attempts to call $("#thingy").plugin(), I get an error because $.fn.plugin is undefined, and everything breaks. Is there some way to choose which version of jQuery I use for a given plugin, or should I just continue yelling and screaming at clients to only load jQuery once?

# ? Apr 9, 2015 18:54

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > jQuery("#megathread").addClass("questions").show();

«‹›54 »