Friday, 29 March 2013
Monday, 11 March 2013
Sunday, 10 March 2013
social media links
http://www.chinadaily.com.cn/cndy/2012-07/02/content_15541067.htm
http://www.saintylaw.com.au/wp-content/uploads/2012/02/social_media_september_2011.pdf
http://hiring.monster.com/hr/hr-best-practices/workforce-management/employee-performance-management/social-media-at-work-us.aspx
http://www.optimum7.com/internet-marketing/social-media/social-networking-in-the-corporate-world.html
http://www.optimum7.com/internet-marketing/social-media/social-networking-in-the-corporate-world.html
http://www.saintylaw.com.au/wp-content/uploads/2012/02/social_media_september_2011.pdf
http://hiring.monster.com/hr/hr-best-practices/workforce-management/employee-performance-management/social-media-at-work-us.aspx
http://www.optimum7.com/internet-marketing/social-media/social-networking-in-the-corporate-world.html
http://www.optimum7.com/internet-marketing/social-media/social-networking-in-the-corporate-world.html
Saturday, 9 March 2013
v5
css
***************************************************
#light-box {
box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
-webkit-box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
-moz-box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
display:none;z-index:99999;position:absolute;border:solid 5px #ffffff
}
#light-box img{
/* max-width:500px;max-height:500px*/
}
#modal-div{
z-index:9999;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}
#dvImgClose {
background: url(http://wn7x64-37c16bs.blr.amer.dell.com/en/widgetfiles/ed28fe6f19b540688dc33c6ff4195ef8/d/fancy_close.png?m=634981602706435601);
width: 30px;
height: 30px;
float: left;
position: absolute;
margin-top: -21px;
right: -22px;
cursor:pointer;
}
******************************************
js
***************************************
jQuery(document).ready(function($) {
$('.Lightbox').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
//Append the popup div to body
$('body').append('<div id="light-box"></div><div id="modal-div"></div>');
//Add the closed image div
var img = '<div id="dvImgClose"></div><img id="modal-img" src="' + image_href + '" />';
//Fill the popup with images
$('#light-box').html(img);
//Put the popup at center of screen
$('#light-box').center();
//Show the transparent div behind the popup
$('#modal-div').show();
$('#light-box').show('slow');
$('#dvImgClose').live('click',function(){
closePop();
});
$('#modal-div').live('click',function(){
closePop();
});
$('#modal-img').live('click',function(){
$(location).attr('href',this.src);
});
});
});
$.fn.center = function () {
$('#light-box #modal-img').css("max-width",$(window).width()*0.63);
$('#light-box #modal-img').css("max-height",$(window).height()*0.63);
var heightRatio = ($(window).height() != 0) ? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0) ? this.outerWidth() / $(window).width() : 1;
this.css({
position: 'fixed',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
var closePop = function () {
$('#light-box').html('');
$('#light-box').hide();
$('#modal-div').hide();
}
***********************
HTML
*********************
if (isLightBox) {
this.data.html = this.data.html.replace("<a ", "<a class='Lightbox'");
}
***************************************************
#light-box {
box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
-webkit-box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
-moz-box-shadow:2px 2px 27px 6px rgb(73, 68, 68);
display:none;z-index:99999;position:absolute;border:solid 5px #ffffff
}
#light-box img{
/* max-width:500px;max-height:500px*/
}
#modal-div{
z-index:9999;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}
#dvImgClose {
background: url(http://wn7x64-37c16bs.blr.amer.dell.com/en/widgetfiles/ed28fe6f19b540688dc33c6ff4195ef8/d/fancy_close.png?m=634981602706435601);
width: 30px;
height: 30px;
float: left;
position: absolute;
margin-top: -21px;
right: -22px;
cursor:pointer;
}
******************************************
js
***************************************
jQuery(document).ready(function($) {
$('.Lightbox').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
//Append the popup div to body
$('body').append('<div id="light-box"></div><div id="modal-div"></div>');
//Add the closed image div
var img = '<div id="dvImgClose"></div><img id="modal-img" src="' + image_href + '" />';
//Fill the popup with images
$('#light-box').html(img);
//Put the popup at center of screen
$('#light-box').center();
//Show the transparent div behind the popup
$('#modal-div').show();
$('#light-box').show('slow');
$('#dvImgClose').live('click',function(){
closePop();
});
$('#modal-div').live('click',function(){
closePop();
});
$('#modal-img').live('click',function(){
$(location).attr('href',this.src);
});
});
});
$.fn.center = function () {
$('#light-box #modal-img').css("max-width",$(window).width()*0.63);
$('#light-box #modal-img').css("max-height",$(window).height()*0.63);
var heightRatio = ($(window).height() != 0) ? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0) ? this.outerWidth() / $(window).width() : 1;
this.css({
position: 'fixed',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
var closePop = function () {
$('#light-box').html('');
$('#light-box').hide();
$('#modal-div').hide();
}
***********************
HTML
*********************
if (isLightBox) {
this.data.html = this.data.html.replace("<a ", "<a class='Lightbox'");
}
Wednesday, 6 March 2013
V4
jQuery(document).ready(function($) {
$('.Lightbox').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
$('body').append('<div id="light-box"></div><div id="modal-div"></div>');
var img = '<div id="dvImgClose"></div><img src="' + image_href + '" />';
$('#light-box').html(img);
$('#light-box').center();
$('#modal-div').show();
$('#light-box').fadeIn();
$('#dvImgClose').live('click',function(){
$('#light-box').html('');
$('#light-box').hide('slow');
$('#modal-div').hide();
});
});
});
$.fn.center = function () {
var heightRatio = ($(window).height() != 0)
? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0)
? this.outerWidth() / $(window).width() : 1;
this.css({
position: 'fixed',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
////////////////////////////////////////////
#light-box {
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
display:none;z-index:99999;position:absolute;border:solid 5px #ffffff
}
#light-box img{
max-width:500px;max-height:500px
}
#modal-div{
z-index:9999;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}
#dvImgClose {
background: url(http://wn7x64-37c16bs.blr.amer.dell.com/en/widgetfiles/ed28fe6f19b540688dc33c6ff4195ef8/d/fancy_close.png?m=634981602706435601);
width: 30px;
height: 30px;
float: left;
position: absolute;
margin-top: -21px;
right: -22px;
cursor:pointer;
}
////////////////////////////////////////////////
<p><a class="Lightbox" href="/cfs-file.ashx/__key/communityserver-discussions-components-files/4680/5241.Chrysanthemum.jpg"><img border="0" alt=" " src="/resized-image.ashx/__size/550x250/__key/communityserver-discussions-components-files/4680/5241.Chrysanthemum.jpg" /></a></p>
<p>This is non-light</p>
<p><a href="/cfs-file.ashx/__key/communityserver-discussions-components-files/4680/1778.Penguins.jpg"><img border="0" alt=" " src="/resized-image.ashx/__size/350x350/__key/communityserver-discussions-components-files/4680/1778.Penguins.jpg" /></a></p>
<p> again one Light box</p>
<p><a class="Lightbox" href="/cfs-file.ashx/__key/communityserver-discussions-components-files/4680/8345.Penguins.jpg"><img src="/resized-image.ashx/__size/150x0/__key/communityserver-discussions-components-files/4680/8345.Penguins.jpg" border="0" alt=" " /></a></p>
Tuesday, 5 March 2013
Good code Light box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" ></script>
<script language="javascript">
$(document).ready(function () {
$('body a').click(function (event) {
event.preventDefault();
PreviewImage($(this).attr('href'));
});
});
PreviewImage = function (uri) {
//Get the HTML Elements
imageDialog = $("#dialog");
imageTag = $('#image');
// debugger;
/////////////////MY CODE////////////////////
/////////////END MY CODE////////////////////
//Split the URI so we can get the file name
uriParts = uri.split("/");
//Set the image src
imageTag.attr('src', uri);
//When the image has loaded, display the dialog
imageTag.load(function () {
//debugger;
var imgWidth = imageTag[0].naturalWidth;
$('#dialog').dialog({
modal: true,
resizable: true,
draggable: false,
width: imgWidth + 10,
title: uriParts[uriParts.length - 1]
});
$('#transDiv').show();
});
}
</script>
</head>
<body>
<div id="dialog" title="An Image!" style="display: none;border:solid 5px #c8c8c8;">
<img id="image" src=""/>
</div>
<div id="transDiv" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#c8c8c8;display:none"></div>
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
<a id="image2"
href="http://shannaro.files.wordpress.com/2009/04/explosion.jpg">
<img src="http://shannaro.files.wordpress.com/2009/04/explosion.jpg" height="100" width="100" /></a>
<a id="image3"
href="http://thefuturebuzz.com/pics/icanhascheezeburger/technician%20cat.jpg">
<img src="http://thefuturebuzz.com/pics/icanhascheezeburger/technician%20cat.jpg" height="100" width="100" /></a>
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
jksfkjf fdsfa fdsfa df fdsf fdsaf f df df f fd ff adf df df fdsfa ds fd sfd <br />
</body>
</html>
Sunday, 3 March 2013
JJ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<head>
<style>
#wrapper {
width:600px;
margin:0 auto;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
background:#fff;
border:1px solid #ccc;
padding:25px;
border-top:none;
box-shadow:0 0 5px #ccc;
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
text-align:left;
}
#LightBoxOuter {
position:absolute; /* keeps the lightbox window in the current viewport */
top:0;
left:0;
width:100%;
height:100%;
background:url(overlay.png) repeat;
text-align:center;
z-index:999;
}
#LightBoxOuter p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#LightBoxOuter img {
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:600px;
border:solid 5px #ffffff;
}
#lightBoxImg
{
z-index:9999;
}
#LightBoxOuter #closeDiv #closeImg
{
width:20px;height:20px;background-color:red;float:right;
}
#LightBoxOuter #closeDiv
{
width:600px;
}
</style>
<script language="javascript">
jQuery(document).ready(function ($) {
$('.Lightbox').click(function (e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
$('body').append('<div id="LightBoxOuter"onclick="closePop(this);" style="display:none;"><div id="closeDiv"><div id="closeImg"></div></div><div id="lightBoxImg"></div></div>');
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightBoxImg').html().length > 0) { // #lightbox exists
//place href as img src value
$('#lightBoxImg').html('<div style="background:red;width:auto"><img src="' + image_href + '" /></div>');
//show lightbox window - you could use .show('fast') for a transition
$('#LightBoxOuter').fadeIn();
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightboxContent = '<img src="' + image_href + '" />';
//insert lightbox HTML into page
$('#lightBoxImg').html(lightboxContent);
$('#LightBoxOuter').fadeIn();
}
});
/*
//Click anywhere on the page to get rid of lightbox window
$('#LightBoxOuter').live('click', function () { //must use live, as the lightbox element is inserted into the DOM
debugger;
$('#LightBoxOuter').hide();
});
*/
});
function closePop(obj) {
$(obj).fadeOut(200);
}
</script>
</head>
<body>
<a class='Lightbox' href="C:\Users\banka\Desktop\19012013177.jpg"><img style="width:200px;height:200px" src="C:\Users\banka\Desktop\19012013177.jpg" /></a>
</body>
kk
#wrapper {
width:600px;
margin:0 auto;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
background:#fff;
border:1px solid #ccc;
padding:25px;
border-top:none;
box-shadow:0 0 5px #ccc;
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
text-align:left;
}
#lightbox {
position:fixed; /* keeps the lightbox window in the current viewport */
top:0;
left:0;
width:100%;
height:100%;
background:url(overlay.png) repeat;
text-align:center;
z-index:9999;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:600px;
border:solid 5px #ffffff;
}
#lightbox #closeDiv #closeImg
{
width:20px;height:20px;background-color:red;float:right;
}
#lightbox #closeDiv
{
width:600px;
}
*********************************************************
jQuery(document).ready(function($) {
$('.Lightbox').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
$('body').append('<div id="lightbox" style="display:none"><div id="closeDiv"><div id="closeImg"></div></div><div id="lightBoxImg"></div></div>');
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightBoxImg').html().length > 0) { // #lightbox exists
//place href as img src value
$('#lightBoxImg').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn();
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightboxContent = '<img src="' + image_href +'" />';
//insert lightbox HTML into page
$('#lightBoxImg').html(lightboxContent);
$('#lightbox').fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});
});
*******************************HTML****************
var LightBox = true;
if (LightBox) {
this.data.html = this.data.html.replace("<a ", "<a class='Lightbox'");
}
editor.selection.setContent(this.data.html);
Saturday, 2 March 2013
LightBx2
<!DOCTYPE html>
<html>
<head>
<title>Super Simple lightbox Window</title>
<style>
body {
margin:0;
padding:0;
background:#efefef;
text-align:center; /* center div in IE */
for ie div centering, reset in wrapper */
}
#wrapper {
width:600px;
margin:0 auto;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
background:#fff;
border:1px solid #ccc;
padding:25px;
border-top:none;
box-shadow:0 0 5px #ccc;
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
text-align:left;
}
#lightbox {
position:fixed; /* keeps the lightbox window in the current viewport */
top:0;
left:0;
width:100%;
height:100%;
background:url(overlay.png) repeat;
text-align:center;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:940px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Super Simple lightbox Window</h1>
<p>Our super simple lightbox window demo. Here are the image links:
<ul>
<li>
<a href="http://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">
Picture 1
</a>
</li>
<li>
<a href="http://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">
Picture 2
</a>
</li>
<li>
<a href="http://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">
Picture 3
</a>
</li>
</ul>
</p>
</div> <!-- #/wrapper -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').show();
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});
});
</script>
</body>
</html>
lightbx
<html>
<head>
<title>Quick Simple Light Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
body
{
font-family: Helvetica, Arial;
}
.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}
.box
{
border:solid 3px #c3c3c3;
position:absolute;
top:20%;
left:30%;
width:auto;
height:auto;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}
.close
{
float:right;
margin-right:6px;
cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.lightbox').click(function () {
$('.backdrop, .box').animate({ 'opacity': '.50' }, 300, 'linear');
$('.box').animate({ 'opacity': '1.00' }, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
$('.close').click(function () {
close_box();
});
$('.backdrop').click(function () {
close_box();
});
});
function close_box() {
$('.backdrop, .box').animate({ 'opacity': '0' }, 300, 'linear', function () {
$('.backdrop, .box').css('display', 'none');
});
}
</script>
</head>
<body>
<h1>This is my webpage...</h1>
<a href="#" class="lightbox"><img src="1358175821_472985884_1-Urgent-Sale-of-Samsung-Galaxy-Mini-Phone-SAS-Nagar.jpg" /></a>
<div class="backdrop"></div>
<div class="box"><div class="close">X</div><img src="1358175821_472985884_1-Urgent-Sale-of-Samsung-Galaxy-Mini-Phone-SAS-Nagar.jpg" /></div>
</body>
</html>
Subscribe to:
Posts (Atom)