Designer Sandbox » Code

Centering a div block without the width using pure CSS (All Browser)

Vincent — Thu, 26 Jan 2012 09:32:13 +0000

Easiest way to centering a div using pure CSS

The trick to center the div is to shift the outer and inner div, with the use of position:relative and display:block. Shift the outer block 50% left relative, and then next is to move the inner block back to -50% left. Hope this make sense. This code will work on all browser.

DEMO

html


    
        
            Centering the DIV

css

.ds {
    margin:0;
    padding:0;
}
div.wrapper{
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    background:#00F;
    padding:10px;
    margin:0 -20px;
}
div.outer{
    clear: left;
    float: left;
    left: 50%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}
div.inner{
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
    color:#FFF;
    padding:5px 20px;
    background:#900;
    border:1px dotted #cccccc;
}

Adding Multiple Attachment for Joomla K2 Component according to the number of JoomFish’s language hack

Vincent — Thu, 24 Nov 2011 15:18:03 +0000

Auto detecting Joomfish languages with your K2 Component, making your attachment number of field to match with JoomFish Component site languages.
Please follow the below steps to achieve this.

Step 1

/administrator/components/com_k2/tables/k2attachment.php add this in around line 357

var $lang = null;

Step 2

/administrator/components/com_k2/model/item.php add this in around line 357, in “save” function

$attachments_language_code = JRequest::getVar('language_code', '', 'POST', 'array');

add this in around line 400, in “save” function

$attachments_language_code = JRequest::getVar('language_code', '', 'POST', 'array');

Step 3

/components/com_k2/models/item.php add this in around line 911, in “getItemAttachments” function

$lang = JRequest::getCmd( 'lang' );

Original

$query="SELECT * FROM #__k2_attachments WHERE itemID=".(int)$itemID;

Change it to

$query="SELECT * FROM #__k2_attachments WHERE itemID=".(int)$itemID . " and lang = '".$lang."'";

Step 4

/administrator/components/com_k2/views/item/tmpl/default.php change the javascript function “addAttachment”, replace the old one.

