Wednesday, February 29, 2012

jQuery: How to move an element

Sometimes we need to move an element in order to apply a quick-fix or something part of an effect that you want to achieve. Or maybe you are just playing around jQuery and you want to move or transfer an element into another element.

Moving an element using prependTo()

HTML:

<html>
<head>
  <title>Moving an Element using jQuery</title>
</head>
<div id="content">
  <h3>Title</h3>
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div id="footer">
  <p>Footer 1</p>
  <p>Footer 2</p>
</div>
</body>
</html>

jQuery: Select h3 and move inside the #footer as first element.
Note: Make sure to put this above the closing body tag </body>

<script type="text/javascript">
(function(){
  $('h3').prependTo('#footer');
})();
</script>

Result:

<html>
<head>
  <title>Moving an Element using jQuery</title>
</head>
<div id="content">
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div id="footer">
  <h3>Title</h3>
  <p>Footer 1</p>
  <p>Footer 2</p>
</div>
</body>
</html>

Moving an element using appendTo()

HTML:

<html>
<head>
  <title>Moving an Element using jQuery</title>
</head>
<div id="content">
  <h3>Title</h3>
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div id="footer">
  <p>Footer 1</p>
  <p>Footer 2</p>
</div>
</body>
</html>

jQuery: Select h3 and move inside the #footer as last element.
Note: Make sure to put this above the closing body tag </body>

<script type="text/javascript">
(function(){
  $('h3').appendTo('#footer');
})();
</script>

Result:

<html>
<head>
  <title>Moving an Element using jQuery</title>
</head>
<div id="content">
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div id="footer">
  <p>Footer 1</p>
  <p>Footer 2</p>
  <h3>Title</h3>
</div>
</body>
</html>

Note: insertBefore() works similar to prependTo() and insertAfter() works similar to appendTo().

Wednesday, February 22, 2012

A Warm Welcome to you jQuery!

As of now, I am studying how to achieve different basic HTML/CSS manipulation using jQuery.

It seems to be more difficult for people doesn't know yet working on HTML and CSS. Especially on selecting parts of HTML/CSS that you wish to manipulate. It'll be my next post soon, so check it back some time.

Tuesday, February 7, 2012

PHP if / else if / else Statement Example

IF Statement

If an expression is TRUE then execute a statement.

if (expression) {
    statement;
}


Example
$a = 2;
$b = 4;

if ($a < $b) {   echo 'a is smaller than b'; }
Result
a is smaller than b
But what if the expression is FALSE?

IF, ELSE Statement

If an expression is TRUE do this, if FALSE do that.

if (expression) {
    statement;
} else {
    statement;
}


Example
$a = 6;
$b = 4;

if ($a < $b) {   echo 'a is smaller than b'; } else {   echo 'a is not smaller than b'; }
Result
a is not smaller than b
What if you want to check more than one expression?

IF, ELSE IF, ELSE Statement

Testing multiple expression if TRUE then execute default statement if FALSE

if (expression) {
  statement;
} elseif (expression) {
  statement;
} else {
  statement;
}


Example
$a = 4;
$b = 4;

if ($a < $b) {   echo 'a is smaller than b'; } else if ($a == $b) {   echo 'a equals b'; } else {   echo 'a is not smaller than b'; }
Result
a equals b