Codeigniter Form_Dropdown

CodeIgniter Form_Dropdown

I had a little problem using CodeIgniter’s form_dropdown the other day. Form_dropdown produces an output similar to HTML’s form select option. I was trying to retrieve data queried from a database and display the result in a form. Well, after several test and trials, I finally got the script to work. Here’s how I did it.

Form_Dropdown

The form_dropdown function typically has 3 options. The first option is the fieldname. The second option is the option data usually laid out in an array. The third is the selected data.

form_dropdown(‘name’, array(’1′=>’one’,’2′=>’two’,’3′=>’three’),1);

This produces:

<select name=’name’>
<option value=”1″ selected=”selected”>One</option>
<option value=”2″>Two</option>
<option value=”3″>Three</option>
</select>

CodeIgniter

In CodeIgniter, I have a simple script that stores bookmarks. I categorize my bookmarks using tags. When adding bookmarks, I call on the get_dropdown_tags function in Models to retrieve all the tags and display them in array that I can use with form_dropdown. Here are my CodeIgniter entries.

Controller:

$data[‘tags’] = $this->links_model->get_dropdown_tags();

Models:

function get_dropdown_tags()
{
$tags = $this->db->query(‘select distinct tag from links’);
$dropdowns = $tags->result();
foreach ($dropdowns as $dropdown)
{
$dropdownlist[$dropdown->tag] = $dropdown->tag;
}
$finaldropdown = $dropdownlist;
return $finaldropdown;
}

Views:

In views, I’m simply calling the form_dropdown function using the $tags array passed on by the controller. It’s a pretty neat way to recall data from a database and outputting them in form_dropdown.

<?=form_dropdown(‘tag’,$tags);?>

Finally, a dropdown list that works.

Reference: Clickhere

Media Queries..

Media Queries??? Heard?? me too not yet..lets see whats this, whats in spl and how it works? 😉

what is media queries exactly??

Media Queries is a CSS3 module allowing to adapt the rendering of webpages based on conditions such as screen resolution (e.g. smartphone vs. high definition screen)

Its very simple to implement..just add this code to separate css and link it in your html file..

code:

body:after {
content: “less than 320px”;
font-size: 300%;
font-weight: bold;
position: fixed;
bottom: 60px;
width: 100%;
text-align: center;
background-color: hsla(1,60%,40%,0.7);
color: #fff;
}
@media only screen and (min-width: 320px) {
body:after {
content: “320 to 480px”;
background-color: hsla(90,60%,40%,0.7);
}
}
@media only screen and (min-width: 480px) {
body:after {
content: “480 to 768px”;
background-color: hsla(180,60%,40%,0.7);
}
}
@media only screen and (min-width: 768px) {
body:after {
content: “768 to 1024px”;
background-color: hsla(270,60%,40%,0.7);
}
}
@media only screen and (min-width: 1024px) {
body:after {
content: “1024 and up”;
background-color: hsla(360,60%,40%,0.7);
}
}

youtube link:

Download File:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/

Media Queries for standard devices: Clickhere

Javascript Basics

Hi bloggers..,

Today we will see the javascript basics. :). Even JS supports for windows8 apps too 😉

Learn basics of javascript in w3schools

x=document.getElementById(“demo”)  //Find the element
x.innerHTML=”Hello JavaScript”;    //Change the content
The DOM (Document Object Model) is the official W3C standard for accessing HTML elements.
Onclick of an image..you can change the image also..check the following code:

<html>
<body>
<script>
function changeImage()
{
element=document.getElementById(‘myimage’)
if (element.src.match(“bulbon”))
{
element.src=”pic_bulboff.gif”;
}
else
{
element.src=”pic_bulbon.gif”;
}
}
</script>

<img id=”myimage” onclick=”changeImage()”
src=”pic_bulboff.gif” width=”100″ height=”180″>

<p>Click the light bulb to turn on/off the light</p>

</body>

</html>

To find input text is number or not..use isNaN(x) in js.

The isNaN() function determines whether a value is an illegal number (Not-a-Number).

This function returns true if the value is NaN, and false if not.

isNaN(value)

Variable Declaration:

var x=5;
var y=6;
var z=x+y; //is very similar to normal algebra

JavaScript Data Types

JavaScript variables can also hold other types of data, like text values (name=”John Doe”).

In JavaScript a text like “John Doe” is called a string.

There are many types of JavaScript variables, but for now, just think of numbers and strings.

When you assign a text value to a variable, put double or single quotes around the value.

When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.

Example

var pi=3.14;
var name=”John Doe”;
var answer=’Yes I am!’;
var x                // Now x is undefined
var x = 5;           // Now x is a Number
var x = “John”;      // Now x is a String

Objects:

“Everything” in JavaScript is an Object: a String, a Number, an Array, a Date….

In JavaScript, an object is data, with properties and methods.

Properties and Methods

Properties are values associated with an object.

Methods are actions that can be performed on objects.


A Real Life Object. A Car:

Properties:

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white

Methods:

car.start()

car.drive()

car.brake()

The properties of the car include name, model, weight, color, etc.

All cars have these properties, but the values of those properties differ from car to car.

The methods of the car could be start(), drive(), brake(), etc.

All cars have these methods, but they are performed at different times.

Objects Usage:

You can use objects in the following way..

<html>
<body>

<script>
var person=new Object();
person.firstname=”John”;
person.lastname=”Doe”;
person.age=50;
person.eyecolor=”blue”;
document.write(person.firstname + ” is ” + person.age + ” years old.”);
</script>

</body>
</html>

Learn Javascript from the following websites:

http://www.learn-javascript-tutorial.com/javascript-basics.cfm

http://www.w3schools.com/js/DEFAULT.asp

Bootstrap Twitter CSS Active Navigation

Hey guys,

Are you worried to make active navigation for your webpage link defaultly..instead of mentioning class=”active” statically??

Then its very simple to achieve..Even myself felt fool for not achieving with logic instead went for google 😛

Just add this code in <li> tag like <li code>

code:

<?php if (basename($_SERVER[‘REQUEST_URI’], “.php”) == “members”){

echo ‘class=”active”‘;
} ?>

In total it appears like..

<ul class=”nav nav-pills”>
<li <?php if (basename($_SERVER[‘REQUEST_URI’], “.php”) == “members”){
echo ‘class=”active”‘;
} ?>><a href=”<?php echo base_url().’main/members’?>”>Home</a></li>
<li <?php if (basename($_SERVER[‘REQUEST_URI’], “.php”) == “perffactors”){
echo ‘class=”active”‘;
} ?>><a href=”<?php echo base_url().’main/perffactors’?>”>Performance Factors</a></li>

<ul>

That’s..very simple na.. 😉