Ethelcofie’s How To Articles

August 27, 2008

How to Write to create a Lightbox Effect with Div’s and Javacript

Filed under: Development Articles — ethelcofie @ 1:03 pm
Tags: , ,

How to Write to create a Lightbox Effect with Div’s and Javacript

The tutorial shows a the light box effect and the use of iframes (changing the src target of the iframe)
A quick and easy snipper of code with minimal hassle

1.The Html Code

<html>
<head>Light Box Effect </head>
<body>
<!–image that onclick triggers the light box effect –>
<img src=”Box.jpg” name=”Box Image” onclick=’LightEffect(“http://www.flickr.com/”)’/>

<!–Div which will show light box effect –>
<div id=’light’ class=’white_content’ style=”>
<a href=’javascript:void(0)’ onclick=’CloseFrame();’>Close</a> <!–Close button –>
<iframe id=’pictureframe’ src=” width=’800′ height=’800′> </iframe></div>”; <!–iframe –>
</div>
<!–div the causes fade shadow ovwe web page –>
<div id=’fade’ class=’black_overlay’>
</div>
</body>
</html>

2.Then the Javascript function that display lightbox effect .

function LightEffect(source)
{
// new url retrieved
var url =source;

// new iframe url set
parent.document.getElementById(“pictureframe”).src=url;

// make lightframe div visible
document.getElementById(“light”).style.display=’block’;

//fadeout web page
document.getElementById(“fade”).style.display=’block’;
}

3.Then the function that closes the lighbox

function CloseFrame()
{
// iframe url removed
parent.document.getElementById(“pictureframe”).src=”;

//make lightframe div not visible
document.getElementById(“light”).style.display=’none’;

//remove fade from web page
document.getElementById(“fade”).style.display=’none’;
}

4. The CSS section (to be out in seperate css document or within the html in the head section )

.black_overlay{

display: none;
position: absolute;

top: 0%;

left: 0%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;
width: 100%;

height: 100%;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;
width: 800px;

height: 800px;

padding: 16px;

}

5.Complete Code

<html>
<head>
<title>Light Box Effect </title >
<style type=”text/css”>

.black_overlay{

display: none;
position: absolute;

top: 0%;

left: 0%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;
width: 100%;

height: 100%;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;
width: 800px;

height: 800px;

padding: 16px;

}

</style>

</head>
<body>
<!–javascript –>
<script type=”text/javascript”>
function LightEffect(source)
{

var url =source;
parent.document.getElementById(“pictureframe”).src=url;
document.getElementById(“light”).style.display=’block’;
document.getElementById(“fade”).style.display=’block’;
}

function CloseFrame()
{
parent.document.getElementById(“pictureframe”).src=”;
document.getElementById(“light”).style.display=’none’;
document.getElementById(“fade”).style.display=’none’;
}
</script>

<!–image that onclick triggers the light box effect –>
<img src=”Box.jpg” name=”Box Image” onclick=’LightEffect(“http://www.flickr.com/”)’/>

<!–Div which will show light box effect –>
<div id=’light’ class=’white_content’ style=”>
<a href=’javascript:void(0)’ onclick=’CloseFrame();’>Close</a> <!–Close button –>
<iframe id=’pictureframe’ src=” width=’800′ height=’800′> </iframe></div>”; <!–iframe –>
</div>
<!–div the causes fade shadow ovwe web page –>
<div id=’fade’ class=’black_overlay’>
</div>
</body>
</html>

Hope this tutorial was helpful

July 29, 2008

How to Write a Process Order Stored Procedure in T-SQL

Filed under: Development Articles — ethelcofie @ 2:02 pm
Tags: , ,

PERSISTANT STORED MODULE CHOSEN: PROCESS ORDER

This Persistent stored module Process Processes Orders by reading the oldest unfulfilled Order and Flags it status as Fulfilled when there is enough stock to fulfil other or leaves to Unfulfilled or Awaiting Stock otherwise.

Database Structure

Stock control database

Stock control database

5.1 Pseudocode

START

Get oldest Unfufilled Order data

Get the catalogue data for that Order

For Each Catalogue Item

If Catalogue Item type is Stock

Then

if Catlogue Item available stock> Catalogue Order Quantity

Then

Set Order Status =Fufilled

Else

Set Order Status=Awaiting Stock

STOP

Else if Catalogue Item type is Non-Stock

Create supplier Order

If Error in then return transaction to former state

STOP

5.2 Actual code

CREATE PROCEDURE [dbo].[ProcessOrder]

– Add the parameters for the stored procedure here

AS

BEGIN

– SET NOCOUNT ON added to prevent extra result sets from

– interfering with SELECT statements.

SET NOCOUNT ON;

declare @catId varchar(max)

declare @count int –count

declare @iRow int –showing number of rows

declare @itemtype varchar(50)

declare @available_stock int

declare @orderqty int

declare @Orderid varchar(max)

declare @checkAwaiting int

– Insert statements for procedure here

DECLARE @tbl TABLE(

RowID INT IDENTITY(1, 1),

CatlID VARCHAR(Max),

Qty INT,

OrderID VARCHAR(MAX))

INSERT @tbl

SELECT Catl_id,Quantity,Order_id from dbo.VwUnfufilledOrders where VwUnfufilledOrders.Order_date=(Select min(VwUnfufilledOrders.Order_date)

from dbo.VwUnfufilledOrders)

SET @count = @@ROWCOUNT

SET @iRow = 1

set @checkAwaiting=0

Select @count

Begin transaction– start transcation

–call function for availability

—start loop to check for availabilty of every catlogue item

WHILE @iRow <= @count

begin

Select @catId=CatlID,@orderqty=Qty,@Orderid=OrderID from @tbl where RowID=@iRow

select @itemtype=Item_Type, @available_stock=Available_stock from dbo.Catlogue_Item where Catl_id=@catId

if (@itemtype=‘Stock’)

begin

print ‘Order id is’+@Orderid+‘with number of rows=’+ convert(varchar,@count) +‘it is a stock item’

if(@available_stock>@orderqty)

begin

print ‘Oder id is’+@Orderid+‘ /with Qty=’+ convert(varchar(50),@orderqty) +‘and available stock=’+convert(varchar(50),@available_stock)

Update dbo.CustOrder set Status=‘Fufilled’ where Order_id=@Orderid

If @@error <> 0

goto ERR_HANDLER

end

else

begin

Update dbo.CustOrder set Status=‘UnFufilled’ where Order_id=@Orderid

print ‘Qty not enough’

set @checkAwaiting=1

goto ERR_HANDLER

– stock insufficient so Order status remains unfufilled

–call stock replenish function

end

end

if (@itemtype=‘NonStock’)

begin

– create supplier order

print ‘Its a supplier direct order’

end

SET @iRow = @iRow + 1

end

Commit Transaction

Return 0

ERR_HANDLER:

Select ‘Unexpected error occurred!’

Rollback transaction

if ( @checkAwaiting=1)Update dbo.CustOrder set Status=‘AwaitingStock’ where Order_id=@Orderid– to be removed

Return 1

END

May 19, 2008

Flickr API: How to perform Authentication using PHP

Filed under: Development Articles — ethelcofie @ 1:32 pm
Tags: ,

I presented this at Brighton BArCamp3 download power point

//1.Create a login link

$secret_key=’secret key’;

$params = array(
‘api_key’=> ‘api_key’,
‘perms’ => ‘write’);

$encoded_param = array();

//1.a Encode and organize authentication parameters

foreach($params as $key => $value)
{
$encoded_params[] = urlencode($key).’=’.urlencode($value);
}

//1b Create the api signature :an md5 of the parameters in alphabetic order


$apisig=md5($secret_key.’api_key’.$params['api_key'].’perms’.$params['perms']);

//1.c append api signature to url

$url =”http://flickr.com/services/auth/?”.

implode(‘&’,$encoded_params).”&api_sig=”.$apisig;

header(‘Location:’.$url); –>This will then redirect back to your call back url and include a frob value

//2.Get and use frob to retrive authentication token

//2.a Get frob from url

if ($_REQUEST['frob'])
{
//using php_serial paramater serial to retrieve the format in serialized data structure
 $frobparams = array(
‘api_key’=> ‘api_key’,
‘frob’ => ‘frob’ ,
‘method’ => ‘flickr.auth.getToken’,
‘format’ => ‘php_serial’);

$encoded_param = array();

foreach($frobparams as $key => $value)
{
$encoded_params[] = urlencode($key).’=’.urlencode($value);
}
$url = “http://api.flickr.com/services/rest/?”.implode(‘&’, $encoded_params);

//2.bCreate the api signature :an md5 of the parameters in alphabetic order

$apisigfrob=md5(

$secret_key.

‘api_key’. $frobparams ['api_key'].

‘format’.$frobparams ['format'].

‘frob’.$frobparam['frob'].

‘method’.$frobparams['method']);

//2.c Construct url to auth.getToken

$url=$url.”&api_sig=”.$apisigfrob;

// 2.d Get url response/contents
$rsp = file_get_contents($url);

$rsp_obj = unserialize($rsp);

$details=$rsp_obj;

//2.e Glean Auth Token from $details

if($details[stat]==’ok’)
{
echo $details['auth']['token']['_content'];
}
else
{

//dispaly error message if there is a problem
echo $details [message] ;

}

}

Just getting started: The Authentication Token can then be ussed as part of the parameter for a method call

« Previous Page

Blog at WordPress.com.