Erik van de Ven Webdesign & Development

Show Flickr photos in Awkward Showcase slideshow

only media — Fri, 16 Sep 2011 13:09:15 +0000

Always wanted to show y0ur Flickr photos in a slideshow? Without requesting a Flickr API code? In this tutorial I will show you how to do that, by making use of the Awkward Showcase jQuery slideshow plugin and some jQuery code. Click on the demo button to watch the demo. If you don’t want to create your own slideshow by following this tutorial, you can also download the source files by clicking on the download button.

Demo Download

The first thing you have to do is downloading the jQuery library an dthe Awkward Showcase plugin. If you’re using WordPress, there’s a big chance you don’t have to include jQuery. You can just try it without including the jQuery library. If the slideshow isn’t working, you can always include the jQuery library anyway.

Include the jQuery library and Awkward plugin between the tags:

Bottom page jQuery slide box

only media — Mon, 12 Sep 2011 13:12:55 +0000

Curious how to create such awesome slide box as on mashable.com? In this tutorial I will explain to you how to create such awesome slide-box, to improve the page views on your website. The slide box will trigger people to read another article, recommended by you! Read the article below to create the slide box by yourself. Or watch how it works, by pushing the demo button in the sidebar on the right side of this website. You can also download the source, by pushing the download button on the right side.

Demo Download

So earlier this week I was searching for a solution to get such a lovely slide box as mashable.com shows on their website, on every article page. It slides in from the right when you read the last part of the article. You can see the slide box if you open an article page on mashable.com and scroll to the comment part of the page. Then the slide box will slide-in at the bottom right position of the page.

After a lot of searching and “googling” I came on this website, where Mary Lou shows how it’s possible to make such awesome slide box. So, thanks Mary Lou!

First we need to decide from which part of the page we want the slide box to slide-in. At the end of the article? At the end of the comment-list? If you want to show the box when the visitor is at the end of the article, you can give the last paragraph (

) an id like “last”. See the code below:

Page where you want to show the slidebox (I use single.php in WordPress)

Some paragraph text

But when you use WordPress it’s kind annoying to give every last paragraph an id. And you need the id, to tell jQuery after which paragraph the slide box has to show up. So what I did, was identifying the last paragraph by putting p:last-child in the jQuery code. And that works fine with the latest browsers, which is most important, don’t you think? If you don’t know what I mean, just read further. It will be obvious after I showed the jQuery code.

The next thing we have to do is creating the html code of the slide box. So how the slide box has to look like and which information it has to contain. See the code below for an example.

Page where you want to show the slidebox (I use single.php in WordPress)


    Read next
    close

So, now we’ve created the html for the slide box and we “marked” a point from which height the slide box has to appear (from the p with id “last”). The next thing we have to do is announcing the JavaScript files. For the slide box we’re using jQuery of course, so we have to include the jQuery library. Also we include the effects.js, which we gonna create later. You can place the code below between the head tags in your index file. Or if you are using WordPress, you can place the code in the header.php file. If you are using WordPress, there’s a great chance you don’t have to include the jQuery library, because it’s already included. So first try without the library and if it doesn’t work, then you can include the jQuery library.

index.php (or header.php in WordPress)

The last thing you have to do, to get the slide box working, is creating the jQuery code. As you can see in the code below, the code just checks or you already are at the paragraph with id “last”. If so, it slides in the slide box. You can copy and paste the code below in the effects.js file.

effects.js

$(document).ready(function () {
    $(function() {
        $(window).scroll(function(){
            var distanceTop = $('p#last').offset().top - $(window).height();

            if  ($(window).scrollTop() > distanceTop)
                $('#slidebox').animate({'right':'0px'},300);
            else
                $('#slidebox').stop(true).animate({'right':'-430px'},100);
        });
        $('#slidebox .close').bind('click',function(){
            $('#slidebox').stop(true).animate({'right':'-430px'},100, function(){
                $('#slidebox').remove();
            });
            return false;
        });
    });
});

And last but not least, you can add some styles to the slidebox. See the stylesheet below.

stylesheet (style.css in WordPress)

#slidebox{
    width:350px;
    height:125px;
    padding:10px;
    background-color:#ffffff;
    position:fixed;
    bottom:0px;
    right:-380px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow: 0 4px 10px #555555;
}
#slidebox span{
    font-size: 0.9em;
    padding-bottom: 5px;
    text-transform: uppercase;
}
#slidebox h2{
    font-size: 1.0em;
}
#slidebox .next-article{
    margin-top: 5px;
}
#slidebox .next-article a{
    display: inline-block;
}
#slidebox .close{
    background: url(close-card.png) no-repeat;
    display: block;
    height: 15px;
    margin: 3px;
    float: right;
    width: 16px;
    text-indent: -99999px;
}
#slidebox .close:hover{
    background:transparent url(close-card.png) -16px 0px no-repeat;
}
#slidebox strong{
    display: inline-block;
    color: #000000;
    font-family:"Verdana";
    font-size:1.2em;
    margin-left: 10px;
    vertical-align: top;
    max-width: 240px;
}

So, now everything should be working fine. I hope everything is clear now and it helps you to create a nice slide box. I’m sorry for my bad English but I try the best I can to share my jQuery experience with you all.

If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Get HTML5 working in Internet Explorer

only media — Tue, 03 May 2011 14:20:07 +0000

Are you using HTML5 already? And it does not work in Internet Explorer 7 and 8? That’s because Internet Explorer 7 and 8 don’t support HTMl5. But there’s a workaround with Javascript, I will explain that to you.

There’s a workaround to get HTML5 working in Internet Explorer 7 and 8. Communitymx has posted a solution online

Paste the following code between the head tags

The code creates an element of every html5 tag (which is indicated at the “html5elements” variable). From now on you can style those tags also with CSS, IE7 and IE8 will recognize those.

IMPORTANT: Because IE7 and IE8 don’t recognize those HTML5 tags officially, they do not know or a tag is a block or inline-element. So you have to give them those styles with CSS.

Floating social media buttons

only media — Thu, 08 Jul 2010 08:25:18 +0000

Lots of people ask how to get a floating menu of social media buttons like on mashable.com (or as you can see on the left side of this page), I will explain that to you in this tutorial.

The first thing you need to do is including the jQuery library on your WordPress website. If you have installed WP-Cycle or Lightbox (or another plugin that contains jQuery) you already have jQuery included on your WordPress website. If you do not have any plugin that contains the jQuery library and you don’t know how to include the jQuery library on your webpage, then go to this page.

The next thing you have to do is implementing the menu, you want to get floating on your web page (in our case those are the widget buttons). See the code below for an example.

The wrapper in the code above is necessary! This prevents the menu from going to the absolute left of the web page (when it gets the class fixed). The content div is where I put my text (like this tutorial) in. The position relative of the content div is very important, this prevents the buttons from moving. This means that the buttons just stay where the are, no matter what resolution you have. The next thing you have to do is putting the following css code in your stylesheet:

/* Important! Give the content div a position relative */
#content{
 position: relative;
}
#share_buttons_single_page img{
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}
#share_buttons_wrapper {
 left:-120px;
 position: absolute;
 margin-left: 35px;
 width: 280px;
}
#share_buttons_single_page{
 position:absolute;
 text-align: left;
 margin: 0 0 10px 15px;
}
#share_buttons_single_page.fixed {
 position: fixed;
 top:20px;
}
#share_buttons_single_page .wdt_button{
 float:left;
 clear:left;
 margin-bottom: 10px;
}

On my website the css style above works fine, but in your case it could be you have to change some values like left and such. The last thing you have to do is putting the code below between the head tags in header.php (this is the header.php file in your theme folder). But watch out! You have to put it AFTER the wp_head which includes the other head elements of WordPress. Don’t you know what I mean? I mean AFTER the code as you can see below:

If you put the following code (see the code below) below the wp_head (as you can see above) than everything will be working fine. So the last thing you have to do is adding the following code:

So, now everything should be working fine. As you can see in the code above, I used msie6 to check or the browser which the visitor is using, is not Internet Explorer 6. I did this because Internet Explorer 6 does not support position:fixed.

I hope everything is clear now and it helps you to create a floating menu like on this web page. I’m sorry for my bad English but I try the best I can to share my jQuery experience with you all. I could explain everything in Dutch, but I guess the most of you will not understand anything of that.

If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Bigger avatar picture in your Comment list

only media — Thu, 03 Jun 2010 07:58:02 +0000

Dear visitors,
In this short tutorial I explain to you how to make your avatar pictures (in you comment lists), bigger without getting blurry. Sometimes you change the size of the images, by using CSS. That will do the job, if you don’t want to use avatar pictures, larger then 32×32 pixels. If you do want to use larger pictures then 32×32 pixels and you will resize them using css to, let’s say to 50×50 pixels, you will get a blurry effect (see the below image).

Ok, the only thing you have to do is opening comment-template.php (which you can find in the folder wp-includes), and change row 1422. On this row you will find the folliwing code:


$defaults = array('walker' => null, 'max_depth' => '', 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all',
 'page' => '', 'per_page' => '', 'avatar_size' => 60, 'reverse_top_level' => null, 'reverse_children' => '');

