devness » Wordpress http://devness.com Just another WordPress weblog Wed, 01 Jul 2009 21:41:37 +0000 http://wordpress.org/?v=2.8 en hourly 1 Forcing Letter Case with CSS and jQuery http://devness.com/2009/06/forcing-letter-case-with-css-and-jquery/ http://devness.com/2009/06/forcing-letter-case-with-css-and-jquery/#comments Tue, 16 Jun 2009 21:49:33 +0000 dmoena http://devness.com/?p=45

Try this two forms. Both force letter case, but only one of them will send to the server exactly what you see (in terms of lower and upper case).

See? Now, let me explain what just happen and how to avoid the first situation.

Explanation

In each form we just force letter casing by using CSS. In this case, inputs with the “upper” class will be upper cased and those with the “lower” class will be lower cased.

.upper {
        text-transform:uppercase;
}

.lower {
        text-transform:lowercase;
}

The problem is that we get only the impression of lower and/or upper case, but we will actually send data cased as the user has entered. This means that even when you see “ABCD” you could actually receive “aBCd” at the server. I know, is not a big deal since you can (and should) force casing at server side, but sometimes you just want to be sure that your data is sent with the propper format.

A solution

So, how to solve this? jQuery (jQuery makes this easier, but you can use plain JavaScript too). You just need to add this code (plus the previous CSS one) to intercept any form submit, force propper and effective data casing and then continue with the sumbit process.

<script type="text/javascript">
        $(document).ready(function(){
                $("form").submit(function(){
                        $(this).find(".upper").each(function(){
                                $(this).val(String($(this).val()).toUpperCase());
                        });

                        $(this).find(".lower").each(function(){
                                $(this).val(String($(this).val()).toLowerCase());
                        });
                });
        });
</script>

Simple, but useful in case you are working with casing.

]]> http://devness.com/2009/06/forcing-letter-case-with-css-and-jquery/feed/ 4 Livegets: update any WordPress Widget in real time http://devness.com/2009/06/livegets-update-any-wordpress-widget-in-real-time/ http://devness.com/2009/06/livegets-update-any-wordpress-widget-in-real-time/#comments Mon, 15 Jun 2009 21:43:54 +0000 dmoena http://devness.com/?p=34 wordpress-logo

hello world! -not too original, but I had to do it- Let me tell you about Livegets. What is it? Well, Livegets is a Worpress plugin for enabling real time updates for any Wordpress widget. Any widget? Any.

Why? Because real time widget update would be useful for visitors to know what is happening at any time in your blog.

Picture this: a visitor is reading an specific post at your site and you add a new one. Without Livegets, your visitor will probably leave the site if the current post is the lastest at the time he/she arrives. Now, with Livegets he/she will know there is a new post and will probably visit it.

Another example? Think about a “Top 10 Something” widget. Would be great to offer real time updates, don’t you think?

Installation

Livegets installation is divided into two steps: plugin installation as any other plugin and an small modification of a Wordpress core file… I know it sounds painfull, but is really simple.

Lets start with the “core” part. For this, we need to modify just one file ir order to fully integrate Livegets to your Wordpress installation. The file we need to edit is located into wp-includes and it’s named “widgets.php”.

Its modification is pretty simple: just locate dynamic_sidebar function (around line 433 for Wordpress 2.7.1 and 808 for 2.8) inside of “widgets.php” and find this code (line 477 and 855 respectively)

if ( is_callable($callback) ) {
    call_user_func_array($callback, $params);
    $did_one = true;
}

once you have it, change the previous code for this one

$widgets = explode(",",get_option("livegets"));
if ( is_callable($callback) ) {
        if(in_array($id,$widgets)){ ?>
                <script type="text/javascript"> widgets.push("<?php echo $id; ?>"); </script>
                <script type="text/javascript"> widgets_name["<?php echo $id; ?>"] = "<?php echo get_option($id."_updated_text"); ?>"; </script>
                <span id="<?php echo $id; ?>"><?php
        }
        call_user_func_array($callback, $params);
        if(in_array($id,$widgets)){ ?>
                </span><?php
        }
        $did_one = true;
}

Livegets Config

Plugin installation is like the usual thing: decompress livegets into the Wordpress’ plugin directory. Just be sure the final plugin route is like “…/plugins/livegets/livegets.php”.

Once activated, you will see Livegets Configuration options as part of Wordpress’ Settings, just like in the example image.

We are done! Now you just need to select the widgets that will be real time widegts or Livegets and fill its updated text if you want it. After that, Livegets plugin and jQuery will do the rest.

Oh, one more thing! Choose only those widgets which worth to make Livegets, that means, those that reports some kind of “last activity” – last comments, last posts… – otherwise, you will be stressing out your server and bandwith for no reason.

Demo

You can simulate an update for the “Recent Posts” widget by clicking right here. What you see -or will see- is only a jGrowl notification, but when it happens for real, you can see the widget actually updated and you are enable to visit the new event(s) if you want to.

Restrictions

At this time, I found problems with themes where widget’s content is manipulated after being sent. For instance, when you use JavaScript to create rounded corners. So, check this before you use it.

Download

You can download this plugin right here.

Finally

If you find any kind of error, please let me know. The better way is probably by leaving a comment…

]]> http://devness.com/2009/06/livegets-update-any-wordpress-widget-in-real-time/feed/ 9