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:VCALENDAR\r\nVERSION:2.0\r\nPRODID:https://www.google.com/\r\nBEGIN:VEVENT\r\nUID:https://www.google.com/\r\nDTSTAMP:" + msgData + "Z\r\nDTSTART:" + startDate + "\r\n";

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

icsMSG3 = "SUMMARY:" + title + "\r\nEND:VEVENT\r\nEND: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.

80 jQuery interview questions and answers


shreelimbkar

80jQuery

Below is the list of latest and updated jQuery interview questions and their answers for freshers as well as experienced users. These interview question covers latest version of jQuery which is jQuery 2.0. These interview questions will help you to prepare for the interviews, for quick revision and provide strength to your technical skills.

Q1. What is jQuery?
Ans: jQuery is fast, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client side library and as per a survey it runs on every second website.

Q2. Why do we use jQuery?
Ans: Due to following advantages.

  • Easy to use and learn.
  • Easily expandable.
  • Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
  • Easy to use for DOM manipulation and traversal.

View original post 4,608 more words

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 

jQuery Ajax Tutorial and Example


Before we are going with example let’s read something about jQuery and AJAX.

In this example we are submitting a simple form using AJAX.

To create a form first we are creating a database with name “ajax”.

Create a config file with name config.php.

<?
$dbhost = "localhost";   //replace it with your host name
$dbuser="root";               //replace it with your database username
$dbpassword="";             // replace it with your database password
$dbname="ajax";            // replace it with your database name

mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname);
?> Continue reading