Skateside
Privileged
-
Joined
-
Last visited
Everything posted by Skateside
-
Use <span> instead
-
The selection part's easy. You need each of the characters cut out as png's, preferably PNG32 although if you absolutely need IE6 support you can export PNG8 with alpha transparency in Adobe Fireworks. As a character is selected, you add a class to the canvas element to give it that character's image. It's probably worth having 2 elements, one for the character and one for the background, since that background is textured. The selection is going to be tricky. What you actually want are heavily styled radio buttons so that they'll still work even if Javascript is disabled. I'd recommend markup looking something like this: <ul id="characters"> <li> <label for="character_1"> <img src="character_1_thumbnail.png" alt="Happy Dino Guy"> <input type="radio" name="character" value="Crocodile" id="character_1"> </label> </li> <li> <label for="character_2"> <img src="character_2_thumbnail.png" alt="Elephant Dude"> <input type="radio" name="character" value="Elephant" id="character_2"> </label> </li> </ul> You can use Javascript to hide those radio buttons. I'd recommend simply adding a class to them a little like this: .is-invisible { clip: rect(1px 1px 1px 1px); /* IE6 hack */ clip: rect(1px, 1px, 1px, 1px); outline: none; position: absolute; } After that, bind a handler to the change event of the radio buttons (bonus points if you can delegate it out), something like this: var canvas = document.querySelector('#canvas'), characterInput = document.querySelector('#character_name'), characters = document.querySelector('#characters'); characters.addEventListener('change', function (e) { this.querySelector('.is-checked').classList.remove('is-checked'); // sadly there's no "unchange" event so we have to do this. e.target.parentNode.classList.add('is-checked'); characterClass(e.target.value); characterInput.value = e.target.value; }, false); The characterClass function is something you'll have to build yourself; it would remove the old character's class from the canvas element and add the new one. It's probably work starting those classes with the same thing so it's easier to loop through the classes and remove unwanted ones without removing ones you do want. The colours would be a similar system. The PayPal integration I'm no good with so hopefully someone else can point you in the right direction for that one.
-
A pretty common tactic that's around these days is the change the class on the <html> element: <!-- In your HTML --> <html class="no-js"> // In your Javascript document.documentElement.className = 'js'; Now any rule that starts with .no-js won't be seen if the user has Javascript enabled
-
It's really hard to explain without pictures so you'll just have to try to follow this. There is an <img> inside a <div>. That <div> has overflow: hidden; and a small width so it's acts as a clipping mask. By epic coincidence, or a very small amount of planning, that width is the same as one of those frames. Every few milliseconds (probably every 40), the margin-left is reduced by the width of the <div> until the last frame is showing. The technique's really simple, code do do that is just something like this: var div = document.querySelector('div'), img = document.querySelector('img'), width = img.style.width, // this line is actually much harder than that, look it up. unit = 24, // pixels animation = setInterval(function () { img.style.marginLeft -= unit; if (Math.abs(parseInt(img.style.marginLeft)) === width - unit) { clearInterval(animation); } }, 40);
-
-
Alas, the triangles sit on top of the text in IE8
-
Sadly, 3.2em is very slightly too short in Firefox, we'd need 3.3 and it goes a little crazy when that's reduced back to a single line. Chris has the right idea, I'm certainly aiming for a pure CSS solution that's as dynamic as possible. He actually tried my first thought of a huge border size and overflow: hidden; but discovered, much like I did, that the :before vanishes. I've managed to find a pure CSS solution, but I wouldn't say I'm happy with it: Skateside's less than ideal attempt By making the :after a square with a background image of a white triangle alighed right-top, it's possible to create the dynamics that I wanted without it spilling over the text and keeping the :before visible. To keep it image free I created a PNG and ran it through an online base64 encoder. Of course, if the background ever changes to one of the other 65 million possibilities that CSS affords us, a new image would have to be created and re-encoded. After all that work, may as well just use an image. I'd like to think there's a CSS solution that's as easy to modify as the first example
-
Simple but effective. Now make it work with 3 lines - mwa ha ha ha ha
-
I've got a fun little challenge for everyone here. Those who frequent the IRC will know that I've been playing with slanted headings. These have now evolved into wrap-around headings; currently they look like this fiddle: Skateside's awesome fiddle. Here's the challenge: can anyone think of a way to make the slant stretch to the full height when that heading double-lines? The only rule is that you're not allowed to add any more elements (except a rogue <br> for testing). It should degrade in older browsers (I won't insist that it has to work perfectly in IE7, although you'll be hailed as a CSS god if you can pull it off). The background of the <body> tag can change or even be patterned, the background of the <article> will always be a solid colour (although if you can successfully render this on any background, more CSS god-like recognition will be heading your way) Nothing to win here except bragging rights. Wanna play?
-
Nooooooooooooo!!!!! Please, please, please stop thinking in terms of "this text needs to be a value" - you're talking about the placeholder attribute, that little gem will do all the hard work for you: <input type="text" name="whatever" placeholder="Whatever you want" /> Instead of using jQuery to make the value attribute act like placeholder, use it to plug the gap in older browsers. $(function () { // Basic ability detection rather than browser sniffing is far more robust and // catches far more edge-cases. var placeholderSupported = ('placeholder' in document.createElement('input')), placeholderClass = 'is-placeholder', jQplaceholders, clearPlaceholders = function () { var jQthis = $(this); if (jQthis.hasClass(placeholderClass)) { jQthis.val(''); } }; if (!placeholderSupported) { // Delegate the blur and focus events so we can quickly replace placeholder text. $('body').on('blur focus', 'input,textarea', function (e) { var isBlur = e.type === 'blur' || e.type === 'focusout', jQthis = $(this), placeholder = jQthis.attr('placeholder'), hasPlaceholder = placeholder !== undefined; // As well as adding/removing the value from the input or textarea, we add a // class. This not only allows us to style the placeholder text but also enables // us to check for the class when the value matches the placeholder or the form // is submitted. if (hasPlaceholder) { if (isBlur) { if (jQthis.val() === '') { jQthis.val(placeholder).addClass(placeholderClass); } else if (jQthis.val() !== placeholder && jQthis.hasClass(placeholderClass)) { jQthis.removeClass(placeholderClass).blur(); } } else { if (jQthis.val() === placeholder && jQthis.hasClass(placeholderClass)) { jQthis.val('').removeClass(placeholderClass); } } } }); // To put the text into the inputs we simply need to trigger a blur event. We // also need to add a function to all form submissions that clear the value as // the form is submitted (since placeholder text should not be sent across with // the form data). We also add a function to window.onbeforeunload to clear the // value of any form displaying the placeholder text because refreshing a page // in IE when an input has a value causes the value to remain and prevents our // script from adding the placeholder class. jQplaceholders = $('input[placeholder],textarea[placeholder]'); jQplaceholders.blur(); $('body').on('submit', 'form', function () { $('input[placeholder],textarea[placeholder]', this) .each(clearPlaceholders); }); $(window).on('beforeunload', function () { jQplaceholders.each(clearPlaceholders); }); } });
-
I think your page is rendering in quirks mode. Try adding this line above <html>: <!DOCTYPE html>
-
When I win I'm going to buy all of one kind of thing. Like jeans. I'll go into shops and buy the whole range. I'll buy out warehouses and pay shipping firms to deliver new stock to me. I'll go up to people in the street and say "I'll give you £1000 for your jeans" and they'll agree because they won't know there aren't any more coming. Then I'll go on TV and say things like "I am the king of jeans!" I'll make outfits out of them, wallpaper my house with them and I'll just burn the rest. See if I can change the world, I pair of jeans at a time.
-
<hgroup>, <header>, <footer>, <article>, <aside>, <section> ...
-
In the interest of avoiding a religious war Another thing that really gets my goat and I guess I'd consider it a nightmare is markup like this: <div class="box_holder"> <div class="box_left"> <div class="box_left_title"><p class="box_title_text">I am a title</p></div> <div class="box_left_content"><p>I am content</p></div> </div> <div class="box_right"> <div class="box_right_title"><p class="box_title_text">I am a title</p></div> <div class="box_right_content"><p>I am content</p></div> </div> </div> Especially when the only difference between the left and right boxes is a 10 pixel left margin on box right
-
My nightmare has got to be !important I love JavaScript though. I've never really understood why people struggle with it. Although some of the tutorials out there are just shocking!
-
A better solution is to simply add the following line to your CSS: a img { border: 0; } Saves having to remember to change every <img> tag.
-
I think every coding website worth it's salt should have a konami code I rarely do anything on a website where I won't get sued for adding easter eggs, but when I get the chance I add little bits
-
Your code looks fine to me. Do you have a complete example?
-
Mine's worth $4000 and is essentially just duplicate copy at the moment.
-
Nope, my dad's tougher
-
+1'd I don't much like LESS and SASS because of the added bloat. I think it's far better to have best practices for CSS. I'm also not a fan of OOCSS, I think it's way too heavy and it's too easy to get lost using it. I much prefer SMACSS because to me it's a cleaner system that's more in keeping with the idea of CSS
-
At times like these I just look at my hometown and think... ... I chose to live there ¬_¬
-
I disagree with this part. I think Notepad++ would be the perfect tool owing to the syntax highlighting - it's an excellent way to help them learn by seeing the code light up when they get it right. I agree with keeping it simple - don't worry about it looking pretty at the moment, just start them off with some "hello world" goodness - a couple of image tags and a few anchors will make them feel like real web designers. Also, only ever open 1 browser, no sense confusing them with rendering differences.
-
I can't remember who came up with this clearfix, but it's the one I tend to use. I don't test in IE6 anymore, but if IE6 support is needed, the class will need something that sets hasLayout. /* Sets hasLayout for IE7. */ .l-group { min-height: 0; } .l-group:before, .l-group:after { content: '.'; display: block; height: 0; overflow: hidden; } .l-group:after { clear: both; }
-
I hate IE7 with every fiber of my being. It can't handle z-index, inputs inherit margins from floated parents, jQuery's animate can make elements disappear. I spend notable amount of time trying to fix this browser and I'm forever cursing it; however I just can't help but agree with this statement. IE7 compatibility isn't hard. The corners don't have to be round, but putting boxes in the right place isn't particularly difficult and as soon as you understand the bugs you can usually work around them. I don't see why their website looks so bad in IE7 and I don't respect any web designer who can't make their site look acceptible in IE7.