function addAttachment(){
   var div = new Element('div',{'style':'border-top: 1px dotted #ccc; margin: 4px; padding: 10px;'}).injectInside($('itemAttachments'));
   var str = "";
   str += "\" onclick=\"this.getParent().remove();\">";
   getKnownLanguages();
	foreach ($alllangs as $key=>$value) {
		list($langcode, $countryCode) = explode("-", $key);
   ?>
   var divlang = new Element('div').injectInside(div);
   var input = new Element('input',{'name':'attachment_file[]','type':'file'}).injectInside(divlang);
   var br = new Element('br').injectInside(divlang);
   var label = new Element('label').setHTML('').injectInside(divlang);
   var input = new Element('input',{'name':'attachment_title[]','type':'text', 'class':'linkTitle'}).injectInside(divlang);
   var br = new Element('br').injectInside(divlang);
   var label = new Element('label').setHTML('').injectInside(divlang);
   var textarea = new Element('textarea',{'name':'attachment_title_attribute[]','cols':'30', 'rows':'3'}).injectInside(divlang);
   var br = new Element('br').injectInside(divlang);
   var languagecode = new Element('input',{'name':'language_code[]','type':'hidden', 'value':''}).injectInside(divlang);
   str += "";
   str += "";
   str += "" +  divlang.innerHTML + "
";
   str += "";

 div.innerHTML = str;

   }

Step 5 – Database

enter this in your sql server (you will need phpmyadmin for this)

ALTER TABLE `jos_k2_attachments` ADD `lang` VARCHAR( 10 ) NULL

Step 6 – Need Help?

We do accept freelance customization to K2 and Joomfish development.
The freelance price for customization is USD50/hr*
*Minimum charge will be USD100
Interested Party please email us at info[a]designersandbox[dot]com

The beginning of web3.0 – Web Design New Approach – Scrolling Page Animation

Vincent — Wed, 16 Nov 2011 08:55:19 +0000

With the flexibility of CSS3 / html5 / JavaScript, we see new approach to web design. With more power css3 / html5 / javascript, designer and developer can now do things in a more fancy way (design fashion). While scrolling the page down, you can see the interaction that the designer or brand that showcase there product in a way few years ago only Flash can handle. But now with the power of CSS3 and HTML5, we can put in details into the whole structure and flow of the web in a simple way. Now you are viewing not just an website, you are now viewing a webshow! Now, let’s the show begin.

http://www.360langstrasse.sf.tv/

http://www.beetle.com

http://www.hyundai-veloster.eu

Tutorials on scrolling animation:

Parallax Scrolling Background

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Demo: http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html
Tutorial: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.

http://oopit.wordpress.com/2009/10/27/make-your-header-responses-to-mouse-movements-with-jparallax/

Animate Curtains Opening with jQuery

Demo: http://buildinternet.com/live/curtains/
Tutorials: http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/

Resource jQuery

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

Unity3D OnMouseDown() OnMouseUp on GUIT for iPhone and iPad

Vincent — Mon, 19 Sep 2011 04:35:47 +0000

OnMouseDown/OnMouseUp() are disabled in iPhone Unity for performance reasons.

You can use following JS/C# code to find GUI element under the touch:

JavaScript

//	GUITouchController.js
//	A script to allow MouseUp and MouseDown on the iPhone

var detectOnMouseOver : boolean = false;
var wasMouseDownInPrevFrame : boolean = false;
var wasMouseOverInPrevFrame : boolean = false;

var prevFrameElement : GUIElement;

function FindGUIElement (camera : Camera, mousePosition : Vector3) : GUIElement {

	// Is the mouse inside the cameras viewport?
	var rect : Rect = camera.pixelRect;

	if (!rect.Contains (mousePosition))
		return null;

	// Did we hit any gui elements?
	var layer : GUILayer = camera.GetComponent (GUILayer);
	if (!layer)
		return null;

	return layer.HitTest (mousePosition);
}

// Use this for initialization
//function Start () {
//
//}

// Update is called once per frame
function Update () {
	if(detectOnMouseOver){
		var element : GUIElement = FindGUIElement( Camera.main, Input.mousePosition);

		if (element){
			if (!wasMouseOverInPrevFrame){
				wasMouseOverInPrevFrame = true;
				element.SendMessage("OnMouseOver",null,SendMessageOptions.DontRequireReceiver);
			}

		if (Input.GetMouseButtonDown(0)){
			if(!wasMouseDownInPrevFrame){
				wasMouseDownInPrevFrame = true;
				element.SendMessage("OnMouseDown",null,SendMessageOptions.DontRequireReceiver);
			}

		}else if(wasMouseDownInPrevFrame){
			if (!Input.GetMouseButton(0)){
				element.SendMessage("OnMouseUp",null,SendMessageOptions.DontRequireReceiver);
				wasMouseDownInPrevFrame = false;
			}
		}

		prevFrameElement = element;

	}else if (wasMouseOverInPrevFrame){
		prevFrameElement.SendMessage("OnMouseExit",null,SendMessageOptions.DontRequireReceiver);
		wasMouseOverInPrevFrame = false;
	}

	}
	else {
			//only detect OnMouseDown and OnMouseUp, not also OnMouseOver and OnMouseExit to save performance (by only looking for gui elements when mouse button is pressed)
		if (Input.GetMouseButtonDown(0)){
			element = FindGUIElement( Camera.main, Input.mousePosition);
			if (element){
				if(!wasMouseDownInPrevFrame){
					wasMouseDownInPrevFrame = true;
					element.SendMessage("OnMouseDown",null,SendMessageOptions.DontRequireReceiver);
				prevFrameElement = element;
				}
			}
		}
		else if(wasMouseDownInPrevFrame){
			if (!Input.GetMouseButton(0)){
				prevFrameElement.SendMessage("OnMouseUp",null,SendMessageOptions.DontRequireReceiver);
				wasMouseDownInPrevFrame = false;
			}
		}
	}
}

C# Code

using UnityEngine;
using System.Collections; 

//todo: iterate throw multiple prevFrame items in array
//todo: check if pref frame items still exist
//todo: add optional constant check option

public class GUITouchController : MonoBehaviour { 

    public bool detectOnMouseOver = false;
    private bool wasMouseDownInPrevFrame = false;
    private bool wasMouseOverInPrevFrame = false;
    private GUIElement prevFrameElement;

    GUIElement FindGUIElement(Camera camera, Vector3 mousePosition){
   // Is the mouse inside the cameras viewport?
   Rect rect = camera.pixelRect;
   if (!rect.Contains (mousePosition))
      return null; 

   // Did we hit any gui elements?
   GUILayer layer = (GUILayer)camera.GetComponent (typeof (GUILayer));
   if (!layer)
      return null; 

   return layer.HitTest (mousePosition);
    } 

   // Use this for initialization
   void Start () { 

   } 

    // Update is called once per frame
	void Update () {
		if(detectOnMouseOver){
			GUIElement element = FindGUIElement( Camera.main, Input.mousePosition);
			if (element){
				if (!wasMouseOverInPrevFrame){
					wasMouseOverInPrevFrame = true;
					element.SendMessage("OnMouseOver",null,SendMessageOptions.DontRequireReceiver);
				}
				if (Input.GetMouseButtonDown(0)){
					if(!wasMouseDownInPrevFrame){
						wasMouseDownInPrevFrame = true;
						element.SendMessage("OnMouseDown",null,SendMessageOptions.DontRequireReceiver);
					}
				}else if(wasMouseDownInPrevFrame){
					if (!Input.GetMouseButton(0)){
						element.SendMessage("OnMouseUp",null,SendMessageOptions.DontRequireReceiver);
						wasMouseDownInPrevFrame = false;
					}
				}
				prevFrameElement = element;
			}else if (wasMouseOverInPrevFrame){
				prevFrameElement.SendMessage("OnMouseExit",null,SendMessageOptions.DontRequireReceiver);
				wasMouseOverInPrevFrame = false;
			} 

		}else{
   			//only detect OnMouseDown and OnMouseUp, not also OnMouseOver and OnMouseExit to save performance (by only looking for gui elements when mouse button is pressed)
			if (Input.GetMouseButtonDown(0)){
				GUIElement element = FindGUIElement( Camera.main, Input.mousePosition);
				if (element){
					if(!wasMouseDownInPrevFrame){
						wasMouseDownInPrevFrame = true;
						element.SendMessage("OnMouseDown",null,SendMessageOptions.DontRequireReceiver);
						prevFrameElement = element;
					}
				}
			}else if(wasMouseDownInPrevFrame){
				if (!Input.GetMouseButton(0)){
					prevFrameElement.SendMessage("OnMouseUp",null,SendMessageOptions.DontRequireReceiver);
					wasMouseDownInPrevFrame = false;
				}
			}
   		}
   	}

}

original post from here

http://forum.unity3d.com/threads/15377-quot-OnMouseDown()-quot-or-quot-OnMouseUp-quot-On-GUIT

How to make a proper CSS button

Vincent — Tue, 23 Nov 2010 08:43:45 +0000

This post will teach you how to make a proper CSS button.


     
          Button Text

From the above code you can see that I had entered 3 classes for the < a > tag, they are button, btn_file and btn_blue. This is how I usually construct the class layer.

class=”button” this control the default button layout
class=”btn_file” this class display which icon to show
class=”btn_blue” if you have a different set of color setting or other layout for the button, this is the class to overwrite your default class. This can also be use as additional setting for your button

So I had draft out a layer of the a tag and span tag which are used for this button.

More details on how we construct the button.

This is the final result that I draft out on paper.

a.button {
     float:left;
     margin: 20px 30px 10px 0;
     color: #333333;
     border: 1px solid #CCCCCC;
     background: url("YOUR_IMAGE_FILE.png") repeat-x center bottom;
     display: block;
     white-space: nowrap;
     text-decoration: none;
}

a.btn_file span{
     background-image: url("YOUR_IMAGE_FILE.png");
     background-position: 10px 7px;
     background-repeat: no-repeat;
     border: 1px solid #FFFFFF;
     display: block;
     padding: 0 15px 0 33px;
}

a.button span span{
     background: none;
     border: none;
     display: inline;
     height: auto;
     line-height: 28px;
     padding: 0;
}

Watch it in action

Button Text

How to embed YouTube Video within the Facebook fbml tabs

Vincent — Fri, 19 Nov 2010 12:00:04 +0000

This is a how-to article on expanding your Facebook Fan Page (aka Business Page) by using the application Static FBML which allows you to add youtube video to your tabs or box which can incorporate CSS, HTML, Facebook’s flavor of JavaScript, FBJS, and Facebook’s mark-up language FBML. FBML has greatly expanded what is possible on Facebook Pages and, if you’re sufficiently skilled with CSS/HTML and, optionally, FBML, you can make some really fine looking Pages. Basically this not an actual youtube embed that you normally do, you will need to follow the below code to make this work in Facebook. Simply Facebook will first show the image that we have within the code below, and then upon user confirm with a click then play and load the video.

fb:swf code for your Youtube video

Depend on the design of your fbml page, you can also tweak the image size as well.
Here’s some sample of it.

Watch it in action!

Watch it in action!

Extra Notes: Facebook Cache every images in there static FMBL app

Also Facebook will cache every image that you push to there site. If you would like to update your image on the static FBML tabs, you will need to put a version at the end of your image link like ?ver1.0 . This will give the page to reload the image. If you have another update, just name it ver1.1.

Flash loading external video link in loops for AS2

Vincent — Thu, 28 Oct 2010 07:42:34 +0000

Today a client would like to create a flash banner that load external flv file and keep the video in loop. Never ending playback. This is a more or less a beginner scripts for flash. There’s much we can do for this, if anyone is more interested on this kinda topics drop me a reply I will write more about this topic.

First on the first key frame open your action panel or press F9

var url = "http://ENTER YOUR URL HERE";
var nc: NetConnection = new NetConnection();
nc.connect(null);
var ns: NetStream = new NetStream(nc);
ns.setBufferTime(5);

ns.onStatus = function(info){
	if(info.code == "NetStream.Buffer.Full"){
	}
	if(info.code == "NetStream.Buffer.Empty"){
	}
	if(info.code == "NetStream.Play.Stop"){
		ns.seek(0);
		ns.play(url);
	}
}

//video location
myVideo.attachVideo(ns);
ns.play(url);

This is the code you will need to put in your timeline.
Simply change the var url = "http://ENTER YOUR URL HERE";
Replace this with your own flv.

Magento – Adding external product link for all your products

Vincent — Wed, 27 Oct 2010 06:32:45 +0000

This tutorial is all about add an external link, either it is a Amazon product link, demo link, or any external link. This script is what you need for your magento. Within this page, you will find the step by step screenshot of creating your own attribute/set, and calling those attribute from your own template.

First you will need to create all the attribute / attribute set for your products. Below is an example of creating an external product links.

Here’s something I had created for my template selling site.

First select the Attribute from the menu, and click on Manage Attributes

Click the Add New icon to create your Attribute.