The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

Pollyanna: Mar 5, 2005; Milk's on them.

I'm trying to replicate Knockout's click-to-edit function, but I can't get it to work. Either it doesn't work at all, or clicking doesn't do anything. I built my observable object separately, so maybe that's the problem. Can someone look at this and tell me what I'm doing wrong?

http://jsfiddle.net/DQSLx/21/

# ? Jan 26, 2014 17:43

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 12:28

ShaunO: Jan 29, 2006

Pollyanna posted:

I'm trying to replicate Knockout's click-to-edit function, but I can't get it to work. Either it doesn't work at all, or clicking doesn't do anything. I built my observable object separately, so maybe that's the problem. Can someone look at this and tell me what I'm doing wrong?

http://jsfiddle.net/DQSLx/21/

I think this might be because the 'visible' and 'hasFocus' binding properties are JS boolean expressions so require you to include the parenthesis on observables to ensure they are evaluated for their correct value, rather than evaluated as the function they really are (you're binding to the result of an expression, rather than the value explicitly supplied). Knockout dependency tracking will also take effect. All the other non-boolean expression data bindings are implied to be an observable I think.

http://jsfiddle.net/DQSLx/46/

ShaunO fucked around with this message at 22:06 on Jan 26, 2014

# ? Jan 26, 2014 22:00

Pollyanna: Mar 5, 2005; Milk's on them.

ShaunO posted:

I think this might be because the 'visible' and 'hasFocus' binding properties are JS boolean expressions so require you to include the parenthesis on observables to ensure they are evaluated for their correct value, rather than evaluated as the function they really are (you're binding to the result of an expression, rather than the value explicitly supplied). Knockout dependency tracking will also take effect. All the other non-boolean expression data bindings are implied to be an observable I think.

http://jsfiddle.net/DQSLx/46/

That unfortunately doesn't do what I want it to. I'm trying to have each observable in an observable object do the click-to-edit thing; that sets everything to editable and never changes it back.

A solution I was given was to create a class for each observable that would keep track of whether it was editable or not:

http://jsfiddle.net/eguneys/j4NB4/5/

I have another issue now, with trying to figure out how to deal with storing JSON data on a server in Flask. Trying a thing, you see. I'm trying to post the data:

JavaScript code:

    self.saveData = function() {
        $.post('{{ url_for("echo") }}', ko.toJSON(self));
    }

using Flask:

Python code:

@app.route('/echo', methods=['GET', 'POST'])
def echo():
    if request.method == 'POST':
        print request.get_json()
        return "test"
    else:
        return "Post something to me!"

I expect to receive data in JSON format, but request.get_json() returns "None". How are you typically supposed to deal with JSON/Ajax in Flask?

Pollyanna fucked around with this message at 22:58 on Jan 26, 2014

# ? Jan 26, 2014 22:32

Ethereal: Mar 8, 2003

Pollyanna posted:

That unfortunately doesn't do what I want it to. I'm trying to have each observable in an observable object do the click-to-edit thing; that sets everything to editable and never changes it back.

A solution I was given was to create a class for each observable that would keep track of whether it was editable or not:

http://jsfiddle.net/eguneys/j4NB4/5/

I have another issue now, with trying to figure out how to deal with storing JSON data on a server in Flask. Trying a thing, you see. I'm trying to post the data:
JavaScript code:
    self.saveData = function() {
        $.post('{{ url_for("echo") }}', ko.toJSON(self));
    }
using Flask:
Python code:
@app.route('/echo', methods=['GET', 'POST'])
def echo():
    if request.method == 'POST':
        print request.get_json()
        return "test"
    else:
        return "Post something to me!"
I expect to receive data in JSON format, but request.get_json() returns "None". How are you typically supposed to deal with JSON/Ajax in Flask?

Hmm, you should check the network tab in Chrome to make sure a content type of application/json is being sent over.

# ? Jan 27, 2014 03:04

Monday_: Feb 18, 2006; Worked-up silent dork without sex ability seeks oblivion and demise.; The Great Twist

Ghostlight posted:

1. Yes, Google SEO starter guide explicitly recommends doing this for any image that is used as a link.

2. Put the next, previous and strip images inside a <div> the same width as the comic strip and then set the next/previous to float:left and float:right.

Thanks for this. I tried #1 and didn't like the way it looked, so I figured out enough CSS to set just set text-decoration to none and that's good enough for now. Maybe I'll try it with a font of my handwriting, once I learn how to implement that. I also did #2 and I think it looks better now.

# ? Jan 27, 2014 09:24

Jaded Burnout: Jul 10, 2004

MondayHotDog posted:

Thanks for this. I tried #1 and didn't like the way it looked, so I figured out enough CSS to set just set text-decoration to none and that's good enough for now. Maybe I'll try it with a font of my handwriting, once I learn how to implement that.

What do you mean by "The way it looked"? Alt text isn't supposed to be visible.

# ? Jan 27, 2014 11:24

Monday_: Feb 18, 2006; Worked-up silent dork without sex ability seeks oblivion and demise.; The Great Twist

Arachnamus posted:

What do you mean by "The way it looked"? Alt text isn't supposed to be visible.

I was using .gif images of my own handwriting instead of a font.

# ? Jan 27, 2014 11:33

EVGA Longoria: Dec 25, 2005; Let's go exploring!

Ethereal posted:

Hmm, you should check the network tab in Chrome to make sure a content type of application/json is being sent over.

This is the kind of thing I prefer using Charles (or Fiddler) for, since it makes it easy to see the request and response headers and content. In pretty-printed XML or JSON if appropriate.

# ? Jan 27, 2014 14:22

pipebomb: May 12, 2001; Dear God, what is it like in your funny little brains?
It must be so boring.

What do you guys think is the best way to create a menu like http://www.concentra.com ? A client really likes it and I can see doing JS to show/hide a div, but it's on WP and I don't want to gently caress it up too bad.

# ? Jan 27, 2014 17:48

kedo: Nov 27, 2007

pipebomb posted:

What do you guys think is the best way to create a menu like http://www.concentra.com ? A client really likes it and I can see doing JS to show/hide a div, but it's on WP and I don't want to gently caress it up too bad.

You probably don't even need JS, you could just use :hover. If you are going to use JS, try hover intent.

# ? Jan 27, 2014 17:52

excidium: Oct 24, 2004; Tambahawk Soars

pipebomb posted:

What do you guys think is the best way to create a menu like http://www.concentra.com ? A client really likes it and I can see doing JS to show/hide a div, but it's on WP and I don't want to gently caress it up too bad.

These are sometimes called "mega menus". You should be able to Google and find quite a few tutorials on how to implement one. For instance, here's one that takes you through creating one with a bunch of CSS3 properties (that you could easily take out if you didn't want the rounded corners/gradients).

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

Or better yet, look for Wordpress Mega Menu and check out the plugins available already for WP.

# ? Jan 27, 2014 18:08

The MUMPSorceress: Jan 6, 2012; ^SHTPSTS; Gary’s Answer

I have an idea for a website that I think would be very useful, but I don't know where to begin tools-wise. I have experience programming in Java and C++, but purely terminal-level stuff or simple Java Swing programs. I also have experience with SQL, but I'm hardly a query master.

I get the feeling that for the project I have in mind, I'll need a web front-end, a mobile app, and a database. I know HTML and CSS, and Android is Java-based, so I can make the client side of things with my existing skills. What I don't know how to do is set up a database server and make my clients talk to it. What's a good place to start reading?

Also, what's the best way to set up a testing environment for this stuff while I'm developing it? Is there a free VM solution out there where I can set up my VMs to talk to each other like a server farm so I can test communication between my web front-end and the database?

# ? Jan 27, 2014 18:11

Sudden Infant Def Syndrome: Oct 2, 2004

Just buy a cheap domain and work on that? You can find hosting for like $1/month and that will have mysql built in.

# ? Jan 27, 2014 18:16

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

LeftistMuslimObama posted:

I get the feeling that for the project I have in mind, I'll need a web front-end, a mobile app, and a database. I know HTML and CSS, and Android is Java-based, so I can make the client side of things with my existing skills. What I don't know how to do is set up a database server and make my clients talk to it. What's a good place to start reading?

I think you are confusing Java and Javascript, which are two very different things.

# ? Jan 27, 2014 18:39

The MUMPSorceress: Jan 6, 2012; ^SHTPSTS; Gary’s Answer

cbirdsong posted:

I think you are confusing Java and Javascript, which are two very different things.

I'm not confusing java and javascript? Android's APIs are all Java. I'm aware that a website wouldn't use Java, I was talking about the mobile client.

My bigger question is where do I go to read up on making a database talk to my front ends?

# ? Jan 27, 2014 18:50

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

check out Parse if you're a total noob, they have api-as-a-service that helps you get up and running with various mobile front-ends

# ? Jan 27, 2014 18:53

Pollyanna: Mar 5, 2005; Milk's on them.

Ethereal posted:

Hmm, you should check the network tab in Chrome to make sure a content type of application/json is being sent over.

EVGA Longoria posted:

This is the kind of thing I prefer using Charles (or Fiddler) for, since it makes it easy to see the request and response headers and content. In pretty-printed XML or JSON if appropriate.

Yeah, I checked and it turns out it's being sent as text/HTML. Why :froggonk:

gently caress it, here's all my code:

JavaScript code:

// Editable Text object:
function EditableText(text, editable) {
    var self = this;
    self.text = ko.observable(text);
    self.editing = ko.observable(editable);
}

// Job app object:
function JobApp(title, description, company, submit_date, link) {
    var self = this;

    self.title = ko.observable(new EditableText(title, false));
    self.description = ko.observable(new EditableText(description, false));
    self.company = ko.observable(new EditableText(company, false));
    self.submit_date = ko.observable(new EditableText(submit_date, false));
    self.link = ko.observable(new EditableText(link, false));

    self.edit = function (model) {
        console.log(model)
        model.editing(true);
    };
}

// Main KO logic:
function AppViewModel() {
    var self = this;

    self.apps = ko.observableArray([new JobApp('Noodle Picker', 'Picks, noodles, and leaves', 'Noodle Pickers, Inc.', '2014-1-25', 'noodlepickers.com'),
    new JobApp('Not A Real Job', 'Not a real job', 'Not A Real Company', '1969-1-1', 'nope.com')]);

    self.addApp = function() {
        self.apps.push(new JobApp('Job Title','Description','Company','Submission Date','Link'));
    }

    self.logToConsole = function() {
        console.log(ko.toJSON(self));
    }

    self.saveData = function() {
        $.post('{{ url_for("echo") }}', ko.toJSON(self));
    }
}

ko.applyBindings(new AppViewModel());

Python code:

@app.route('/echo', methods=['GET', 'POST'])
def echo():
    if request.method == 'POST':
        return request.get_json()
    else:
        return "Post something to me!"

And Chrome's output:

I think the problem is with the $.post function. It doesn't send it as JSON for some weird reason.

# ? Jan 27, 2014 20:52

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

Is there a way to get a dropdown select box to work with the form validation and the 'required' attribute in a meaningful way? Since all of the options count towards the requirement and it'll never show an optgroup or diabled option as selected, the user doesn't have to interact with the thing at all to get past the browser's built-in validation. Yes, I'm also validating, but it'd be nice not to have two visually different validation systems getting in the users' ways.

Before you reply with "well don't make them interact with it", it's my job to make them interact with it, so just please don't bother.

E: I'm an idiot who skims documentation that tells me to use a blank value on invalid options as long as I bother to actually read it :cripes:

Munkeymon fucked around with this message at 19:07 on Jan 29, 2014

# ? Jan 27, 2014 21:26

enthe0s: Oct 24, 2010; In another few hours, the sun will rise!

I've got a quick question about Zurb Foundation. I'm trying to implement an Orbit, and I'm wondering what the stack_on_small setting does since the docs don't really say (scroll down to the Advanced section): http://foundation.zurb.com/docs/components/orbit.html

I've already been playing around with it but it doesn't seem to have any effect as far as I can see.

Here's a snippet:

code:

<ul class="goals-orbit orbit-stack-on-small" data-orbit>
      <li>
        <img src="http://placehold.it/400x300&text=[img]" />
      </li>
      <li>
        <img src="http://placehold.it/400x300&text=[img]" />
      </li>
      <li>
        <img src="http://placehold.it/400x300&text=[img]" />
      </li>
</ul>

# ? Jan 27, 2014 21:27

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

enthe0s posted:

I've got a quick question about Zurb Foundation. I'm trying to implement an Orbit, and I'm wondering what the stack_on_small setting does since the docs don't really say (scroll down to the Advanced section): http://foundation.zurb.com/docs/components/orbit.html

I've already been playing around with it but it doesn't seem to have any effect as far as I can see.

Here's a snippet:
code:
<ul class="goals-orbit orbit-stack-on-small" data-orbit>
      <li>
        <img src="http://placehold.it/400x300&text=[img]" />
      </li>
      <li>
        <img src="http://placehold.it/400x300&text=[img]" />
      </li>
      <li>
        <img src="http://placehold.it/400x300&text=[img]" />
      </li>
</ul>

According to the source it literally applies the stack-on-small class to the container element.

# ? Jan 27, 2014 21:44

enthe0s: Oct 24, 2010; In another few hours, the sun will rise!

Lumpy posted:

According to the source it literally applies the stack-on-small class to the container element.

Hmm, well, digging into the SASS, it seems like this is all that class does?

code:

.orbit-stack-on-small {
        .orbit-slides-container {height: auto !important;}
        .orbit-slides-container > * {
          position: relative;
          margin-left: 0% !important;
        }

I'm kind of wondering if stack-on-small is a thing that other frameworks use (like the grid system), or if it's just something Foundation specific and doesn't bother explaining very well.

# ? Jan 27, 2014 22:05

EVGA Longoria: Dec 25, 2005; Let's go exploring!

Pollyanna posted:

Yeah, I checked and it turns out it's being sent as text/HTML. Why :froggonk:

gently caress it, here's all my code:

JavaScript code:

// Editable Text object:
function EditableText(text, editable) {
    var self = this;
    self.text = ko.observable(text);
    self.editing = ko.observable(editable);
}

// Job app object:
function JobApp(title, description, company, submit_date, link) {
    var self = this;

    self.title = ko.observable(new EditableText(title, false));
    self.description = ko.observable(new EditableText(description, false));
    self.company = ko.observable(new EditableText(company, false));
    self.submit_date = ko.observable(new EditableText(submit_date, false));
    self.link = ko.observable(new EditableText(link, false));

    self.edit = function (model) {
        console.log(model)
        model.editing(true);
    };
}

// Main KO logic:
function AppViewModel() {
    var self = this;

    self.apps = ko.observableArray([new JobApp('Noodle Picker', 'Picks, noodles, and leaves', 'Noodle Pickers, Inc.', '2014-1-25', 'noodlepickers.com'),
    new JobApp('Not A Real Job', 'Not a real job', 'Not A Real Company', '1969-1-1', 'nope.com')]);

    self.addApp = function() {
        self.apps.push(new JobApp('Job Title','Description','Company','Submission Date','Link'));
    }

    self.logToConsole = function() {
        console.log(ko.toJSON(self));
    }

    self.saveData = function() {
        $.post('{{ url_for("echo") }}', ko.toJSON(self));
    }
}

ko.applyBindings(new AppViewModel());

Python code:

@app.route('/echo', methods=['GET', 'POST'])
def echo():
    if request.method == 'POST':
        return request.get_json()
    else:
        return "Post something to me!"

And Chrome's output:

I think the problem is with the $.post function. It doesn't send it as JSON for some weird reason.

If you're using JQuery, this is the 4th parameter of $.post -- would be:

JavaScript code:

    self.saveData = function() {
        $.post('{{ url_for("echo") }}', ko.toJSON(self), '', 'json');
    }

Should properly set the JSON.

You can replace the 3rd property with a function for success.

Can also use full $.ajax:

JavaScript code:

$.ajax({
	type: "POST",
	url: '{{ url_for("echo") }}',
	data: ko.toJSON(self),
	dataType: 'json'
});

# ? Jan 27, 2014 22:28

Pollyanna: Mar 5, 2005; Milk's on them.

Doesn't work, unfortunately. It still transmits as text/html

Here's a JSFiddle so you can see what I'm doing. If you click save, it returns an empty JSON object.

http://jsfiddle.net/s8bTP/

# ? Jan 27, 2014 23:14

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I want build what is essentially a select control: One item is visible, the others show up as a drop down menu on hover or select. It's different from a fat nav / mega menu in that there is only a single, flat list of items. Now, I thought this was a fairly common pattern that involved adding an "active" or "selected" class to a list item, but I am having a serious brain freeze. Is there a way to do this by styling lists, or should I just stick with a select control?

# ? Jan 28, 2014 01:00

Dominoes: Sep 20, 2007

Looking for wisdom on database management on Openshift and Django with Sqlite. What's the best way to push changes from my local code without modifying or removing the database file Openshift? I'm using Openshift's Data dir (wsgi/data), which supposedly accomplishes this, but it's still syncing my deployed database with the local one.

# ? Jan 28, 2014 14:57

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

Kobayashi posted:

I want build what is essentially a select control: One item is visible, the others show up as a drop down menu on hover or select. It's different from a fat nav / mega menu in that there is only a single, flat list of items. Now, I thought this was a fairly common pattern that involved adding an "active" or "selected" class to a list item, but I am having a serious brain freeze. Is there a way to do this by styling lists, or should I just stick with a select control?

You could do it with a list by having all LIs be hidden, with only one with an active class visible, and then on UL:hover, have the other items become visible. Or, obviously, use JavaScript to handle hover / click, since there will likely be issues on mobile with only using CSS hover states for functionality. Or just use a SELECT, since that is what you describe your functionality as being.

# ? Jan 28, 2014 15:05

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

Does anybody know anything about Lync integration into web sites?

I'm having trouble turning up good resources to see if what I want to achieve is possible, but basically our company has moved to Office365 and I've been secretly porting our intranet from CMSMS into Wordpress so I'm looking to see if there's a way to integrate Lync into the staff directory so that it's automatically updated rather than relying on a single person in the company to manually keep it up to date. I found some bits and pieces mentioning that Lync integrates into SharePoint, but I can't seem to find anything about really whether it's only SharePoint that can access Lync features (or even what features it can); whether the whole site needs to be on SharePoint or, if I can tunnel to it from another platform.

# ? Jan 30, 2014 05:41

kedo: Nov 27, 2007

I'm preforming an ajax request on a website on server A to grab some content from server B, however I'd like to avoid content pop-in as much as possible. Does it make sense to store a timestamped copy of the response somewhere on server A so if another user has previously made the same request, the new request doesn't need to go off-site to grab the content?

And a followup question: the caching layer I'm talking about, should that be handled by JS? Or would it be better to have an intermediary PHP layer doing all the server work?

# ? Jan 30, 2014 16:26

Jaded Burnout: Jul 10, 2004

kedo posted:

I'm preforming an ajax request on a website on server A to grab some content from server B, however I'd like to avoid content pop-in as much as possible. Does it make sense to store a timestamped copy of the response somewhere on server A so if another user has previously made the same request, the new request doesn't need to go off-site to grab the content?

And a followup question: the caching layer I'm talking about, should that be handled by JS? Or would it be better to have an intermediary PHP layer doing all the server work?

Assuming server A and server B are in roughly the same geographical location, it doesn't really matter whether you store the cache on A or B given that it's XHR and it's the user's browser that will be doing the request, not server A. The user is probably an equal distance from both servers.

Setting appropriate cache control headers on the content will reduce your pop-in for repeat visitors with no further effort as that'll encourage their browser to cache the response, and if you want to go a step further you can put server B behind a caching proxy like Varnish or whatever, which will make use of the same headers and reduce load times for new visitors too.

If it's really super mega important to avoid any pop-in, you should have server A make the request to server B and cache the result (or request via a caching proxy), so the end user gets the whole lot at once from server A.

Also, don't underestimate the power of spinner.gif for making those long waits feel shorter.

# ? Jan 30, 2014 19:26

kedo: Nov 27, 2007

Arachnamus posted:

If it's really super mega important to avoid any pop-in, you should have server A make the request to server B and cache the result (or request via a caching proxy), so the end user gets the whole lot at once from server A.

Yeah, the longer I've thought about it the more and more this seems like the only logical solution.

Arachnamus posted:

Also, don't underestimate the power of spinner.gif for making those long waits feel shorter.

Good point.

# ? Jan 30, 2014 19:39

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

Is the OP still being updated? I was wondering if Emmet could be added to it. To my great shame I've only started using this now and it's made writing code so much quicker and easier.

# ? Feb 4, 2014 20:06

Oh My Science: Dec 29, 2008

I thought Emmet made the list, I'll have to make an effort post and add in a bunch of stuff we've been talking about the last few months.

As a reminder the google doc for the thread is HERE and anyone with the link can edit or make comments. If you really want to write in length about a subject feel free to do so and it will be posted. I'll make time this weekend to flesh out the first version.

# ? Feb 4, 2014 20:22

kedo: Nov 27, 2007

Alright, Handlebars question that I'm probably going to word terribly, bear with me. I have a helper script that's getting called pretty deep within a template which spits content out in either one column or two depending on how many objects it's given.

Here's ~~the helper script~~ a simplified helper script:

JavaScript code:


Handlebars.registerHelper('columns', function(context, options) {
	if (context.length <= 4) {
		// do stuff to put items into 1 columns
	}
	else {
		// do other stuff to put items into 2 columns
	}
	// return formatted html
});

And here's some template code ~~for the whole shebang~~ that's been simplified:

code:

{{#each objects}}
<section>
  <header>
    <h2>{{section_name}}</h2>
  </header>

    {{#columns contents}}                     
      <div class="item">
        <h4>
        {{name}}
        </h4>
      </div>
    {{/columns}}	

{{/each}}

My question is this: based on where I'm calling #columns in the template, is there any way for me to check the value of section_name from within the helper function? My goal is to override things for a single section that has more than 4 items, but should not have its content in two columns. context is just a bunch of objects within contents, is there any way to get back up to objects, if that makes sense?

Please treat me like an idiot babby because I'm still pretty new to Handlebars.

e: Simplified my example code b/c it was needlessly complex.

kedo fucked around with this message at 23:37 on Feb 4, 2014

# ? Feb 4, 2014 21:55

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

How bad of a practice is it to use divs inside of anchors? I've read a few things that say to use spans instead because of semantics, putting blocks inside of inlines is bad, etc. On the other hand, HTML5 and modern browsers don't seem to care. In my particular case I'm asking because I want to make an Isotope/Masonry gallery with clickable items. It seems to work identically either way.

With divs: http://jsfiddle.net/belross/GgLf7/1/

With spans: http://jsfiddle.net/belross/eL8rP/1/

# ? Feb 7, 2014 10:17

Heskie: Aug 10, 2002

Anony Mouse posted:

How bad of a practice is it to use divs inside of anchors? I've read a few things that say to use spans instead because of semantics, putting blocks inside of inlines is bad, etc. On the other hand, HTML5 and modern browsers don't seem to care. In my particular case I'm asking because I want to make an Isotope/Masonry gallery with clickable items. It seems to work identically either way.

With divs: http://jsfiddle.net/belross/GgLf7/1/

With spans: http://jsfiddle.net/belross/eL8rP/1/

You could put the anchors inside the divs, and give them the same block dimensions: http://jsfiddle.net/UDGrf/1/
This means you could put some (hidden) text in there too if you wanted for screen readers etc.

Or you could remove the div/span altogether using only the anchor if they're potentially unnecessary? http://jsfiddle.net/UDGrf/2/

# ? Feb 7, 2014 14:17

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

Anony Mouse posted:

How bad of a practice is it to use divs inside of anchors? I've read a few things that say to use spans instead because of semantics, putting blocks inside of inlines is bad, etc. On the other hand, HTML5 and modern browsers don't seem to care. In my particular case I'm asking because I want to make an Isotope/Masonry gallery with clickable items. It seems to work identically either way.

With divs: http://jsfiddle.net/belross/GgLf7/1/

With spans: http://jsfiddle.net/belross/eL8rP/1/

It's technically invalid markup*, and you don't need the DIVs at all. Apply classes to the As and make them inline-block or block or whatever you need them to be, but it works without even doing that: http://jsfiddle.net/ssP3f/1/

The other alternative is just do:

JavaScript code:

jQuery('#container').on('click', '.item', function () {
   //blah
});

And then you don't even need them to be anchors if that's something useful.

* but as you said, browsers will render it fine

# ? Feb 7, 2014 14:27

stoops: Jun 11, 2001

I would like to try to implement this function on a webpage, but I'm not sure what it's called so I can google it.

http://elegantthemes.com/preview/Divi/

On the left side, you see a little star/bolt that, when clicked, expands a div. I don't really have a use for it to customize the theme, but I do want that functionality, where a div with it's own content, expands.

Any help or points in the right direction is appreciated.

# ? Feb 7, 2014 21:34

Oh My Science: Dec 29, 2008

It's called off canvas. Google that and you should get a million hits.

# ? Feb 7, 2014 21:40

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Lumpy posted:

It's technically invalid markup*, and you don't need the DIVs at all. Apply classes to the As and make them inline-block or block or whatever you need them to be, but it works without even doing that: http://jsfiddle.net/ssP3f/1/

The other alternative is just do:
JavaScript code:
jQuery('#container').on('click', '.item', function () {
   //blah
});
And then you don't even need them to be anchors if that's something useful.

* but as you said, browsers will render it fine

What's invalid about <a><div></div></a>?

# ? Feb 7, 2014 22:00

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 12:28

kedo: Nov 27, 2007

pokeyman posted:

What's invalid about <a><div></div></a>?

You're not supposed to wrap inline elements around block elements.

# ? Feb 7, 2014 22:06

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »