Tag Archives: jQuery

jQuery .submit() trigger problem

4 Replies

Recently I experience the following problem, when I call this code it triggers an error in FireBug:

$('input[name="s"]').parents('form').submit();

With “human” words: I trired to find a input with a spefic name, then find the form wrapping this input and try to submit it. Strangely, but it trows an error in jQuery lib.
Continue reading →

CakePHP ajaxed pagination and sort

16 Replies

Here I will describe how I did an Ajaxed pagination for one of my projects using jQuery and Livequery Plugin. Currently I am working on a huge project which, hopefully, will feed me with some ideas for blog posts and this is one of them :). So:

1. Loading the javascript libs

Loading the jQuery and Livequery was done by Autoloader helper, but if you don’t use it just include jQuery and Livequery in your layout with following code

<?php
echo $javascript->link('jquery.min');
echo $javascript->link('plugins/jquery.livequery');
?>

Continue reading →

5 useful jQuery plugins which saved me a lot of work

6 Replies

Recently I was working on some projects which required some advanced techniques. Sometimes you should stop thinking how to make it with HTML and CSS, and just to do it with good JavaScript code.

So far, all of these plug-ins were forced because of design decisions, but anyway important here is the plug-ins and the great job which they doing. So:

jScrollPane

jScrollPane is a jquery plug-in which allows you to replace the browsers default vertical scroll bars on any block level element with an overflow:auto style. You can easily control the appearance of the custom scroll bars using simple CSS.

I have use it because the designer decided to show the content in a size of business card, and the client of course wanted to provide as many information as he could. If course this one could be done with single line of code: overflow: scroll; in the css definition, but this way you cannot control the appearance of the scroll bar, so from the design point of view it was unacceptable.

Anyway, the plug-in is really rich of features, and really easy to be used. It requires some other plug-ins, for full capacity, but it is good.

jQuery pager plug-in

It’s a plug-in which transform long pages into paged area. To be fair, this is what the client wanted as interface – paged content based on paragraphs. Unfortunately the content includes also the bullet lists which are problematic with it. The plug-in provide ability to set up the appearance, i.e. putting your own labels on the pager links and height of the area.

Dimensions

This plug-in give the ability to know the width, height and position of an element in the page. I’ve wrote about it in my previous post, and although it’s not used in the new design it’s really handy.

Silky smooth marquee

In the same project I was asked to implement a news ticker /who uses such things these days, anyway :)/. So, standard marquee tag was, just ok, but it is not smooth enough. This plug-in does exactly this – making the scroll smooth and the text more readable.

and the last but not least

jQuery validation plug-in

As the name says this plug-in provide a form validation. The good thing is that it’s “validate as you type”. So it could mark field as invalid instantly when you insert more than required chars or enter an invalid email.

Well, not a rocket science, but at least they are helpful 🙂 Hope this post helps someone.

Fixing Dead Centre approach with jQuery

1 Reply

I was worked on a centred project design of a website. When I met such requirement I’ve always used Dead Centre approach.

Unfortunately I’ve noticed that when the content is larger than the screen the top-left corner is not visible. In that current project the logo of the site was exactly on that place, so it’s really confusing.

I had to solve this issue in order to satisfy the clients requirements. So, I’ve used jQuery to sort this out.

You can see the difference in these 2 examples:

Resize your browser window in order to see the difference.
How it’s working?

First of all there are 2 javascript includes:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>

After this there is a function which track the size of the screen and the content.

<script type="text/javascript">
        /*Track height and width of the window and the content*/
        function resize(){
            if($(window).height() < $('#content').height()){
                $('#horizon').css('top', '0px');
                $('#content').css('top', '0px');
            } else {
                $('#horizon').css('top', '50%');
                $('#content').css('top', '-'+($('#content').height()/2)+'px');
            }
            if($(window).width() < $('#content').width()){
                $('#content').css('left', ($('#content').width()/2)+'px');
            } else {
                $('#content').css('left', '50%');
            }
        }
       
        //Bind events on resize
        $(document).ready(function(){
            resize();
        })
        $(window).bind("resize", function(){
            resize();
        });
    </script>

The explanation of the code:
I am using jQuery plugin named jQuery Dimensions Plugin 1.1 which extract the proper dimensions of the boxes.
The function checking if the content screen is bigger than the window size, if so it change the CSS in order to fit properly. I guess that you can see the logic easily. So, no more explanations here.

Hope this will help someone.