Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Subjunctive
Sep 12, 2006

✨sparkle and shine✨

Oh My Science posted:

Just be aware that we're guessing at the maximum # of fields a user may need. Unless you go crazy and add 100 extra hidden fields (which is crazy) you may run into edge cases where someone wanted 6 email fields not 5. You would know what the realistic limits should be for that form, and make sure you notify people if they hit that limit (hide the + button or a flash message).

You don't need to precreate the fields, though, unless I'm missing something. Have the + button create a new input element and add it to the document as needed.

Adbot
ADBOT LOVES YOU

Oh My Science
Dec 29, 2008
haha jesus christ that's much better. I wonder where I picked up my suggestion.

Robot Arms
Sep 19, 2008

R!

Subjunctive posted:

You don't need to precreate the fields, though, unless I'm missing something. Have the + button create a new input element and add it to the document as needed.

That's exactly what I want to do. I'm not sure how, but I'm sure I can figure it out. (Marching through the Codecademy lesson on JS right now.)

Robot Arms fucked around with this message at 23:57 on Mar 20, 2014

vOv
Feb 8, 2014

I have a webapp that I want to design that's mostly just frontend stuff, with a bit of backend to store the relevant data (I wrote it in Flask). Considering that the JavaScript/templating logic is going to be fairly heavy, I'd like something that makes it as painless as possible; i.e., something with some kind of module system and some reasonable way of writing templates, as well as some workflow for writing CSS in a more reasonable language like SASS. What are my options?

One thing I guess I could do is use Yeoman or one of those other frameworks and keep that in a separate folder from the backend. It's really frustrating that none of the examples I ever see for stuff like this have an actual *backend*, only localStorage or whatever.

vOv fucked around with this message at 04:25 on Mar 21, 2014

Nebulon Gate
Feb 23, 2013
You'd do well to check out the Frontend thread. AngularJS or Ember sounds up your alley.

cheese eats mouse
Jul 6, 2007

A real Portlander now
Anyone heard of Firefox 27 just not recognizing content on :before/:after even though Mozilla says they support it. Is it a bug for 27?

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



Your selector just worked fine for me in 27 and then I was prompted to update to 28 where it also worked.

Vulture Culture
Jul 14, 2003

I was never enjoying it. I only eat it for the nutrients.

cheese eats mouse posted:

Anyone heard of Firefox 27 just not recognizing content on :before/:after even though Mozilla says they support it. Is it a bug for 27?


Did you remember to add a content attribute to your ::after pseudo-element?

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Don't use :after.

cheese eats mouse
Jul 6, 2007

A real Portlander now

Suspicious Dish posted:

Don't use :after.

Then what's your solution?

kedo
Nov 27, 2007

Suspicious Dish posted:

Don't use :after.

This is bad advice.

What does your actual CSS look like?

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe

kedo posted:

This is bad advice.

It's mostly the opinion of the WHATWG. ::before / ::after lacks accessibility, scriptability, and visibility in devtools.

See the discussion here: http://lists.w3.org/Archives/Public/www-style/2012Aug/0771.html

kedo
Nov 27, 2007

Suspicious Dish posted:

It's mostly the opinion of the WHATWG. ::before / ::after lacks accessibility, scriptability, and visibility in devtools.

See the discussion here: http://lists.w3.org/Archives/Public/www-style/2012Aug/0771.html

Eh. I understand the arguments, but like any tool, whether they're good or bad things really depends how they're used. Using ::after to insert content has always been unpalatable to me, but for pure design elements I don't really see the problem. Scriptability and visiblity in dev tools are issues that can be solved.

quote:

<arronei> we should stop this pseudo madness ::before it gets out of hand.

This guy.

Heskie
Aug 10, 2002

Suspicious Dish posted:

... visibility in devtools.

Recently Chrome DevTools started showing psuedo elements in the markup as if they were regular elements, its a nice feature.

As for ::before/::after, I guess if their use is for presentation only then they're perfectly fine? Thats exactly what CSS is for after all.

cheese eats mouse
Jul 6, 2007

