onwebdev

jQuery: curtain effect on slideshows

noreply@blogger.com (Gabriele Romanato) — Mon, 20 Feb 2012 09:41:00 +0000

jQuery Easing is a fantastic plugin, surely one of my favorites. Today I've created a nice curtain effect on a jQuery slideshow that I'd like to share with you. Let's see the details.

The markup

Our slideshow only requires the addition of an element with two empty elements inside:

<div id="slider">
 <div id="slider-wrapper">
  <div class="slide">
   <h2>Slide 1</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 2</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 3</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 4</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 5</h2>
   <p>Lorem ipsum dolor.</p>
  </div>


 </div>
 <div id="slider-panels">
  <div id="slider-panel-left"></div>
  <div id="slider-panel-right"></div>
 </div>
</div>

These panels will be our curtains.

The CSS

The additional empty element must be absolutely positioned on the top of all other slideshow elements:

#slider {
 width: 500px;
 height: 300px;
 margin: 4em auto;
 font: 90% Arial, sans-serif;
 position: relative;
 overflow: hidden;
 border: 5px solid #666;
}

#slider-wrapper {
 width: 2500px;
 height: 300px;
 position: relative;
}

div.slide {
 width: 500px;
 height: 300px;
 background: #ccc;
 text-align: center;
 float: left;
}

div.slide h2 {
 font-weight: normal;
 padding: 2em 0 0 0;
 margin: 0;
}

div.slide p {
 margin-top: 0.3em;
}

#slider-panels {
 width: 500px;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
}

#slider-panel-left {
 width: 250px;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
 background: #222;
}

#slider-panel-right {
 width: 250px;
 height: 300px;
 position: absolute;
 top: 0;
 right: 0;
 background: #222;
}

Our panels are exactly 250 pixels wide, that is, the half of their container.

The jQuery code

We'll use an object to properly wrap all the logic behind our slideshow. First, we need to declare all the required properties:

var Slider = new function() {

 var slider = document.getElementById('slider'),
  slides = $('div.slide', slider),
  wrapper = $('#slider-wrapper', slider),
  leftPanel = $('#slider-panel-left', slider),
  rightPanel = $('#slider-panel-right', slider),
  index = -1,
  timer = null;
        
        // continues
}();

Since we're going to zero the widths of the panels, we need a method to reset their widths:

var reset = function() {
 
  leftPanel.width(250);
  rightPanel.width(250);
 
 
};

Now we can create our sliding effect on panels:

var slidePanels = function() {
 
  leftPanel.animate({
   width: 0
  }, 1000, 'easeOutBounce');
  
  rightPanel.animate({
   width: 0
  }, 1000, 'easeOutBounce');
 
 
 
};

Then we need to create an automatic and cyclic effect on all slides, so we basically need to initiate our timer:

var autoSlide = function() {
 
  timer = setInterval(function() {
  
   index++;
   
   reset();
   
   if(index == (slides.length -1)) {
   
    index = -1;
   
   
   }
  
   var slide = slides.eq(index);
   
   wrapper.animate({
    left: - slide.position().left
   }, 0, function() {
   
    slidePanels();
   
   
   });
  
  
  }, 2000);
 
 
 
};

Finally, a public method to kick things off:

this.init = function() {
 
  autoSlide();
 
 
};

We can use our object as follows:

$(function() {

 Slider.init();


});

You can see the demo below.

Demo

Live demo

Download

ZIP file

WordPress is for blogging: any other use is a costly mistake

noreply@blogger.com (Gabriele Romanato) — Sat, 18 Feb 2012 11:37:00 +0000

I don't understand why most web agencies tend to use WordPress as a catch-all for every project they work on. In short, WordPress is a CMS designed to manage blogs or blog-like web sites. WordPress was not designed to manage e-commerce sites, communities or even newsletter or file downloads. The more the task diverges from the original design, the more it's likely that your project will fail or, if you're lucky and patient, need continuous assistance for bug fixing, maintenance and plugin customization. You'll probably end up with a disappointed and angry client and a significant increase of your budget costs. You don't deserve this.

Let's speak honestly: we use WordPress because it's easy to set up, not because is the best tool we can use. We should use more robust frameworks, such as Zend, when the required tasks are actually complex. The point is that WordPress is a full-box where you can code only in the way WordPress allows you to do, not in the way you really want to.

We need more control over our actions so that when the sky falls down we're sure that it's only our fault and we can start finding a solution instead of testing and exhausting all the possible causes without having a clue.

Because when WordPress fails it's hard to track down the case zero where everything started. It might be a wrong rewrite rule, an incorrect permission, an SQL error or what? Further, we can find help only on forums, mailing lists, blogs or simply reading carefully the documentation. Are we sure that we'll find a good solution? No.

When you force WordPress to do something it was not designed for, you're actually raising the percentage of a possible failure of the whole CMS. And don't be tempted to rely on plugins to accomplish the tasks your site needs: plugins are not a good solution, because you don't actually know what your client will ask in the future. Is it possible to find the right plugin for every feature your client wants now, tomorrow, the next month and so on? How many plugins will you have to install? And how WordPress will handle tons of plugins?

The point is simple: WordPress is designed to handle blogs. All other possible uses are actually an unknown scenario.

WordPress: Timthumb vulnerability fix

noreply@blogger.com (Gabriele Romanato) — Thu, 16 Feb 2012 19:24:00 +0000

If you're viewing the above screenshot on your site with Chrome, your site has been compromised by the Timthumb vulnerability. The best thing you can do is to follow the instructions provided below.

What's happened?

Your WordPress theme uses an outdated version of the Timthumb library. By exploiting this vulnerability, most of the JavaScript files of your theme (and also some core JavaScript files used by WordPress) have been tainted with malicious code (appended at the end of each file). Also, the cache of your theme might contain malicious code in some PHP files.

