CSS: Classes and IDs for applying styles

This entry is part 7 of 26 in the series Basic CSS

Classes and IDs mark certain elements so that you can refer to them in your style sheet.

A class can be applied to multiple selections, whereas an ID uniquely identifies a specific selection.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Classes and IDs</title>
    <style type='text/css'>
        .rock {
            color: red;
        }

        #pop {
            color: navy;
        }
    </style>
</head>
<body>

<h3 class='rock'>The Stone Roses</h3>
<h4 id='pop'>Erasure</h4>

<p class='rock'>Oasis</p>
 
</body>
</html>
Notice we have applied a rock class to both <h3> and <p> tags.

To define a class, we use a . and to define an id, we use #.

jQuery UI & Effects: Toggle class

This entry is part 2 of 10 in the series jQuery UI Effects

jQuery UI Effects – toggleClass Demo

Toggle class(es) on elements while animating with style changes.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - toggleClass Demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            position: relative;
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }

        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('#effect').toggleClass('newClass', 1000);
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='newClass ui-corner-all'>
        Changing from one class to another.
    </div>
</div>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

When you first click on the button, the newClass will be removed.  Clicking on the button again will add the newClass back to the box.

jQuery UI & Effects: Switch class

This entry is part 6 of 10 in the series jQuery UI Effects

jQuery UI Effects – switchClass Demo

Add and remove class(es) to elements while animating with changes in style.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - switchClass Demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            position: relative;
        }

        .newClass {
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            margin: 0;
        }

        .anotherNewClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('.newClass').switchClass('newClass', 'anotherNewClass', 1000);
                $('.anotherNewClass').switchClass('anotherNewClass', 'newClass', 1000);
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='newClass ui-corner-all'>
        Sorry that I have confused you.  I am switching in and out of a class.
    </div>
</div>
<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

Parse & JS: Database table

This entry is part 5 of 25 in the series Parse & Javascript

parse_db

As in the above screenshot, the TestObject is a class in Parse.  In a normal database like MySQL, it will be called a table.  You can always add a class/table by clicking on+New Class.

<!doctype html>
<head>
    <title>My Parse App</title>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' src='http://www.parsecdn.com/js/parse-1.2.17.min.js'></script>
</head>

<body>

<div>
    <div style='display:none' class='error'>
        <h1>Failed to connect to Parse database</h1>
    </div>

    <div style='display:none' class='success'>
        <h1>Successfully connected to parse database and insert a record</h1>
    </div>
</div>

<script>
    Parse.initialize('5d3sro43zBGj8AMYqWND5bFYMzAan7f5P5euZm7M', 'hlRZZqAylA7Fmah4Kk6ma8WK7QCT4cHrxjafnnkI');
    var TestObject = Parse.Object.extend('TestObject');
    var testObject = new TestObject();
    testObject.save({foo: 'bar'}, {
        success: function (object) {
            $('.success').show();
        },
        error: function (model, error) {
            $('.error').show();
        }
    });
</script>

</body>
</html>
Try The Code

The first time you run the above code, the class TestObject will be lazily created.  The first record foo: ‘bar’ will be inserted as well.

The second time you run the code, the second record foo: ‘bar’ will be inserted.

PHP & OOP: Methods of a class

This entry is part 7 of 11 in the series PHP & OOP

In object-oriented programming, the member functions of a class are also called methods of the class.

If you read any literature related to object-oriented programming, you will come across this word frequently.

Look at the following example:

<?php

class PopStar
{
    public $person;
    public $salary;
    public $album;

    public function setSalary()
    {
        $this->salary = 10000;
    }

    public function getSalary()
    {
        echo $this->salary;
    }
}

$star = new PopStar();
$star->setSalary();
echo "The pop star's salary is:";
echo "<br>";
$star->getSalary();

?>

There are 2 methods setSalary() and getSalary() in the above PopStar class.

From the code above, we can say that we are using the method setSalary() to set the salary of the pop star and method getSalary() to get the salary of the star.