Contact Johnie Hjelm

x Cancel
posted 2 years ago

Quickly display all images within a directory with PHP

                <?php
	// Define which directory to use   
	$dir = 'images';
	// Filter out wanted file suffixes
	$file_display = array('jpg', 'jpeg', 'png', 'gif');

	if(file_exists($dir) == false){
		// If there isn't a directory by that name
		echo 'Directory \'', $dir, '\' not found!';
	} else{
		// Scan through the directory
		$dir_contents = scandir($dir);

		foreach ($dir_contents as $file){
			// Fix so that even uppercase suffixes works
			$file_type = strtolower(end(explode('.', $file)));

			if ($file !== '.' && $file !== '..' && in_array($file_type, $file_display) == true){
				// Wrap each file within a img tag
				echo '<img src="', $dir, '/', $file, '" alt="', $file, '" />';
			}
		}
	}
	?>                
Raw

I'm building a photo gallery, where just putting images in a directory would display them nicely on a page.

posted 2 years ago

Auto resize YouTube embed.

                $(document).ready(function() {		
    
    $(window).resize(function(){
      
     	$("iframe").css({
        
                width: "100%",
    		height: ($(this).width()) * .58
        	
    	});
      
    });
    
    $(window).resize();
      		
});                
Raw

I'm working hard on a blog theme for a client which structure is depending on Media Queries. Although when I came across embedding youtube videos I noticed that the width had to be consistent. First I tried to give the iframe width="100%" and height="auto". But the result made the height of the iframe extremely thin. So I think that setting only work on ‹img›

Anyways. So I sat down and tried hacking a solution. And it worked. With jQuery I'm grabbing the width of the iframe, which in this case is 100%, and I multiply it with .58 (58%). Note that the multiplying is approximatively. When you reach a very small or big width you may notice some black borders.

posted 2 years ago

CSS3 Spinner

http://goo.gl/yMmCf

The upcoming project is going to preload with a pretty neat effect. Although GIFs is getting obsolete. Just make one with CSS3 And let's just hope that IE10 will support animations...

posted 2 years ago

Datepicker with jQuery UI

http://jsfiddle.net/johniehjelm/hBTyE/

I'm not completely satisfied with the standard designs for the jQuery UI Datepicker and I don't think you are either. So while I got a mission a few days back to create a unique Datepicker for their site, I thought why not share the result with you.

Although note that the format is in Swedish. But just remove the comment with code and it'll go back to standard.

Use it, abuse it, enjoy it!

posted 2 years ago

CSS3 Envelope

http://jsfiddle.net/johniehjelm/TRs9k/

The result didn't come out "extraordinary", but you probably get the idea. It sure was fun to do.

Enjoy it, use it, abuse it. It's yours!

posted 2 years ago

Surrealistic CSS3 paper stack

http://jsfiddle.net/johniehjelm/eECc6/

How to make a surrealistic paper stack with some data:image and of course creativity!

posted 2 years ago

CSS3 Tags

http://jsfiddle.net/johniehjelm/Yj5US/

Just playing around with a coming WordPress-theme and considering to use these elements in the tag-section. What do you think?

Feel free to use it!

posted 2 years ago

Sibling to Sexy Buttons

http://jsfiddle.net/johniehjelm/QgQtz/

I felt like adding another color to the former Sexy Buttons. So feel free to use the now white version!

posted 2 years ago

Sliding ON/OFF Switch

http://jsfiddle.net/johniehjelm/HZwwY/7/

I made some improvements on the ON/OFF Switch I posted the other day.

So I thought of adding slightly more "sexyness" to its design. Rather than a boring shifting effect, it ended up with a more amiable sliding one.

Have fun this 'cause I know I will!

(Note that it's just in Webkit!)

EDIT: Some of you may recognize the Switch from Orman Clark, only this one is made with pure css. Think of it as an inspiration! :)

posted 2 years ago

CSS3 ON/OFF Switch

http://jsfiddle.net/johniehjelm/zAVqU/4/

I took the liberty of doing this ON/OFF switch just to express my love for CSS3. You're free to use this and of course I hoped you learned something.