The only thing you have to do is changing the avatar_size, to a size which you want to use for your avatars. So if you want to use an avatar of 60×60 pixels, just change 32 to 60. It’s not possible to use pictures like 32×60 pixels. Well, that is possible, but only if you use also CSS, but that will not give a very nice effect.

If you do want to use css to change some values or something of the avatar image, you have to use the following class:

.commentlist li img.avatar{
border: 3px solid #FFFFFF;
position:relative;
left:-45px;
top: 40px;
}

As you can see in the code above, I gave my avatars a nice white border and a relative position. I thought the white border would be nice. Anyway, good luck with this tutorial. If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Create an Archive Page in WordPress

only media — Fri, 16 Apr 2010 09:02:20 +0000

In this tutorial I explain to you how to make an archive page for your wordpress blog. An archive page allows readers to quickly browse your blog and find what they’re looking for. There are many plug-ins which allows you to create an archive page for your wordpress blog, very easily. A disadvantage of this solution is that you could have problems with the version of wordpress you have and such. So why should we use a plug-in to create an archive page for us, when it’s so easy to create an archive page by our selfs? In this tutorial I explain to you how to create an archive page by yourself.

Templates

WordPress allows you to create a template page, so it’s possible to create a PHP or HTML page by yourself and show it on one of your wordpress pages, so this is what we’re going to do. If you want to create a template, the only thing you have to do, is putting the following code in the top of your PHP document:

Let’s get started

Ok, the first thing we’re going to do is creating a new .php page in your theme folder (wp-content/themes/your-theme). The next thing you have to do is putting the following code in the top of that document:

So now we’ve created a template, the next thing we are going to do is putting the rest of the code in that document.
Copy the code as shown below and paste it in your new document.

As you see I made two paragraphs, one with News and one with Projects, this is because I needed an archive page with only the news and project articles, apart. So if you want, you can skip one of those.

The last thing you have to do, is log in the admin panel of you wordpress website. Then you create a new page and you choose for a template, as you see there’s a new template in that list, called Archive page, select that template and save the page. Now you’re done. If you don’t know how to choose a template in a new page, then look at the image below:

If you did it right, you will get a archive page something like this
if you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Using the More Tag on WordPress Pages

only media — Wed, 14 Apr 2010 09:03:02 +0000

If you try to use the “more” tag on any page other than your blog’s homepage, you’ve probably noticed that it doesn’t work. In this tutorial, I show you a really simple way to enable the use of the “more” tag on other pages in your WordPress blog.

You may have noticed that if you have more than one page on your blog that shows posts, the more tag only works on one of those pages. Well I’ve got the solution, if you are interested then you can go to meetingpoint.erikvandeven.com for a small demonstration. If you look at the Nieuws page of that website and the Projecten page, then you’ll see that both pages have the Read more link.

It appears that WordPress uses a variable called $more that says or you are already using the more tag on a webpage. The solution to this problem is incredibly simple, just add the written below code on the page where you want to use the more tag again.

To use the more tag correctly in the content you place on a page, you have to it above the_content, and then you will get this:

If this post was helpfull to you,or if you still have problems with the more tag, please let me know by posting a comment below.

How to use WP-Cycle

only media — Fri, 09 Apr 2010 13:44:41 +0000

The WP-Cycle plugin allows you to upload images from your computer, which will then be used to generate a jQuery Cycle Plugin slideshow of the images.

Each image can also be given a URL which, when the image is active in the slideshow, will be used as an anchor wrapper around the image, turning the image into a link to the URL you specified.

In this tutorial I’m going to explain you how to use the WP-Cycle plugin in WordPress.

The first thing you have to do is download and installing the WP-Cycle Plugin, from this page. Now be sure you’re logged in the wordpress admin panel of your website and go to Plugins, and open the settings page of the WP-Cycle plugin (as shown below).

Now just upload 2 images like I did in the image above and don’t forget to fill in the Rotator DIV ID setting, just enter a name like slideshow. Now click on Save Settings and close the window.

The next thing you have to do is opening a PHP file where you want to put your slideshow, let’s say in the header. So open the header.php in your content folder (/wp-content/themes/YOUR-THEME/header.php) and put this code on a place where you want to put your slideshow:

NOW REMEMBER!! If you want to put a div around the wp-cycle, do not use a div with the same ID as you filled in the settings of the WP-Cycle Plugin (in our case that’s slideshow). Because the plugin puts a div with that name around the slideshow by itself. So if you want to put another div around it, give it an id like header or something.

