add custom Events using jQuery

Hello friends,

I have faced a problem of adding a event handler to a control which is not present in my case i need a event which should be triggered after resizing a control for example my div is of size "25px" and resizing the div to "50px" after resizing to "50px" the event should be triggered . I found a solution in jQuery which i have shared below

there is a function called "trigger"(http://api.jquery.com/trigger/) which is used to trigger a event or action 

example 

$(this).trigger("onresize",newsize); //add this statement to your function which resizes your control

$('#mycontrol').bind('onresize', function(e,newsize) {
  alert('your control has been resized to :'+newsize)
});// this is the call on your page instead of function you can also use function name first param will be object "e" others from the trigger function(above) parameters 

Rounded Corner box or bubble

Round Corner bubble with pure CSS

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

CSS

.css-bubble {
position:relative;
padding:15px;
margin:1em 0 3em;
border:5px solid #ff0000;
color:#333;
background:#ff0000;

/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* 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>



Output

Your Content Goes here

Please leave your comments