Setting attribute disabled on a SPAN element to prevent click events

I have a SPAN element which does something on a click event.

When I disable it, using jQuery:

$("span").attr("disabled", true);

The event handler continues to be called when I click on the span element.

T o prevent click event, you can try this:

$("span").css("pointer-events", "none");

you can enabled those back by

$("span").css("pointer-events", "auto");

Generate and Download .ics file for an event using jQuery

Here is the code to generate and download the .ics file for an event using jQuery.

var todayDate	= new Date();
var msgData	= todayDate.toISOString();
var startDate	= e.start.toISOString();
var endDate	= e.end.toISOString();

var icsMSG1 = "BEGIN:VCALENDARrnVERSION:2.0rnPRODID:https://www.google.com/rnBEGIN:VEVENTrnUID:https://www.google.com/rnDTSTAMP:" + msgData + "ZrnDTSTART:" + startDate + "rn";

var icsMSG2 = '';
if(endDate != '') {
    icsMSG2 = "DTEND:" + endDate +"rn";
}

icsMSG3 = "SUMMARY:" + title + "rnEND:VEVENTrnEND:VCALENDAR";

icsMSG = icsMSG1 + icsMSG2 + icsMSG3;

$('.test-ics').click(function(){
    window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
});

and, add this line in your html code

<div><a class="test-ics">Add to Calendar</a></div>

replace e.start with your event start date & time
replace e.end with your event end date & time
replace title with your event title

Add onClick event on form input with multiple checkbox

To add a javascript onclick event on a form input with multiple checkbox, use this alternative method:

$options = array(); 
foreach($roles as $value => $label) { 
  $options[] = array( 
    'name' => $label, 
    'value' => $value, 
    'onClick' => 'showDiv(this)' 
  ); 
} 
echo $form->input('Role', array('options' => $options, ...)); 

But why use inline javascript? You could do this with one line of mootools:

$('input[id^=ModelRole][type=checkbox]').addEvent('click', showDiv);
(replace 'Model' with the name of your model)

And I’m sure it’s just as easy (or easier) in jQuery or other frameworks.

Floating Header: Scroll Effect using HTML,CSS,JQuery

Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading