Hello friends,I have seen many people(including me ;)) struggling to create a rounded corner box or bubble with an arrow, without using image, Here is the solution for that
/* creates the larger triangle */
.css-bubble:before {
content:"\00a0"; /* This is place a content floating value represents */
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-40px; /* value = - border-top-width - border-bottom-width */
left:300px; /* controls horizontal position */
width:0;
height:0;
border:20px solid transparent;
border-top-color:#ff0000;
}
/* creates the smaller triangle */
.css-bubble:after {
content:"\00a0";
display:block;
position:absolute;
bottom:-26px;
left:300px; /* Used to control horizontal position this should be same as left value for :before class -- */
width:0;
height:0;
border:15px solid transparent;
border-top-color:#ff0000;
}
HTML
<div class="css-bubble">
Your Content Goes here
</div>
var els = document.querySelectorAll("ul li:nth-child(odd)");
We can use selectors to select elements in the document, Selectors can be CSS selectors or similar to Jquery selectors
window.localStorage['value'] = area.value;
We can store data in local database similar to google gears i.e how offline gmail works similar to that we can create many applications easily
var db = window.openDatabase("Database Name", "Database Version");
We can access stored data from local database
db.transaction(function(tx) {tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);});
We can execute SQL queries like above
main.js:
var worker = new Worker(‘extra_work.js');
worker.onmessage = function(event) { alert(event.data); };
extra_work.js:
// do some work; when done post message.
postMessage(some_data);
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
We can show notifications like "allow popup" dialog
We can drag and drop elements using JavaScript without any frameworks or extra js files (this was the feature i was looking for very long time )
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var options = { position: new google.maps.LatLng(lat, lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
}
We can show the use from where the user is logged in using any map service or we can set the locale information according the geolocation
<div itemscope itemtype="http://example.org/band">
<p>My name is <span itemprop='name'>Neil</span>.</p>
<p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
<p>I am <span itemprop='nationality'>British</span>.</p>
</div>
We can differentiate the property of the each span
Posts
