m0nsta.

Should just allow mobile view anyway then optimise it later. Rather see a site that looks not as good as it could do on a handheld device than absolutely nothing.

Saw a pretty nice design on dribbble and decided to code it. Original link: https://dribbble.com/shots/1638088-SPIKE-User-Dashboard/attachments/256140 Final result: http://mark-eriksson.com/work/designs/SPIKE-Dashboard Download: http://mark-eriksson.com/downloads/designs/SPIKE-Dashboard.zip Thanks, Mark.

I made the 4 thumbnails a 100% width simply because there was a portion of the right hand side not being used, and if that section because too long (vertically) it'll look stupid having so much space not being used. The footer is centered to the entire page. I'd prefer to have it at the bottom at all times because if I aligned it to the main content box, if the navigation becomes too long, the footer will no longer be at the bottom. The original dribbble features 2 similar styled boxes behind the main content box. I think it looks a lot simpler, and sleeker without those so opted out of it. I don't really want a box-shadow behind it because it takes a lot of focus of the navigation. These things can be manually done by anyone who downloads these files.

Here we go, another dribbble development. Was on there and found the cleanest, nicest design I've ever saw for a dating website by Salomon Aurélien. This guy is fantastic. Anyway, the original design is here: https://dribbble.com/shots/1489622-Social-website-WIP The layout features some smooth transitions such as box shadows, opacity changes and image scaling. Download and try it ;p Note: it isn't responsive as I cba I've changed a small number of things I dunno who the girl is My website is still down, so here is a screenshot: Download: https://www.sendspace.com/file/tones0

Had the day off work today so I went back to dribbble.com and found a fantastic Twitter (profile) redesign by Bluroon. This is one of the trickiest one's I've developed lately simply because of all the floating that needed to take place, then it would mess up other elements. Notes: it isn't responsive. some of the icons are different because yet again I used FontAwesome the pictures of faces in there are of myself, Eminem and a few people from http://uifaces.com so props to them for letting me use them the pictures in the image grid are from http://www.pixel-peeper.com/ Anyway, yet again my website is still offline, so here is a screenshot of the finished product: And here is the download link: https://www.sendspace.com/file/gwrmzo Enjoy.

I got bored again and decided to revisit dribbble and find another design to develop. This time, I went with a fantastic Google redesign by Salomon Aurélien. Note: the icons are slightly different as I used Font Awesome this isn't responsive I couldn't be bothered to grab actual images so I simply used http://placehold.it Yet again, my website is down so I don't have a working demo, but I have a screenshot. Download files: http://uploadir.com/u/88ohh9dw Hope you like it. Feedback is welcome. Cheers, Mark.

You could always use Bootstrap: http://getbootstrap.com/javascript/#modals Although, if you are only wanting the Modals script, I would recommend heading over to the Customize page and un selecting everything except the necessary plugins for the Modal script. The entire Bootstrap library is far too bulky if you are only going to be using Modals. Alternatively, Google 'JavaScript lightbox'

Using is ugly and looks unprofessional. Wrap that information in a <dl> list and float the <dt>'s left so they appear side by side then mess with the width on the <dt> to get it to push the <dd> away. So your markup will look like this: <dl> <dt>Monday</dt> <dd>10:00 - 17:00</dd> <dt>Tuesday</dt> <dd>10:00 - 17:00</dd> ... </dl> And then just mess with the styles that I mentioned above. Edit: I've made you a fiddle so you can see what I mean: http://jsfiddle.net/MajTC/

I saw a design on dribbble the other day that I really liked, it was simple, clean and smooth so I decided to go ahead and code it. I couldn't extract the header image myself so I decided to get another one from http://interfacelift.com The guy in the picture obviously isn't me, it's some random guy from http://uifaces.com Unfortunately I don't have a demo of this because my website is down, but what I do have is a screenshot: You can download the template by clicking here. If you want to view the original dribbble, click here.

