Archive for the ‘Webpage’ Category

« Older Entries

Cool Javascript|slideshow function|rotator function part2

June 20, 2008 - 1:09 pm No Comments

This is a second method for the slideshow function | rotator function.
The difference about this one is that the image fades more smoothly.

A. To put in the header:

1. the javscript page

B. To put in the body:

The slideshow

<script src=”js/ja.header.js” type=”text/javascript”></script>
<script type=”text/javascript”>var fadetime = “3000″;</script>
<div id=”ja_header_jsfade” >
<img src=”images/img_1.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_2.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_3.jpg” alt=” Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_4.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />

C. The JS page:

1. ja.header.js

/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
*/

window.addEventListener?window.addEventListener(’load’,so_init,false):window.attachEvent(’onload’,so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false, div;
var fadetime = 3000;
function so_init()
{
if(!d.getElementById || !d.createElement)return;

imgs = d.getElementById(’ja_header_jsfade’).getElementsByTagName(’img’);
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = ‘block’;
imgs[0].xOpacity = .99;

setTimeout(so_xfade,fadetime);
}

function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = ‘block’;
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0)
{
imgs[current].style.display = ‘none’;
current = nIndex;
setTimeout(so_xfade,fadetime);
}
else
{
setTimeout(so_xfade,50);
}

function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = ‘alpha(opacity=’ + (obj.xOpacity*100) + ‘)’;
}
}

Tags:   Posted in Webpage |

Cool Javascript|slideshow function|rotator funtion

June 20, 2008 - 10:15 am No Comments

This function is compatible with any web extension. Html, AsP, PHP, etc….
It’s cool and easy to manipulate, this way you don’t need any flash animation or  gif images. Just normal slideshow for banner rotator or photo album slideshow.

1. What to put in the <head>:
<script type=”text/javascript”>
var imgs1 = new Array(”images/banner1.jpg”,”images/banner2.jpg”,”images/banner3.jpg”); <!–images–>
var lnks1 = new Array(”index.asp”,”index.asp”,”index.asp”);
var alt1 = new Array(”MVS - BVBA”,”MVS - BVBA”,”MVS - BVBA”);
var currentAd1 = 0;
var imgCt1 = 3; <!– the total images that will be use–>
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById(’adBanner1′);
var link1 = document.getElementById(’adLink1′);
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById(’adLink1′).href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval(”cycle1()”,3000); <!– the time interval = the time limit between the images–>

</script>

</head>

2. What to put in the <body>:

<tr>
<td align=”left” valign=”top”><a href=”"urllink1“” id=”adLink1” target=”_top”><img src=”images/banner1.jpg“  alt=”MVS - BVBA” width=”780″ height=”329″ “id=”adBanner1” border=”0″/></a></td>
</tr>

</body>

Well done - with this easy function you can rotate any banner or header images how many and how long you want to display on your website.

— Groeten, Rofaldez —

Tags:   Posted in Webpage |

Pro tricks 3

June 18, 2008 - 12:17 pm No Comments

Proximedia header page

Keep the header page clean and simple like the example they provide us with from 1 of their projekt.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<%
if request(”DocID”) = “” then
CMSdocid = “43849″       <!– change to the index ID –>
else
CMSdocid = request(”DocID”)
end if

if request(”langue”) = “” then
CMSlangue = “NL”
else
CMSlangue = request(”langue”)
end if
%>
<!– #include virtual=”../modules/CMS.asp” –> <!–Otherwise it will not work with the CMS–>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>><%getMeta “33776″,”NL”,”Title”%></title>
<meta name=”Customer” content=”03023813“>
<META name=”Author” content=”Pro”>
<meta name=”geography” content=”Stad, land, postcode”>
<META name=”Description” content=”<%getMeta “33776″,”NL”,”Description”%>” lang=”nl”>
<META name=”Keywords” content=”<%getMeta “33776″,”NL”,”Keywords”%>” lang=”nl”>
<meta name=”language” content=”<% =”NL”  %>“>
<meta name=”Copyright” content=”Pro”>
<meta name=”publisher” content=”Pro”>
<META name=”Revisit-After” content=”15 days”>
<meta name=”robots” content=”ALL”>
<META http-equiv=”imagetoolbar” content=”no”>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script language=”JavaScript” src=”js/plan.js“></script>
</head>

Usually the header is split with some part of the body piece, mostly with the header image, banner, logo, etc…If changes are to be done in the header I will update immediately.

Tags:   Posted in Webpage |

Pro tricks 2

June 18, 2008 - 12:08 pm No Comments

ASP code for Page.asp in “pro”:

If you manage to contruct a simple if and els statement in asp this would not be a problem to construct the page.asp pages for “pro” clients.
Example:

  • To receive the content from a activated ID in the CMS:    
    <% getBloc CMSdocid,CMSlangue,”Info” %>
  • To display the contact form page:
    <% if CMSdocid = “43857″ then %>
    <% getBloc CMSdocid,CMSlangue,”" %>
    <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td valign=”top”> <!– #include file=”ContactForm.asp” –> </td>
    </tr>
    </table> <% end if %>
  • To display the photogallery in “pro”:
    <% if CMSdocid = “43856″ then %>
    <% getBloc CMSdocid,CMSlangue,”" %>
    <% getGallery “33776″,CMSlangue,”" %>     <% end if %>

So for a complete list to display the content and modules in “pro”:

<% if CMSdocid = “43856″ then %>
<% getBloc CMSdocid,CMSlangue,”" %>
<% getGallery “33776″,CMSlangue,”" %>
<% elseif CMSdocid = “43857″ then %>
<% getBloc CMSdocid,CMSlangue,”" %>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td valign=”top”> <!– #include file=”ContactForm.asp” –> </td>
</tr>
</table>
<%  else  %>
<% getBloc CMSdocid,CMSlangue,”Info” %>
<% end if %>

As you can see for combining 3 requested content we use the if, then, ifelse, endif statement in ASP page.
Stay up to date for more content code for the upcoming devastating asp code for proximedia.

Tags:   Posted in Webpage |

Pro tricks 1

June 18, 2008 - 11:50 am No Comments

Html to ASP:

We are developing and designing websites for “pro”. “Pro” uses a CMS for all websites of the clients. This CMS uses asp code and where the website should be very strict under “pro” requirements. For example: “pro” logo (with hyperlink), huge banner (most website), etc…

For developing the ASP page the html page will be devided mostly in:

1. header.asp
2. navigation.asp
3. page.asp
4. footer.asp
5 adres.asp (sometimes)

For including asp pages we use:

<!–#include file=”header.asp”–>
<!–#include file=”navigation.asp”–>
<!–#include file=”footer.asp”–>

Tags:   Posted in Webpage |

« Older Entries