|
caiman posted:I'm trying to come up with a good IE8 fallback for inline SVG. For whatever reason IE8 doesn't simply ignore the <svg> tags, it throws a poo poo fit when it sees one and stops rendering the page correctly. So far I see two viable options. I thankfully don't have to support IE8, but use SVG4Everybody for inline SVGs - https://github.com/jonathantneal/svg4everybody - it's very helpful for getting inline SVGs to wok cross browser, and provides PNG fallback for IE8.
|
#
?
Dec 10, 2014 14:11
|
|
|
|
| # ? May 8, 2024 13:33 |
|
|
Heskie posted:I'm looking at SVG's at the moment and came across this fallback technique: Yeah, when using SVG as the src in an <img> or as the background-image in CSS, fallbacks seem simpler. Unfortunately I need the ability to style individual parts of the SVG, so it's gotta be inline for me. I've decided on the Modernizer/JS route. I implemented it last night and it's working great.
|
|
#
?
Dec 10, 2014 16:02
|
|
|
Chris! posted:I thankfully don't have to support IE8, but use SVG4Everybody for inline SVGs - https://github.com/jonathantneal/svg4everybody - it's very helpful for getting inline SVGs to wok cross browser, and provides PNG fallback for IE8. Ah, I've heard of this but wasn't entirely sure how it works. Looks like it has to be placed in the <head>. Any idea if it can be called via Modernizr.load()?
|
|
#
?
Dec 10, 2014 16:05
|
|
|
caiman posted:Ah, I've heard of this but wasn't entirely sure how it works. Looks like it has to be placed in the <head>. Any idea if it can be called via Modernizr.load()? I think it could be (it's just a js file so I don't see why not) - but it's pretty useful for general IE fallbacking of inline SVGs. There's a very useful article about it here: http://css-tricks.com/gotchas-on-getting-svg-into-production/ I was using inline SVGs, but they weren't being properly cached, using SVG for Everybody helped make that work cross browser.
|
|
#
?
Dec 10, 2014 19:23
|
|
|
Can someone tell me if this is possible, before I spend a lot of brain cells trying to make it happen? I have two selects with identical options inside an optgroup. If you choose an answer in the first select, I want that answer to be a) moved into a different optgroup in the second select, and b) set to disabled. Like if you were buying airline tickets, your origin and destination can't be the same city. Is there a name for what this is called? Here's the basic, basic html I'm working with: http://jsfiddle.net/Jackpot/awwfbzzx/
|
|
#
?
Dec 10, 2014 21:34
|
|
|
jackpot posted:Can someone tell me if this is possible, before I spend a lot of brain cells trying to make it happen? http://jsfiddle.net/szzvsgo5/1/ Could probably be written a lot nicer, but there's a proof of concept. kedo fucked around with this message at 22:01 on Dec 10, 2014 |
|
#
?
Dec 10, 2014 21:59
|
|
|
jackpot posted:Can someone tell me if this is possible, before I spend a lot of brain cells trying to make it happen? Do this: http://jsfiddle.net/awwfbzzx/3/ e:f;b by a mile =)
|
|
#
?
Dec 10, 2014 22:05
|
|
|
I have so much love for this forum.  Lumpy, yours is great because it uses .attr('disabled','disabled') to disable whatever's appended to that optgroup. One thing I notice it's doing is it never stops; if in that first dropdown I choose atlanta, new york, and chicago, all three are in the deselected optgroup in the second select. Do I want to use something like refresh() to rebuild that second select every time I choose an option in the first select? It's hard to see how I don't end up negating all my picks in the second select if I do it that way.
|
|
#
?
Dec 10, 2014 23:29
|
|
|
jackpot posted:One thing I notice it's doing is it never stops; if in that first dropdown I choose atlanta, new york, and chicago, all three are in the deselected optgroup in the second select. Do I want to use something like refresh() to rebuild that second select every time I choose an option in the first select? It's hard to see how I don't end up negating all my picks in the second select if I do it that way. I feel like whenever I see these the second select is always created after the first selection is made, and I would assume this is why. That's a pretty easy solution. Otherwise on change you could look at the disabled options in the second select, check if they have the same value as the selected option, and if not remove them before adding the new one in. e: If your original markup is in HTML and isn't being generated by JS I'd probably go with the second option.
|
|
#
?
Dec 10, 2014 23:50
|
|
|
I really don't understand why Grunt and Gulp exist. It seems like it is a constant struggle to get those tools to do anything I want them to. On the other hand, after playing around with NPM's "scripts" for a few hours, I was able to get asset linting/compilation, live reloading with a static server and watch directories, and version syncing between package.json and bower.json working. It seems so much easier to work with than other tools.
|
|
#
?
Dec 11, 2014 00:35
|
|
|
jackpot posted:I have so much love for this forum. Move the stuff out of the disabled optgroup before you move a new one in. So yes, a 'rebuild' method or "removeDisabled' would be nice. If you keep an object or array with the original order around, you can do an inefficient but probably plenty fast enough for less than 1000 things rebuild. I whipped up a poorly coded Proof of Concept that appears to keep selection: http://jsfiddle.net/awwfbzzx/4/ I left removing the selection of the TO item if you pick it in the FROM to you. Lumpy fucked around with this message at 01:46 on Dec 11, 2014 |
|
#
?
Dec 11, 2014 01:43
|
|
|
Lumpy posted:I left removing the selection of the TO item if you pick it in the FROM to you. And actually, if I'm understanding you correctly, to keep people from screwing this up I'm hiding the TO select until you pick a FROM value. That prevents people from answering the TO field first, then answering the FROM, then having to go back and answer TO again (without knowing they have to). From a user's standpoint, this thing would be confusing as hell if I had the logic working both ways.
|
|
#
?
Dec 11, 2014 07:08
|
|
|
jackpot posted:Beautiful, thank you. What I meant by that was: I pick New York in the FROM. I pick Chicago in the TO. I then realize I am an idiot (which if the user is me, is true) and that I did it backwards. I then pick Chicago in the FROM. My selected Chicago in the TO is still selected, but now it is disabled. This could be confusing to users. As to your point, I would not hide the TO. At most, disable it until FROM is picked. If it is not there, you may make users thing it is missing / broken. User testing will tell you the least worse solution.
|
|
#
?
Dec 11, 2014 14:01
|
|
|
Ranting: Who got the bright idea to make the web like it was back in 2000 with regards to popups? Granted they're lightboxes/overlays now, but every other website I enter these days puts a huge lightbox in my face, asking me to sign up, follow or subscribe to their poo poo. It's absolutely infuriating. Add the EU cookie warning (which I have to click through on 5-6 different devices every month or so on every page) and we're in hell. MotherFFFFFFFFF 
|
|
#
?
Dec 11, 2014 17:06
|
|
|
Yeah definitely a bit of history repeating there. I often just click away and go do something else. Curious to see a study on the bounce rates caused by those things.
|
|
#
?
Dec 11, 2014 17:10
|
|
|
Pilsner posted:Ranting: Who got the bright idea to make the web like it was back in 2000 with regards to popups? Granted they're lightboxes/overlays now, but every other website I enter these days puts a huge lightbox in my face, asking me to sign up, follow or subscribe to their poo poo. It's absolutely infuriating. Add the EU cookie warning (which I have to click through on 5-6 different devices every month or so on every page) and we're in hell. MotherFFFFFFFFF Come on now... you know you really want to download their mobile app.
|
|
#
?
Dec 11, 2014 17:13
|
|
|
Pilsner posted:Ranting: Who got the bright idea to make the web like it was back in 2000 with regards to popups? Granted they're lightboxes/overlays now, but every other website I enter these days puts a huge lightbox in my face, asking me to sign up, follow or subscribe to their poo poo. It's absolutely infuriating. Add the EU cookie warning (which I have to click through on 5-6 different devices every month or so on every page) and we're in hell. MotherFFFFFFFFF I have a rule of thumb that if a lightbox popup interrupts what I was reading on the page, I immediately exit the page and add the site to my mental blacklist. Whatever I was reading wasn't worth spending one extra second one a lovely site. Yes, these things are a sign of lovely UX, plain and simple.
|
|
#
?
Dec 11, 2014 17:30
|
|
|
How do you feel about lightbox/modal windows that you clicked something to bring up? Personally I'd much rather add the content inline, than via modal.Lumpy posted:Come on now... you know you really want to download their mobile app.
|
|
#
?
Dec 11, 2014 17:54
|
|
|
The Merkinman posted:How do you feel about lightbox/modal windows that you clicked something to bring up? Personally I'd much rather add the content inline, than via modal. If it's a response to something I did, then it's all good.
|
|
#
?
Dec 11, 2014 17:59
|
|
|
I have a big project getting deployed in the next couple weeks. What's the best way to force everyone's browser to redownload the JS/CSS? Is there even a consistent way?
|
|
#
?
Dec 11, 2014 18:23
|
|
|
revmoo posted:I have a big project getting deployed in the next couple weeks. What's the best way to force everyone's browser to redownload the JS/CSS? Is there even a consistent way? src="myScipt.js?lol=sadfweqr"
|
|
#
?
Dec 11, 2014 18:28
|
|
|
revmoo posted:I have a big project getting deployed in the next couple weeks. What's the best way to force everyone's browser to redownload the JS/CSS? Is there even a consistent way? I think if you append a string to the end of the file name, the browser will be forced to get the new version. Like style.css?v=2 e:beaten
|
|
#
?
Dec 11, 2014 18:29
|
|
|
Pilsner posted:Ranting: Who got the bright idea to make the web like it was back in 2000 with regards to popups? Hint: Their major begins with "Market" and ends with "ing".
|
|
#
?
Dec 11, 2014 18:32
|
|
|
Lumpy posted:src="myScipt.js?lol=sadfweqr" Ahh perfect, I knew there had to be some trick to do it. Thanks!
|
|
#
?
Dec 11, 2014 19:02
|
|
|
caiman posted:If it's a response to something I did, then it's all good.
|
|
#
?
Dec 11, 2014 21:32
|
|
|
Popup ads are so much dreck. The fact that infuriates me is they slow JavaScript down so much, that the only time I click on the is I go to interact or scroll and they popup as I'm doing that because the site loads like molasses. Web ain't broken, we break it with out design and dev.
|
|
#
?
Dec 11, 2014 21:40
|
|
|
If you make a website with one of those, I'm going to stalk you in real life and wait for the opportune time to push you down the stairs.
|
|
#
?
Dec 11, 2014 22:21
|
|
|
Can anybody tell me if there is a generally accepted best practice for securing cookies with session IDs? I've been reading OWASP and other stuff, but it seems like every method recommended is still insecure. Alternatively, is there some new fangled clustering scheme for back-end servers that would allow them to share session data so that session IDs through cookies are no longer needed?
|
|
#
?
Dec 16, 2014 03:55
|
|
|
I have some SVG icons I want to animate when their container div is hovered over. I want to animate specific elements inside the SVG. There are only 3 SVGs, they're pretty simple and only appear on 1 page, so it's not the biggest problem in the world to have them inline rather than linked externally, if it helped. I was planning on just animating them with jquery, but jquery seems to be able to animate the individual elements for some things (fading the opacity to 0 for example) but doesn't seemingly let me animate the position at all, which is what I need to do. I know there are libraries that handle this, like snap.js, I'd rather avoid an external library but if there's no option I'll use one. Any ideas or recommendations?
|
|
#
?
Dec 16, 2014 18:46
|
|
|
CSS transforms work just fine, with either transition or animate depending upon what effect you want.
|
|
#
?
Dec 16, 2014 19:58
|
|
|
This guide on css tricks seems good: http://css-tricks.com/guide-svg-animations-smil/
|
|
#
?
Dec 16, 2014 20:51
|
|
|
Somebody recently asked about SVG sprites. Here's a good article on them.
|
|
#
?
Dec 16, 2014 22:50
|
|
|
I have a rendering problem. On this page, and similar product pages, div.PD14T and div.PD24T have different ideas of what width:100% means. Specifically, .PD14T limits its width to the outer container, while .PD24T will overflow given the chance. They have (roughly) the same content, the only difference is that .PD14T is an immediate child of form#vCSS_mainform, while .PD24T is in a table within #vCSS_mainform. Is there something about tables that they'll fit their contents rather than their wrappers? Is there an easy way to adjust .PD24T to fix this? ETA: Have a JSFiddle. I've stripped out everything irrelevant to the problem and added a blue border to make the problem slightly more obvious. darthbob88 fucked around with this message at 05:54 on Dec 17, 2014 |
|
#
?
Dec 17, 2014 03:58
|
|
|
The only way I know to make a table respect a maximum width is with "table-layout: fixed". This prevents the table from resizing to fit its contents, though, so check that it doesn't break something else. The ideal long-term solution is not using tables for layout. EDIT: With a fixed layout you can remove the "max-width: 1150px" from .PD24T and let it fill the whole container, like so: 
Depressing Box fucked around with this message at 04:49 on Dec 17, 2014 |
|
#
?
Dec 17, 2014 04:31
|
|
|
Dammit, took too long to edit in that JSFiddle. Yeah, I'd like to move away from table design, and some of our newer clients have gone to responsive and semantic div-based things, but some people stick with tables. To be fair, this client is enterprise, so of course they'll be reluctant to change something that's worked fine for so long. Looks like "table-layout: fixed" will fix things, and yeah, will do some more testing to make sure it doesn't break anything.
|
|
#
?
Dec 17, 2014 06:39
|
|
|
Thermopyle posted:Rant follows. Use Webpack, make a common bundle and whatever other bundles you need, then load the extra bundles depending on the route or whatever, here's a handy guide by one of the facebook/instagram guys: https://github.com/petehunt/webpack-howto
|
|
#
?
Dec 17, 2014 15:04
|
|
|
Does anyone here have experience with jquery-ui? I'm having some problems with (I think) the CSS formatting of a nested elements. My main problem is that I'm trying to nest a tab div within an accordion div, and there's way too much padding space below the tab div. I've tried editing a few padding values in the style-sheet, but I can't seem to find what's causing the problem. I can post code, if need be.
|
|
#
?
Dec 17, 2014 16:54
|
|
|
sector_corrector posted:Does anyone here have experience with jquery-ui? I'm having some problems with (I think) the CSS formatting of a nested elements. My main problem is that I'm trying to nest a tab div within an accordion div, and there's way too much padding space below the tab div. I've tried editing a few padding values in the style-sheet, but I can't seem to find what's causing the problem. I can post code, if need be. You should definitely post the code.
|
|
#
?
Dec 17, 2014 17:44
|
|
|
Brave GNU World posted:Use Webpack, make a common bundle and whatever other bundles you need, then load the extra bundles depending on the route or whatever, here's a handy guide by one of the facebook/instagram guys: https://github.com/petehunt/webpack-howto I just gave in and used browserify. Thanks for that guide though, I might switch to webpack. I considered it before I started using browserify but browserify is simpler and seems to have better docs (because its simpler) and I was already irritated with the whole thing...
|
|
#
?
Dec 17, 2014 18:16
|
|
|
|
| # ? May 8, 2024 13:33 |
|
|
Jimlit posted:You should definitely post the code. Ok, here are two pastebins... Here's the page, http://pastebin.com/FWNp61Q0 Here's the remote CSS for Jquery-UI, although I'm pretty sure that I haven't changed anything in there, http://pastebin.com/SsKgWXjr
|
|
#
?
Dec 17, 2014 19:59
|
|