The Real Feminem, een leuke parodie

16 Mar 2011 18:25 | Geplaatst door Marcel

Boy George heeft ooit een leuke parodie op Eminem gemaakt. De gecensureerde 7″ is wel op youtube te vinden, maar de leukere 12″ niet. Het nummer is uit 2005 ongeveer, en ik vind het erg leuk.

The_Real_Feminem-Swallow_Me (download)
(html5 player)

Boy George heeft ooit een leuke parodie op Eminem gemaakt. De gecensureerde 7″ is wel op youtube te vinden, maar de leukere 12″ niet. Het nummer is uit 2005 ongeveer, en ik vind het erg leuk. The_Real_Feminem-Swallow_Me (download) Your browser…
Read more...

Audio met glans

10 Mar 2011 15:38 | Geplaatst door Marcel

Ik heb in de woonkamer van mijn huis de geluidsuitgang van mijn computer aangesloten op de ingang van de versterker. Dit werkt best aardig, maar ik was nooit erg tevreden over de kwaliteit van het geluid.

Ik heb na wat aarzelen nu een betere geluidskaart gekocht, en een betere kabel.
De geluidskaart is een M-Audio 2496. Dit is een semi-professionele kaart, met 24bit en 96Khz kwaliteit. Het 24bit gedeelte doet niet echt veel, de meeste audiobestanden en cd’s zijn in 16bit gemaakt. Maar er zit wel een veel betere DAC op dan een onboard geluidskaart.

Het grootste verschil komt wel door de geluidskabel. Het is 20 meter kabel, en er lag supergoedkope kabel. Nu heb ik een HQ kabel, wat duidelijk dikker koperdraad heeft.

Het effect is dat mijn muziek nu veel meer glans heeft en helderder en warmer klinkt. Duidelijk een vooruitgang dus.

Ik heb in de woonkamer van mijn huis de geluidsuitgang van mijn computer aangesloten op de ingang van de versterker. Dit werkt best aardig, maar ik was nooit erg tevreden over de kwaliteit van het geluid. Ik heb na wat…
Read more...

Popup contact form in WordPress

10 Mar 2011 11:25 | Geplaatst door Marcel

It is possible to make a contact form that is shown with a popup. You can compare it with a Lightbox popup. There is no plugin in WordPress that does this for you, so I decided to make something myself with some html/css and javascript.

Javascript

First I will show the javascript that makes the popup possible. You can place this code in header.php of your WordPress theme.

<script type="text/javascript">
function show_me() {
document.getElementById('contact_overlay').style.display = 'block';
jQuery('#contact_overlay').animate({opacity:'1.0'}, 1000);
}
function hide_me() {
document.getElementById('contact_overlay').style.display = 'none';
document.getElementById('contact_overlay').style.opacity = '0.0';
}
</script>

You can see that with the calling of the function show_me(), that there’s a div set to display:block, and there’s an animation in jQuery that makes it non-transparent. To have the overlay for only 20% transparent I used as background of the div a half-transparant png.

HTML

The html code can be placed in footer.php, at the end, just inside the body.
Make sure you get the shortcode for Contact Form 7 right. Here there are added some spaces for readability.

<div id="contact_overlay"> <!-- contact form -->
<div id="contact_container">
<div id="contact_popup">
<h3>Contact us.</h3>
<?php echo do_shortcode(' [ contact-form 1 "Contact" ] '); ?>
<div id="contact_close">
<a href="#" onClick="hide_me()">Close <strong>X</strong></a>
</div>
</div>
</div>
</div>

To make the code visible, we place a button or a link in our template, with an onclick event. When you click this link the popup will show.

<div id="contact">
<a href="#contact_" onClick="show_me()"></a>
</div>

CSS

The CSS code is somewhat bigger.

div#contact_overlay
{display: none;
opacity:0.0;
filter:alpha(opacity=0);
height: 1000px;
width: 100%;
position: absolute;
top: 0;
background-image: url('/images/contact_overlay.png');}

div#contact_container
{width: 760px;
margin: 100px auto 0;
position: relative;}

div#contact_popup
{height: 660px;
width: 570px;
padding: 30px 45px 0;
margin: 0 auto;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;}

div#contact_close {
text-align: right;
width: 570px;
height: 30px;
font-size: 1.8em;}

Here you can see that #contact_overlay gets a position:absolute, and falls over the normal document. The top:0 will place it on top.

IE6 – IE8

In IE6 till IE8 the problem is that the transparent png is completely black, and not transparent anymore. This is because IE6 – IE8 has a problem with opacity. If you change the opacity of a transparent png, the transparent part turns black.
You can get around it by using a gif file for IE. I didn’t get it right with a halftransparent gif either, so I resolved to a different solution. I used a gif of 4 pixels, of which 3 are black, and 1 is completely transparent. In a stylesheet that loads for IE6 – IE8 you can add this gif.

It is possible to make a contact form that is shown with a popup. You can compare it with a Lightbox popup. There is no plugin in WordPress that does this for you, so I decided to make something myself…
Read more...

Kwyjibo muziek

28 Feb 2011 22:35 | Geplaatst door Marcel

Ik weet niet precies meer hoe ik er aan kom, maar een aantal jaar geleden kwam ik het tegen op Orkut, Google’s community-site, die nu zo populair is in Brazilie.
Het is muziek van een Nederlander, en het klinkt geweldig. Ik heb begrepen dat hij muziek is gaan maken voor tv-programma’s, en niet zelf door wilde als singer/songwriter. Ik luister er in ieder geval graag naar.
Hier volgen de linkjes:

Kwyjibo – Letting Go (download)
(html5 player)

Kwyjibo – Living Sun (download)
(html5 player)

Kwyjibo – Push Me (download)
(html5 player)

Kwyjibo – So Cool (download)
(html5 player)

Kwyjibo – Where I Belong (download)
(html5 player)

Ik weet niet precies meer hoe ik er aan kom, maar een aantal jaar geleden kwam ik het tegen op Orkut, Google’s community-site, die nu zo populair is in Brazilie. Het is muziek van een Nederlander, en het klinkt geweldig.…
Read more...

Custom search results in WordPress

24 Feb 2011 09:52 | Geplaatst door Marcel

In WordPress it’s easy to use a widget for searching within the website. Often the standard search query suffices. But sometimes you want to refine the search options. This can be done in a simple way by adding extra fields in the form.

The function get_search_form() has standard as output in WordPress 3.0 the next html:

<form role="search" method="get" id="searchform" action="/" >
<div><label for="s">Search for:</label>
<input type="text" value="searchtest" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

The only variable that will be submitted here is “s” with the value of the search query, in this case “searchtest”. However, you can refine it in many ways. For example by only showing posts in the search results. This can be done with the next addition:

<input type="hidden" value="post" name="post_type" id="post_type" />

Here we submit the value “post”. The default value is “any”, meaning, posts, pages, etc.
There are many additions like this. With a var_dump() of the object $wp_query you can see all the default values of the search variables. With a var_dump() of $wp_query->query you can see the current query.

Searchform.php

You can make this set of input-fields the standard search query by adding a searchform.php in your theme directory. The searchform.php can look like this:

<form role="search" method="get" id="searchform" action="/" >
<div><label for="s">Search for:</label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="hidden" value="post" name="post_type" id="post_type" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Each time you call the function get_search_form() you will get the right form.

In WordPress it’s easy to use a widget for searching within the website. Often the standard search query suffices. But sometimes you want to refine the search options. This can be done in a simple way by adding extra fields…
Read more...