A real Portlander now
It's really well supported back to IE8 (which is unfortunately how far back I have to go at my job) so it's the best solution for this Wordpress menu.

Changed to do it on an li and still not working.

kedo posted:

What does your actual CSS look like?

code:
li:after{
	content: url('images/arrow.png') no-repeat;
	position: absolute;
	right: 25px;
	top: 15px;
}
	li:hover{
		background: $navLightestGreen;
		}
		li:hover:after{
		content: url('images/arrowActive.png') no-repeat;
				
		}

Griffith86
Jun 19, 2008
If I remember correctly it should just be

content: url(images/arrow.png);

kedo
Nov 27, 2007

Quotes don't matter for image declarations, as far as I'm aware. You can either use them or not use them... might matter in old versions of IE but I honestly do not care enough to find out! I like using them because the syntax highlighting is better. :shrug:

This works: http://jsfiddle.net/wHBfz/1/ Looks like your no-repeat was jacking things up. You don't need to declare it anyways because it's not a background, and thus it's not going to automatically repeat. Also it's just not an accepted value, according to the MDN.

\/\/ Ahh, gotcha. Yeah, you and I were saying pretty much the same thing then!

kedo fucked around with this message at 20:47 on Mar 24, 2014

Griffith86
Jun 19, 2008
I was mainly commenting on the no-repeat part, but quotes do matter if you wrap it like “url(images/arrow.png)” which some people might do because the normal syntax is content: “whatever” - it will just spit out the text as a string. But you are correct, they don’t affect anything otherwise.

I tend to leave quotes out all together if I’m using imagery with pseudo-elements.

pipes!
Jul 10, 2001
Nap Ghost
WAI-ARIA got W3C Recommendation status a few days ago. It seems a little dense and intimidating at first, but I've found doing basic accessibility stuff with it to actually be a lot easier and clearer than past efforts. Stuff like the role attribute also provides a nice hook for some interesting styling efforts.

cheese eats mouse
Jul 6, 2007

A real Portlander now

kedo posted:

Quotes don't matter for image declarations, as far as I'm aware. You can either use them or not use them... might matter in old versions of IE but I honestly do not care enough to find out! I like using them because the syntax highlighting is better. :shrug:

This works: http://jsfiddle.net/wHBfz/1/ Looks like your no-repeat was jacking things up.

I was taught with quotes so it's in my muscle memory. It was the no-repeat (again habit) so thanks!

Lincoln
May 12, 2007

Ladies.
Are Word Press questions allowed here?

My WooCommerce product pages display three thumbnails below the main "featured" product image. It will rotate through many more images than that, assuming you upload them. I'd like each page to display SIX rotating thumbnails, but I don't know how. My experience level is "novice."

Is this an easy, universal fix, or does it all depend on the theme I'm using?

Vulture Culture
Jul 14, 2003

I was never enjoying it. I only eat it for the nutrients.

Lincoln posted:

Are Word Press questions allowed here?

My WooCommerce product pages display three thumbnails below the main "featured" product image. It will rotate through many more images than that, assuming you upload them. I'd like each page to display SIX rotating thumbnails, but I don't know how. My experience level is "novice."

Is this an easy, universal fix, or does it all depend on the theme I'm using?


WordPress questions aren't forbidden, but you're likely to get much better responses in the WordPress thread.

me your dad
Jul 25, 2006

HTML EMAIL :fuckoff:

Sorry the code is a bit messy. I had to break lines to prevent it from displaying all hosed up on the forums.

The code below has two div elements within two nested tables, and each div contains some code to render a button. Unfortunately only the first button displays in Outlook 2013, despite the fact that both <!--[if mso]> statements seem to be the same.

Any ideas? I'm about at wit's end on this.

code:
<table width="100%" cellpadding="0" border="0" cellspacing="0" style="border-collapse:collapse 
!important;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#FFFFFF;border-top-width:0;
border-bottom-width:0;">
<tr>
<td>
<table width="100%" cellpadding="0" border="0" cellspacing="0" 
style="border-collapse:collapse !important;mso-table-lspace:0pt;mso-table-rspace:0pt;
background-color:#FFFFFF;border-top-width:0;border-bottom-width:0;">
<tbody>
<tr>
<td><p>Tuesday, April 22, 2014<br />
10 a.m. &ndash; 11 a.m. ET
</p>

