you are here: codestackercodes [RSS]leozera [RSS]

image-free tag shape

preview: http://playground.deaxon.com/css/tag-shape/

<!doctype html>
<title>Image-free tag shape</title>
<style>
  ul {list-style:none}
  a {
    float:left;
    margin-right:8px;
    padding:2px 7px 3px 19px;
    font:700 .7em "lucida grande", arial, sans-serif;
    color:#3d5295;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(255,255,255,.5);
    border-radius:0 .4em .4em 0;
    background:
      -moz-linear-gradient(
        -45deg,
        transparent 50%,
        #d0daf7 50%
      ),
      -moz-linear-gradient(
        45deg,
        transparent 50%,
        #d0daf7 50%
      ),
      -moz-linear-gradient(
        #d0daf7,
        #d0daf7
      );
    background:
      -webkit-gradient(
        linear,
        0 0, 100% 100%,
        color-stop(.5,transparent),
        color-stop(.5,#d0daf7)
      ),
      -webkit-gradient(
        linear,
        0 100%, 100% 0,
        color-stop(.5,transparent),
        color-stop(.5,#d0daf7)
      ),
      -webkit-gradient(
        linear,
        0 0, 100% 0,
        from(#d0daf7),
        to(#d0daf7)
      );
    background-repeat:no-repeat;
    background-position:0 0, 0 100%, 10px 0;
    background-size:10px 53%, 10px 50%, 100% 100%;
    -moz-padding-start:14px;
    -webkit-mask-image:-webkit-gradient(
      radial,
      11 50%, 2.9, 11 50%, 3,
      from(transparent),
      to(rgba(0,0,0,1))
    )}
</style>
<ul>
  <li><a href=.>icon</a>
  <li><a href=.>48px</a>
  <li><a href=.>free</a>
</ul>

link to a pdf and specify the zoom

full reference here: http://www.rdpslides.com/psfaq/FAQ00050.htm

<a href="/uploads/document.pdf#zoom=100&page=3">
  Open PDF on Page 3 with 100% Zoom
</a>

rails inspired helpers in javascript

var link_to = function (text, url, options) {
  var link = document.createElement('a');
  link.textContent = text;
  link.setAttribute('href', url);

  for (option in options) {
    link.setAttribute(option, options[option]);
  }

  return link;
};

var image_tag = function (alt, src, options) {
  var image = document.createElement('img');
  image.setAttribute('alt', alt);
  image.setAttribute('src', src);

  for (option in options) {
    image.setAttribute(option, options[option]);
  }

  return image;
};

link_to("Google", "http://google.com", { id: 321, title: "Google" });

image_tag("Google", "http://www.google.com/images/logos/ps_logo2.png", { id: "logo", title: "Google's Logo" });

iOS volume-style popup in Mobile Safari

preview: http://cl.ly/4AK4

<style>
div#popup {
        background-color: rgba(0,0,0,.5);
        border-radius: 10px;
        color: #ffffff;
        font-weight: bold;
        font-family: Arial;
        height: 160px;
        line-height: 50px;
        margin: 0 auto;
        text-align: center;
        text-shadow: 0px 1px 0px #000000;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        width: 160px;
}
</style>

<li id="toggle">
        <a href="#">button <!--activates the popup--> </a>
</li>

<div id="popup" style="display: none">Popup...</div> 

<!--popup script must be placed below the DIV--> 
<script> 
        $("#toggle").click(function () {
        $("#popup").fadeIn("fast");
        $("#popup").delay(3500).fadeOut();
});
</script> 
<!--/popup script--> 

human-reader timestamp

<?php
function renderTime($timestamp){
        $seconds = floor(time() - $timestamp);
        if($seconds < 60){                                                                                      
                return "A moment ago";
        }else if($seconds < 3600){      // Seconds in an hour
                if($seconds < 120){
                        return "1 minute ago";
                }else {
                        return ceil($seconds/60) . " minutes ago";
                }                                                                                                                       
        }else if(ceil(($seconds/60)/60) < 24){  // Hours in a day
                if(floor(($seconds/60)/60) == 1){
                        return "1 hour ago";
                }else {                                                                                                         
                        return ceil(($seconds/60)/60) . " hours ago";
                }
        }else if(ceil((($seconds/60)/60)/24) < 7){ // Hours in a week   
                if((ceil(($seconds/60)/60)/24)==1){                                                                             
                        return "Yesterday";
                }else {
                        return ceil((($seconds/60)/60)/24) . " days ago";
                }
        }else if(ceil(((($seconds/60)/60)/24)/7) < 4){
                if(ceil(((($seconds/60)/60)/24)/7)==1){
                        return "Last week";
                }else {
                        return ceil(((($seconds/60)/60)/24)/7) . " weeks ago";
                }               
        }else if(ceil((((($seconds/60)/60)/24)/7)/4) < 12){                     //1 month (30 days)
                if(ceil((((($seconds/60)/60)/24)/7)/4)==1){
                        return "Last month";
                }else {
                        return ceil((((($seconds/60)/60)/24)/7)/4) . " months ago";
                }
        }else {
                if(ceil((((($seconds/60)/60)/24)/7)/4) < 24){
                        return "Last year";
                }else {
                        return ceil(((((($seconds/60)/60)/24)/7)/4)/12) . " years ago";
                }
        }
}
?>

wordpress post in an external page

<?php
   require('WORDPRES_PATH/wp-load.php');
   global $query_string;
   $qstring_array = array();
   parse_str($query_string,  $qstring_array);
   $args = array_merge($args,$qstring_array);
   query_posts($args) ;
 
 if (have_posts()) : while (have_posts()) : the_post();
         echo "Title :";
         the_title();
        echo "<br/>";
        echo "Author: ";
        the_author();
       echo "<br/><br/>";
      endwhile;
    else:
       echo "No posts";
    endif;
  ?>

css hacks for everyone

.test {
     color: #000000; /* All Browsers */
     color: #FFF000\9; /* All IEs */
     *color: #FFFF00; /* IE6 and IE7 */
     color: #0000FF\0; /* Only IE8 */
     color: #00FFFF!important; /* Only IE7 */
     _color: #FF0000; /* Only IE6 */
     [color: #000000; /* Safari, Chrome */
}

appending a custom stylesheet with jquery

$('head').append('<link rel="stylesheet" href="safari.css" type="text/css" />');

detecting webkit

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
	alert('hello webkit!');
}

color scrollbars for ie 5.5

body {
scrollbar-face-color: #hex; 
scrollbar-shadow-color: #hex; 
scrollbar-highlight-color: #hex; 
scrollbar-3dlight-color: #hex; 
scrollbar-darkshadow-color: #hex; 
scrollbar-track-color: #hex; 
scrollbar-arrow-color: #hex;
}

basic html 5 template

from here: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index" class="home">
</body>
</html>

listening changes

var html = $('#events').html();
setInterval(function(){ if($('#events').html() != html){ tooltip(); html = $('#events').html() } }, 3000);

twitter-like input using css 3

textarea {  
	padding: 5px;  
	font-size: 15px;  
	text-shadow: 0px 1px 0px #fff;  
	outline: none;  
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;  
	border-radius: 3px;  
	border: 1px solid #ccc;  
	-webkit-transition: .3s ease-in-out;  
	-moz-transition: .3s ease-in-out;  
}  

textarea:focus {  
	border: 1px solid #fafafa;  
	-webkit-box-shadow: 0px 0px 6px #007eff;  
	-moz-box-shadow: 0px 0px 5px #007eff;  
	box-shadow: 0px 0px 5px #007eff;  
}

easiest tooltip ever

based on http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery version

<style>
	#tooltip {
		position:absolute;
		border:1px solid #333;
		background:#f7f5d1;
		padding:2px 5px;
		color:#333;
		display:none;
	}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){			
	    xOffset = 10;
		yOffset = 20;				

		$("a.tooltip").hover(function(e){											  
			this.t = this.title;
			this.title = "";									  
			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
			$("#tooltip").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("fast");		
	    }, function(){
			this.title = this.t;
			$("#tooltip").remove();
	    });	

		$("a.tooltip").mousemove(function(e){
			$("#tooltip").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");
		});
	});
</script>

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

get server uptime with php

<?php 
// format the uptime in case the browser doesn't support dhtml/javascript
// static uptime string
function format_uptime($seconds) {
  $secs = intval($seconds % 60);
  $mins = intval($seconds / 60 % 60);
  $hours = intval($seconds / 3600 % 24);
  $days = intval($seconds / 86400);
  
  if ($days > 0) {
    $uptimeString .= $days;
    $uptimeString .= (($days == 1) ? " day" : " days");
  }
  if ($hours > 0) {
    $uptimeString .= (($days > 0) ? ", " : "") . $hours;
    $uptimeString .= (($hours == 1) ? " hour" : " hours");
  }
  if ($mins > 0) {
    $uptimeString .= (($days > 0 || $hours > 0) ? ", " : "") . $mins;
    $uptimeString .= (($mins == 1) ? " minute" : " minutes");
  }
  if ($secs > 0) {
    $uptimeString .= (($days > 0 || $hours > 0 || $mins > 0) ? ", " : "") . $secs;
    $uptimeString .= (($secs == 1) ? " second" : " seconds");
  }
  return $uptimeString;
}

// read in the uptime (using exec)
$uptime = exec("cat /proc/uptime");
$uptime = split(" ",$uptime);
$uptimeSecs = $uptime[0];

// get the static uptime
$staticUptime = "Uptime: ".format_uptime($uptimeSecs);
?>
<html>
<head>
<script language="javascript">
<!--
var upSeconds=<?php echo $uptimeSecs; ?>;
function doUptime() {
var uptimeString = "Uptime: ";
var secs = parseInt(upSeconds % 60);
var mins = parseInt(upSeconds / 60 % 60);
var hours = parseInt(upSeconds / 3600 % 24);
var days = parseInt(upSeconds / 86400);
if (days > 0) {
  uptimeString += days;
  uptimeString += ((days == 1) ? " day" : " days");
}
if (hours > 0) {
  uptimeString += ((days > 0) ? ", " : "") + hours;
  uptimeString += ((hours == 1) ? " hour" : " hours");
}
if (mins > 0) {
  uptimeString += ((days > 0 || hours > 0) ? ", " : "") + mins;
  uptimeString += ((mins == 1) ? " minute" : " minutes");
}
if (secs > 0) {
  uptimeString += ((days > 0 || hours > 0 || mins > 0) ? ", " : "") + secs;
  uptimeString += ((secs == 1) ? " second" : " seconds");
}
var span_el = document.getElementById("uptime");
var replaceWith = document.createTextNode(uptimeString);
span_el.replaceChild(replaceWith, span_el.childNodes[0]);
upSeconds++;
setTimeout("doUptime()",1000);
}
// -->

</script>
</head>
<body onLoad="doUptime();">

<div id="uptime"><?php echo $staticUptime; ?></div>

</body>
</html>

resize browser

$(document).ready(function(){

$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
	var newWindowHeight = $(window).height();
	$("#container").css("min-height", newWindowHeight );
}

});

minify css using php

<?php
function optimizeCSS($text) {
	$text = preg_replace('~/\*.*?\*/~s','',$text); // comments
	$text = preg_replace('/[\r\n\t]/','',$text); // newlines and tabs
	$text = preg_replace('/ *(;|\:|\{|\}) */','$1',$text); // space before/after colons, semicolons and braces
	$text = str_replace(';}','}',$text); // remove final semicolon
	$text = trim($text);
	return $text;
}
?>

find or create

class Category < ActiveRecord::Base
  validates_uniqueness_of :name

  def self.create_or_find_by_name(name)
    create!(:name => name) rescue find_by_name(name)
  end
end

convert an ISO file to DMG format in terminal

hdiutil convert /path/imagefile.iso -format UDRW -o /path/convertedimage.dmg

convert a DMG file to ISO in terminal

hdiutil convert /path/imagefile.dmg -format UDTO -o /path/convertedimage.iso
Displaying Code 81 - 100 of 270 in total