Web Development Codes, Yii tutorials, PHP codings, Yii widgets, Jquery: Jquery

Friday, 23 August 2013

Side Bar in Yii Framework

Introduction:

In this post I will show you how to put sidebar in Yii framework Web application.

This Sidebar can be displayed on the left or right side of the browser. This slides in on mouse over on the sidebar and slides out automatically when user mouse leaves the sidebar.

Already we have leftsidebar and rightsidebar extensions in Yii framework. But these can be used to display sidebar on either left side or right side of the browser.

But this extension will avoid the use of two different extensions for displaying sidebars on left and right side of browser.

This sidebar can be used to display menu or some other useful things in your application.

Download and Usage Details:

You can download this extension at http://www.yiiframework.com/extension/sidebar/ . For Further Comments Please comment below.

Extract folder to your protected/extensions/ folder.

Example Usage:

You have to specify 'position' to be left or right. If you don't specify it will display in right side.

in Your view file

$this->beginWidget('application.extensions.sidebar.Sidebar',
array('title' => 'Menu', 'collapsed' => true, 
'position'=>'left'));

//here you display a cmenu or gridview or any other 
thing as per your needs.
//or you can simply display contents form variable like below

echo $var;
$this->endWidget();

If you don't specify 'position', Then a right sidebar will be displayed by default. So, if you want a right sidebar then you don't need to specify position in the widget.

Result:

Like below a sidebar will b shown either left or right side of your browser based on 'position'.

Arrow mark as in rightsidebar extension:

You can able to display an arrow mark in your sidebar by just doing some modification the extension. For this do the below steps.

In Sidebar/sidebar.php change the below things

Step 1: Change This,

echo '<div class="title">' ;
echo CHtml::encode($this->title);
echo '</div>';

To,

echo '<div class="title">' ;
        echo CHtml::encode($this->title);
        echo CHtml::ajaxLink('&gt;&gt;', '', false, array('id' =>

 'toggle_left_menu'));     
        echo '</div>';

Step 2: Change This,

echo '<div class="title">' ;
  echo  CHtml::encode($this->title);
        echo '</div>';

To,

echo '<div class="title">' ;
        echo CHtml::encode($this->title);
        echo CHtml::ajaxLink('&gt;&gt;', '', false, array('id' =>

 'toggle_right_menu'));
        echo '</div>';

and in js folder,

Step 3: In leftsidebar.js line 64 change Pin and Hide.
Step: 4 And finally in rightsidebar.css line 61 change float to right.

That is it. Now a arrow mark will be displayed in the sidebar. You can click on the arrow mark to display and again click to hide the sidebars.

I think it is useful to someone.

Saturday, 1 June 2013

How to Use Jquery?

Introduction:

   Jquery is a lightweight JavaScript Open Source library. jQuery is to make it much easier to use JavaScript on your website since it is a Lightweight Component.

jQuery almost simplifies lots and lots of lines in basic javascript and do the same task within a single line. So most of developers use jquery only instead javacsript.
The scope of jquery just not end with javascript task, With this jquery we can do
               ->Ajax calls(with this you can call a PHP page and insert or change data)
               ->DOM (Document Object Model) Manipulation
   ->We can change CSS of the Page
   ->Add Effects to text or images
   ->And lots more
Before Starting to work on this you must know,

HTML
CSS
Javascript

How to use:

Before using Jquery You must have jquery library. You can download it from Jquery.com for free of cost. Then insert it in your html page like you insert your javacsript page that is it. Here i will show you a demo,

<head>
<script src="jquery.js"></script> //this is your downloaded jquery librray
</head>

Syntax:

$(document).ready(function(){
//here goes your jquery functions
});

</script>

$(document).ready(function(): Always we must start to use jquery function within this function. The Reason is we must start functions once our document is fully loaded in the page else it will not be a safe one, It results in unwanted actions.

Examples with explanation:

Let's say we want to hide all <h2> elements in the page. It can be done easily in this jquery.

HTML: <h2>Heading name</h2>

to hide the h2 element You just use this:

$(document).ready(function(){
$("h2").hide(); //this will hide the h2 elements fully
});

The above code hides all h2 elements in the entire page. But if we need to hide only a particular h2 element in the page then we have to use selectors.

What is selector?

Selector is a Class or ID of the particular element. Let me explain with our above h2 example

HTML: <h2 class="classname" id="idname">Heading name</h2>

In this example we have two selectors "classname" (via class) and "idname" (via id).

Note: We have to use classname selector as .classname and idname as #idname in jquery function

Now move to our problem, Our jquery code here hides all h2 elements. We have clear this problem with this selectors help. Here is the trick

$("#idname").hide(); //this will hide elements only with "idname"

$(".classaname").hide(); //this will elements only with "classname".

Other Selectors in Jquery:

$("*")   It selects all elements
$(this)   It selects current element
$("p.intro")   It selects <p> element with 'intro' as classname
$("p:first")   It selects first <p> element in the entire DOM
$("ul li:first")   It selects first <li> element in first <ul>
$("ul li:first-child")   It selects first <li> element in all <ul>
$("[href]")   It selects all element with href as attribute
$("a[target='_blank']")   it selects all links with target value as blank
$("a[target!='_blank']")   it selects all links with target not as blank