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
Oldstench
Jun 29, 2007

Let's talk about where you're going.
I'm pretty much a rank beginner with jQuery, so can someone explain why this is happening?

Let's say I have mutiple <li>'s each with an <input> element and I need to get a attribute from those <input> elements.

I can get the array of <input> elements via:
code:
$("#not-a-real-id li").find('.not-a-real-class input:text')
The <input> field has a custom attribute called 'codetype' that I need to get the value of.
code:
<input type="text" class="not-a-real-class" id="someid272859" name="notreal.somename272859" value="39.95" codetype="FAKE_CODETYPE">
In my tests, I can't get it this way; it returns undefined:
code:
$("#not-a-real-id li").find('.not-a-real-class input:text')[0].attr('codetype')
But I can get it like this:
code:
$($("#not-a-real-id li").find('.not-a-real-class input:text')[0]).attr('codetype')
I really don't understand why, and I'd like to think there's a much better way to do this. Any help will be greatly appreciated.

Adbot
ADBOT LOVES YOU

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb
The problem is that $('selector')[0] returns a native DOM element, rather than a jQuery object. The .attr() method is only valid for jQuery objects.

What do you need to do with the value of the codetype attr?

code:
$("#not-a-real-id li").find('.not-a-real-class input:text').each(function() {
    var input = $(this);
    console.log(input.attr('codetype'));
});

Oldstench
Jun 29, 2007

Let's talk about where you're going.

fletcher posted:

The problem is that $('selector')[0] returns a native DOM element, rather than a jQuery object. The .attr() method is only valid for jQuery objects.

What do you need to do with the value of the codetype attr?

code:
$("#not-a-real-id li").find('.not-a-real-class input:text').each(function() {
    var input = $(this);
    console.log(input.attr('codetype'));
});

Thank you so much. That makes total sense.

I need the attribute to determine whether or not to show other elements on the page.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Oldstench posted:

I'm pretty much a rank beginner with jQuery, so can someone explain why this is happening?

:words:

I really don't understand why, and I'd like to think there's a much better way to do this. Any help will be greatly appreciated.

What Oldstench said.

If you really did want to just get the *first* codetype, this one-liner would do it:


$('#not-a-real-id input[type="text"].not-a-real-class:eq(0)').attr('codetype');


FYI, it probably doesn't matter too much, but input[type="text"] is faster than input:text in most browsers.

Lumpy fucked around with this message at 22:36 on Dec 17, 2014

Escolopendra
Nov 4, 2013
Hi everybody. I see this thread is about web development, but i donīt see a thread about web platforms in Serious Hardware / Software Crap. If any of you has any experience with the elgg platform http://elgg.org/, I would really appreciate some advice on how to deal with white pages, because I have to deal with an urgent problem.

v1nce
Sep 19, 2004

Plant your brassicas in may and cover them in mulch.
Their website is pleasant but not terribly informative on first visit. Took me a while to figure out it was PHP based.

You say "white pages", I assume you mean the browser gives you a blank page and nothing else when you visit certain pages? That's an error. Turn on debugging in Elgg and for PHP. You should get something more informative after that.

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

Can anyone think of a way to accomplish exactly what I've done here, only without using the <br /> tags?

kedo
Nov 27, 2007

caiman posted:

Can anyone think of a way to accomplish exactly what I've done here, only without using the <br /> tags?

http://codepen.io/anon/pen/EayeEB

\/ \/ no prob

kedo fucked around with this message at 23:26 on Dec 19, 2014

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!


Perfect. I knew it'd be something simple as gently caress that I probably should have been able to figure out myself. Thanks.

putin is a cunt
Apr 5, 2007

BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION
I have a strange problem that I can't really post the code for because it's behind some authentication. I'm using a Bootstrap 3 navbar and although an example thing that I set up works well, the one that is in use in my project is causing problems on iOS, so I must have done something to break it. Basically when the navbar collapses into a dropdown on mobile, it works really well on Android - you press the toggle, it opens, you press the item you want, it loads. On iOS there's this weird behaviour where you press the toggle, it opens, you press an item, it highlights, then you have to press again to get it to actually load.

Has anyone encountered anything like this? Any tips on some kind of common mistake that could cause this issue?

