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
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'm doing a site redesign and have been passed a mockup from our (non-web) graphic designer that has a portfolio display in a three column grid, with the images of some projects in the portfolio spanning two columns - it looks nice, but the main feature we're redesigning for is being able to filter through projects by several different criteria and I have no idea how to even begin implementing that sort of design while having the list be able to resort itself arbitrarily so that there aren't blank squares, either dynamically or through forcibly refreshing the page.

It strikes me as a really nice visual element someone else might have solved though. Does anybody have any ideas?

Adbot
ADBOT LOVES YOU

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



kedo posted:

I'm not sure if it's intentional or not, but the carousel on that site is fast enough that I couldn't finish reading half the quotes. Are they just being meta? I don't know! :psyduck:
I took it as intentional because it was always just faster than I read the text then at the end it asks "Frustrated?" which didn't follow the point they were making in the text slides.

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



Transmogrifier posted:

Seems some developers are working on a new web design app that will function more as a designer tool than a coding tool. They just posted a sneak peek of the app in action, starting from a blank canvas to the actual HTML and CSS output. It's called Macaw and it's looking really promising.
As a non-designer I'd love to sell this to our non-coding designers so that they could do all the layout work and leave me to tidying up their semantic definitions and doing content delivery.

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



Suspicious Dish posted:

If you do the math of when upgrades were released and what an upgrade usually costs, it's actually cheaper month to month. They're no longer planning major versions you have to upgrade to anymore; they release features when they're done.
This only holds true though when you assume you're buying every upgrade. The ~100 user company I work for can't get an enterprise discount and our upgrade cycle was every two-three years. Our quotes for Cloud licensing for a year have been significantly higher than what we've spent on individual upgrades that lasted us two.

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



Quick question - I'm using jQuery .toggle to show/hide divs based on their class as part of a filter and I've come onto a stumbling block on alphabetical filtering because the divs are assigned a single letter class but the page design has the filters covering a range like A-B and J-L.

The code I have at the moment is
code:
$(document).ready(function(){
	$("a").click(function(){
		var id = $(this).attr( 'id' );
		$("." + id).toggle(200);
		$(this).toggleClass("filterinactive");
	});
});
The alphabetical class is being assigned by PHP pulling a substr of a filename.

I'm completely brainfarting on whether there's a way that isn't like 25 ifs and an else to conglomerate the alphabetical categories and whether it would be better to handle it during the PHP substr or in the jQuery. The categories are kind of arbitrary because the designer was trying to split the actual content evenly across the alphabet so it's A-B, C, D-H, J-L, M, N-R, S and T-Y.

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



Depressing Box posted:

Hmm. Maybe a regular expression? Then you could check for a range of letters (e.g. [a-h]):
Sweet, thank you! This did the trick nicely.

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



Out of unskilled curiosity - I have a page with a dozen or so identical static elements (publications with author/date/blurb) that will conceivably stretch to a couple of dozen over time, and this is the third revision of exactly how they would be presented. I have no CMS or MYSQL, so how batshit is it for me to write it so the actual text is just a series of php arrays passed into a function that dumps them into the current design structure of <div><img=""><p> etcetera?

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



fidel sarcastro posted:

You could pretty easily make a PHP (or whatever language your host supports, really) template that loops through your array and creates the html for each item. You probably don't even need to write a function, honestly. How are you getting the data into the array in the first place?
They're static, so I was just passing them as an array to the function and then thought I should ask if performance-wise that's going to be an issue down the road.

Basically I have a page full of these
code:
<?php PublicationDivs(array(
	'img'=>'',
	'link'=>'URL',
	'title'=>'PUBLICATION',
	'blurb'=>'DESCRIPTION',
	'author'=>'AUTHOR',
	'date'=>'PUBLISHED'),1); ?>
And at the top I have a templating function so that I can change the presentation structure during design phase easily
code:
function PublicationDivs($bits, $place) {
	echo '<div class="publicationscontainer"'; if($place == 1) { echo ' style="clear: left;"'; } echo '>';
	echo '<div class="drip"><img src="/images/publications/'.$bits['img'].'.jpg" width="150px" height="106px"></div>';
	echo '<div class="pubtext">'; 
	if($bits['link']!=='') { echo '<a href="'.$bits['link'].'">'; }
	echo '<h2>'.$bits['title']; if($bits['link']!=='') { echo '&nbsp;&gt;</h2></a>'; } else { echo '</h2>'; }
	echo '<p>'.$bits['blurb'].'</p>';
	echo '<p>'.$bits['author'].'</p>';
	echo '<p>'.$bits['date'].'</p>';
	echo '</div>'; }
