Tag Archive for resize

snippets | May 6, 2012
No comments

iframe resize to match frame source using javascript and div innerhtml

function insertIt() {
var _y = document.getElementById('framediv');
var _x = window.frames[0].document.body.innerHTML;
_y.innerHTML = _x
}
Then, the parent page has a div with the id "framediv" which is placed where the contents of the iframe should appear on the page.
The iframe element is then placed inside the div, like this:

<div id="framediv">
<iframe onload="insertIt();" src="/somewhere/content.htm" frameborder="no" width="555px" scrolling="no">
</div>

source

Category: Uncategorized | Tags: ,
snippets | May 4, 2012
No comments

jQuery dynamic image resizer function

/**
* scaleImage 0.1
*
* Rendez vos sites glissant !
*
* Copyright (c) 2008 Benoit G (http://www.tim-burton.net) based upon
* Licensed under the Creative Commons License:
* <a href="http://creativecommons.org/licenses/by/3.0/" >http://creativecommons.org/licenses/by/3.0/</a>
*
* Date: 2008-08-25
*/

(function($){
$.fn.scaleImage = function(options) {

var defaults = {
maxwidth: 200,
linkclass:'',
icon:true,
thickbox:true
};
var options = $.extend(defaults, options);

return this.each(function() {
obj = $(this);

var width = obj.width();
var height = obj.height();
if (width > options.maxwidth) {
//Set variables	for manipulation
var ratio = (height / width );
var new_width = options.maxwidth;
var new_height = (new_width * ratio);
var classes = options.linkclass+' scaleImage';

//thickbox
if (options.thickbox == true) {
var img_full_link = obj.attr('src');
obj.wrap('<a class="thickbox" title="'+obj.attr('alt')+'" href="'+img_full_link+'"></a>');
tb_init(obj.parent('a'));
}

//Shrink the image and add link to full-sized image
obj.height(new_height).width(new_width);
obj.addClass(classes);

//zoom icon
if (options.icon == true) {
obj.after('<div class="thumb-zoom"> </div>');
obj.hover(function(){
$(this).next('.thumb-zoom').addClass("hover");
},function(){
$(this).next('.thumb-zoom').removeClass("hover");
});
}

}
});
};
})(jQuery);

source

Category: Uncategorized | Tags: , , ,
snippets | April 21, 2012
No comments

javascript drag drop function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--************************************************************************-->
<!--* Windows Demo                                                         *-->
<!--*                                                                      *-->
<!--* Copyright 2001 by Mike Hall                                          *-->
<!--* Please see <a href="http://www.brainjar.com" >http://www.brainjar.com</a> for terms of use.                 *-->
<!--************************************************************************-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BrainJar.com: Windows Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.lastLine {
padding-left: 6em;
}
</style>
<style type="text/css">

.window {
background-color: #c0c0c0;
border-color: #f0f0f0 #606060 #404040 #d0d0d0;
border-style: solid;
border-width: 2px;
margin: 0px;
padding: 2px;
position: absolute;
text-align: left;
visibility: hidden;
}

.titleBar {
background-color: #008080;
cursor: default;
color: #ffffff;
font-family: "MS Sans Serif", "Arial", "Helvetica", sans-serif;
font-size: 8pt;
font-weight: bold;
margin: 0px;
padding: 2px 2px 2px .5em;
text-align: right;
white-space: nowrap;
}

.titleBarText {
float: left;
overflow: hidden;
text-align: left;
}

.titleBarButtons {
border-style: none;
border-width: 0px;
vertical-align: middle;
width: 50px;
height: 14px;
}

.clientArea {
background-color: #ffffff;
border-color: #404040 #e0e0e0 #f0f0f0 #505050;
border-style: solid;
border-width: 2px;
color: #000000;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
margin: 2px 0px 0px 0px;
overflow: auto;
padding: .5em;
}

</style>

<script type="text/javascript">//<![CDATA[

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See <a href="http://www.brainjar.com" >http://www.brainjar.com</a> for terms of use.
//*****************************************************************************

// Determine browser and version.