<div style="margin-bottom:20px; letter-spacing:1px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;" 
arcsize="10%" strokecolor="#193d6d" fillcolor="#059dd6"><w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">REGISTER</center></v:roundrect><![endif]-->
<a style="background-color:#059dd6;border:1px solid #193d6d;border-radius:4px;color:#ffffff;
display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:30px;
text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;" href="#">REGISTER</a></div>
</td>
</tr>
</table>
</td>
<td>

<table width="100%" cellpadding="0" border="0" cellspacing="0" style="border-collapse:collapse !important;
mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#FFFFFF;border-top-width:0;border-bottom-width:0;">
<td><p>Thursday, May 15, 2014<br />
7 p.m. &ndash; 8 p.m. ET</p>


<div style="margin-bottom:20px; letter-spacing:1px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" #" 
style="height:30px;v-text-anchor:middle;width:150px;" 
arcsize="10%" strokecolor="#193d6d" fillcolor="#059dd6"><w:anchorlock/>
<centerstyle="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">REGISTER</center></v:roundrect><![endif]-->
<a style="background-color:#059dd6;
border:1px solid #193d6d;border-radius:4px;color:#ffffff;
display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:30px;
text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;" href="#">REGISTER</a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

EAT THE EGGS RICOLA
May 29, 2008


Seems to work here?

http://jsfiddle.net/N3RJb/

me your dad
Jul 25, 2006


Yeah it works fine in a browser, just not in Outlook 2013 (and a couple other versions - deleted my Litmus results) when the email is delivered. It's really weird.

kedo
Nov 27, 2007


Ugh, good luck... I'd open up Outlook and test this out but honestly I'd prefer to lose a finger.

If it helps, when I ran this through a valildator there were a bunch of "end tag for element "[tag]" which is not open" errors, so you might be missing an opening/closing tag somewhere. That would likely gently caress things up.

pipes!
Jul 10, 2001
Nap Ghost
Dunno what your options are, but here's the spread of links I always send to people with HTML email problems:

http://htmlemailboilerplate.com/
http://www.emailology.org/
http://premailer.dialect.ca/
http://www.campaignmonitor.com/css/

I've also heard very, very good things about Ink. From your stuff it kindasorta seems like it might be a few separate issues all smashing together in some sort of brand new terrible way.

silentpenguins
May 9, 2013

Abysswalking
Is there any way to get Internet Explorer to recognize custom XML structures? Apparently a client has written something that uses Internet Explorer to get the feed and the fact that every other browser displays it fine doesn't matter.

Vulture Culture
Jul 14, 2003

I was never enjoying it. I only eat it for the nutrients.

silentpenguins posted:

Is there any way to get Internet Explorer to recognize custom XML structures? Apparently a client has written something that uses Internet Explorer to get the feed and the fact that every other browser displays it fine doesn't matter.
What does "recognize custom XML structures" mean, exactly? The question doesn't make much sense as written - what's the actual problem you're having? What versions of Internet Explorer are you talking about?

ManoliIsFat
Oct 4, 2002

Agreed, by custom XML structures do you mean...broken? Non-compliant?

silentpenguins
May 9, 2013

Abysswalking
Here is an example.

http://api.brafton.com/0b4da160-bf81-466c-9172-03754fb466cc/
or http://api.brafton.com/0b4da160-bf81-466c-9172-03754fb466cc/news/

Viewing it in any browser besides IE works fine. Viewing it in new or old versions of IE just says IE doesn't recognize the structure and won't display it.

I have no idea why it's relevant honestly. The client has Indian developers who apparently require the feed to be visible in IE to parse it. Judging from the screenshot they sent it's an older version of IE but IE 11 when I test says the exact same thing.

Sorry if this isn't clear, as I said this is the first I have seen of this issue.