As @@WilliamsGraphics says, you can download that plugin, but Google Chrome actually has a device emulation engine built into the Developer Tools. Right click on your page Go to Inspect Element In that window, there should be a dialog at the bottom with 4 tabs (Console, Search, Emulation, Rendering) -- if not, press Esc Switch to Emulation Select the device you want to emulate and click Emulate Go to your webpage and refresh to view the changes. From there, you can then still use Developer Tools to manipulate the web page. I know it's not the answer to your question, I just thought I'd elaborate upon what WilliamsGraphics said.

I get a "webpage not available" error in Chrome.

Ah, I was under the impression you had to make it clearly visible upon page load?

Cheers! And yeah I do agree, I just can't think of a much more suitable way to have it displayed. I guess I could have an info alert box that displays under the header/navigation. I'll look into it more soon. Thanks for the feedback.

Fair point, will get on to that now. Cheers. Damn, thanks for that!

My mum works at a primary school and they needed a website doing before OFSTED came to visit. I volunteered to do the website. I had already coded it and it worked fine, but over 25% of the views were coming from iPhone and Android devices so I decided to spend the past 2 days redeveloping the website to make it responsive. The site does not use Bootstrap although you may think it by the tabbing feature (built myself). It makes use of jQuery and FontAwesome Bare in mind it is only my 2nd responsive website, so go easy ;p I'm wondered what you guys think. Also, if you come across any typos could you let me know? Cheers. http://holyspiritruncorn.co.uk - Mark

Ah I probably know you then! And cheers.

I wouldn't use JavaScript to toggle a class. Try something like this HTML: <button class="mybutton">Button text</button> CSS: .mybutton:active { background-colour: #ff0000; } :active is the pseudo state on an element when it is being clicked.

Since most of my projects are Habbo related, I don't want them displayed on my website, so I'm working on a few designs to build up my portfolio which is pretty small. At the minute, I'm working on a new design that will be free to download and responsive. What I'm after is a bit of feedback, it isn't finished, I just want to know what you guys think before I proceed. Just a few things to note: this is the Photoshop design, not a coded version, so some things aren't aligned properly and some text may look weird take no note of the 4 circular icons in the 'about me' section, I merged the layers in Photoshop before changing the black to white and couldn't be bothered to recolour them. I will also be changing the background colour on those icons because I dislike the blue the guy in the picture isn't actually me, I got him from http://uifaces.com I'm not much of a designer, so go easy :up: But anyway, here you go: http://uploadir.com/u/06izhu8i

Moved from Notepad++ to Brackets over the past few weeks.

Code updated slightly: http://pastebin.com/qAtbPv3d