function Browser() {

var ua, s, i;

this.isIE    = false;  // Internet Explorer
this.isNS    = false;  // Netscape
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();

//=============================================================================
// Window Object
//=============================================================================

function Window(el) {

var i, mapList, mapName;

// Get window components.

this.frame           = el;
this.titleBar        = winFindByClassName(el, "titleBar");
this.titleBarText    = winFindByClassName(el, "titleBarText");
this.titleBarButtons = winFindByClassName(el, "titleBarButtons");
this.clientArea      = winFindByClassName(el, "clientArea");

// Find matching button image map.

mapName = this.titleBarButtons.useMap.substr(1);
mapList = document.getElementsByTagName("MAP");
for (i = 0; i < mapList.length; i++)
if (mapList[i].name == mapName)
this.titleBarMap = mapList[i];

// Save colors.

this.activeFrameBackgroundColor  = this.frame.style.backgroundColor;
this.activeFrameBorderColor      = this.frame.style.borderColor;
this.activeTitleBarColor         = this.titleBar.style.backgroundColor;
this.activeTitleTextColor        = this.titleBar.style.color;
this.activeClientAreaBorderColor = this.clientArea.style.borderColor;
if (browser.isIE)
this.activeClientAreaScrollbarColor = this.clientArea.style.scrollbarBaseColor;

// Save images.

this.activeButtonsImage   = this.titleBarButtons.src;
this.inactiveButtonsImage = this.titleBarButtons.longDesc;

// Set flags.

this.isOpen      = false;
this.isMinimized = false;

// Set methods.

this.open       = winOpen;
this.close      = winClose;
this.minimize   = winMinimize;
this.restore    = winRestore;
this.makeActive = winMakeActive;

// Set up event handling.

this.frame.parentWindow = this;
this.frame.onmousemove  = winResizeCursorSet;
this.frame.onmouseout   = winResizeCursorRestore;
this.frame.onmousedown  = winResizeDragStart;

this.titleBar.parentWindow = this;
this.titleBar.onmousedown  = winMoveDragStart;

this.clientArea.parentWindow = this;
this.clientArea.onclick      = winClientAreaClick;

for (i = 0; i < this.titleBarMap.childNodes.length; i++)
if (this.titleBarMap.childNodes[i].tagName == "AREA")
this.titleBarMap.childNodes[i].parentWindow = this;

// Calculate the minimum width and height values for resizing
// and fix any initial display problems.

var initLt, initWd, w, dw;

// Save the inital frame width and position, then reposition
// the window.

initLt = this.frame.style.left;
initWd = parseInt(this.frame.style.width);
this.frame.style.left = -this.titleBarText.offsetWidth + "px";

// For IE, start calculating the value to use when setting
// the client area width based on the frame width.

if (browser.isIE) {
this.titleBarText.style.display = "none";
w = this.clientArea.offsetWidth;
this.widthDiff = this.frame.offsetWidth - w;
this.clientArea.style.width = w + "px";
dw = this.clientArea.offsetWidth - w;
w -= dw;
this.widthDiff += dw;
this.titleBarText.style.display = "";
}

// Find the difference between the frame's style and offset
// widths. For IE, adjust the client area/frame width
// difference accordingly.

w = this.frame.offsetWidth;
this.frame.style.width = w + "px";
dw = this.frame.offsetWidth - w;
w -= dw;
this.frame.style.width = w + "px";
if (browser.isIE)
this.widthDiff -= dw;

// Find the minimum width for resize.

this.isOpen = true;  // Flag as open so minimize call will work.
this.minimize();
// Get the minimum width.
if (browser.isNS && browser.version >= 1.2)
// For later versions of Gecko.
this.minimumWidth = this.frame.offsetWidth;
else
// For all others.
this.minimumWidth = this.frame.offsetWidth - dw;

// Find the frame width at which or below the title bar text will
// need to be clipped.

this.titleBarText.style.width = "";
this.clipTextMinimumWidth = this.frame.offsetWidth - dw;

// Set the minimum height.

this.minimumHeight = 1;

// Restore window. For IE, set client area width.

this.restore();
this.isOpen = false;  // Reset flag.
initWd = Math.max(initWd, this.minimumWidth);
this.frame.style.width = initWd + "px";
if (browser.isIE)
this.clientArea.style.width = (initWd - this.widthDiff) + "px";

// Clip the title bar text if needed.

if (this.clipTextMinimumWidth >= this.minimumWidth)
this.titleBarText.style.width = (winCtrl.minimizedTextWidth + initWd - this.minimumWidth) + "px";

// Restore the window to its original position.

this.frame.style.left = initLt;
}

//=============================================================================
// Window Methods
//=============================================================================

function winOpen() {

if (this.isOpen)
return;

// Restore the window and make it visible.

this.makeActive();
this.isOpen = true;
if (this.isMinimized)
this.restore();
this.frame.style.visibility = "visible";
}

function winClose() {

// Hide the window.

this.frame.style.visibility = "hidden";
this.isOpen = false;
}

function winMinimize() {

if (!this.isOpen || this.isMinimized)
return;

this.makeActive();

// Save current frame and title bar text widths.

this.restoreFrameWidth = this.frame.style.width;
this.restoreTextWidth = this.titleBarText.style.width;

// Disable client area display.

this.clientArea.style.display = "none";

// Minimize frame and title bar text widths.

if (this.minimumWidth)
this.frame.style.width = this.minimumWidth + "px";
else
this.frame.style.width = "";
this.titleBarText.style.width = winCtrl.minimizedTextWidth + "px";

this.isMinimized = true;
}

function winRestore() {

if (!this.isOpen || !this.isMinimized)
return;

this.makeActive();

// Enable client area display.

this.clientArea.style.display = "";

// Restore frame and title bar text widths.

this.frame.style.width = this.restoreFrameWidth;
this.titleBarText.style.width = this.restoreTextWidth;

this.isMinimized = false;
}

function winMakeActive() {

if (winCtrl.active == this)
return;

// Inactivate the currently active window.

if (winCtrl.active) {
winCtrl.active.frame.style.backgroundColor    = winCtrl.inactiveFrameBackgroundColor;
winCtrl.active.frame.style.borderColor        = winCtrl.inactiveFrameBorderColor;
winCtrl.active.titleBar.style.backgroundColor = winCtrl.inactiveTitleBarColor;
winCtrl.active.titleBar.style.color           = winCtrl.inactiveTitleTextColor;
winCtrl.active.clientArea.style.borderColor   = winCtrl.inactiveClientAreaBorderColor;
if (browser.isIE)
winCtrl.active.clientArea.style.scrollbarBaseColor = winCtrl.inactiveClientAreaScrollbarColor;
if (browser.isNS && browser.version < 6.1)
winCtrl.active.clientArea.style.overflow = "hidden";
if (winCtrl.active.inactiveButtonsImage)
winCtrl.active.titleBarButtons.src = winCtrl.active.inactiveButtonsImage;
}

// Activate this window.

this.frame.style.backgroundColor    = this.activeFrameBackgroundColor;
this.frame.style.borderColor        = this.activeFrameBorderColor;
this.titleBar.style.backgroundColor = this.activeTitleBarColor;
this.titleBar.style.color           = this.activeTitleTextColor;
this.clientArea.style.borderColor   = this.activeClientAreaBorderColor;
if (browser.isIE)
this.clientArea.style.scrollbarBaseColor = this.activeClientAreaScrollbarColor;
if (browser.isNS && browser.version < 6.1)
this.clientArea.style.overflow = "auto";
if (this.inactiveButtonsImage)
this.titleBarButtons.src = this.activeButtonsImage;
this.frame.style.zIndex = ++winCtrl.maxzIndex;
winCtrl.active = this;
}

//=============================================================================
// Event handlers.
//=============================================================================

function winClientAreaClick(event) {

// Make this window the active one.

this.parentWindow.makeActive();
}

//-----------------------------------------------------------------------------
// Window dragging.
//-----------------------------------------------------------------------------

function winMoveDragStart(event) {

var target;
var x, y;

if (browser.isIE)
target = window.event.srcElement.tagName;
if (browser.isNS)
target = event.target.tagName;

if (target == "AREA")
return;

this.parentWindow.makeActive();

// Get cursor offset from window frame.

if (browser.isIE) {
x = window.event.x;
y = window.event.y;
}
if (browser.isNS) {
x = event.pageX;
y = event.pageY;
}
winCtrl.xOffset = winCtrl.active.frame.offsetLeft - x;
winCtrl.yOffset = winCtrl.active.frame.offsetTop  - y;

// Set document to capture mousemove and mouseup events.

if (browser.isIE) {
document.onmousemove = winMoveDragGo;
document.onmouseup   = winMoveDragStop;
}
if (browser.isNS) {
document.addEventListener("mousemove", winMoveDragGo,   true);
document.addEventListener("mouseup",   winMoveDragStop, true);
event.preventDefault();
}

winCtrl.inMoveDrag = true;
}

function winMoveDragGo(event) {

var x, y;

if (!winCtrl.inMoveDrag)
return;

// Get cursor position.

if (browser.isIE) {
x = window.event.x;
y = window.event.y;
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
x = event.pageX;
y = event.pageY;
event.preventDefault();
}

// Move window frame based on offset from cursor.

winCtrl.active.frame.style.left = (x + winCtrl.xOffset) + "px";
winCtrl.active.frame.style.top  = (y + winCtrl.yOffset) + "px";
}

function winMoveDragStop(event) {

winCtrl.inMoveDrag = false;

// Remove mousemove and mouseup event captures on document.

if (browser.isIE) {
document.onmousemove = null;
document.onmouseup   = null;
}
if (browser.isNS) {
document.removeEventListener("mousemove", winMoveDragGo,   true);
document.removeEventListener("mouseup",   winMoveDragStop, true);
}
}

//-----------------------------------------------------------------------------
// Window resizing.
//-----------------------------------------------------------------------------

function winResizeCursorSet(event) {

var target;
var xOff, yOff;

if (this.parentWindow.isMinimized || winCtrl.inResizeDrag)
return;

// If not on window frame, restore cursor and exit.

if (browser.isIE)
target = window.event.srcElement;
if (browser.isNS)
target = event.target;
if (target != this.parentWindow.frame)
return;

// Find resize direction.

if (browser.isIE) {
xOff = window.event.offsetX;
yOff = window.event.offsetY;
}
if (browser.isNS) {
xOff = event.layerX;
yOff = event.layerY;
}
winCtrl.resizeDirection = ""
if (yOff <= winCtrl.resizeCornerSize)
winCtrl.resizeDirection += "n";
else if (yOff >= this.parentWindow.frame.offsetHeight - winCtrl.resizeCornerSize)
winCtrl.resizeDirection += "s";
if (xOff <= winCtrl.resizeCornerSize)
winCtrl.resizeDirection += "w";
else if (xOff >= this.parentWindow.frame.offsetWidth - winCtrl.resizeCornerSize)
winCtrl.resizeDirection += "e";

// If not on window edge, restore cursor and exit.

if (winCtrl.resizeDirection == "") {
this.onmouseout(event);
return;
}

// Change cursor.

if (browser.isIE)
document.body.style.cursor = winCtrl.resizeDirection + "-resize";
if (browser.isNS)
this.parentWindow.frame.style.cursor = winCtrl.resizeDirection + "-resize";
}

function winResizeCursorRestore(event) {

if (winCtrl.inResizeDrag)
return;

// Restore cursor.

if (browser.isIE)
document.body.style.cursor = "";
if (browser.isNS)
this.parentWindow.frame.style.cursor = "";
}

function winResizeDragStart(event) {

var target;

// Make sure the event is on the window frame.

if (browser.isIE)
target = window.event.srcElement;
if (browser.isNS)
target = event.target;
if (target != this.parentWindow.frame)
return;

this.parentWindow.makeActive();

if (this.parentWindow.isMinimized)
return;

// Save cursor position.

if (browser.isIE) {
winCtrl.xPosition = window.event.x;
winCtrl.yPosition = window.event.y;
}
if (browser.isNS) {
winCtrl.xPosition = event.pageX;
winCtrl.yPosition = event.pageY;
}

// Save window frame position and current window size.

winCtrl.oldLeft   = parseInt(this.parentWindow.frame.style.left,  10);
winCtrl.oldTop    = parseInt(this.parentWindow.frame.style.top,   10);
winCtrl.oldWidth  = parseInt(this.parentWindow.frame.style.width, 10);
winCtrl.oldHeight = parseInt(this.parentWindow.clientArea.style.height, 10);

// Set document to capture mousemove and mouseup events.

if (browser.isIE) {
document.onmousemove = winResizeDragGo;
document.onmouseup   = winResizeDragStop;
}
if (browser.isNS) {
document.addEventListener("mousemove", winResizeDragGo,   true);
document.addEventListener("mouseup"  , winResizeDragStop, true);
event.preventDefault();
}

winCtrl.inResizeDrag = true;
}

function winResizeDragGo(event) {

var north, south, east, west;
var dx, dy;
var w, h;

if (!winCtrl.inResizeDrag)
return;

// Set direction flags based on original resize direction.

north = false;
south = false;
east  = false;
west  = false;
if (winCtrl.resizeDirection.charAt(0) == "n")
north = true;
if (winCtrl.resizeDirection.charAt(0) == "s")
south = true;
if (winCtrl.resizeDirection.charAt(0) == "e" || winCtrl.resizeDirection.charAt(1) == "e")
east = true;
if (winCtrl.resizeDirection.charAt(0) == "w" || winCtrl.resizeDirection.charAt(1) == "w")
west = true;

// Find change in cursor position.

if (browser.isIE) {
dx = window.event.x - winCtrl.xPosition;
dy = window.event.y - winCtrl.yPosition;
}
if (browser.isNS) {
dx = event.pageX - winCtrl.xPosition;
dy = event.pageY - winCtrl.yPosition;
}

// If resizing north or west, reverse corresponding amount.

if (west)
dx = -dx;
if (north)
dy = -dy;

// Check new size.

w = winCtrl.oldWidth  + dx;
h = winCtrl.oldHeight + dy;
if (w <= winCtrl.active.minimumWidth) {
w = winCtrl.active.minimumWidth;
dx = w - winCtrl.oldWidth;
}
if (h <= winCtrl.active.minimumHeight) {
h = winCtrl.active.minimumHeight;
dy = h - winCtrl.oldHeight;
}

// Resize the window. For IE, keep client area and frame widths in synch.

if (east || west) {
winCtrl.active.frame.style.width = w + "px";
if (browser.isIE)
winCtrl.active.clientArea.style.width = (w - winCtrl.active.widthDiff) + "px";
}
if (north || south)
winCtrl.active.clientArea.style.height = h + "px";

// Clip the title bar text, if necessary.

if (east || west) {
if (w < winCtrl.active.clipTextMinimumWidth)
winCtrl.active.titleBarText.style.width = (winCtrl.minimizedTextWidth + w - winCtrl.active.minimumWidth) + "px";
else
winCtrl.active.titleBarText.style.width = "";
}

// For a north or west resize, move the window.

if (west)
winCtrl.active.frame.style.left = (winCtrl.oldLeft - dx) + "px";
if (north)
winCtrl.active.frame.style.top  = (winCtrl.oldTop  - dy) + "px";

if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}

function winResizeDragStop(event) {

winCtrl.inResizeDrag = false;

// Remove mousemove and mouseup event captures on document.

if (browser.isIE) {
document.onmousemove = null;
document.onmouseup   = null;
}
if (browser.isNS) {
document.removeEventListener("mousemove", winResizeDragGo,   true);
document.removeEventListener("mouseup"  , winResizeDragStop, true);
}
}

//=============================================================================
// Utility functions.
//=============================================================================

function winFindByClassName(el, className) {

var i, tmp;

if (el.className == className)
return el;

// Search for a descendant element assigned the given class.

for (i = 0; i < el.childNodes.length; i++) {
tmp = winFindByClassName(el.childNodes[i], className);
if (tmp != null)
return tmp;
}

return null;
}

//=============================================================================
// Initialization code.
//=============================================================================

var winList = new Array();
var winCtrl = new Object();

function winInit() {

var elList;

// Initialize window control object.

winCtrl.maxzIndex                        =   0;
winCtrl.resizeCornerSize                 =  16;
winCtrl.minimizedTextWidth               = 100;
winCtrl.inactiveFrameBackgroundColor     = "#c0c0c0";
winCtrl.inactiveFrameBorderColor         = "#f0f0f0 #505050 #404040 #e0e0e0";
winCtrl.inactiveTitleBarColor            = "#808080";
winCtrl.inactiveTitleTextColor           = "#c0c0c0";
winCtrl.inactiveClientAreaBorderColor    = "#404040 #e0e0e0 #f0f0f0 #505050";
winCtrl.inactiveClientAreaScrollbarColor = "";
winCtrl.inMoveDrag                       = false;
winCtrl.inResizeDrag                     = false;

// Initialize windows and build list.

elList = document.getElementsByTagName("DIV");
for (var i = 0; i < elList.length; i++)
if (elList[i].className == "window")
winList[elList[i].id] = new Window(elList[i]);
}

window.onload = winInit;  // run initialization code after page loads.

//]]></script>
</head>
<body>

<!-- Normal page content. -->

<div id="demoBox">

<h3>Windows Demo</h3>

<p>This page contains three sample windows which can be opened using the links
below.</p>

<p>
<a href="" onclick="if (winList['sample1']) winList['sample1'].open(); return false;">Window 1</a>

|
<a href="" onclick="if (winList['sample2']) winList['sample2'].open(); return false;">Window 2</a>
|
<a href="" onclick="if (winList['sample3']) winList['sample3'].open(); return false;">Window 3</a>
</p>

<p>The first two use the default window style while the third demonstrates how
an individual window can be customized. Use your browser's
<code>View Source</code> option to see the full source code.</p>

</div>

<!-- Sample Window 1 -->

<div id="sample1" class="window" style="left:50px;top:150px;width:480px;">
<div class="titleBar">
<span class="titleBarText">The Raven</span>
<img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap1" width="50" height="14" />
<map id="sampleMap1" name="sampleMap1">
<area shape="rect" coords="0,0,15,13"  href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
<area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore"  onclick="this.parentWindow.restore();return false;" />
<area shape="rect" coords="34,0,49,13" href="" alt="" title="Close"    onclick="this.parentWindow.close();return false;" />

</map>
</div>
<div class="clientArea" style="height:200px;">

<h3>The Raven</h3>

<p>Once upon a midnight dreary, while I pondered, weak and weary<br />
Over many a quaint and curious volume of forgotten lore-<br />

While I nodded, nearly napping, suddenly there came a tapping<br />
As of some one gently rapping, rapping at my chamber door<br />
"'T is some visitor," I muttered, "tapping at my chamber door-<br />
<span class="lastLine">Only this and nothing more."</span></p>

<p>Ah, distinctly I remember it was in the bleak December;<br />
And each separate dying ember wrought its ghost upon the floor.<br />

Eagerly I wished the morrow;-vainly I had sought to borrow<br />
From my books surcease of sorrow-sorrow for the lost Lenore-<br />
For the rare and radiant maiden whom the angels name Lenore-<br />
<span class="lastLine">Nameless here for evermore.</span></p>

<p>Then the silken, sad, uncertain rustling of each purple curtain<br />
Thrilled me-filled me with fantastic terrors never felt before;<br />

So that now, to still the beating of my heart, I stood repeating,<br />
"'T is some visitor entreating entrance at my chamber door-<br />
Some late visitor entreating entrance at my chamber door;-<br />
<span class="lastLine">This it is and nothing more."</span></p>

<p>Presently my soul grew stronger; hesitating then no longer,<br />
"Sir," said I, "or Madam, truly your forgiveness I implore;<br />

But the fact is I was napping, and so gently you came rapping,<br />
And so faintly you came tapping, tapping at my chamber door,<br />
That I scarce was sure I heard you"-here I opened wide the door;-<br />
<span class="lastLine">Darkness there and nothing more."</span></p>

<p>Deep into that darkness peering, long I stood there wondering, fearing,<br />
Doubting, dreaming dreams no mortal ever dared to dream before;<br />

But the silence was unbroken, and the stillness gave no token,<br />
And the only word there spoken was the whispered word, "Lenore?"<br />
This I whispered, and an echo murmured back the word, "Lenore!"<br />
<span class="lastLine">Merely this and nothing more.</span></p>

<p>Back into the chamber turning, all my soul within me burning,<br />
Soon again I heard a tapping somewhat louder than before.<br />

"Surely," said I, "surely that is something at my window lattice;<br />
Let me see, then, what thereat is, and this mystery explore-<br />
Let my heart be still a moment and this mystery explore;-<br />
<span class="lastLine">'T is the wind and nothing more!"</span></p>

<p>Open here I flung the shutter, when, with many a flirt and flutter,<br />
In there stepped a stately Raven of the saintly days of yore;<br />

Not the least obeisance made he; not a minute stopped or stayed he;<br />
But, with mien of lord or lady, perched above my chamber door-<br />
Perched upon a bust of Pallas just above my chamber door-<br />
<span class="lastLine">Perched, and sat, and nothing more.</span></p>

<p>Then this ebony bird beguiling my sad fancy into smiling,<br />
By the grave and stern decorum of the countenance it wore,<br />

"Though thy crest be shorn and shaven, thou," I said,"art sure no craven,<br />
Ghastly grim and ancient Raven wandering from the Nightly shore-<br />
Tell me what they lordly name is on the Night's Plutonian shore!"<br />
<span class="lastLine">Quoth the Raven, "Nevermore."</span></p>

<p>Much I marvelled the ungainly fowl to hear discourse so plainly,<br />
Though its answer little meaning-little relevancy bore;<br />

For we cannot help agreeing that no living human being<br />
Ever yet was blessed with seeing bird above his chamber door-<br />
Bird or beast upon the culptured bust above his chamber door,<br />
<span class="lastLine">With such name as "Nevermore."</span></p>

<p>But the Raven, sitting lonely on the placid bust, spoke only<br />
That one word, as if his soul in that one word he did outpour.<br />

Nothing farther then he uttered-not a feather then he fluttered-<br />
Till I scarcely more than muttered, "Other friends have flown before-<br />
On the morrow he will leave me, as my Hopes have flown before."<br />
<span class="lastLine">Then the bird said, "Nevermore."</span></p>

<p>Startled at the stillness broken by reply so aptly spoken,<br />
"Doubtless," said I, "what it utters is its only stock and store<br />

Caught from some unhappy master whom unmerciful Disaster<br />
Followed fast and followed faster till his songs one burden bore-<br />
Till the dirges of his Hope that melancholy burden more<br />
<span class="lastLine">Of 'Never-nevermore.'"</span></p>

<p>But the Raven still beguiling my sad fancy into smiling,<br />
Straight I wheeled a cushioned seat in front of bird and bust and door;<br />

Then, upon the velvet sinking, I betook myself to linking<br />
Fancy unto fancy, thinking what this ominous bird of yore-<br />
What this grim, ungainly, ghastly, gaunt, and ominous bird of yore<br />
<span class="lastLine">Meant in croaking "Nevermore."</span></p>

<p>This I sat engaged in guessing, but no syllable expressing<br />
To the fowl whose fiery eyes now burned into my bosom's core;<br />

This and more I sat divining, with my head at ease reclining<br />
On the cushion's velvet lining that the lamp-light gloating o'er,<br />
But whose velvet-violet lining with the lamp-light gloating o'er,<br />
<span class="lastLine">She shall press, ah, nevermore!</span></p>

<p>Then, methought, the air grew denser, perfumed from an unseen censer<br />
Swung by seraphim whose foot-falls tinkled on the tufted floor.<br />

"Wretch," I cried, "thy God hath lent thee-by these angels he hath sent thee<br />
Respite-respite and nepenthe from thy memories of Lenore;<br />
Quaff, oh, quaff this kind nepenthe and forget this lost Lenore!"<br />
<span class="lastLine">Quoth the Raven, "Nevermore."</span></p>

<p>"Prophet!" said I, "thing of evil!-prophet still, if bird or devil!-<br />
By that Heaven that bends above us-by that God we both adore-<br />

Tell this soul with sorrow laden if, within the distant<br />
Aidenn, It shall clasp a sainted maiden whom the angels name Lenore-<br />
Clasp a rare and radiant maiden whom the angels name Lenore."<br />
<span class="lastLine">Quoth the Raven, "Nevermore."</span></p>

<p>"Be that word our sign of parting, bird or fiend!" I shrieked, upstarting-<br />
"Get thee back into the tempest and the Night's Plutonian shore!<br />

Leave no black plume as a token of that lie thy soul hath spoken!<br />
Leave my loneliness unbroken!-quit the bust above my door!<br />
Take thy beak from out my heart, and take thy form from off my door!"<br />
<span class="lastLine">Quoth the Raven, "Nevermore."</span></p>

<p>And the Raven, never flitting, still is sitting, still is sitting<br />
On the pallid bust of Pallas just above my chamber door;<br />

And his eyes have all the seeming of a demon's that is dreaming,<br />
And the lamp-light o'er him streaming throws his shadow on the floor;<br />
And my soul from out that shadow that lies floating on the floor<br />
<span class="lastLine">Shall be lifted-nevermore!</span></p>

<p><cite>Edgar Allan Poe</cite></p>

</div>
</div>

<!-- Sample Window 2 -->

<div id="sample2" class="window" style="left:200px;top:100px;width:280px;">
<div class="titleBar">
<span class="titleBarText">The Conqueror Worm</span>
<img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap2" width="50" height="14" />
<map id="sampleMap2" name="sampleMap2">
<area shape="rect" coords="0,0,15,13"  href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />

<area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore"  onclick="this.parentWindow.restore();return false;" />
<area shape="rect" coords="34,0,49,13" href="" alt="" title="Close"    onclick="this.parentWindow.close();return false;" />
</map>
</div>
<div class="clientArea" style="height:175px;">

<h3>The Conqueror Worm</h3>

<p>Lo! 'tis a gala night<br />

Within the lonesome latter years!<br />
An angel throng, bewinged, bedight<br />
In veils, and drowned in tears,<br />
Sit in a theatre, to see<br />
A play of hopes and fears,<br />
While the orchestra breathes fitfully<br />

The music of the spheres.</p>

<p>Mimes, in the form of God on high,<br />
Mutter and mumble low,<br />
And hither and thither fly-<br />
Mere puppets they, who come and go<br />
At bidding of vast formless things<br />

That shift the scenery to and fro,<br />
Flapping from out their Condor wings<br />
Invisible Woe!</p>

<p>That motley drama- oh, be sure<br />
It shall not be forgot!<br />
With its Phantom chased for evermore,<br />

By a crowd that seize it not,<br />
Through a circle that ever returneth in<br />
To the self-same spot,<br />
And much of Madness, and more of Sin,<br />
And Horror the soul of the plot.</p>

<p>But see, amid the mimic rout<br />

A crawling shape intrude!<br />
A blood-red thing that writhes from out<br />
The scenic solitude!<br />
It writhes!- it writhes!- with mortal pangs<br />
The mimes become its food,<br />
And seraphs sob at vermin fangs<br />

In human gore imbued.</p>

<p>Out- out are the lights- out all!<br />
And, over each quivering form,<br />
The curtain, a funeral pall,<br />
Comes down with the rush of a storm,<br />
While the angels, all pallid and wan,<br />

Uprising, unveiling, affirm<br />
That the play is the tragedy, "Man,"<br />
And its hero the Conqueror Worm.</p>

<p><cite>Edgar Allan Poe</cite></p>

</div>
</div>

<!-- Sample Window 3 -->

<div id="sample3" class="window" style="left:350px;top:50px;width:300px;background-color:#f0c090;border-color:#ffe0b0 #a07040 #805020 #e0b080;">
<div class="titleBar" style="background-color:#c08060;color:#ffffcc;">
<span class="titleBarText">Spirits of the Dead</span>
<img class="titleBarButtons" alt="" src="graphics/altbuttons.gif" longdesc="graphics/altbuttonslow.gif" usemap="#sampleMap3" width="50" height="14" />
<map id="sampleMap3" name="sampleMap3">
<area shape="rect" coords="0,0,15,13"  href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
<area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore"  onclick="this.parentWindow.restore();return false;" />

<area shape="rect" coords="34,0,49,13" href="" alt="" title="Close"    onclick="this.parentWindow.close();return false;" />
</map>
</div>
<div class="clientArea" style="height:150px;background-color:#ffffcc;color:#806040;border-color:#805020 #e0b080 #ffe0b0 #a07040;scrollbar-base-color:#f0c090;">

<h3>Spirits of the Dead</h3>

<p>Thy soul shall find itself alone<br />
'Mid dark thoughts of the grey tomb-stone;<br />

Not one, of all the crowd, to pry<br />
Into thine hour of secrecy.</p>

<p>Be silent in that solitude,<br />
Which is not loneliness- for then<br />
The spirits of the dead, who stood<br />
In life before thee, are again<br />

In death around thee, and their will<br />
Shall overshadow thee; be still.</p>

<p>The night, though clear, shall frown,<br />
And the stars shall not look down<br />
From their high thrones in the Heaven<br />
With light like hope to mortals given,<br />

But their red orbs, without beam,<br />
To thy weariness shall seem<br />
As a burning and a fever<br />
Which would cling to thee for ever.</p>

<p>Now are thoughts thou shalt not banish,<br />
Now are visions ne'er to vanish;<br />

From thy spirit shall they pass<br />
No more, like dew-drop from the grass.</p>

<p>The breeze, the breath of God, is still,<br />
And the mist upon the hill<br />
Shadowy, shadowy, yet unbroken,<br />
Is a symbol and a token.<br />

How it hangs upon the trees,<br />
A mystery of mysteries!</p>

<p><cite>Edgar Allan Poe</cite></p>

</div>
</div>

</body>
</html>

source

Category: Uncategorized | Tags: , , , ,
snippets | March 11, 2012
No comments

Resizing a DIV

<html>
<head>
<style type="text/css">
* a { outline: none; }
body { font: 14px Arial, Verdana, sans-serif; text-align: center; }
div { border: 1px solid #ccc; border-bottom-width: 3px; border-right-width: 3px; padding: 100px 0; width: 300px; margin: 10px auto; }
.maior { width: 99%; }
input { margin: 10px auto; }
</style>
</head>
<body>
<div id="campo" class="">Normal div</div>
<input type="button" value="Make it wider" onClick="aumentaDiv()" />&nbsp;&nbsp;
<input type="button" value="Make it normal" onClick="diminuiDiv()" />

<script type="text/javascript">
var campoAtivo = document.getElementById("campo");
function aumentaDiv() {
campoAtivo.className = "maior";
campoAtivo.innerHTML = "Wider div";
}
function diminuiDiv() {
campoAtivo.className = "";
campoAtivo.innerHTML = "Normal div";
}
</script>
</body>
</html>

source

Category: Uncategorized | Tags: , ,
snippets | February 23, 2012
No comments

AS2 MdN リキッドサイズ と50パーセントボックス

/*
リキッドサイズ
MdN P035
ステージにfiftyPer.boxを用意 = 50%固定
*/
Stage.scaleMode = "noScale";
Stage.align="LT"; // どこを中心に拡大縮小するか

//リスナーオブジェクトを作成
var myListener:Object = new Object();

//リサイズされた時の処理
myListener.onResize = function () {

var SW = Stage.width;
var SH = Stage.height;

//X軸
LT._x = L._x = LB._x = 10;
T._x = B._x = fiftyPer._x = SW/2;
RT._x = R._x = RB._x = SW-10;

//Y軸
LT._y = T._y = RT._y = 10;
L._y = R._y = fiftyPer._y = SH/2;
LB._y = B._y = RB._y = SH - 10;

//拡大縮小
fiftyPer.box._width = SW/2;
fiftyPer.box._height = SH/2;
}
//リスナーオブジェクトをイベントリスナーに登録
Stage.addListener(myListener);

source

Category: Uncategorized | Tags: , , , , , ,
snippets | February 12, 2012
No comments

Image Size Restrainer

function sizeme($img){
$maxx=400;
$maxy=300;
list($width,$height)=getimagesize($img);
if($width>$maxx){
$newwidth = $maxx;
$newheight = round($newwidth/$width*$height);
} else {
$newwidth=$width;
$newheight=$height;
}
if($newheight>$maxy){
$newheight1=$maxy;
$newwidth1=round($newheight1/$newheight*$newwidth);
} else {
$newheight1=$newheight;
$newwidth1=$newwidth;
}
$out=array('width'=>$newwidth1,"height"=>$newheight1);
return $out;
}

source

Category: Uncategorized | Tags: , , ,
snippets | February 7, 2012
No comments

Resize Image

<?php
/*
ImageThumb - Creates a thumbnail image from another based on specified sizes

SourceImage - The location of the image in which you want to resize
DestImage - The location to save the thumb, use null if you want to just display to browser
Width - The resized width of the image
Height - The resized height of the image
Type - The image type in which you want to save

Note: The thumb is resized while keeping the aspect ratio, so width and height are not the
absolute width and height.
*/

function ImageThumb($sourceImage, $destImage, $width, $height, $type = "png") {
$type = strtolower($type);
$imageSize = getimagesize($sourceImage);

if($imageSize[0] > $imageSize[1]) {
$newWidth = $width;
$newHeight = $imageSize[1] * ($newWidth / $imageSize[0]);
}
else {
$newHeight = $height;
$newWidth = $imageSize[0] * ($newHeight / $imageSize[1]);
}

switch(image_type_to_mime_type($imageSize[2])) {
case "image/jpeg":
$image = imagecreatefromjpeg($sourceImage);
break;
case "image/gif":
$image = imagecreatefromgif($sourceImage);
break;
case "image/png":
$image = imagecreatefrompng($sourceImage);
break;
default:
$t = image_type_to_mime_type($imageSize[2]);
echo "The file type {$t} is not supported, please use either jpeg, gif, or png";
break;
}

$thumb = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($thumb, $image, 0, 0, 0, 0, $newWidth, $newHeight, $imageSize[0], $imageSize[1]);

switch($type) {
case "jpg":
case "jpeg":
header("Content-type: image/jpeg");
imagejpeg($thumb, $destImage);
break;
case "gif":
header("Content-type: image/gif");
imagegif($thumb, $destImage);
break;
case "png":
header("Content-type: image/png");
imagepng($thumb, $destImage);
break;
default:
echo "The image type {$type} is not supported, please choose another.";
break;
}

imagedestroy($image);
imagedestroy($thumb);
}
?>

source

Category: Uncategorized | Tags: , , , ,
snippets | February 5, 2012
No comments

Quickly resize images in command line (requires ImageMagick)

convert -resize WIDTHxHEIGHT source.jpg target.png

source

Category: Uncategorized | Tags: , ,
snippets | January 21, 2012
No comments

Mootools Draggable / Resize Example

function resizeDrag(){
//create an array of elements with class 'drag'
var draggables = $ES('.drag');
//For each of the above elements run this function(pass in the selected function el)
draggables.each(function(el){
//Make the element dragable. Draging starts on the element with class = handle
el.makeDraggable({handle: el.getElementsBySelector('.handle')[0]});
//Make the element resizable. Resizing starts on the element with class = resize
el.makeResizable({handle: el.getElementsBySelector('.resize')[0]});
});
}

source

Category: Uncategorized | Tags: , , ,
snippets | January 8, 2012
No comments

Upload and resize with RMagick

require 'RMagick'
class Profile < ActiveRecord::Base
belongs_to :user

#image = the image passed from params[:image]
#file_type = the confirmed filetype from the controller
#current_user = various information about the current user
def self.upload(image, file_type, current_user)
#set default cols and rows for our two images that will be created from the uploaded user image
img_size = {:main =>{:cols => 250,:rows => 375},
:thumb =>{:cols =>80, :rows =>120}
}
#set base directory for the users image
imgDir = "#{RAILS_ROOT}/public/images/user_images"
#set the base name for our userimage
userImg = " #{current_user.login}-#{current_user.id}"
#loop through the image dir and delete any old user images
Dir.foreach(imgDir){|file|
if file.to_s.include?(userImg)
File.unlink("#{imgDir}/#{file}")
end
}
#read the image from the string
imgs = Magick::Image.from_blob(image.read)
#change the geometry of the image to suit our predefined size
main_image = imgs.first.change_geometry!("#{img_size[:main][:cols]}x#{img_size[:main][:rows]}") { |cols, rows, img|
#if the cols or rows are smaller then our predefined sizes we build a white background and center the image in it
if cols < img_size[:main][:cols] || rows < img_size[:main][:rows]
#resize our image
img.resize!(cols, rows)
#build the white background
bg = Magick::Image.new(img_size[:main][:cols],img_size[:main][:rows]){self.background_color = "white"}
#center the image on our new white background
bg.composite(img, Magick::CenterGravity, Magick::OverCompositeOp)

else
#in the unlikely event that the new geometry cols and rows match our predefined size we will not set a white bg
img.resize!(cols, rows)
end
}
main_image.write "#{imgDir}/#{userImg}.#{file_type}"

thumb = imgs.first.change_geometry!("#{img_size[:thumb][:cols]}x#{img_size[:thumb][:rows]}") { |cols, rows, img|
if cols < img_size[:thumb][:cols] || rows < img_size[:thumb][:rows]
img.resize!(cols, rows)
bg = Magick::Image.new(img_size[:thumb][:cols],img_size[:thumb][:rows]){self.background_color = "white"}
bg.composite(img, Magick::CenterGravity, Magick::OverCompositeOp)

else
img.resize!(cols, rows)
end
}
thumb.write "#{imgDir}/#{userImg}-thumb.#{file_type}"
if FileTest.exist?("#{imgDir}/#{userImg}.#{file_type}")
return "The file was written and its name is #{userImg}.#{file_type}"
else
return false
end
end
end

source

Category: Uncategorized | Tags: , , , ,
« Older Entries