(Specifically we're talking iPhone 5 here, haven't tested on other iPhones yet)

putin is a cunt fucked around with this message at 00:52 on Dec 23, 2014

shodanjr_gr
Nov 20, 2007
I got a bit of a web-app noob developer question. Is there some tool that, given a schema description, will spit out server code boilerplate (in Node or w.e.) for quering that schema over a RESTful API?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

shodanjr_gr posted:

I got a bit of a web-app noob developer question. Is there some tool that, given a schema description, will spit out server code boilerplate (in Node or w.e.) for quering that schema over a RESTful API?

You could use Django and Django Rest Framework. I'm sure there are similar things for Node, Rails, etc. but that is the one I know.

ambushsabre
Sep 1, 2009

It's...it's not shutting down!

shodanjr_gr posted:

I got a bit of a web-app noob developer question. Is there some tool that, given a schema description, will spit out server code boilerplate (in Node or w.e.) for quering that schema over a RESTful API?

Sails pretty much does this.

Chris!
Dec 2, 2004

E

The Wizard of Poz posted:

I have a strange problem that I can't really post the code for because it's behind some authentication. I'm using a Bootstrap 3 navbar and although an example thing that I set up works well, the one that is in use in my project is causing problems on iOS, so I must have done something to break it. Basically when the navbar collapses into a dropdown on mobile, it works really well on Android - you press the toggle, it opens, you press the item you want, it loads. On iOS there's this weird behaviour where you press the toggle, it opens, you press an item, it highlights, then you have to press again to get it to actually load.

Has anyone encountered anything like this? Any tips on some kind of common mistake that could cause this issue?

(Specifically we're talking iPhone 5 here, haven't tested on other iPhones yet)

Sounds like the first click is activating a hover state, try using a media query to remove hovers at small sizes and seeing if that solves the problem.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
IOS triggers a mouse move on first tap rather than a click if it sees any hover rules on the target that causes more elements to display.

This was necessary behaviour to pave over the CSS Hover Menus which were much more common when the iPhone was introduced.

There's a lot I'm glossing over but anyway, check your CSS as iOS will change its behaviour based on it, as weird as it sounds.

revmoo
May 25, 2006