I'm just curious how bad it would be if I went "gently caress it, ship it" and published it like that instead of reducing it back to static HTML once the design committee stopped changing their minds.

Oh My Science posted:

You could skip all the PHP and use http://jekyllrb.com/
I'm vaguely aware of Ruby existing but I have no idea what this is and it's kind of frightening. I did say I was unskilled!

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 should do it; bearing in mind that it will only apply those properties to the object relative to the container that it's in. If its container has margins, paddings and positioning of its own then the auto margin will centre your <ul> within the space those allow it.


On my own front - anybody know anything about handling Google Toolbar?
Its pop-up blocker is blocking all our website's PDFs from opening that use target="_blank" and I can't figure out if that's intended behaviour or if there's something I can do to avoid triggering it. I wouldn't normally worry, but our industry fairly widely uses a few Google products that 'helpfully' include it as an opt-out on install, and our consultants keep submitting them as broken links because all the toolbar does to indicate it's blocked a "pop-up" is put a little exclamation marker on the pointer.

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



If that's literally your HTML I'd say your first problem is that you aren't declaring the <ul> or its <div> as a .center ;)

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



You want position:absolute rather than relative (relative means it is the anchor to position things in relation to)

At best inference from the K-Create blog, if your <img src> is placed next to the existing dinosaur head then it should position itself somewhere underneath the dinosaur head, at which point you just add in top: -100px and left: 1px to position it correctly over the existing elements.

So
code:
<style type="text/css">
#picture
{
position:absolute;
z-index:100;
top: -100px;
left: 1px;
}
But you may need to fiddle with the placement numbers until it lines up correctly if it's not being positioned against the blog-title-content block.

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



supermikhail posted:

Hopefully, this is enough. Anyway, in CSS I "display" all divs as inline-block and give the slider-area height of 100% which should make it as tall as the scale which doesn't happen and for some reason slider-area behaves as if it's limited by the bottom "p" in the completely unrelated div, and it's stuck at the bottom of the scale. I can increase the height manually, but it will only go down. In other words, I want to expand slider-area to the height of scale, but can't. What am I missing?
Heights unfortunately don't work like that as they are calculated differently to widths. While #sidebar is correctly displayed as the height of all its content, when #slider-area queries for how high "100%" of #sidebar is it gets told the height is undefined so it defaults to #slider's content. If you want to use 100% height you have to use 100% height all the way up to a parent element that has a defined height, even if that's the <html> tag.

It goes down because inline-blocks share the baseline of the last inline element, so you need to set vertical-align: top; for #slider-area.

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



^^^ depending on how you're dynamically creating the images, $(window).load should fire after the page has finished loading all its elements.


