...

View Full Version : Senior Coders ..help plzz



paladinckm
06-24-2008, 10:10 PM
Hi,
I am trying to pop-up a box similar to alertbox kind of thing but I am having a problem in the approach as my pop box should be able to take input into three text fields where we can enter text and also ..the pop-up has to be colorful with borders etc ofcourse with textinside side ..warning or welcoming..I have tried to use css but succeded only to a little percentage ..so I hope someone might give a solution...

binaryWeapon
06-24-2008, 10:20 PM
Don't address your question to a particular audience. We regulars and new coders may be nubs but occasionally we help. :). And plus, you don't want to exclude supreme and elite coders!

I would try a lightbox-ish type of thing. http://www.ajaxrain.com/tagcloud.php?tag=lightbox has a list of good ones. A lot of them are customizable, and they already have beautiful effects. Most of them also support html content, some even have simple XHR APIs for dynamic AJAX requests. This page (http://planetozh.com/projects/lightbox-clones/) shows a rundown of the hundreds of choices in lightbox scripts and a comparison of their features.

If you want to make a manual one, just have an absolutely positioned and centered DIV and fill it with your content every time you call the alert as well as make it appear.

Basic idea:


function customAlert(text) {
var alert=document.getElementById('alertDiv');
alert.innerHTML=text;
alert.style.display="block";
... etc ...
}

Basscyst
06-24-2008, 10:28 PM
Here's one I wrote if you don't feel like hunting.



//*******************************************************
// Turns on the lightbox
//*******************************************************
function lightBoxOn(){
var cover_element=document.getElementById('e');
var div=document.createElement('div');
div.style.position='absolute';
div.id='lightbox';
div.style.left=cover_element.offsetLeft+'px';
div.style.top='0px';
div.style.height=cover_element.offsetHeight+'px';
div.style.width=cover_element.offsetWidth+'px';
div.style.backgroundColor='#CCCCCC';
div.style.clear='left';
div.style.opacity='.5';
div.style.filter='alpha(opacity=50)';
div.style.zIndex='100';

var shim=document.createElement('iframe');
shim.style.position='absolute';
shim.id='lightbox_shim';
shim.style.left=cover_element.offsetLeft+'px';
shim.style.top='0px';
shim.style.height=cover_element.offsetHeight+'px';
shim.style.width=cover_element.offsetWidth+'px';
shim.style.backgroundColor='#CCCCCC';
shim.style.clear='left';
shim.style.opacity='.5';
shim.style.filter='alpha(opacity=50)';
shim.style.zIndex='99';
document.body.appendChild(shim);
document.body.appendChild(div);
}
//*******************************************************
// Turns off the lightbox
//*******************************************************
function lightBoxOff(){
document.body.removeChild(document.getElementById('lightbox'));
document.body.removeChild(document.getElementById('lightbox_shim'));
document.body.removeChild(document.getElementById('lightbox_content'));
}
//*******************************************************
// Adds a custom object to the lightbox
//*******************************************************
function addToLightBox(obj){
var cover_element=document.getElementById('e');
document.body.appendChild(obj);
obj.style.position='absolute';
obj.style.left=(((cover_element.offsetWidth / 2) + (cover_element.offsetLeft*1) - obj.offsetWidth / 2)) +'px';
obj.style.top=((cover_element.offsetHeight / 2) - (obj.offsetHeight*1))+'px';
obj.style.zIndex='101';
obj.id='lightbox_content';
}


Basscyst



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum