<a href="https://console.cloud.google.com/apis/credentials">Get Your Api Credentials Here</a> <a href="https://calendar.google.com/calendar">Get your Calender ID</a> <?php include_once("wp-load.php"); function get_calender_events() { $params = array(); /*Get current date*/ $current_date = date('Y-m-d H:i:s'); /*Convert it to google calendar's rfc_format */ $rfc_format = date("c", strtotime($current_date)); $params[] = 'orderBy=startTime'; $params[] ='maxResults=100'; $params[] = 'timeMin='.urlencode($rfc_format); $url_param = ''; foreach($params as $param) { $url_param.= '&'.$param; } $calender_id = "calender_id"; $client_key = "client_key"; $url = "https://www.googleapis.com/calendar/v3/calendars/".$calender_id."/events?key=".$client_key."&singleEvents=true".$url_param; $list_events = wp_remote_post($url, ...
Example 1
<!DOCTYPE HTML>
<html>
<head>
<title>Jquery Twitter Style Popup</title>
</head>
<body>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script></head>
<div style="padding-top:100px;text-align: center;">
<a class="popup-link-1"><b>Click me for a popup!</b></a>
</div>
<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>Jquery Twitter Style Popup</h2></div><div class="bottom">This is what we will be making (or maybe what we already have) in this tutorial. If you like this, please share. It really helps!</div></div>
<div id="blackout"></div>
<script>
$(document).ready(function() {
var boxWidth = 400;
function centerBox() {
/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* auto scroll bug */
/* Calculate positions */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;
/* Move stuff about */
$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
return false;
}
$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();
$('[class*=popup-link]').click(function(e) {
/* Prevent default actions */
e.preventDefault();
e.stopPropagation();
/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr('class');
var id = name[name.length - 1];
var scrollPos = $(window).scrollTop();
/* Show the correct popup box, show the blackout and disable scrolling */
$('#popup-box-'+id).show();
$('#blackout').show();
$('html,body').css('overflow', 'hidden');
/* Fixes a bug in Firefox */
$('html').scrollTop(scrollPos);
});
$('[class*=popup-box]').click(function(e) {
/* Stop the link working normally on click if it's linked to a popup */
e.stopPropagation();
});
$('html').click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('.close').click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
});
</script>
<style>
.popup-box {
position: absolute;
border-radius: 5px;
background: #fff;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
}
.popup-box .close {
position: absolute;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
color: #434343;
padding: 20px;
font-size: 20px;
}
.popup-box .close:hover {
color: #000;
}
.popup-box h2 {
padding: 0;
margin: 0;
font-size: 18px;
}
.popup-box .top {
padding: 20px;
}
.popup-box .bottom {
background: #eee;
border-top: 1px solid #e5e5e5;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#blackout {
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
overflow: hidden;
z-index: 9999;
left: 0;
display: none;
}
</style>
</body>
</body>
</html>
Example2.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Reveal Demo</title>
<link rel="stylesheet" href="reveal.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style type="text/css">
body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
</style>
</head>
<body>
<a href="#" class="big-link" data-reveal-id="myModal">
Fade and Pop
</a>
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
Fade
</a>
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="none">
None
</a>
<div id="myModal" class="reveal-modal">
<h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
jquery.reveal.js
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);
-----------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Popup Dialog - Click</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: 5px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.click').click(function(){
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<a class='x' id='x'>×</a>
<p>
Welcome to Aspdotnet-Suresh.com. Please use above search option which was there in top right side to get help with many of articles.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
<div id='container'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> <br/>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Jquery Twitter Style Popup</title>
</head>
<body>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script></head>
<div style="padding-top:100px;text-align: center;">
<a class="popup-link-1"><b>Click me for a popup!</b></a>
</div>
<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>Jquery Twitter Style Popup</h2></div><div class="bottom">This is what we will be making (or maybe what we already have) in this tutorial. If you like this, please share. It really helps!</div></div>
<div id="blackout"></div>
<script>
$(document).ready(function() {
var boxWidth = 400;
function centerBox() {
/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* auto scroll bug */
/* Calculate positions */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;
/* Move stuff about */
$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
return false;
}
$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();
$('[class*=popup-link]').click(function(e) {
/* Prevent default actions */
e.preventDefault();
e.stopPropagation();
/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr('class');
var id = name[name.length - 1];
var scrollPos = $(window).scrollTop();
/* Show the correct popup box, show the blackout and disable scrolling */
$('#popup-box-'+id).show();
$('#blackout').show();
$('html,body').css('overflow', 'hidden');
/* Fixes a bug in Firefox */
$('html').scrollTop(scrollPos);
});
$('[class*=popup-box]').click(function(e) {
/* Stop the link working normally on click if it's linked to a popup */
e.stopPropagation();
});
$('html').click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('.close').click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
});
</script>
<style>
.popup-box {
position: absolute;
border-radius: 5px;
background: #fff;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
}
.popup-box .close {
position: absolute;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
color: #434343;
padding: 20px;
font-size: 20px;
}
.popup-box .close:hover {
color: #000;
}
.popup-box h2 {
padding: 0;
margin: 0;
font-size: 18px;
}
.popup-box .top {
padding: 20px;
}
.popup-box .bottom {
background: #eee;
border-top: 1px solid #e5e5e5;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#blackout {
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
overflow: hidden;
z-index: 9999;
left: 0;
display: none;
}
</style>
</body>
</body>
</html>
Example2.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Reveal Demo</title>
<link rel="stylesheet" href="reveal.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style type="text/css">
body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
</style>
</head>
<body>
<a href="#" class="big-link" data-reveal-id="myModal">
Fade and Pop
</a>
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
Fade
</a>
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="none">
None
</a>
<div id="myModal" class="reveal-modal">
<h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
jquery.reveal.js
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);
-----------------------------------
reveal.css
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
background-color: #FFFFFF;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
Example3
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Popup Dialog - Click</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: 5px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.click').click(function(){
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<a class='x' id='x'>×</a>
<p>
Welcome to Aspdotnet-Suresh.com. Please use above search option which was there in top right side to get help with many of articles.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
<div id='container'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> <br/>
</div>
</body>
</html>
Comments
Post a Comment