What can I do?

To fix the Timthumb vulnerability, download and use the Timthumb Vulnerability Scanner plugin.
Replace your compromised theme files with a clean copy.
Upgrade or restore your WordPress installation.

Finally, you have to notify Google that now your site is safe again. Use the Reconsider site functionality provided by Google.

jQuery: Observer Pattern on slideshows

noreply@blogger.com (Gabriele Romanato) — Thu, 16 Feb 2012 06:50:00 +0000

I've just finished to work on an interesting jQuery/WordPress project (you can find it here) where I had to build an interactive slideshow very similar to a classic jQuery slot machine in its inner functioning. The only problem was to keep track of the visibility of the slides, that is, being sure that the current slide was visible. This is a fantastic use case for the Observer Pattern.

Let's take a sample slideshow:

<div id="slideshow">
    <div id="slideshow-wrapper">
        <div class="slide one">One</div>
        <div class="slide two">Two</div>
        <div class="slide three">Three</div>
        <div class="slide four">Four</div>
        <div class="slide five">Five</div>
 </div>
</div>
<div id="watch"></div>

with a couple of CSS styles used to make it work:

#slideshow {
    width: 500px;
    height: 300px;
    margin: 2em auto;
    position: relative;
    overflow: hidden;
    border: 0.5em double #aaa;
}

#slideshow-wrapper {
    width: 2500px;
    height: 300px;
    position: relative;
    background: #222;
}

div.slide {
    float: left;
    width: 500px;
    height: 300px;
    background: #ccc;
    text-align: center;
    font-size: 1.5em;
    line-height: 300px;
}

div.two, div.four {background: #ffc;}

div[rel="visible"] {
    font-size: 5em;
}

When the slideshow moves from right to left, obviously the current slide is visible. We can attach a custom attribute to the current slide so that we're sure that it's visible:

var watch = function(element) {
    
   element.attr('rel', 'visible').siblings().removeAttr('rel');
  
   $('#watch').text(element.text() + ' is ' + element.attr('rel'));    
    
};

Then we have to call this method only when the slideshow change its position:

var slideTo = function(element) {
    
    wrapper.animate({
        left: - element.position().left
    }, 2000);
    
};

var watch = function(element) {
    
   element.attr('rel', 'visible').siblings().removeAttr('rel');
  
   $('#watch').text(element.text() + ' is ' + element.attr('rel'));    
    
};


var autoSlide = function() {
    
    timer = setInterval(function() {

        index++;
        
        if(index == slides.length) {
         
              index = 0;            
            
        }
        
        var slide = slides.eq(index);
        
        slideTo(slide);
        watch(slide);

    }, 2000);        
    
};

Since we've set the following styles on a particular slide whose rel attribute is set to visible:

div[rel="visible"] {
    font-size: 5em;
}

the font size of the current slide is increased as well. You can see the demo below.

Demo

Live demo (with code on jsFiddle)

CSS generated content tutorial

noreply@blogger.com (Gabriele Romanato) — Fri, 10 Feb 2012 11:18:00 +0000

In this article I'll discuss some possible uses of generated content. Generated content is a powerful feature of CSS. Before going on, I'd like to explain what generated content is not.

Let's take a look at the following picture.

The picture depicts a puppy dog puppet. Of course this is not a real puppy, but only an abstraction. By the same token, generated content is not real content but only an abstraction. More precisely, generated content doesn't exist in the document tree nor is parsed with the rest of the document. We can say, in other words, that generated content is only pseudo-content. For example, when we insert a string through generated content, the text inserted is not selectable. That's why generated content lives only in the style rules.

Inserting generated content

Generated content can be inserted before and after the real content of an element through the :before and :after pseudo-elements, respectively. To represent them, we can use the following fictional markup.

<p>
<before>Start</before>
Real content
<after>End</after>
</p>

And our CSS will be:

p:before {
 content: "Start";
}
p:after {
 content: "End";
}

onwebdev

jQuery: curtain effect on slideshows

The markup

The CSS

The jQuery code

Demo

Download

WordPress is for blogging: any other use is a costly mistake

WordPress: Timthumb vulnerability fix

What's happened?

What can I do?

jQuery: Observer Pattern on slideshows

Demo

CSS generated content tutorial

Inserting generated content

Inserting strings and special characters

Inserting images

Inserting attribute values

Inserting counters

Adding counters to elements

Nested counters

Styles of counters

Image slideshow with jQuery UI effects

The markup

The CSS styles

The jQuery code

Demo

Download

WordPress: the_post() in depth

CSS reset considered evil

Alternatives to CSS hacks

The Box Model hack

The Tan hack

The Star-HTML hack

CSS soup: hacks drawbacks

A different approach

WordPress: compact posts

WordPress: how the eShop plugin works

eShop structure

Shopping cart

jQuery: slot machine slideshow

Demo

Download

CSS: a web standard in context

Content and formatting: two separate objects

No more tag soup

The CSS invention

The benefits of web standards

Compatibility

Device independence

Accessibility

Code maintenance

Search engines indexing

A new philosophy

CSS counters tutorial

Adding counters to elements

Nested counters

Styles of counters

jQuery: serialize a form as a JSON object

CSS: better styling for code blocks

The markup

General styles

Creating indentations

Adding a vertical scrollbar

WordPress: use a post title as a thumbnail overlay

jQuery: AJAX contact form for WordPress

CSS: create layouts with table values

The navigation menu

The sub-header

The post title

Download

WordPress: publish a tweet as a post

CSS: how to style form elements

The markup

General styles

Adding some padding to the form

Fieldset and legend

Creating centered rows

Input and label

Select