#basta
I recently had the same issue and it turned out to be a conflict caused by an old library (I think jquery ui but can't recall).

shodanjr_gr
Nov 20, 2007

ambushsabre posted:

Sails pretty much does this.

I came across this on a google search earlier. It looks like exactly what I need but I'm still trying to find some decent docs/tutorials on it as the official ones are far from fleshed out.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

shodanjr_gr posted:

I came across this on a google search earlier. It looks like exactly what I need but I'm still trying to find some decent docs/tutorials on it as the official ones are far from fleshed out.

If you want something that just works and is well documented I think you'd be far better served by a more established REST framework like the one for Django or Ruby on Rails. I've built a thing in Sails (it was on a request that it be done in Node, I didn't enjoy it), and simply put, there are times where the docs contradict practice, the ORM is half baked, and you're stuck using Node/Express for any custom code you write.

The more established frameworks will you give you support for proper relational structures, all the authentication options you'll need, and will be more amenable to future changes than the bull of mud that can arise from Sails. Sails will get you going real fast (which looks great in screen cast demos) but that is just hiding the future pain you'll probably encounter with it.

shodanjr_gr
Nov 20, 2007

Maluco Marinero posted:

If you want something that just works and is well documented I think you'd be far better served by a more established REST framework like the one for Django or Ruby on Rails. I've built a thing in Sails (it was on a request that it be done in Node, I didn't enjoy it), and simply put, there are times where the docs contradict practice, the ORM is half baked, and you're stuck using Node/Express for any custom code you write.

The more established frameworks will you give you support for proper relational structures, all the authentication options you'll need, and will be more amenable to future changes than the bull of mud that can arise from Sails. Sails will get you going real fast (which looks great in screen cast demos) but that is just hiding the future pain you'll probably encounter with it.

To be honest, i am not building a backend for a massive, scalable webapp. This is a small component of an academic project that I figured I'd implement in the browser in order to get a grip on what the cool kids work with these days. As long as Sails.js is not a complete horror, I would be fine working with it, especially since I wouldn't have to context-switch between Javascript and another language (and I've already played around with Node.js/Express so that's an added benefit).

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
No worries, yeah go hog wild with Sails then, it does do what it says on the tin. As I said its just not the sort of tech I'd go into production with, but you'll be able to hack some stuff together no probs.

foundtomorrow
Feb 10, 2007

Lumpy posted:

I wrote a bash script that asks me a bunch of questions (Are you using Javascript in this project? Are you using React? etc.) and then poops out a gulpfile for me and runs all the npm commands I'll need to get going, creates my directory structure, then opens index.html, site.scss, and app.js in MacVim for me.
This sounds slick. Any chance of posting the bash script?

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India
Sounds pretty much like Yeoman to me.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

foundtomorrow posted:

This sounds slick. Any chance of posting the bash script?

Sure. It's a total hack job, so it isn't something you can use "off the shelf" but it will at least show how you can make your own tools really quickly that do what you need instead of using a monolithic one. Not that there is anything wrong with those, obviously. Needing a repeatable thing for multiple developers is something that a roll your own bash script in 5 mins isn't going to be appropriate for.

I am hanging out on the couch with the family now, but I'll try to remember to post it when I get near my computer at some point today or tomorrow.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
I made a PostCSS task for turning rgba backgrounds into base64 encoded PNGs for Internet Explorer 8. Not really stress tested or optimised right now, but maybe some poor bugger out there will find it useful. (Maybe I'll package it up if enough people would want it)

https://gist.github.com/MalucoMarinero/6f5902cc070a1e5b5548

In coffee script for no other reason than because, will probably just write it in JavaScript if I packaged it.

Skiant
Mar 10, 2013

Gmaz posted:

Sounds pretty much like Yeoman to me.

With reason, that's pretty much exactly what Yeoman genrators are supposed to be.

5pitf1re
Oct 4, 2014

space ninja in space
This has probably been already posted but it deserves visibility none the less. You should check out the Firefox Developer Edition. I'm a huge Chrome and Chrome Dev Tools fan but that new Firefox thing is pretty nifty.

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

Is anyone using relative units (rems or ems) for media query breakpoints? I've been putting off attempting it for ages in fear that things will get super complex once I change the baseline font-size WITH my media queries, sort of creating a circular paradox. Turns out my fears were unwarranted because, as I'm sure most of you already knew, (r)ems in media queries are based on the browser's initial font value, NOT the values I set in my CSS. So they're consistent regardless of how much I've hosed with things.

Just wondering what others' thoughts are on this.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

caiman posted:

Is anyone using relative units (rems or ems) for media query breakpoints? I've been putting off attempting it for ages in fear that things will get super complex once I change the baseline font-size WITH my media queries, sort of creating a circular paradox. Turns out my fears were unwarranted because, as I'm sure most of you already knew, (r)ems in media queries are based on the browser's initial font value, NOT the values I set in my CSS. So they're consistent regardless of how much I've hosed with things.

Just wondering what others' thoughts are on this.
Foundation uses em, though Bootstrap uses px.
I guess if it's good enough for Foundation, it's good to go. I'm trying to stop using px for anything outside of like border-radius, instead using (r)em and %.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
We use ems, however we make use of conversion functions so we can write them pixels just for ease of understanding, using a function in less/sass. So, em(600) becomes 600 / base pixel size, same with rem(600) which is what we use for everything other than mqs. Considering the designs often come in with pixel measurements, or pixel sizes are easiest to eyeball/match up, it keeps us from getting bogged down in math.

Couple that with pixrem postcss and your golden for ie8 too.

Chris!
Dec 2, 2004

E
I use rems, but have found that using rems or ems in media query breakpoints doesn't work in older versions of safari, still in use in Windows and unupdated ipads; so I write the media queries themselves in px.

Using rems is definitely the way to go for responsive design!

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

Maluco Marinero posted:

We use ems, however we make use of conversion functions so we can write them pixels just for ease of understanding, using a function in less/sass. So, em(600) becomes 600 / base pixel size, same with rem(600) which is what we use for everything other than mqs. Considering the designs often come in with pixel measurements, or pixel sizes are easiest to eyeball/match up, it keeps us from getting bogged down in math.

I've been doing the old 62.5% trick: set font-size on html to 62.5%, then all my pixel-to-rem conversion is as simple as moving the decimal one place to the left.

yoyomama
Dec 28, 2008
Since I'm just learning and using Foundation, I use (r)ems and find it easier than using px. Maybe if I had used px more when I started learning css I'd feel differently, but personally I find it more intuitive to use em and think relatively than to set a specific size.

Chris!
Dec 2, 2004

E

yoyomama posted:

Since I'm just learning and using Foundation, I use (r)ems and find it easier than using px. Maybe if I had used px more when I started learning css I'd feel differently, but personally I find it more intuitive to use em and think relatively than to set a specific size.

Also, if you're using Foundation with Sass, you can use rem-calc() to automatically convert pixels to rems, but after a while it becomes natural to use rems directly.

stoops
Jun 11, 2001
I'm using twitter bootstrap

3 columns.

The middle column will have my content. The left and right columns will have an image.

The thing is, I want the images to always be at the bottom of the left and right column divs.

What is the best way to go about it? Should I make each column a background image and set the position to bottom? Or should i keep the image separate and somehow tell it to go to the bottom?

The Dave
Sep 9, 2003

What's your browser compatibility situation? Could you use flexbox and whistle away?

stoops
Jun 11, 2001

The Dave posted:

What's your browser compatibility situation? Could you use flexbox and whistle away?


I just need it to look good on modern browsers and mobile devices.
I had never heard of flexbox. I'll take a look at that. I'm assuming it's compatible with bootstrap?

Currently this is my code

code:

<style>
#leftColumn {
	position: relative;
}
#leftColumn img {
	position: absolute;
	bottom: 0;
}
</style>

<div class="container-fluid">	
        <div class="row">
            <div id="leftColumn" class="col-md-2">
                <img src="image1.png" >
            </div>
            <div class="col-md-8">
                my content
            </div>
            <div class="col-md-2">
               <img src="image2.png" >
            </div>
        </div>
</div>
But this puts the image1 way at the top! Nonetheless, I'll read into flexbox, thanks.

revmoo
May 25, 2006

#basta
What's everybody's opinion on sticky menus from a UX perspective?

Kobayashi
Aug 13, 2004

by Nyc_Tattoo

revmoo posted:

What's everybody's opinion on sticky menus from a UX perspective?

UX-wise, tread carefully, especially on mobile. For a worst case scenario, picture an iPhone 4 user viewing your content inside a third-party app with a lovely web viewer that has both a persistent navigation bar and a persistent toolbar at the bottom. Add your fixed menu and suddenly a third of the screen is taken up by immutable content. With a fixed ad or fixed social buttons, it gets even worse.

E: As an alternative, consider the "quick return" pattern (example).

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

stoops posted:

I just need it to look good on modern browsers and mobile devices.
I had never heard of flexbox. I'll take a look at that. I'm assuming it's compatible with bootstrap?

Currently this is my code

code:

<style>
#leftColumn {
	position: relative;
}
#leftColumn img {
	position: absolute;
	bottom: 0;
}
</style>