Edit: Apparently it's just that first file. It shouldn't be an issue then.

silentpenguins fucked around with this message at 19:19 on Mar 25, 2014

ManoliIsFat
Oct 4, 2002

silentpenguins posted:

Edit: Apparently it's just that first file. It shouldn't be an issue then.
http://stackoverflow.com/questions/10341319/why-doesnt-ie-parse-the-xml-returned-from-a-wcf-data-service tells you how to turn off that feed-reading feature. You'll see if with that off once you restart the browser. It's trying to parse it as an ATOM or RSS feed it seems. I can't imagine how you'd work around it other than changing that setting.

stoops
Jun 11, 2001
I'm using this to display my webroot files in a "modern" way

http://larsjung.de/h5ai/. The Demo is here: http://larsjung.de/h5ai/sample/

I have it installed, and it works good, except, that my svg icons aren't showing up.

Currently, the site is on an intranet, but not sure if that is the problem. If i go directly to the svg icon, it renders fine, but it doesnt render on my index page.

Any ideas on what I could check or do? I appreciate any help.

pipebomb
May 12, 2001

Dear God, what is it like in your funny little brains?
It must be so boring.
Can't help you Stoops, but that site you linked has some of the best code I've ever seen. Amazing stuff.

obstipator
Nov 8, 2009

by FactsAreUseless
Next week at work I have to make our site not complete poo poo in IE7+. Enough of our site's visitors are olds, so it's pretty much required for us.

How do I go about this without crying? I've already installed the VMs from modern.ie for IE7 on vista, but I can't find any addons to debug javascript that actually work. I need to fix some JS bugs that only occur in IE7 but don't know how to debug them when a popup shows up and says line 527 of the homepage threw an error even though there are no inline scripts. I installed Web Development Helper, but that refuses to enable script debugging. Are there any addons that can creates useful logs of javascript errors? Thankfully the guy I inherited this project from included jquery, so it's not like I have to overhaul the entire thing.

Also is there anything newer than IE9.js to get basic css/html functionality working correctly? When I included that, it just made the page look worse (but that might have been because of that mystery js error that is undebuggable).

ephphatha
Dec 18, 2009




Do you get the error in IE10/11 when it's running in IE7 compatibility mode? It wont pinpoint the exact problem but can usually give you some clues as to where the fault is.

obstipator
Nov 8, 2009

by FactsAreUseless

Ephphatha posted:

Do you get the error in IE10/11 when it's running in IE7 compatibility mode? It wont pinpoint the exact problem but can usually give you some clues as to where the fault is.

Hell yeah! That found it. It was a pesky comma at the end of an object.
Thanks for the help.

cheese eats mouse
Jul 6, 2007

A real Portlander now

pipes! posted:


I've also heard very, very good things about Ink. From your stuff it kindasorta seems like it might be a few separate issues all smashing together in some sort of brand new terrible way.

I liked Ink, but you can be stuck trying to force their grid structure just like in Foundation

PleasantDilemma
Dec 5, 2006

The Last Hope for Peace

obstipator posted:

It was a pesky comma at the end of an object.

God I have to deal with these all the time I hate you IE7! I'm frustrated by my coworkers who don't test in IE7 even though it's required and these things filter down to QA who can't debug them and it just comes back up.

My team complains about IE7 a lot, and our project manager has tried a few times to get it dropped. We all know that a few of our client still use it so I actually want to support it because this product doesn't have many clients yet :ohdear:

Adbot
ADBOT LOVES YOU

Subjunctive
Sep 12, 2006

✨sparkle and shine✨

PlesantDilemma posted:

God I have to deal with these all the time I hate you IE7!

To be fair, trailing commas weren't part of the standard when IE7 was released. It is pretty awesome though that the error reporting is basically ":shrug:". Sometimes a linting tool helps for finding that stuff, if it's core language pickiness. It doesn't help with DOM/CSS though, which is of course where the real adventure lies.

Does anyone use Browserling or similar for automated testing on the browsers they can't stomach running?

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply