you are here: codestackercodes [RSS]

wordpress archives dropdown

<!-- original way -->
<?php wp_get_archives('type=monthly'); ?>

<!-- dropdown -->
<select onchange='document.location.href=this.options[this.selectedIndex].value;'>
	<option><?php echo attribute_escape(__('Select Month')); ?></option>
	<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
</select>

exemplo de dsl

receita "Bola de Fuba" do 
  ingrediente "Farinha", "1 quilo" 
  ingrediente "Açucar", "200 gramas" 
  ingrediente "Ovos", "2 unidades" 
  preparo "Misture todos ingredientes" 
  preparo "Leve ao forno" 
  preparo "Sirva" 
  tempo "2 horas" 
  porcoes 3
end

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
Displaying Code 81 - 100 of 301 in total