Jump to content

Brigog

Members
  • Content Count

    26
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Brigog

  • Rank
    Newbie
  1. Brigog

    Flash Sound Button

    I have a simple audio button I am trying to get working for my website however I am totally stuck on how to attach the sound to it. below is what I got: but_musicon (release) { gotoAndPlay(2);}on (release) { _root.soundstatus = "off";}on (release) { _root.d01.gotoAndStop(1); _root.d02.gotoAndStop(1);}___________________________but_music[indent][indent]on (release) { gotoAndPlay (1);}on (release) { _root.soundstatus = "on";}on (release) { _root.d01.gotoAndPlay (1); _root.d02.gotoAndPlay (1);}[/indent][/indent] The sound files name is "Chillout" and I'm just not good with Actionscript... so please help if you can.
  2. Ok so the short version is that I am working on a site for a family member and I am not good with java or jquery at all so I need some help.Here is the link for where I found the Verical Accordion: http://www.sohtanaka.com/web-design/simple...css-and-jquery/Also I rotated the image so that it could be used for a Horizontal view which can be downloaded here: http://jonhennessy.com/h2_trigger_a2.gifHere is the HTML/CSS Code: <!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Simple Accordion with CSS & jQuery by Soh Tanaka</title><style type="text/css">html { overflow-Y: scroll;}body { font: 10px normal Arial, Helvetica, sans-serif; margin: 0; padding: 0; line-height: 1.7em;}*, * focus { outline: none; margin: 0; padding: 0;}.container { width: 500px; margin: 0 auto;}h1 { font: 4em normal Georgia, 'Times New Roman', Times, serif; text-align:center; padding: 20px 0; color: #aaa;}h1 span { color: #666; }h1 small{ font: 0.3em normal Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 0.5em; display: block; color: #666;}h2.acc_trigger { padding: 0; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 500px; font-size: 2em; font-weight: normal; float: left;}h2.acc_trigger a { color: #fff; text-decoration: none; display: block; padding: 0 0 0 50px;}h2.acc_trigger a:hover { color: #ccc;}h2.active {background-position: left bottom;}.acc_container { margin: 0 0 5px; padding: 0; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; background: #f0f0f0; border: 1px solid #d6d6d6; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }.acc_container .block { padding: 20px;}.acc_container .block p { padding: 5px 0; margin: 5px 0;}.acc_container h3 { font: 2.5em normal Georgia, "Times New Roman", Times, serif; margin: 0 0 10px; padding: 0 0 5px 0; border-bottom: 1px dashed #ccc;}.acc_container img { float: left; margin: 10px 15px 15px 0; padding: 5px; background: #ddd; border: 1px solid #ccc;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">$(document).ready(function(){ //Set default open/close settings$('.acc_container').hide(); //Hide/close all containers$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container//On Click$('.acc_trigger').click(function(){ if( $(this).next().is(':hidden') ) { //If immediate next container is closed... $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container } return false; //Prevent the browser jump to the link anchor});});</script></head><body><h1>Simple Accordion with <span>CSS & jQuery</span><small>by Soh Tanaka | <a href="http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/">View Tutorial</a></small></h1><div class="container"> <h2 class="acc_trigger"><a href="#">Web Design & Development</a></h2> <div class="acc_container"> <div class="block"> <h3>Need a Website?</h3> <a href="http://www.designbombs.com/community/love-manchester/"><img src="img1.gif" alt="" /></a> <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> </div> </div> <h2 class="acc_trigger"><a href="#">Logo / Corporate Identity</a></h2> <div class="acc_container"> <div class="block"> <h3>Need a Logo?</h3> <a href="http://www.designbombs.com/community/precinkt/"><img src="img2.gif" alt="" /></a> <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> </div> </div> <h2 class="acc_trigger"><a href="#">Seach Engine Optimization</a></h2> <div class="acc_container"> <div class="block"> <h3>Need to be Heard?</h3> <a href="http://www.designbombs.com/portfolio/dan-vuletici/"><img src="img3.gif" alt="" /></a> <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> </div> </div> <h2 class="acc_trigger"><a href="#">eCommerce</a></h2> <div class="acc_container"> <div class="block"> <h3>Have Product to Sell?</h3> <a href="http://www.designbombs.com/design-firm/full-creative/"><img src="img4.gif" alt="" /></a> <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> </div> </div> </div> </body></html>
  3. After playing around and seeing why some of the two columns was working and others were not I noticed that if I put a "height" value in the CSS for the right column it fixed it... even if the height was incorrect. Really weird.
  4. Brigog

    Two repeating images

    Hey guys, I am no CSS pro and im working on a website for a friend. What I am looking to do is have two narrow images be repeated left and right of my header. A great example of what I am looking for is www.cib-guild.com . If you look at the sides of the main body you will see scan lines running at a 45 deg angel going opposite ways on each side of the page. Well the website I am working on has something similar were the sides differ from left to right. So I need to know, how do I tell one to repeat left and one to repeat right of the main area of the site? The reason I am doing this is for people with larger resolutions so that there isnt just a solid color on the sides. Please let me know and keep in mind im fairly new to CSS.
  5. My best way to explain what im trying to do is have you go to:http://www.ask.com/web?qsrc=167&o=0&am...p;search=searchOn the site above you will see if you mouse over the binoculars it shows a very nice box with a preview of the site your going. I want to do something similar but farm more simple. I just need it so when they mouse over thumbnail it does a similar box with rounded corners containing a larger image of the thumbnail. Now im not very good with javascript but if anyone can direct me to a sight they might know of that has a premade script that would be great. Also if anyone know the term for what im looking for please tell me that as well.
  6. Brigog

    Upload System

    If anyone could please help me with this I would be much appreciated. Basically, I need a file upload system for our companies site. I need it so that when a customer fills out this form they can upload some files through this form and they will be transfered to a folder on our server located in /public_html/jobs/uploads. My problem is im trying to do way more then I know. So if anyone could perhaps complete the holes in my script or tell me how to I would be very greatfull. Also, I would like the script to include in the e-mail it sends us the name of the files they uploaded. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Southgate Design</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /></head><body> <div id="wrapper"> <div id="header"> <h1><img src="images/logo.jpg" width="172" height="45" alt="Charity Trust"></h1> <div id="nav"> <a href="index.html"><img src="images/a1.jpg" width="66" height="41" alt="Home"></a> <a href="about.html"><img src="images/m2.jpg" width="87" height="41" alt="About Us"></a> <a href="prices.html"><img src="images/m3.jpg" width="83" height="41" alt="Prices"></a> <a href="shipping.html"><img src="images/m4.jpg" width="72" height="41" alt="Shipping"></a> <a href="#"><img src="images/m5.jpg" width="84" height="41" alt="M5"></a> <a href="#"><img src="images/o6.jpg" width="64" height="41" alt="M6"></a> <a href="community.html"><img src="images/m7.jpg" width="89" height="41" alt="Community"></a><a href="mailto:info@southgatedesign.com?subject=Requesting to become a SG Broker"><img src="images/m8.jpg" width="89" height="41" alt="M8"></a> </div> </div> <div id="headline"> </div> <div class="clear"></div> </div> <div id="body"> <div id="body-left3"> <table width="600" border="0" cellpadding="1"> <tr> <td><script src="http://www.jotform.com/js/form.js?v2.0.502" type="text/javascript"></script><style type="text/css">html,body{height:100%; margin:0;}.tbmain{ /* Changes on the form */ background: white !important; }.left{ /* Changes on the form */ color: black !important; font-family: Verdana !important; font-size: 12px !important;}td.left { font-family: "Trebuchet MS"; font-size: 11px; font-weight:bold; color:#ff5200; vertical-align: top; text-align: left;}.pagebreak{ font-family: "Trebuchet MS"; font-size: 11px; font-weight:bold; color:black;}td.right { font-family: "Trebuchet MS"; font-size: 11px; font-weight:normal; color:#333333; vertical-align: top; text-align: left; }.tbmain{ height:100%; color:#333333; background:url(http://www.jotform.com/images/styles/style1_bg.gif) #ffffff top repeat-x;}.head{ font-family: "Trebuchet MS"; font-size: large; font-weight: bold; color:#ff5200; vertical-align: top; text-align: left;}.notvalid{ border:2px red solid; font-family:"Trebuchet MS";}.text{ font-family: "Trebuchet MS"; font-size: 11px; font-weight:normal; color:#333333; border:1px #cccccc solid; background:url(http://www.jotform.com/images/styles/style1_txt_bg.gif) #f6f6f6 top repeat-x;}select.other{ font-family: "Trebuchet MS"; font-size: 11px; font-weight:normal; color:#333333; border:1px #cccccc solid; background:url(http://www.jotform.com/images/styles/style1_txt_bg.gif) #f6f6f6 top repeat-x;}.btn{ font-family: "Trebuchet MS"; font-size: 11px; font-weight:normal; color:#333333; border:1px #c6c7ca solid; background: url(http://www.jotform.com/images/styles/style1_btn_bg.gif) #e4e4e4 top repeat-x;}span.required{ font-size: 13px !important; color: red !important;}</style> </head><body><table width="100%" cellpadding="2" cellspacing="0" class="tbmain"><tr><td class="topleft" width="10" height="10"> </td><td class="topmid"> </td><td class="topright" width="10" height="10"> </td> </tr><tr><td class="midleft" width="10"> </td><td class="midmid" valign="top"><form enctype="multipart/form-data" action="http://www.jotform.com/submit.php" method="post" name="q_form_73511057447"><input type="hidden" name="formID" value="73511057447" /><div id="main"> <table width="520" cellpadding="5" cellspacing="0"> <tr > <td width="150" class="left" > <label >Job Name</label> </td> <td class="right" > <input type="text" size="20" name="q2_JobName" class="text" value="" id="q2" /> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Size</label> </td> <td class="right"> <select class="other" name="q13_Size" id="q13" > <option></option> <option>Business Cards</option> <option>1/8 pg. Flyers</option> <option>4x6 Postcards</option> <option>5"x7" Postcards</option> <option>4"x9" Rackcards</option> <option>1/2 pg. Flyers</option> <option>Full pg. Flyers</option> <option>Door Hangers</option> <option>Presentation Folders</option> <option>Catalog Sheets 4/0</option> <option>Catalog Sheets 4/4</option> <option>Brochures 8.5x11</option> <option>Brochures 11x17</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Quantity</label> </td> <td class="right"> <select class="other" name="q15_Quantity" id="q15" > <option></option> <option>1,000</option> <option>5,000</option> <option>10,000</option> <option>15,000</option> <option>20,000</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Stock</label> </td> <td class="right"> <select class="other" name="q21_Stock" id="q21" > <option></option> <option>100lb Text</option> <option>12pt C2S</option> <option>Other</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Ink</label> </td> <td class="right"> <select class="other" name="q22_Ink" id="q22" > <option></option> <option>4/0</option> <option>4/4</option> <option>Other</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>UV Coated</label> </td> <td class="right"> <select class="other" name="q23_UVCoated" id="q23" > <option></option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Bindery</label> </td> <td class="right"> <select class="other" name="q24_Bindery" id="q24" > <option></option> <option>Fold</option> <option>Saddle Stitch</option> <option>Score</option> <option>Score & Fold</option> <option>Perf</option> <option>Drill</option> <option>Numbering</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Padded</label> </td> <td class="right"> <select class="other" name="q25_Padded" id="q25" > <option></option> <option>Die Cut</option> <option>Other</option> </select> </td> </tr> <tr > <td width="150" class="left" > <label >Price</label> </td> <td class="right" > <input type="text" size="5" name="q3_Price" class="text" value="" id="q3" /> </td> </tr> <tr > <td width="150" class="left" > <label>Due Date</label> </td> <td class="right"> <script type="text/javascript" src="http://www.jotform.com/js/datetimepicker.js?v2.0.502"></script> <input type="text" class="text" size="10" name="q17_DueDate" id="q17" /> <a href="java script:NewCal('q17','mmddyyyy',false,12)"> <img src="http://www.jotform.com/images/cal.gif"border="0" alt="Pick a date" /></a> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Rush Job</label> </td> <td class="right"> <select class="other" name="q26_RushJob" id="q26" > <option></option> <option>Yes</option> <option>No</option> </select> </td> </tr> <tr > <td width="150" class="left" valign="top" > <label>Special Instructions</label> </td> <td class="right" > <textarea cols="30" rows="5" name="q10_SpecialInstructions" class="text" id="q10" ></textarea> </td> </tr> <tr > <td width="150" class="left" > <label>Front or Outside</label> </td> <td class="right"> <input type="file" class="text" size="20" name="q19_FrontorOutside" id="q19" /> </td> </tr> <tr > <td width="150" class="left" > <label>Back or Inside</label> </td> <td class="right"> <input type="file" class="text" size="20" name="q20_BackorInside" id="q20" /> </td> </tr> <tr > <td width="150" class="left" > </td> <td class="right"> <input type="submit" class="btn" name="q1_" value="Submit" /> </td> </tr></table></div></form></td><td class="midright" width="10"> </td></tr><tr> <td class="bottomleft" width="10" height="10"> </td> <td class="bottommid"> </td> <td class="bottomright" width="10" height="10"> </td></tr></table><script type="text/javascript">validate("q_form_73511057447");</script></td> </tr></table> </div> <div class="clear"></div> </div> </div> <div id="footer"> <p>© 2007 all rights reserved.</p> </div></body></html>
  7. Okie basically what I need is my site has a static window of 1024X768 and everything outside that is black. Now I have red vector background I made etc and everything such as nav bar and fill is in that red background area. You make be confused here cuse im giving you a VERY basic idea of what the site looks like but what I need is for when I click on a picture in my gallery page that the background stays and the picture goes on it in the center. Now this would be very easy if i made a page for every picture but is there a way to make one page and it will swap the picture on it depending on the thumbnail clicked? I'm guessing its going to have to be done with php but I don't know php so if it cant be done with html/css/java please tell me.Thanks
  8. Does anyone know how or what its called when you have an image which in my case is a vector image of grass that I want to use at the bottem of my site that will stay at the bottem even when you scroll. Basicly my site is being designed for 800px wide and the grass image is 800px wide by 600 high and it fades from blue to white. I need it so that grass is at the bottem of the screen at all times and as your scroll down the grass goes down and where it fades up to white. White will be up at the top no matter what the window size. So if you are viewing at 1024x768 you would have the 800px image centered and at the bottem and then when the end of my image is reached going from bottem to top the white at the end of the gradient continues up to the top of the screen, in this case being 168 consdidering the image is 800 heigh. If anyone know even remotely what im doing or how to do it please tell me.
  9. Brigog

    Critique please

    Thanks alot, its nice to be able to have someone tell me where I can improve but if you get a chance please check it in firefox. I had a big problem with IE working with some of that javascript and the alignment not being the same in IE/FireFox. The teacher graded in firefox which is why I made the alignment work for that BUT I know its bad pratice to have it only work in some browsers.
  10. Brigog

    Critique please

    Im not sure if this is the right place to post this but I am very new to html / CSS/ javascript and this is my first site ive ever made. I was hopeing that perhaps some of the most gifted people could give me some advice on things to change in the future. This page was done for a class of mine but I really wanna know what real world people think about the design, layout, graphics, etc. There is two version of the site because we had to do it useing tables and then useing CSS. Again im new to it all but please anything will help me improve.ThanksTables site: http://sulley.dm.ucf.edu/~jhennessy/DIG3001_MMORPG/CSS site: http://sulley.dm.ucf.edu/~jhennessy/DIG3001_MMORPG_CSS/one last comment, I know they are kinda dark and that I feel was my biggest flaw in the entire site. Idealy I would really have enjoyed doing more pastels with more vector work but didnt have the time to start over once I got going.
  11. Yes its another domain, example would be they are viewing my site and in that pagelet it opens www.google.com within that window within my site...not even sure if you can do it but im trying.
  12. Okie, I have the following code im useing to make pagelets if you will for my website. The code im entering is unedited for my needs but it will show you want im trying to do. Basicly the code below makes a window that you can put text/pictures in through javascript that can also minimize/maximize/close/resize. I need it so instead of having pictures/text in this window to actualy load another site not of my own in it: ex(my page) index.html - had pagelet from abovepagelet window - shows website I choose as if I were opening it in a new browers window except a minimized view and when I maximize it. it shows their website within my websites window that I have created with pagelets.I know this is probaly really complex but if anyone can help me PLEASE do so. <html><head><title>DHTMLCentral.com - Free Dynamic HTML Scripts - WindowScript Demo</title><meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)"><META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)"><meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,window,dragdrop,drag,drop,minimize,maximized,layers,windows,other,"><meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help."><style type="text/css">.clWin{position:absolute; z-index:2; visibility:hidden; overflow:hidden; background-color:blue}.clWindow{position:absolute; background-color:blue; overflow:hidden; z-index:15; width:200}.clWinHead{position:absolute; width:200; top:0; font-family:arial,arial,helvetica; font-size:11px; font-weight:bold; color:white; background-color:transparent}.clText{position:absolute; z-index:50; font-family:arial,helvetica; font-size:11px; background-color:transparent}.clWinResize{position:absolute; z-index:30; width:30; height:30; clip:rect(0,30,30,0); background-image:url(resize.gif); layer-background-image:url(resize.gif)}.clLogo{position:absolute}.clUp{position:absolute; width:12; height:12; z-index:60;}.clDown{position:absolute; width:12; height:12; z-index:60;}.clWinButtons{position:absolute; font-family:arial,helvetica; font-size:12px} .style1 {font-size: 24px}</style><script language="JavaScript" type="text/javascript">/********************************************************************************** WindowScript * Copyright © 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>* This script was released at DHTMLCentral.com* Visit for more great scripts!* This may be used and changed freely as long as this msg is intact!* We will also appreciate any links you could give us.** Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> *********************************************************************************/function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this}var bw=new lib_bwcheck()var oWin=new Array; oWin.zIndex=10; oWin.dragobj=-1; oWin.resizeobj=-1; oWin.zIndex=100//Start Variables to set ******************************************************************//This script works in IE4+, NS4+ and Opera5. //Just remember that NS4 and Opera5 does not reflow the content when you resize the windows.oWin.bordercolor="#935591" //Remember that you have to change the images as well if you change this coloroWin.bgcolor="red" //Default background coloroWin.bgcoloron="blue" //The "active" background coloroWin.bgscroll="#C1A9C0" //The background-color for the scroll area"//The rest of the style variables have to be set in the stylesheet above. //To change styles on the text change .clText//If you change these variables I assume you would like to change the images, image sizes and the imagemap for //the windows. If so you'll have to do that manually in the addWindow function for now.oWin.bottomh=10 //The height of the bottom "border"oWin.headh=15 //The height of the head "border"oWin.bordersize=1 //The left and right bordersizeoWin.scrollw=13 //The width of the scroll areaoWin.scrollimgh=12 //The width of the scroll imagesoWin.buttonsw=39 //The width of the buttons imageoWin.resizeh=9 //The width of the resize imgoWin.resizew=13 //The height of the resize imgoWin.starty=5 //If you have a header or something on the page that you want the setWindows and the dragdrop to care about set it here.oWin.defwidth=200 //Default width for the windows if nothing is spesifiedoWin.defheight=200 //Default height for the windows if nothing is spesifiedoWin.between=15 //This variable controls how much space there will be between the windows when you use setWindows//Set this variable to 1 if you want to be able to control the area the windows can be scrolled.oWin.keepinside=0 //VALUE: 1 || 0 oWin.maxX=500 //This is the maximum X value the windows can go to. Set this to "winpage.x2" to keep them inside the window. VALUE: "winpage.x2" || px oWin.maxY=500 //This is the maximum Y value the windows can go to. Set this to "winpage.y2" to keep them inside the window. VALUE: "winpage.y2" || px oWin.minX=50 //This is the minimun X value the windows can go to. Set to 0 to keep them inside the window. VALUE: px oWin.minY=50 //This is the minimum Y value the windows can go to. Set to 0 to keep them inside the window. VALUE: px //In the next version of this script all variables can be set on each individual window as well//End Variables to set ********************************************************************function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this}var bw=new lib_bwcheck(); //Uncomment the next line if you want the user to be sent to another page if he's using an old browser//if(!bw.bw) location.href='sorry.html'function lib_doc_size(){ //Page positions - needed! this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0; if(bw.ns6) this.x2-=2 this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0; if(bw.ns6) this.y2-=4 if(!this.x2||!this.y2) return message('Document has no width or height') this.x50=this.x2/2; this.y50=this.y2/2; this.x10=(this.x2*10)/100;this.y10=(this.y2*10)/100 this.ytop=140*100/this.y2 this.avail=(this.y2*(100-this.ytop))/100 this.origy=this.y2 return this;}function lib_moveIt(x,y){this.x=x;this.y=y; this.css.left=x;this.css.top=y}function lib_moveBy(x,y){this.moveIt(this.x+x,this.y+y)}function lib_showIt(){this.css.visibility="visible"}function lib_hideIt(){this.css.visibility="hidden"}function lib_bg(color){ if(bw.opera5) this.css.background=color else if(bw.dom || bw.ie4) this.css.backgroundColor=color else if(bw.ns4) this.css.bgColor=color }function lib_clipTo(t,r,b,l,setwidth){ if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0 this.ct=t; this.cr=r; this.cb=b; this.cl=l if(bw.ns4){ this.css.clip.top=t;this.css.clip.right=r this.css.clip.bottom=b;this.css.clip.left=l }else if(bw.opera5){this.css.pixelWidth=r; this.css.pixelHeight=b; this.w=r; this.h=b }else{ this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(setwidth){this.css.width=r; this.css.height=b; this.w=r; this.h=b} }}function lib_writeIt(text,startHTML,endHTML){ if(bw.ns4){ if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html"); this.ref.write(startHTML+text+endHTML); this.ref.close() }else this.evnt.innerHTML=text}//Default lib functionsfunction lib_obj(obj,nest,dnest,ddnest,num){ if(!bw.bw) return lib_message('Old browser') if(!bw.ns4) this.evnt=bw.dom && document.getElementById(obj)||bw.ie4 && document.all[obj] else{ if(ddnest){this.evnt=document[nest].document[dnest].document[ddnest].document[obj]?document[nest].document[dnest].document[ddnest].document[obj]:0; }else if(dnest){this.evnt=document[nest].document[dnest].document[obj]?document[nest].document[dnest].document[obj]:0; }else if(nest){this.evnt=document[nest].document[obj]?document[nest].document[obj]:0; }else{this.evnt=document.layers[obj]?document.layers[obj]:0;} } if(!this.evnt) return lib_message('The layer does not exist ('+obj+') - Exiting script\n\nIf your using Netscape please check the nesting of your tags!') this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; this.ref=bw.dom||bw.ie4?document:this.css.document; this.moveIt=lib_moveIt; this.moveBy=lib_moveBy; this.showIt=lib_showIt; this.hideIt=lib_hideIt; this.bg=lib_bg; this.num=num; this.writeIt=lib_writeIt; this.clipTo=lib_clipTo; this.obj = obj + "Object"; eval(this.obj + "=this") return this}/*****************************************************************************Creating windows*****************************************************************************/function create_window(i,x,y,w,h,bg,bga){ if(!w) w=oWin.defwidth; if(!h) h=oWin.defheight if(!bg) bg=oWin.bgcolor; if(!bga) bga=oWin.bgcoloron oWin[i]=new lib_obj('divWin'+i,"","","",i) oWin[i].oWindow=new lib_obj('divWindow'+i,'divWin'+i) oWin[i].oWindow.moveIt(oWin.bordersize,oWin.headh) oWin[i].oText=new lib_obj('divWinText'+i,'divWin'+i,'divWindow'+i) oWin[i].oHead=new lib_obj('divWinHead'+i,'divWin'+i) oWin[i].oButtons=new lib_obj('divWinButtons'+i,'divWin'+i) oWin[i].oResize=new lib_obj('divWinResize'+i,'divWin'+i) oWin[i].oHead.evnt.onmouseover=new Function("w_mmover("+i+")") oWin[i].oHead.evnt.onmouseout=new Function("w_mmout()") if(!bw.ns4) oWin[i].oHead.evnt.ondblclick=new Function("mdblclick(0,"+i+")") oWin[i].oResize.evnt.onmouseover=new Function("w_mmover("+i+",1)") oWin[i].oResize.evnt.onmouseout=new Function("w_mmout()") if(!bw.ns4){ oWin[i].oHead.css.cursor="move"; oWin[i].oResize.css.cursor="w-resize" oWin[i].oWindow.css.overflow="hidden"; oWin[i].css.overflow="hidden" oWin[i].oText.css.overflow="hidden" } oWin[i].defbg=bg; oWin[i].defbga=bga oWin[i].bg(oWin.bordercolor); oWin[i].oWindow.bg(oWin[i].defbg) oWin[i].oUp=new lib_obj('divWinUp'+i,'divWin'+i); oWin[i].oDown=new lib_obj('divWinDown'+i,'divWin'+i) oWin[i].oUp.bg(oWin.bgscroll); oWin[i].oDown.bg(oWin.bgscroll); oWin[i].lastx=x;oWin[i].lasty=y;oWin[i].origw=w; oWin[i].origh=h oWin[i].resize=win_resize; oWin[i].close=win_close; oWin[i].maximize=win_maximize; oWin[i].minimize=win_minimize; oWin[i].regwin=win_regwin; oWin[i].checkscroll=win_checkscroll; oWin[i].up=win_up; oWin[i].down=win_down; oWin[i].addZ=win_addZ; oWin[i].state="reg" oWin[i].moveIt(x,y); oWin[i].resize(w,h); oWin[i].checkscroll(); if(bw.opera5) setTimeout("oWin["+i+"].resize("+w+","+h+"); oWin["+i+"].showIt()",10) else oWin[i].showIt()}/*****************************************************************************Window functions *****************************************************************************/function win_regwin(){ this.oResize.css.visibility="inherit" this.resize(this.origw,this.origh) this.moveIt(this.lastx,this.lasty) this.state="reg"; this.addZ() this.checkscroll()}function win_maximize(){ if(this.state!="max"){ if(this.state!="min"){this.lastx=this.x; this.lasty=this.y} mw=winpage.x2 - 10; mh=winpage.y2 - 10 - oWin.starty this.moveIt(5,5+oWin.starty,30,10) this.resize(mw,mh); this.oResize.showIt(); this.state="max" this.addZ() }else this.regwin()}function win_minimize(){ if(this.state!="min"){ couns=0 if(this.state!="max"){this.lastx=this.x; this.lasty=this.y} y=winpage.y2-oWin.headh; ox=winpage.x2-126; a=0 for(i=0;i<wins;i++){ x=i*125; ok=a if(a*125>ox){if(ox>126) i=0; a=0; y-=oWin.headh; x=0} for(j=0;j<wins;j++){ couns++; if(oWin[j].x==x && oWin[j].y==y) a++ }if(a==ok) break; }x=a*125; this.moveIt(x,y); this.oResize.hideIt() this.state="min"; this.resize(125,oWin.headh) }else this.regwin()}function win_close(){this.hideIt(); this.oUp.hideIt(); this.oDown.hideIt()}function win_resize(w,h){ this.oButtons.moveIt(w-oWin.buttonsw,0); this.oResize.moveIt(w-oWin.resizew,h-oWin.resizeh) this.oWindow.clipTo(0,w-oWin.bordersize*2,h-oWin.bottomh-oWin.headh,0,1); this.clipTo(0,w,h,0,1) this.oHead.clipTo(0,w,oWin.headh,0,1); this.oText.moveIt(2,3) this.oUp.hideIt(); this.oDown.hideIt()}function win_checkscroll(w,h){ this.oText.height=this.oText.evnt.offsetHeight||this.oText.css.pixelHeight||this.oText.ref.height||0 w=this.cr; h=this.cb if(this.oText.height>h-oWin.bottomh-oWin.headh && this.state!="min"){ this.oWindow.clipTo(0,w-oWin.scrollw-oWin.bordersize*2,h-oWin.bottomh-oWin.headh,0,1); this.oUp.moveIt(w-oWin.scrollw,oWin.headh) this.oUp.clipTo(0,oWin.scrollw-oWin.bordersize,h-oWin.bottomh-oWin.scrollimgh-oWin.headh,0,1); this.oDown.moveIt(w-oWin.scrollw,h-oWin.bottomh-oWin.scrollimgh) this.oDown.clipTo(0,oWin.scrollw-oWin.bordersize,oWin.scrollimgh,0,1); this.oUp.showIt() this.oDown.showIt() }else{this.oUp.hideIt(); this.oDown.hideIt()}}var sctim=100;var winScroll;function win_up(){ clearTimeout(sctim); if(this.oText.y>=this.oWindow.cb-this.oText.height-10 && winScroll){ this.oText.moveBy(0,-8); setTimeout(this.obj+".up()",30) }}function win_down(){ clearTimeout(sctim); if(this.oText.y<=0 && winScroll){ this.oText.moveBy(0,8); setTimeout(this.obj+".down()",30) }}function noScroll(){clearTimeout(sctim);winScroll=false}function win_addZ(){oWin.zIndex++; this.css.zIndex=oWin.zIndex}/*****************************************************************************Initiating winpage*****************************************************************************/function win_init(){ if(document.layers){ document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP | Event.DBLCLICK) document.ondblclick=mdblclick; } document.onmousemove=mmove;document.onmousedown=mdown;document.onmouseup=mup;}/*****************************************************************************Event functions*****************************************************************************/function w_mmover(num,resize){if(!resize) oWin.dragover=num; else oWin.resizeover=num}function w_mmout(){oWin.dragover=-1; oWin.resizeover=-1}function mup(e){ //Mouseup if((oWin.dragobj!=-1 || oWin.resizeobj!=-1) && oWin.setposition) setPos(); if(oWin.dragobj!=-1){oWin[oWin.dragobj].lastx=oWin[oWin.dragobj].x; oWin[oWin.dragobj].lasty=oWin[oWin.dragobj].y} oWin.dragobj=-1 if(oWin.resizeobj!=-1){ oWin[oWin.resizeobj].checkscroll() oWin[oWin.resizeobj].origw=oWin[oWin.resizeobj].cr oWin[oWin.resizeobj].origh=oWin[oWin.resizeobj].cb }else if(bw.ns4) routeEvent(e) oWin.resizeobj=-1}function mdown(e){ //Mousedown x=(bw.ns4 || bw.ns6)?e.pageX:event.x||event.clientX y=(bw.ns4 || bw.ns6)?e.pageY:event.y||event.clientY if(bw.ie5 || bw.ie6) y+=document.body.scrollTop id1=oWin.dragover id2=oWin.resizeover if(id1>-1 || id2>-1){ if(id2>-1){ id=id2; oWin.resizeobj=id; }else{ id=id1; oWin.dragobj=id oWin.clickedX=x-oWin[id].x; oWin.clickedY=y-oWin[id].y } oWin[id].addZ() //Setting background-colors for(i=0;i<wins;i++){ if(i!=id1&&i!=id2){ oWin[i].oWindow.bg(oWin[i].defbg) }else oWin[i].oWindow.bg(oWin[i].defbga) } }else if(bw.ns4) routeEvent(e) if(!bw.ns4) return false }function mmove(e,y,rresize){ //Mousemove x=(bw.ns4 || bw.ns6)?e.pageX:event.x||event.clientX y=(bw.ns4 || bw.ns6)?e.pageY:event.y||event.clientY if(bw.ie5 || bw.ie6) y+=document.body.scrollTop id1=oWin.dragobj id2=oWin.resizeobj if(id2>-1){ //Resize nx=x; ny=y oldw=oWin[id2].cr; oldh=oWin[id2].cb cw= nx -oWin[id2].x; ch= ny - oWin[id2].y if(cw<120) cw=120; if(ch<100) ch=100 oWin[id2].resize(cw,ch) }else if(id1>-1){ //Move nx=x-oWin.clickedX; ny=y-oWin.clickedY if(ny<oWin.starty) ny=oWin.starty if(oWin.keepinside){ if(nx+oWin[id1].cr>eval(oWin.maxX)) nx=eval(oWin.maxX)-oWin[id1].cr else if(nx<eval(oWin.minX)) nx=eval(oWin.minX) if(ny+oWin[id1].cb>eval(oWin.maxY)) ny=eval(oWin.maxY)-oWin[id1].cb else if(ny<eval(oWin.minY)) ny=eval(oWin.minY) } oWin[id1].moveIt(nx,ny) if(oWin[id].state==0){oWin[id].lastx=nx; oWin[id].lasty=ny} } if(!bw.ns4) return false }function mdblclick(e,num){if(num>-1) oWin[num].maximize(); else if(oWin.dragover>-1) oWin[oWin.dragover].maximize()}function setWindows(placeit,rez){ between=oWin.between oWin.rows=Math.round((wins/3)+0.2) oWin.columns=1 j=0;a=0;c=0; for(i=0;i<wins;i++){ if(j==oWin.columns-1){ oWin.columns=wins-a<3?wins-a:wins-a==4?2:3 if(wins!=1 && a!=0) c++; j=0 }else if(a!=0) j++ oWin[i].origw=(winpage.x2-between-(between*oWin.columns))/oWin.columns oWin[i].origh=((winpage.y2-3-oWin.starty-(between*oWin.rows))/oWin.rows) oWin[i].lastx=oWin[i].origx=oWin[i].origw*(j)+(between*j)+between oWin[i].lasty=oWin[i].origy=oWin[i].origh*c+(between*c) + oWin.starty oWin[i].resize(oWin[i].origw,oWin[i].origh); oWin[i].moveIt(oWin[i].lastx,oWin[i].lasty) oWin[i].showIt(); a++; }}/*****************************************************************************Adding window to winpage!*****************************************************************************/var lastx,lasty,lastw,lasthfunction addWindow(heading,content,x,y,w,h,bg,bga){ var num=oWin.length; wins=num+1; var str="" str+='<div id="divWin'+num+'" class="clWin">\n' str+='<div class="clLogo"><img alt="Window Script from DHTMLCentral.com" src="win_logo.gif" width="19" height="18" alt="" border="0" align="top"></div>\n' +'<div id="divWinHead'+num+'" class="clWinHead"> '+heading+'</div>\n' +'<div id="divWinButtons'+num+'" class="clWinButtons">\n' +'<map name="map'+num+'">\n' +'<area shape="rect" coords="26,2,35,11" href="#" alt="Window Script from DHTMLCentral.com" onclick="oWin['+num+'].close(); return false">\n' +'<area shape="rect" coords="14,2,23,11" href="#" alt="Window Script from DHTMLCentral.com" onClick="oWin['+num+'].maximize(); return false">\n' +'<area shape="rect" coords="2,2,11,11" href="#" alt="Window Script from DHTMLCentral.com" onClick="oWin['+num+'].minimize(); return false">\n' +'</map>\n' +'<img usemap="#map'+num+'" alt="Window Script from DHTMLCentral.com" src="buttons.gif" width="38" height="14" alt="" border="0">\n' +'</div>\n' +'<div id="divWinResize'+num+'" class="clWinResize">\n' +'</div>\n' +'<div id="divWindow'+num+'" class="clWindow">\n' +'<div id="divWinText'+num+'" class="clText">' if(content){ str+=content+'</div>\n' +'</div>\n' +'<div id="divWinUp'+num+'" class="clUp"><a href="#" onclick="return false" onmouseover="winScroll=1; oWin['+num+'].down();" onmouseout="noScroll()"><img src="arrow_up.gif" width="11" height="12" alt="" border="0"></a></div>\n' +'<div id="divWinDown'+num+'" class="clDown"><a href="#" onclick="return false" onmouseover="winScroll=1; oWin['+num+'].up();" onmouseout="noScroll()"><img src="arrow_down.gif" width="11" height="12" alt="" border="0"></a></div>\n' +'</div>' } document.write(str) if(content) create_window(num,x,y,w,h,bg,bga)}function endWin(){ num=wins-1 str='\n</div>\n' +'</div>\n' +'<div id="divWinUp'+num+'" class="clUp"><a href="#" onclick="return false" onmouseover="winScroll=1; oWin['+num+'].down();" onmouseout="noScroll()"><img src="arrow_up.gif" width="11" height="12" alt="" border="0"></a></div>\n' +'<div id="divWinDown'+num+'" class="clDown"><a href="#" onclick="return false" onmouseover="winScroll=1; oWin['+num+'].up();" onmouseout="noScroll()"><img src="arrow_down.gif" width="11" height="12" alt="" border="0"></a></div>\n' +'</div>' return str}</script></head><body marginleft="0" marginheight="0"><!-- START DELETE --><div style="position:absolute; left:0; top:0"><a href="#" onClick="self.close(); return false"><img src="/images/logo.gif" width="165" height="54" alt="" border="0" alt="Click to close window"></a></div><br><br><br><!-- END DELETE --><script>win_init()winpage=new lib_doc_size()/*Arguments for the AddWindow function:heading - Heading for the windowcontent - The content for the windowleft - The left position for the windowtop - The top position for the windowwidth - The width of the windowheight - The height of the windowbgcolor - If you want another backgroundcolor for only this window you can spesify that herebgcoloron - If you want another active backgroundcolor for only this window you can spesify that hereThere are 2 ways of adding windows.1. Use the addWindows and send the content as a variable or as a string:*///VARIABLEcn2="<h3>This is content!</h3>So is this.<br><br>More content is coming right up!<br>More content is coming right up! More content is coming right up!<br><br><br>More content is coming right up! More content is coming right up!"addWindow("Test window 2",cn2,100,100,250,300,"green","silver")//String - With all variablesaddWindow("Test window 1","My - content - my - content - my content",300,150,100,200)</script><!--2. Start the window first and then close it, that way you can have regular HTML in between.I had to make some strange workaround to get this to work correctly in Netscape4, but it should work:--><script>//Start windowaddWindow("Test window 2")</script><!-- Content for the window goes in here --><span class="style1">My content, my content my content My content, my content my content</span>My content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my contentMy content, my content my content My content, my content my content<script>//End windowdocument.write(endWin())//Create window (this have to be done manually. Just leave wins-1 in there)create_window(wins-1,400,400,300,300)</script><script>//Placing windows.//setWindows()</script><a href="#" onClick="setWindows(); return false">setWindows()</a>hello</body></html> EDIT: Thank goodness for codebox :)Please dont use codebox, makes its VERY hard to read over code.Choco says that we need to use codebox. Whoever wants to help can copy and past the code into a text editor and then read it. It deforms the page otherwise.
×
×
  • Create New...