<div class="container-fluid">	
        <div class="row">
            <div id="leftColumn" class="col-md-2">
                <img src="image1.png" >
            </div>
            <div class="col-md-8">
                my content
            </div>
            <div class="col-md-2">
               <img src="image2.png" >
            </div>
        </div>
</div>
But this puts the image1 way at the top! Nonetheless, I'll read into flexbox, thanks.

From your code it looks like it should be working. However, it's impossible to know how your other styling may be affecting things. How is the height of #leftColumn getting set?

Adbot
ADBOT LOVES YOU

shodanjr_gr
Nov 20, 2007
SailsJS question. I've been playing around with it for a few days and I'm really liking it. At the moment I'm working on my schema and bootstrapping it with some basic information. I've set the model configuration migrate parameter to 'drop' while I'm doing this so that it clears up the database every time I 'sails lift'. However, I am noticing that this does not zero out the Primary Key counters of the various tables in the DB. For example, I'll have a Goon inserted into Goons, he gets an id=0. Then, i'll re-lift and re-add a Goon. I would expect him to get an id of 0 again but instead he gets an ID of 1. Do it again and the next time its an ID = 2, etc. However, hitting up server_ip/goons only returns a single Goon (which is as expected). This is with the sails_disk adapter. Any ideas as to why this is happening?

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