So, we’re almost done… But if you look good, the slideshow doesn’t look that good in Internet Explorer if you use a background image like me (see my header on this page), to fix that you have to do the following, open up your httpdocs folder, surf to this path: /wp-content/plugins/wp-cycle/ and open wp-cycle.php.

In wp-cycle.php, change these lines (row 438 till 446 in wp-cycle.php):

jQuery(document).ready(function($) {
$("#").cycle({
fx: '',
timeout: ,
speed: ,
pause: 1,
fit: 1
});
});

To this:


jQuery(document).ready(function($) {
$("#").cycle({
fx: '',
timeout: ,
speed: ,
cleartypeNoBg: true
});
});

As you see we added cleartypeNoBg: true, this is for Internet Explorer, if you don’t add this line you’ll see an ugly background in your slideshow (it’s a bug from Internet Explorer).
Also we deleted the pause: 1 and fit: 1, because in my opinion they don’t do anything good to the slideshow, my slideshow stuttered but deleting those lines it fixed the problem.

So, now we’re done and everything is working fine… But if you still have some problems with styling your slideshow like I did, then you have to read further because I’ve got the solution. The wp-cycle plugin adds styles in the index.php, as you all know the styles in the index.php overrides the stylesheet styles. So what you have to do: Go to the wp-cycle folder in the plugins folder of your wordpress blog and open wp-cycle.php. Now scroll to the bottom of that file and delete the following code

margin: 0; padding: 0;
overflow: hidden;

So now we’re finally done. If this post didn’t help you out or you still have problems with the WP-Cycle plugin, don’t hesitate to put your question in a comment below, then I’ll try to help you out.

How to move your wordpress blog

only media — Tue, 30 Mar 2010 14:56:31 +0000

There are lots of webpages where people explain to you how to move your wordpress blog to another domain, but most of those solutions aren’t complete or they just doesn’t work.
That’s why I’m going to explain you how to move your wordpress blog, I’ve tested this solution personally so don’t be afraid, this will work.

So if you want to move your wordpress blog to another domain or subdomain, follow the instructions below.

5 steps to move your WordPress blog

First you have to make a back-up of your wordpress database, you can do that by pressing export in your PHPMyAdmin and export it to a file.
The next thing you have to do is exporting all your wordpress files to the new domain and import the exported wordpress database file in the new PHPMyAdmin.
Run the SQL queries shown below. So, now you moved the database and webfiles to the new location, you have to change some things in the database. WordPress saves your domain on several places in their database. So you have to change those values, you can do this by running the sql queries as shown below.

UPDATE wp_posts SET post_content = REPLACE(post_content,"www.old-domain.com","www.new-domain.com");

UPDATE wp_posts SET guid = REPLACE(guid,"www.old-domain.com","www.new-domain.com");

UPDATE wp_options SET option_value = REPLACE(option_value,"www.old-domain.com","www.new-domain.com");

UPDATE wp_postmeta SET meta_value = REPLACE(meta_value,"www.old-domain.com","www.new-domain.com");

So, now you’re done with moving your wordpress blog. If you still have problems with visiting some webpages on your blog, you have to do the following:
- Log in the wordpress admin panel of your wordpress blog.
- Go to Settings.
- Now just click on Save Changes.

If you still have problems you can ask me by posting a comment below, ofcourse.
I hope you find this post usefull and it helped you like it helped me.
If you find this post usefull, share it by facebook, twitter and/or buzz and help other people with moving there wordpress blog!

UPDATE: An extra tip: You can also export all your content (pages, posts, comments etc.), using the export tool (Menu -> Tools -> Export). Maybe that’s easier for the people who don’t know how to use the above queries. After that you only have to place a new WordPress installation on the new server or domain, import your theme, import your content and installing the plug-ins you used before. Good luck!

Welcome

only media — Fri, 26 Mar 2010 13:36:40 +0000

Hello and welcome to my weblog! My name is Erik v/d Ven and I’m a MBO (Vocational Education or Community College) level 4 student IT-manager at the ROC in Eindhoven (The Netherlands), I just finished my final exams and expect to graduate in the end of June. In my leisure time, I’m quite busy with building websites for almost 4 years. I’m studying new design styles, SEO (Search engine optimization) and ofcourse Programming languages like PHP, HTML, CSS, MySQL and the framework JQuery, continuously (in my leisure time ofcourse).

After I graduate, I want to follow an HBO education in webdesign. I’m not sure about which school exactly, but I’m convinced that I want to make a career in the web business.

In the future I’ll post more articles about my new projects and ofcourse tutorials and tips about SEO, JQuery, PHP, HTML, CSS and MySQL. So do you wanna know as much about webdesign as mee? Then this is the right website for you! I hope you enjoy my website.