RSS

[CSS] Hover in and out to minimize and maximize the details

There is two line code to minimize and maximize the details on hover in and out.

For minimize:

.details{height:25px;overflow:hidden; }

For maximize:

.details:hover{height:100%;overflow:normal;}

Thats it :)

 
Leave a comment

Posted by on January 29, 2014 in css

 

Tags: , ,

[CakePHP] How to join multiple tables within pagination without repetition in CakePHP?

If you have multiple tables and you want them all to be shown in relation with one another without unnecessary repetition, then this post is surely for you.

In the index action, I have $this->paginate() which lists the entries of one table successfully, then I added a second table relating to first one. It works fine in add,edit and view section but on index action, I didn’t get the both arrays side by side as required. For example the desired pattern to fetch is

Array
(
[0] => Array
        (
            [First] => Array
                (
                    [id] => 16
                )

            [Second] => Array
                (
                    [0] => Array
                        (
                            [id] => 12
                            [first_id] => 16
                        )
                    [0] => Array
                        (
                            [id] => 11
                            [first_id] => 16
                        )
                )

 ),
 [1] => Array
        (
            [First] => Array
                (
                    [id] => 17
                )

            [Second] => Array
                (
                    [0] => Array
                        (
                            [id] => 3
                            [first_id] => 17
                        )
                )
        )
)...

Using join inside the $this->paginate array to build conditions didn’t work. As it neither listed the Second table entries nor the unique results rather instead of showing the Second table entries, it listed only those entries having association with Second table (no such entries get listed that have no related records in Second), secondly it repeats the first table records to the number of its related entries in second table (2 repetitions for 1st record in sample array).

Can’t go with an option of fetching First table entries and looping over the second table records to increase the select sql queries manifold and resulting in timeout.

Following are the 3 steps that did the magic.

1) In First Model, simply add the $hasMany relation of First with Second

public $hasMany = array(
‘Second’ => array(
‘className’ => ‘Second’,
‘foreignKey’ => ‘first_id’,
‘dependent’ => false,
‘conditions’ => ”,
‘fields’ => ”,
‘order’ => ”,
‘limit’ => ”,
‘offset’ => ”,
‘exclusive’ => ”,
‘finderQuery’ => ”,
‘counterQuery’ => ”
)
);

2) In First Controller, add the Second Model usage as follows:

public $uses = array(‘First’,’Second’);

3) Finally print $this->paginate() and you will get the desired array.

NTB: In the $hasMany array of First Model, add as many secondary tables as wanted.

All the best with Cake :)

 
Leave a comment

Posted by on January 27, 2014 in cakephp

 

Tags: , ,

[Additional divs in CakePHP]HTML elements horizontal and vertical alignment issue

In cakePHP, the form fields, buttons and links get messed up with a variation of few pixels and the alignment issue couldn’t get fixed through element inspection and additional divs are noticed in the view source of web page. Tried re-structuring, re-styling etc but the issue remains consistent. Then this post is for you. There is a two word fix for it simply add ‘div’=>false to avoid additional div wrapping around html elements.

e.g. <?php echo $this->Form->button(‘Submit’, array(‘type’ => ‘submit’,’class’=>’grey’,’div’=>false)); ?>

This additional div wrapping is an overhead, I felt so far, in a way to customized design. So make sure to add this ‘div’=>false, in your checklist of design debugging in cakephp. All the best with coding in cake :).

 
Leave a comment

Posted by on November 20, 2013 in cakephp

 

Tags: , , , ,

Have to Show -> “Please wait while your file(s) upload”

While uploading files have to show message “Please wait while your file(s) upload” with a gif rotator to keep user awaited in case of large file upload. Not a heavy functional file status uploader is required only file uploading in progress is to be shown. If this is what required then this post is definitely for you.

Well you have an upload button like

< input type="submit" value="Upload" onclick="showRotator();" />

Yes, only add onclick event to show a div that contain a rotator with message to prompt user about the uploading.

< div id=”rotator” style=”display: none;” >< img alt=”” src=”loading.gif” width=”20px” height=”20px” />  Please wait while your file(s) upload.< /div>

And here goes the js function

function showRotator()
{
document.getElementById('rotator').style.display = 'block';
}

Pretty Simple :)

 
1 Comment

Posted by on April 30, 2013 in javascript

 

2012 in review

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

600 people reached the top of Mt. Everest in 2012. This blog got about 2,100 views in 2012. If every person who reached the top of Mt. Everest viewed this blog, it would have taken 4 years to get that many views.

Click here to see the complete report.

 
Leave a comment

Posted by on December 31, 2012 in Uncategorized

 

Playing with WordPress Interface

Being priceless and free at the same time, wordpress is web based application software (content management system CMS), one can use to create flexible, interactive and dynamic website or blogs. More than 60 million user and developers are sharing wordpress home and enjoining being a part of wordpress family. Over thousands of templates and themes are volunteered by wordpress developers for transforming your themes into reality. Hundreds of well equipped developers contributed in developing the core of the CMS and are still there to facilities error fixing.
Want to skin your wordpress blog (weblog)? WordPress theme system is there. Skinning the theme? Yes it’s like look and feel. Only design is changed in wordpress theme that refers to skinning wordpress blog. WordPress theme is flexible enough in the way to not only providing the design and presentation of the website but also the database control over the theme. It’s just a collection of files connected together to build a graphical interface. Template files are the files showing this presentation. Without changing the core files, these template files are there working separately on the basis of hook architecture – the supporting architecture of wordpress. There are number of file types included in the new customized template like php (with naming like *.php), cascading style sheets (named as *.css) and supporting images (*.png, *.gif, *.jpg etc).
One way of learning theme coding in wordpress is to modify the built-in theme Twenty Ten, Twenty Eleven or Twenty Twelve by changing the div placements and adding content there in the theme files. But before digging deep into it some basics like the theme files structure is required. WordPress theme, at least, consists two files index.php (having the template i.e. html) and a style.css (basic theme styles are defined here). If the theme is child type then one style file is sufficient in the theme directory, no template files is then required as the template is inherited from the parent file. Maximum number of files varies as per the requirement. Conventional wordpress site with four main blocks i.e. header, footer, sidebar and main content will have an optimal 6 number of files.
All the built in wordpress themes are contained in wp-content/themes directory. Same directory will be used for placing the custom themes. For creating a theme from scratch, just create your directory, for instance named first_theme, in wp-content/themes/ directory and place the following blank files in the directory: index.php (main file to control display), header.php (top information like menu of the web page that is to be repeated in all web pages), sidebar.php (left or right block content need to be there throughout site), footer.php (bottom content with navigations or copy write related information), functions.php (repeated functionality i.e. php custom functions are defined here), and style.css (as name sound it – all of the site style is residing in this file). And now start tracing the code from any of Twenty Ten, Twenty Eleven or Twenty Twelve and record your experiment.
Let’s move on and play with your theme but don’t forget to mention how you find playing with wordpress interface?
 
Leave a comment

Posted by on October 14, 2012 in wordpress

 

Tags: , , ,

Express Your Theme in WordPress

WordPress is an open source content management system (CMS) providing with blogging services like posts, comments, image galleries, video uploaders, zipping database or extracting files etc. Developed in open source programming language PHP, it offers with number of built in functionalities. Free hosting services are also offered by the host by simply registering the blog and accessing it through wordpress specific unique reference link. Free blog offers with limited set of functionalities like categorizing the posts and managing comments. In order to modify the blog in terms of fulfilling the cause, one has to buy a domain for customization services.
Wordpress can be extended by two ways; either by customizing the functionalities or by modifying the interface or design. Hook architecture is followed in wordpress for customization purpose in order to keeping the code clean, maintained and reusable. Thus it offers a way to modify the functionalities without messing up with the core code of wordpress. For wordpress customization, plugins (modifying the functionality) and theme or template (modifying the interface) is used.
How to display the WordPress site to the users and to the web world, templates are there to meet the purpose. HTML code is generated in the template files by fetching the information from the MySQL Database of the WordPress package and then displaying it in web browser. In single theme, wordpress facilitate the definition of number of templates. Calling pattern and usage of the template is defined in the configuration file.
Wordpress community has contributed a lot by providing the free themes of variable layout with classic color schemes. Click here to download number of unique wordpress themes like Pinboard, Responsive, Esquire, Buttercream, Toolbox, Montezuma, Patchwork, News, Annotum Base, Easel, PageLines etc. Any of the freely available themes can be used by simply downloading and installing the theme and then to explore it with the help of number of articles available.
Varity of learner articles are available at wordpress official site demonstrating the basics like Theme Usage (providing the basic guidelines for installing and using template and themes), Themes Migration (Whenever there is an up gradation by the theme developer or an up gradation in theme version due to the change in wordpress new version, there comes compatibility issues addressed by the theme up gradration tutorials), Developing your own theme (If the available freeware themes are not meeting your need, then you can design and develop your own theme from scratch), Theme Frameworks (Theme inheritance is also supported by wordpress in a way to create a parent theme with overlapping functionalities and then to specify differentiating functionalities in child theme files), Admin theme creation (Admin section i.e. dashboard can be managed by separate theme structure), Theme Compatibility list (Some of the themes are generalize enough to work with all wordpress versions, remaining themes having compatibility issues can be checked by the compatibility list provided) and finally the Theme Review (Submission to the directory handling themes and public release preparation can be learned by the theme review tutorials).
How you find expressing your theme in wordpress?
 
Leave a comment

Posted by on October 14, 2012 in wordpress

 

Tags: , ,

 
Follow

Get every new post delivered to your Inbox.

Join 179 other followers

%d bloggers like this: