I downloaded a contact box from GreyBox to incorporate into my website (I like how they pop out on the same page instead of directing you to another page). From their example, I isolated the part of the code that I wanted to use and pasted it into my code, but it didn’t come out the way I wanted it to.
On my site, I have a GMAIL logo and when it is clicked, I want it to take the user to a pop out window. I am able to do this when the code is isolated in its own project, but when I incorporate it into my project, and view it in a broswer, it becomes a link and when you click the link, it redirects you to another page(instead of staying on the same page with a pop out box). I had images ready to show, but the forum said I was not allowed to post images yet.
What am I doing wrong?
Here is the code for the isolated project:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" xml:lang="en"> <head> <title>bryson price contact</title> <script type="text/javascript"> var GB_ROOT_DIR = "./greybox/"; </script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="static_files/help.js"></script> <link href="static_files/help.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <a href="contactform.htm" title="Google" rel="gb_page_center[640, 480]"><img src="../../../../Photoshop stuff/Bryson Price Music Website/New Design/Sliced menu/contact/gmaillogoonly_03.png" width="213" height="87" alt="gmail" /></a> <script type="text/javascript"> GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) { var options = { caption: caption, height: height || 500, width: width || 500, fullscreen: false, show_loading: false, callback_fn: callback_fn } var win = new GB_Window(options); return win.show(url); } </script> </body> </html>
Here is the code for the project I incorporated it in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <script type="text/javascript"> var GB_ROOT_DIR = "./greybox/"; </script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="static_files/help.js"></script> <link href="static_files/help.css" rel="stylesheet" type="text/css" media="all" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <title>Bryson Price Music</title> <style type="text/css"> #wrapper { text-align: left; width: 960px; position: relative; padding: 0px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; height: auto; background-color: #FFF; } body { background-repeat: repeat; text-align: center; margin: 0px; padding: 0px; } .biobody { background-color: #e9e6e6; border: 3px solid #282828; height: 400px; width: 896px; margin-right: 34px; margin-left: 36px; clip: rect(auto,34px,auto,36px); } .belowheader { height: 122px; width: 899px; margin-left: 38px; } .header { height: 170px; background-color: #e9e6e6; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 3px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #282828; border-right-color: #282828; border-bottom-color: #282828; border-left-color: #282828; text-align: center; } .youtubetwitter { text-align: center; } .facebook { text-align: center; } </style> <body> <div class="header" id="header"><span class="Biography"><img src="../New Design/Sliced menu/Menu words/sky-logo-font---sliced-in-photoshop_11.png" alt="biography" width="435" height="107" vspace="50" /></span></div> <div id="wrapper"> <div class="Biography" id="biography"></div> <div class="fancy" id="fancy"> <div class="belowheader" id="belowheader"><img src="../New Design/Sliced menu/contact/contact-below-header_02.png" width="899" height="122" alt="belowheader" /></div> </div> <div class="biobody" id="biobody"> <div class="youtubetwitter" id="youtubetwitter"><img src="../New Design/Sliced menu/contact/youtubeandtwitter_03.png" width="430" height="87" alt="youtubetwitter" /></div> <div class="facebook" id="facebook"><img src="../New Design/Sliced menu/contact/facebook_03.png" width="217" height="91" alt="facebook" /><a href="contactform.htm" title="Google" rel="gb_page_center[640, 480]"><img src="../../../../Photoshop stuff/Bryson Price Music Website/New Design/Sliced menu/contact/gmaillogoonly_03.png" width="213" height="87" alt="gmail" /></a></div> </div> </div> <script type="text/javascript"> GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) { var options = { caption: caption, height: height || 500, width: width || 500, fullscreen: false, show_loading: false, callback_fn: callback_fn } var win = new GB_Window(options); return win.show(url); } </script> </body> </html>
