Ray Villalobos planetoftheweb

🚀

Hubbing

I love helping people learn full-stack development with a clear, practical style.

planetoftheweb / writeFlash

Created March 8, 2011 16:09

A simple JavaScript function for inserting SWFs into an HTML page.

	<script type="text/javascript" >
	function writeFlash(movieLocation,mywidth,myheight,myname) {
	if (myname) { myid=myname; } else { myid="flashanimation"; }
	document.write('<object type="application/x-shockwave-flash"id="'+myid+'"width="'+mywidth+'"height="'+myheight+'"data="'+movieLocation+'"> <param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="'+movieLocation+'" /><param name="quality" value="high" /><param name="scale"value="noscale" /><param name="wmode" value="transparent"/></object>');
	}
	</script>

planetoftheweb / Button Clickable to a URl

Created March 8, 2011 16:10

Make a button that is also clickable to a url. The button should be called gotosite_btn

	gotosite_btn.addEventListener( MouseEvent.CLICK, onButtonClick );
	function onButtonClick ( event:Event ):void {
	navigateToURL(new URLRequest('http://planetoftheweb.com'));
	}

planetoftheweb / insertyoutubefeed

Created April 12, 2012 14:18

Insert YouTube Channel Feed & Player into any site using JSON

planetoftheweb / DisplayFlickrFeedWTags

Created June 25, 2012 18:10

This code will display a flickr stream that has been tagged with a specific keyword. Requires jQuery

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Show flickr stream with tags</title>
	<!-- include jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<!-- Minimalist StyleSheet -->
	<style>

planetoftheweb / gist:2999733

Created June 26, 2012 22:28

jQuery Mobile Progression

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>My App</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<meta name = "viewport" content = "width = device-width">
	</head>

planetoftheweb / ec-insertimages.html

Created October 22, 2012 19:18

Insert Images

	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</a>
	<a class="brand" href="index.html">Everlasting Classic</a>
	<div class="nav-collapse collapse">

planetoftheweb / ec-newrows.html

Created October 22, 2012 19:24

Insert content with titles and images

	<!-- Example row of columns -->
	<div class="row">
	<div class="span4">
	<h2>Deland, FL</h2>
	<h3>October 20, 2009</h3>
	<img src="images/engines.jpg" class="img-rounded" alt="Auto Show - Deland, FL" />
	<p><a class="btn" href="#">More info</a></p>
	</div>
	<div class="span4">
	<h2>Houston, TX</h2>

planetoftheweb / ec-carousel.html

Created October 22, 2012 19:58

Added the HTML for a Carousel

	<div id="myCarousel" class="carousel slide">
	<!-- Carousel items -->
	<div class="carousel-inner">
	<div class="active item"><img src="images/car_blackmusclecar.jpg" alt="Car Carousel" /></div>
	<div class="item"><img src="images/car_bluetruck.jpg" alt="Car Carousel" /></div>
	<div class="item"><img src="images/car_blackspeedster.jpg" alt="Car Carousel" /></div>
	<div class="item"><img src="images/car_redback.jpg" alt="Car Carousel" /></div>
	<div class="item"><img src="images/car_cyanclassic.jpg" alt="Car Carousel" /></div>
	<div class="item"><img src="images/car_redgrill.jpg" alt="Car Carousel" /></div>
	<div class="item"><img src="images/car_purplefire.jpg" alt="Car Carousel" /></div>

planetoftheweb / ec-rotatecarousel.html

Created October 22, 2012 20:05

Rotate the Carousel

planetoftheweb / groupclearfix.css

Created October 29, 2012 14:08

Group Clearfix

	.group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
	.group:after { clear: both; }
	.group { zoom: 1; }