A lot of people have trouble with cookies in PHP, they're rather tricky to manipulate and can be a pain, this I've coded this cookie wrapper class today to make it easier for myself when I'm coding projects and thought I'd be generous and share it. I've tested it and it works fine without any problems as far as I am aware, if you come across a problem, let me know and I'll see to it if I'm not busy. It is a static class so you do not need to instantiate it, you can just include the file and use it whenever you like. The code is commented and I will show a few usage demonstrations after the code to show you how to use it. http://pastebin.com/FKLk24PH <?php /** * @desc Cookie wrapper coded in OOP PHP that reduces the hassle of PHP cookies. * @author Mark Eriksson * @webpage http://mark-eriksson.com */ date_default_timezone_set('Europe/London'); class Cookie { const Session = 0; const ADay = 86400; const AWeek = 604800; const AMonth = 2592000; //technically this is only 30 days. const AYear = 31536000; static public function Day($amount=1) { if (!is_numeric($amount) || !is_int($amount) || $amount>200) $amount=1; return (self::ADay*$amount); } static public function Week($amount=1) { if (!is_numeric($amount) || !is_int($amount) || $amount>200) $amount=1; return (self::AWeek*$amount); } static public function Month($amount=1) { if (!is_numeric($amount) || !is_int($amount) || $amount>200) $amount=1; return (self::AMonth*$amount); } static public function Year($amount=1) { if (!is_numeric($amount) || !is_int($amount) || $amount>200) $amount=1; return (self::AYear*$amount); } static public function Exists($cookie) { return (isset($_COOKIE[$cookie])); } static public function IsEmpty($cookie) { return (empty($_COOKIE[$cookie])); } static public function Get($cookie, $def_value='') { return ((self::Exists($cookie)) ? $_COOKIE[$cookie] : $def_value); } static public function Set($cookie, $value, $options=array()) { $default_options = array('expiry' => self::Year(), 'path' => '/', 'domain' => (bool)true, 'secure' => (bool)false, 'httponly' => (bool)false ); $cookie_set = false; if (!headers_sent()) { foreach ($default_options as $option_key=>$option_value) { if (!array_key_exists($option_key, $options)) $options[$option_key] = $default_options[$option_value]; } if ($options['domain'] === true) { $options['domain'] = ('.' . $_SERVER['HTTP_HOST']); } else { $options['domain'] = ''; } if (is_numeric($options['expiry'])) { $options['expiry']+=time(); } else { $options['expiry'] = strtotime($options['expiry']); } $cookie_set = @setcookie($cookie, $value, $options['expiry'], $options['path'], $options['domain'], $options['secure'], $options['httponly']); if ($cookie_set) $_COOKIE[$cookie] = $value; } return $cookie_set; } static public function Remove($cookie, $options=array()) { $default_options = array('path' => '/', 'domain' => (bool)true, 'secure' => (bool)false, 'httponly' => (bool)false, 'globalremove' => (bool)true ); $return = false; if (!headers_sent()) { foreach ($default_options as $option_key=>$option_value) { if (!array_key_exists($option_key, $options)) $options[$option_key] = $default_options[$option_value]; } if ($options['domain'] === true) { $options['domain'] = ('.' . $_SERVER['HTTP_HOST']); } else { $options['domain'] = ''; } if ($options['globalremove']) unset($_COOKIE[$cookie]); $return = @setcookie($cookie, '', (time()-3600), $options['path'], $options['domain'], $options['secure'], $options['httponly']); } return $return; } } ?> Usage demonstrations Sets a cookie called 'rememberme' with value 'yes' that will expire after 2 months. <?php include('class.cookie.php'); Cookie::Set('rememberme', 'yes', array('expiry' => Cookie::Month(2))); ?> Checks if a cookie exists. <?php include('class.cookie.php'); Cookie::Set('rememberme', 'yes'); var_dump(Cookie::Exists('rememberme')); //true var_dump(Cookie::Exists('trolol')); //false ?> Checks if a cookie is empty (means the cookie exists, but has an empty value). <?php include('class.cookie.php'); Cookie::Set('test', 'valuehere'); var_dump(Cookie::IsEmpty('rememberme')); //false Cookie::Set('test', ''); var_dump(Cookie::IsEmpty('test')); //true ?> Gets the value of a cookie called 'rememberme'. <?php include('class.cookie.php'); var_dump(Cookie::Get('rememberme')); //'yes' ?> Removes a cookie called 'rememberme'. <?php include('class.cookie.php'); var_dump(Cookie::Remove('rememberme')); //true ?> I hope it helps you with any future projects if you decide to use it. - Mark.

I think you need it on your <li> elements rather than your <a> elements.

I prefer to insert the raw data into the database and then escape any bad characters when I'm retrieving data from the database, obviously use escape_string when inserting, but my method is this basically: If someone inserted this into the database: I would just use escape_string to change ' to \' and " to \", and insert that into the database, on retrieval I use htmlspecialchars() to protect against XSS vulnerabilities, so the output would be: ..and the data in the database would remain as the slash-escaped, raw, untouched data.

He is using prepared statements (->prepare()) which sanitizes inputs for you. So yes, this should prevent SQL injections.

Google have a free API for creating graphs. I'd link you but I'm on iPad ATM and cba. Just do a quick google search for 'google chart api'