|
JavaScript - Coffeecup Form In Lightbox Or Layer?
Hi. I've used CoffeeCup Form Builder to create a nice form for my site and would like to have it open in a lightbox/thickbox, or open in a layer? (If it matters, do have an iFrame on the page, FYI).
I've got LightBox Gone Wild to work nicely, except it won't load the form. If I open the HTML page (directly) the form works fine. This is the code on the HTML page: Code: <script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent"></div>
<script type="text/javascript">
var so = new SWFObject("form.swf", "form.xml", "653", "527", "7,0,0,0", "#ffffff");
so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
so.addParam("quality", "high");
so.addParam("scale", "noscale");so.addParam("salign", "lt");
so.addParam("wmode", "transparent");
so.addParam("FlashVars", "xmlfile=form.xml&w=653&h=527");
so.write("flashcontent");</script>
Thanks in advance... ---- Okay. I used CoffeCup Form Builder for my form and wanted it to open like the examples at their website: http://www.coffeecup.com/form-builder. Having it on the page or in a pop-up was okay, but I like the 'LightBox' effect. Anyway, someone did help me and I wanted to share the code in case others can use it. It uses an iframe that opens in a new layer. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planing is to use the CSS and JS in an external file rather than in the <head>: Code: <style type="text/css">
div#OVERLAY
{
position: absolute; top: 0px; left: 0px;
width: 100%; height: 1200px;
background-color: black;
-moz-opacity: 0.70;
opacity: 0.60;
filter: alpha(opacity=70);
z-index: 10;
display: none;
}
div#FORMHOLDER
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-color: transparent;
text-align: center;
z-index: 15;
display: none;
margin: 0px;
padding: 0px;
right: 0px;
bottom: 0px;
}
div#FORMHOLDER span.closer
{
padding-left: 100px; padding-right: 100px;
color: #E5BC9D;
background-color: black;
}
div#FORMHOLDER iframe
{
width: 653px;
height: 527px;
margin: 0px;
padding: 0px;
background-color: #000;
}
</style>
<script type="text/javascript">
function overshow()
{
var hold = document.getElementById("FORMHOLDER");
hold.style.display = "block";
var stop = parseInt(document.body.scrollTop);
if ( isNaN(stop) ) stop = 0;
if ( stop == 0 )
{
var stop = parseInt(document.documentElement.scrollTop);
if ( isNaN(stop) ) stop = 0;
}
hold.style.top = stop + 50 + "px";
document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
document.getElementById("OVERLAY").style.display = "none";
document.getElementById("FORMHOLDER").style.display = "none";
}
</script>
Next, use the <div> and an <iframe> tag in the fist line after the <body> tag: Code: <div id="OVERLAY"></div> <div id="FORMHOLDER"> <span class="closer" onclick="overoff()">Click here to close</span><br /> <iframe src="form.html" scrolling="no" frameborder="0"></iframe> <br /><span class="closer" onclick="overoff()">Click here to close</span> </div> Finally, when you link to the form page CoffeeCup creates, the code is: Code: <a href="#" onclick="overshow(); return false;">link</a> I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers! Similar Tutorialsplease i want to know how to make lightbox effects with the idea of switching between pages using the lightbox please follow this link: http://particletree.com/examples/lightbox/ while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data... and on third page he will have a message that his registration is done successfully.. so how to switch between pages in lightbox effects??? Hei! I am trying to use a contact form which appears in a lightbox from : http://www.xul.fr/javascript/lightbox-form.html It is working great but, of course I have a problem. My page is very big and when I want my page to scroll to the point where the form is. I am using window.scrollTo function. the problem is that before scrolling to that point , it automatically scrolls to the coordinates (0,0) and only after that. I am posting my javascript and css code. Thanks for your help ! JAVASCRIPT Code:
function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="block";
if(id=='boxa')
{
window.scrollTo(2500,0);
}
else
{
window.scrollTo(100,100);
}
return;
}
function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}
function openbox(formtitle, fadin,boxtitle,boxN)
{
var box = document.getElementById(boxN);
document.getElementById('filter').style.display='block';
//var btitle = document.getElementById(boxtitle);
// btitle.innerHTML = formtitle;
// var btitle = document.getElementById(boxtitle);
// btitle.innerHTML = formtitle;
if(fadin)
{
gradient(boxN, 0);
fadein(boxN);
}
else
{
box.style.display='block';
}
}
// Close the lightbox
function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('filter').style.display='none';
document.getElementById('boxa').style.display='none';
document.getElementById('filter').style.display='none';
}
CSS Code:
#filter
{
display: none;
position: absolute;
top: -500px;
left: -500px;
width: 7200px;
height: 3300px;
background-color: #000;
z-index:10;
opacity:0.5;
filter: alpha(opacity=50);
}
#box
{
display: none;
position: absolute;
top: 20%;
left: 20%;
width: 400px;
height: 200px;
padding: 48px;
margin:0;
border: 1px solid black;
background-color: white;
z-index:101;
overflow: none;
}
#boxtitle
{
position:absolute;
float:center;
top:0;
left:0;
width:496px;
height:24px;
padding:0;
padding-top:4px;
left-padding:8px;
margin:0;
border-bottom:4px solid #3CF;
background-color: #09c;
color:white;
text-align:center;
}
#boxa
{
display: none;
position: absolute;
top: 350px;
left: 2950px;
width: 700px;
height: 200px;
padding: 48px;
z-index:101;
overflow: visible;
/* background-image: url(../imagini/tutorial.png); */
background-repeat:no-repeat;
}
Hey there guys, I am building a site of which I would like the contact information and form to pop up from the button on the menu/header frame into the main frame as a lightbox ...no matter which page is loaded in the main frame. I was trying to experiment with the archived "jQuery Contact form for your website" tutorial from web devlopment blog . com. (I didnt want to post a link to it as I dont want to possibly flag the moderators) Any Ideas? Go to http://whitetailfantasies.com to see the layout and what I am going for. Thanks Hi Guys, I'm developing a registration form to be viewed on an iPad, this will be put on display in store for customers to complete. The idea is that once the form has been completed a success message will show in lightbox form (currently using query reveal) and then after a few seconds disappear and the form will be refreshed. Any idea on how to do this? I am using the below code but the obvious error is with the action. "<form name="signup" class="form" id="signup" action="data-reveal-id="myModal"" method="post" onsubmit="return validate_signup(this)">" All help very much appreciated. Hi, could someone please tell me what I'm doing wrong with this page? http://www.silvergatehomes.com/customhomestest.html I've tried a bunch of things and cannot figure out what I'm doing wrong. Thanks. P.S. The reason I'm writing is because the images aren't opening. I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides. this is the code im using: Code:
// Javascript
<script language="javascript">
$(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000);
$("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
});
</script>
// CSS
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
// HTML
<a id="show-panel" href="#" class="small">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#" class="small">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
http://www.fotoderyadijital.somee.co...cekimleri.html why my gallery is too slow when i double click the image is it about lightbox script or images is too big size. can you check for me. Hello. Am I missing any coding or anything? I'm really confused and have yet to find any help. I got the instructions from http://www.huddletogether.com/projects/lightbox2/ I would go to their forums but haven't received an approval email for over a week. Odd. Anyway, here is my link with the sample thumbnail. It opens the image in a new page. Thanks! http://creativepink.net/packaging.php Figured it out... admin can delete.
Hi, I am using Lightbox+ and overall it's very good for my needs. However it has a small problem that is causing me to loose hair, I have tried to fix it but my grasp of Javascript just isn't cutting it. If you goto http://serennz.sakura.ne.jp/toybox/lightbox/ and click on the image "Sample 2" then use the next arrow to go to "Sample 3" you have to hover off the image and then back on to get the previous and zoom icons to show again. I have been able to make the bug occur every time in both Firefox 3.6 and IE6. I am guessing the mouseover event isn't triggering correctly due to the image object moving underneath the mouse pointer but I just can't fix it. Any help, pushes in the right direction, anything. Cam. Hi for some reason my lightbox, downloaded from (huddletogether/projects - Lightbox 2) isn't working. I have a javascript slider that IS working on the page aswell You can view a test page here http://www.spmcreative.co.uk/patrickedward/gallery.html (only the first thumbnail is clickable) I have attached some code below, please let me know if you need to see any more, Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<link rel="stylesheet" href="CSS/screen.css" type="text/css" media="screen" /><br />
<link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(img/MainBG.gif);
background-repeat: repeat;
}
a:link {
color: #999;
text-decoration: none;
border:0;
}
a:visited {
text-decoration: none;
color: #999;
border:0;
}
a:hover {
text-decoration: none;
color: #000;
border:0;
}
a:active {
text-decoration: none;
border:0;
}
</style>
</head>
<body>
<div id="container">
<div id = "header">
<div class = "logo">
<a href="index.html">
<img src="img/logo.png" alt ="Patrick Edward Diamonds" />
</a>
</div>
<ul id="nav">
<li><a href="index.html"> Home |</a></li>
<li><a href="collections.html"> Collections |</a></li>
<li><a href="design.html"> Design Service |</a></li>
<li><a href="trade.html"> Trade Service |</a></li>
<li><a href="gallery.html"> Design Gallery |</a></li>
<li><a href="contact.html"> Contact Us</a></li>
</ul>
</div> <!--end of header-->
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
</div>
</div> <!--end of banner-->
<div id="main1">
<p><img src="img/gallery.png" alt="Gallery" /></p>
<div class="album">
<div class="imageSingle">
<div class="image"><a href="img/Lgallery1.jpg" rel="lightbox" title="my caption"><img src="img/gallery1.jpg"/></a></div>
</div>
Thanks, Simon Does anyone know why Lightbox images would be displaying in reverse order? The numbers are correct but it pops up on the last one and I have to hit previous to get to the front.
I am making a website for school and have made a lightbox that works perfectly in all NEW browsers. Only, they use internet explorer 7. Because of this, the lightbox doesnt work properly, and instead sticks the the side of the screen, doesnt dim the background and simply doesnt work. Is there a different lightbox that will work for IE7? and how can i make a rule to only show it for browsers older than IE9? (I know of the html 'if lt ie9' rule if that helps) Thanks. Code: <?
session_start();
if(!session_is_registered(myusername)){
header("location:index.php");
}
?>
<?php
//users data query
$sesusername = $_SESSION['myusername'];
$sespassword = $_SESSION['mypassword'];
include_once("scripts/connect.php");
$memberquery = mysql_query("SELECT * FROM members WHERE username='$sesusername' AND password='$sespassword'");
while($row = mysql_fetch_assoc($memberquery)){
$id = $row['id'];
$photo = $row['profile_picture'];
$name = $row['name'];
$username = $row['username'];
$joined = $row['date_joined'];
$password = $row['password'];
$email = $row['email'];
$freinds = $row['friends'];
}
?>
<?php
//friends data
$friendsquery = mysql_query("SELECT * FROM members");
while($row = mysql_fetch_assoc($friendsquery)){
$user = $row['name'];
$userpic = $row['profile_picture'];
$id = $row['id'];
{ $friend .='<img src="' . $userpic . '" style="width:100px; height:90px; vertical-align:middle"><a href="profile.php?id=' . $id . '"> ' . $user . '</a></br></br>' ;
}
}
?>
<DOCTYPE HTML>
<html>
<head>
<title>Dead psycho | Friends</title>
<style type="text/css">
#friend_container{
display:none;
background:#000000;
opacity:0.7;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#friends_content{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
max-height: 400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #a11e22;
z-index:1001;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
Overflow: scroll;
}
a{ color:#a11e22 ;}
#friend{height:150px;
width:150px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#open_friends").click(function(){
$("#friend_container, #friends_content").fadeIn(300);
})
$("a#close_friends").click(function(){
$("#friend_container, #friends_content").fadeOut(300);
})
})
</script>
<?php include_once("menu.php"); ?>
</head>
<body>
<div id="container">
<div id="leftside">
<?php require_once("sidebar_left.php"); ?>
</div>
<div id="content">
<a id="open_friends" href="#"><b>All friends</b></a>
<div id="friends_content">
<h2><center>Friends</center></h2>
<hr width="90%" color="#a11e22"/>
<?php echo "$friend"; ?> <br/>
<b><center><a id="close_friends" href="#">Close</a></center></b>
</div>
<div id="friend_container"> </div></div>
</div>
<div id="footer" align="justify">
<?php include_once("scripts/copy.php"); ?>
</div>
</body>
</html>
I have been following a tutorial for an image gallery, i can upload images and use gd to create thumbnails that when clicked display the full sized image, but the full sized image is to big to fit in my design, i have managed to get the rel="lightbox" attached to the thumbnails as they are displayed but it wont load the full image, the loading ring just keeps going round, does anybody know how to fix this? is it even possible. BTW i am a complete beginner so please be gentle.
I was wondering if it is possible to embed javascript within a lightbox. I believe a lightbox in most cases uses its own javascript code, but i am looking to have an unrelated javascript function working within the lightbox, under the image, if possible. Thanks in advance. Hello, this is not and advert This is a class i built in javascript What it dose: When users leave a site that has a confirm you want to leave box from the browser Why have i posted: I have seen around on the internet posts about how to do such a thing so i though i would get hits to codding forum when user search for such a thing and any one of codding forum members could help it get better Well this is a nice little object to use insted that dose a light box effect and brings up a Yes/no true/false box you set what you want it to say The JSON Object PHP Code: confirmBox = { 'message' : 'This is a Confirm Box', 'trueTxt' : 'True', 'complete' : true, 're' : '', 'falseTxt' : 'False', 'onTrue' : 'alert("true")', 'onFalse' : 'alert("false")', 'setTrue' : function(ontrue){ this.onTrue = ontrue + "confirmBox.update('true')"; }, 'setFalse' : function(onfalse){ this.onFalse = onfalse + "confirmBox.update('false')"; }, 'setTrueText' : function(trueText){ this.trueTxt = trueText; }, 'setFalseText' : function(falseText){ this.falseTxt = falseText; }, 'setText' : function(text){ this.message = text; }, 'hide' : function(){ var bg = document.getElementById('___confirmBox_bg'); var center = document.getElementById('___confirmBox_center'); var dialog = document.getElementById('___confirmBox_dilog'); center.removeChild(dialog); bg.removeChild(center); document.body.removeChild(bg); }, 'show' : function(){ this.createBG(); this.createCenter(); this.createDialog(); }, 'update' : function(sw){ this.re = sw; }, 'state':function(){ if(this.re = ''){ return false; }else{ return this.re; } }, 'createBG' : function(){ var bg = document.createElement("div"); bg.setAttribute('style', "display: table; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);"); bg.setAttribute('id', '___confirmBox_bg'); document.body.appendChild(bg); }, 'createCenter' : function(){ var center = document.createElement('div'); center.setAttribute('style',"#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; margin-left:auto; margin-right:auto;"); center.setAttribute('id', '___confirmBox_center'); document.getElementById('___confirmBox_bg').appendChild(center); }, 'createDialog' : function(){ var dialog = document.createElement('div'); dialog.setAttribute('style', "display:block; width: 300px; padding: 16px; background-color: white; z-index:1003; margin-left:auto; margin-right:auto;"); dialog.setAttribute('id', '___confirmBox_dilog'); dialog.innerHTML = this.message + '<div align="right"><input type="button" onclick="eval(confirmBox.onTrue); confirmBox.hide();" value="' +this.trueTxt + '" /><input type="button" onclick="eval(confirmBox.onFalse); confirmBox.hide();" value="' + this.falseTxt + '" /></div>'; document.getElementById('___confirmBox_center').appendChild(dialog); }, } Then this is how you call it and set propertys Code: <script src="confirmBox.js" type="text/javascript"></script>
<script type="text/javascript">
confirmBox.setText("This is a test"); //Sets the text to show in the box
confirmBox.setTrueText("I can see it"); // sets the text on the return true button
confirmBox.setFalseText("I can't see it"); // sets the text on the return false button
confirmBox.setTrue('alert("Thanks");'); //what to do when true is clicked
confirmBox.setFalse('alert("Your a lier");');// what to do when false is clicked
confirmBox.show(); // Show the confirmBox
</script>
i made a gallery using lightbox but i have a problem that the menu (created by allwebmenu program) is always on top of the lightbox so the pictures i cutted.. how to solve this problem? |
|||||||