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().

Posted at 11:02 PM 0 comments
Labels:

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.

Posted at 11:09 PM 0 comments

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
Posted at 7:55 PM 0 comments
Labels:

Sunday, January 15, 2012

How to Use, Add or Apply CSS (Cascading Style Sheets) to HTML

Using and Applying Cascading Style Sheets:

Using External Style Sheets 
<link rel="stylesheet" type="text/css" href="style.css" />
Using <style> tag 
<style type="text/css">
h1, p {
  margin: 0;
}
h1 {
  font-size:35px;
  color: blue;
}
p {
  color: red;
}
</style>
And using style attribute 
<p style="color: green"> This text is green </p>
Posted at 7:41 AM 0 comments
Labels:

Friday, January 13, 2012

Excel Quick Tip: Useful encoding Hotkeys you must know

Using mouse really speed up excel tasks, but these simple hotkeys speeds up even more if used correctly.

Enter - enters information and move cell downward
Shift+Enter - enters information and move cell upward
Ctrl+Enter - enters information and stays on the same cell
Tab - enters information and move cell to the right
Shift+Tab - enters information and move cell to the left

You can try and test below, type and use hotkeys above.

Posted at 9:24 PM 0 comments
Labels:

Thursday, January 5, 2012

Understanding Cascading Style Sheets (CSS) Selectors

Without selectors, CSS properties cannot be applied. As basic knowledge of a Cascading Style Sheets (CSS), selectors are used to select elements or tags, classes and id's inside HTML page so that they can be styled.

Note: # selects id and . selects class


Example 1. Select all a tag under id of footer, and set color to green.

Syntax 
#footer a {
  color:green;
}
Description
Selector Property Value
#footer a color green
HTML 
<div id="footer">
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">help</a></li>
  </ul>
</div>
Example 2. Select h1 tag having class of small, and set font-size to 17px.

Syntax 
h1.small {
  font-size:17px;
}
Description
Selector Property Value
h1.small font-size 17px
HTML 
<div id="content">
  <h1>Welcome!</h1>
  <h1 class="small">to my website</h1>
  <p>Let's talk about css selectors</p>
</div>
CSS Rule Specificity

In CSS the more specific the selector, the higher precedence it has.

Below, the first rule selects all h1 tag, and set font-size to 35px. But the second rule selects specifically h1 having class of small, that sets font-size into a value of 17px. So, h1.small selector is more specific than h1, as result, it overrides font-size: 35px and use font-size: 17px. 
h1 {
  font-size:35px;
  color: blue;
}
h1.small {
  font-size:17px;
}
HTML and CSS Example

Here's a quick and simple html which is based on examples above that you can practice and explore CSS using selectors you want. 
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector</title>
<style type="text/css">
/* --- css here --- */
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">help</a></li>
  </ul>
</div>
<div id="content">
  <h1>Welcome!</h1>
  <h1 class="small">to my website</h1>
  <p>Let's talk about css selectors</p>
</div>
<div id="footer">
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">help</a></li>
  </ul>
</div>
</body>
</html>
Posted at 6:54 AM 0 comments
Labels:
Subscribe to: Posts (Atom)