I have a Rewrite conundrum. I have a site (https://www.url.com) that serves a different language version under https://www.url.com/china/ - I currently have
code:
RewriteCond %{HTTP_HOST} ^(www\.)?url\.com.cn$
RewriteRule ^(.*)$ [url]http://www.url.com/china/[/url]$1 [L]
but rather than forwarding it to that address, I want to get it loading from that resource while retaining the .com.cn url. How do I do that?

e: also how do I post example urls without them being encased in BBcode :v:

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



Inline-block is kind of dumb, in that it's useful but it has a bunch of special cases and weird logic to it.

Anyway, the issue is that you're floating the search box right which is loving up the text-flow that inline-block demands. Quick fix for the alignment issues:

#header { text-align: right; }
#search { float: right; }

And the bonus is you can delete .space entirely because now that you're no longer floating #header it will correctly detect the height of #search.

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



kedo posted:

Out of all of the new CSS pre/postprocessors coming out every drat day, this is about the only one that's seemed intriguing to me: http://www.myth.io/
I don't think Chrome likes whatever they've done with Source Sans.

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



Yes. The icons you're thinking of are just graphical symbols being used on your desktop to navigate to programs in much the same way you might use Wingdings arrow characters on a webpage to navigate pages - which is why the overlap in terminology.

Essentially it's just a stock or even custom font that you serve up with the webpage and then pull symbols out of it rather than individually link to an image of that symbol or use CSS to position an image of every symbol so that only one is visible.

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



MondayHotDog posted:

1. How do I make the content of images show up in Google searches? Would just adding alt text work?

2. How do I align an image to the sides of the image above it?

Keep in mind I'm very much a beginner. Thanks.
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.

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.

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'm pretty sure it's in the HTML4 specification, if not as a hard rule then as a guideline.

I've done it for years simply because it makes structural sense to me and it works.

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



Lt Moose posted:

I'm having some issues with CSS and IE7. I'm working on a page for an intranet site, and unfortunately IE8 defaults to using compatability mode for all intranet pages.
I remember having the same issue with compatibility flicking on for our intranet, unfortunately that was well over a year ago and we've just recently forced everyone up to 10/11 - but I recall the solution being shoving these lines at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

I don't know what most of that really means because I'm a poo poo coder

Also, I recall that when IE goes into compatibility mode it sets its browser mode to the previous version because someone at Microsoft decided that intranets will always be updated less often than new browser versions are deployed (ha!) - so IE8 in compatibility is reporting itself as IE7 and thus not triggering that [if IE 8]

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



stoops posted:

I'm trying to work with css3 filters on images, mainly hue-rotate.

Do these filters work on background images and divs? I can get the filters to work on standalone images, but not when I have a div with a background image.
They definitely work with background images, I've been using grayscale for a while on a number of display elements and just went and changed them to hue-rotate to check.

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's not a grid system, it's a plea for euthanasia.

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



Red Robin Hood posted:

I just need to be pointed in the right direction. Every form I'm finding online seems to have the user fill out a contact form but just generates an email after they press submit. I'd like it to just send an email to the specified email address after they press submit so that they don't see where it goes and they don't have to even have an email client.

If I'm in the wrong spot please let me know. Thanks in advance.

e: The site is written in in HTML and CSS.
e2: am I going to need to use something like PHPMailer?
PHP has built-in mail stuff - assuming you don't need to run any validation on what's being entered it's as simple as setting up a page to take the POSTed fields and throwing them into a mail('hidden@email.com',$subject,$message,$headers); - the server will then fire it off without having to dick around with client-side email and without exposing the destination.

Unfortunately I can't find the reference I used to build the code I'm using for validation.

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



Since you only want it sometimes rather than every time and you have existing margin/paddings on the <p>, I'd say your best bet is either a paragraph class like <p class="ultofollow"> removing the bottom margin/padding and then something like p.ultofollow+ul to remove the ul's upper margin/padding; or, a ul class with a negative top margin to fudge it by overlapping the blocks.

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.

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



Jeherrin posted:

Would this be the thread to ask about SharePoint? Backstory: a client is using Office365's SharePoint to host his public website. I am designing and developing it. I am familiar with HTML/CSS, not really a problem there. The design is done, and now I'm onto the development.

Does anyone have any advice on using the web-dev side of SharePoint? It seems so pointlessly... complicated. I don't understand half of how it works or what the hierarchy of master pages/themes/pages/etc is.
I'm having to start to do the same thing in a couple of months and I can't even get the vendor to tell me what the advantages of it are other than us having already paid for it.

And I just finished porting the entire thing to Wordpress :sigh:

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 need to bone up on like basic web management stuff - best practices, version control, what I should look for in hosts, security measures, that sort of thing - as I've basically being promoted from defacto intranet/internet maintainer because I can code into being in charge of the technical web strategy under guidance by Marketing. I have pretty much only experience doing personal projects where I didn't have to give a poo poo about being hacked or social media, and I have no clue how to scale this into a corporate environment.

Work is willing to upskill me, but the only courses I can find are in the area of "this is how you make HTML and use FTP" and "spend 70 hours a week crash-coursing Ruby on Rails". I was hoping people here knew of a certification that might cover this type of stuff, or any good web resources where I can start getting my head around how you actually manage a web site rather than just update and code it.

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



nav li .active was just an example - the easiest way to do it is to simply track down what rule it is obeying, then either make your intended behaviour one that is one level higher in specificity or reduce that base rule by a level of specificity; which is best is dependent on what the rest of your rules are doing around it.

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



Pollyanna posted:

except that the height of the panel is equal to that of the button. And it's also not a panel, it's just text.
The answer to this basically comes down to "how is everything else structured?"

From what I can gather you just want some text next to a button without a linebreak, in which case you either float the text element or position it absolutely within the container. As Kobayashi says, it's a lot easier to code to a design rather than a description - if it's suitable you can wholesale steal that grid code if you want, because the white spaces between groups is just margin: 0 0 1.25em; applied to the button elements.

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



cbirdsong posted:

Is it not obvious that this is more significant than a simply rearranging things? Four things you can do are immediately accessible and visible, and lead you straight to something labeled "More" where you can find the rest of the stuff you can do. This is a lot more clear about the options available than when everything is hidden behind a single unlabeled icon. It's much harder to elegantly implement this on a web site, but that doesn't mean it isn't easier for users.
But those exact same things are immediately accessible and visible in the previous hamburger bar. The only difference is they weren't labelled.

I agree it's a better design but at no point did they remove or move away from the TWO hamburgers they have, which makes it a terrible example to post on a Kill The Hamburger Button article.

Ghostlight fucked around with this message at 23:43 on Jul 15, 2014

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



Subjunctive posted:

We did move away from it, in that we replaced an "all nav" affordance with an "other nav" affordance. Putting the hamburger icon on the "more" tab, f.e., really changed the way test users navigated. Much more so than I would have predicted.
But is that change due to the fact that the tab bar is a better navigation structure even when it contains the same information, due to the move from icons to icons and text, or due to the hamburger somehow no longer being a hamburger for the purposes of writing an article about how bad the hamburger is when your main criticism - visibility of options - didn't apply to the old Facebook hamburger anyway because it was already on a proto-tab menu?

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 ability to weather somewhat insane decisions like using HTML and CSS as a mode of interacting with Word and InDesign documents. :psyduck:

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'm interested if more experienced developers can weigh in on it - but:

Everything I read says that you should obscure email addresses from crawlers, but also that basic text processing was part of what crawlers did so simply replacing the @ with 'at' doesn't do anything but inconvenience people because as soon as it became a way to confuse harvesting scripts, harvesting scripts were written to read it. When we put emails on our website I was told they had to have obfuscation but it was left to me how to do it, so they're currently being served up by javascript in rot13 and then unjumbled. I don't know how good that actually is (certainly better than AT DOT), but we didn't get the expected spike in raw spam numbers after putting emails up.

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



It's because Height: 100% inheritable all the way to <HTML> is setting the initial viewport as the height, since that is the parent element. When the content reaches this limit it just spills on down over. On a full screen, depending on resolution, you can see that #message and #photo aren't actually filling the space they're given, and resume is always below the fold.

If you want to retain that behaviour, just add a clear: left rule to #resume to force it below any spillover content.

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



jackpot posted:

Resetting the base font size would break things in ways that would be seen pretty quickly.
I believe Lumpy's point was mostly that if this is the case then it's because your sites are designed for 600px written as 37.5em rather than designed for 37.5em. It's fine for small sites and if you're working by yourself, but anybody picking up your code will, as you say, quickly find that the font-size breaks things because of that.

The whole purpose of em is so that everything maintains its design relativity to the other elements, as opposed to pixels which are an absolute "it's this big, deal with it" and run into issues with mobile devices that misreport their resolutions and people who have increased their font-size for readability.

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 think a quick way to tidy it up would be to leverage the tabbed design your Popular Posts section 'establishes' by moving all your other sections up into a tabbed section next to your Articles. It would give your other sections more visibility by rescuing their headers from below the fold, increase the available size for them as they could then occupy the same space as Articles without bloating it, and you already have the tab-style graphics done on their headers.

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



Bob Morales posted:

Does anyone actually use Dreamweaver other than kids in web development classes?
I use Dreamweaver as a bare ftp client because it's on my pc as part of the suite and I'm too lazy to replace it with something else, also I'm a caveman.

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 believe the phrase is first-class mobile experience :colbert:

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 think what they mean is that they know, as a developer, that a small-6 is half of whatever it is in; but, they worry that the creative team will have a tendency to think that every small-6 is a half of the document, and the question is if there's any way to 'fix' it so that nested column classes aren't relative to their container.

I'm not that familiar with Foundation, but I'm fairly sure the answer is no.

Adbot
ADBOT LOVES YOU

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've got a solution to a problem but it's basically hacking around a bush with a machete and I was wondering if there's a really easy and elegant solution I'm completely overlooking.

I've got a php function
php:
<?
function Images($mode,$article,$youtube = NULL) {
    $thumbsGlob = glob("images/$mode/$article/$article*g.jpg"); natsort($thumbsGlob); 
    if($youtube) { array_unshift($thumbsGlob,$youtube); }
    return $thumbsGlob; 
}?>
that I recently wrote to try and consolidate a bunch of file handling code across web pages, but the function is called from several different directories and only works in the base directory due to the folder pathing. If I set document_root in the folder path then it doesn't return clean URLs that can be plugged straight into <img>; if I chdir then it fucks up other scripts on the pages, and of course php doesn't recognise /images as a base directory in the same way that HTML does.

Is there a nice succinct way to tell php to use the base directory for pathing regardless of what directory the function is called in while also providing a URL to the resource that doesn't require cleaning up before sending back for use?

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