iPhone 5 Will Cost You at Least $1,800

You might have heard that

Buy an iPhone 5 From $199
Buy online and get free shipping.
Or visit your favorite Apple Retail Store.

Here's the Info-graphic which shows that iPhone 5 Can Cost You at Least $1,800!

JQuery Treeview List

JQuery Treeview List - Creates a nice expanding and collapsing tree view control using jQuery.



Tree view Displays a hierarchical collection of labeled items, each represented by a TreeNode. This you'll normally see in windows or MAC folder navigation.

Today I am making it in JQuery for ul, li list.

---

Basic HTML Markup

---

[html]
<ul>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li><a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
[/html]

We just created a normal list formation in hierarchical way.

---

Now lets add some styling - CSS

---

[css]
.tree {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
border-color: #BFC0C2 #BFC0C2 #B6B7BA;
border-radius: 3px 3px 3px 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17), 0 -2px 0 rgba(0, 0, 0, 0.08) inset;
display: inline-block;
margin: 0 0 50px;
min-width: 300px;
padding: 10px 15px 15px;
}
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
content: "";
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
[/css]


In css we are making tree nodes usinf :before

Last we will add jquery functionality to toggle the list on click events.

---

JQuery

---

[js]
$('.tree li').each(function(){
if($(this).children('ul').length > 0){
$(this).addClass('parent');
}
});

$('.tree li.parent > a').click(function(){
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
[/js]

Here first we search for all parent nodes and if found then we are adding a class named as .parent

Then on click of any parent elements, we just add a class .active and slide the li's in it.

This can be used to show the navigation of the website.

Collection of Special iPhone Meta Tags

I am not an iPhone developer nor a user but just found some special meta tags for developing iPhone webapps and iPhone prove websites. Hope this helps you.
 
Disable horizontal scrolling

---

[html]
<meta name="viewport" content="width=device-width, user-scalable=no" />
[/html]

---

  
When bookmarked the website runs in fullscreen, like a normal App.

---

[html]
<meta name="apple-mobile-web-app-capable" content="yes" />
[/html]

---

  
When bookmarked as fullscreen, set the color of the status bar

---

[html]
<meta name="apple-mobile-web-app-status-bar-style" content="black">
[/html]

---

  
When bookmarked, add an 57x57 Icon and the iPhone will add the shiny effect itself.

---

[html]
<link rel="apple-touch-icon" href="icon.png" />
[/html]

---

  
Prefer non glossy Icon or made the gloss yourself? Precomposed stops from adding the gloss on bookmarks

---

[html]
<link rel="apple-touch-icon-precomposed" href="icon" />
[/html]

---

  
Remove auto-recognition of Phone numbers

---

[html]
<meta name="format-detection" content="telephone=no">
[/html]

---

  
Forces the iPhone to use a number pad

---

[html]
<input type="number">
[/html]

---

  
Guess what? A phone number keypad

---

[html]
<input type="tel">
[/html]

---

  
Keyboard optimized for typing urls.

---

[html]
<input type="url">
[/html]

---

 

Credits : Robert