Jump to content

dzhax

Members
  • Posts

    363
  • Joined

  • Last visited

Everything posted by dzhax

  1. Hello again, I am having an issue with loading another .html into a page via ajax.the page itself is loading but something in my js code is making a portion of the .html im loading in not show. In the following JS code is the issue, because if I leave this main.js script out of the page it loads fine. var debug = false; $('html body').ready(function(){var getData = window.location.search.replace( "?", "" );if(getData){if(debug)alert(getData); var getParams = getData.split('&'),i; for(i in getParams){ var indvParam = getParams[i].split('='),ii; switch(indvParam[0]){ case 'page': loadPage(indvParam[1]); break; default: alert('Fatal Error: Unknown Get Data "'+indvParam[0]+'='+indvParam[1]+'". Please contact the administrator and provide the code: ERR-2'); break; } } } else { loadPage('home'); }}); /*// loadPage() Documentation// ------------------------// page:// The page name your wish to load without the .html// These pages are located at /page directory.// ie. loadPage('home')// This will load page/home.html to the page replacing anything within the <body></body> tags.*/function loadPage(page){$.get("page/"+page+".html", function() { if(debug)alert("$.get:success");}) .done(function(data) { document.body.innerHTML = data; }) .fail(function() { document.body.innerHTML = page+" has failed to load. Please contact the administrator and provide the code: ERR-1_"+page; });} here is the full page: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>GI.Board</title><link rel="stylesheet" type="text/css" href="lib/css/main.css" media="all"><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="lib/js/main.js"></script></head><body> <link rel="stylesheet" type="text/css" href="lib/css/boxSlider.css" media="all"><link rel="stylesheet" type="text/css" href="lib/css/home.css" media="all"><script type="text/javascript" src="lib/js/home.js"></script><div id="maincontent"><div id="header"><div><img src="lib/img/logo.png" alt=""></div></div><div id="media"><div class="transistor"><span class="pixelSize">30</span><span class="threshold">0.9</span><span class="speed">0.06</span><span class="time">2000</span><span class="opacitySpeed">0</span><span class="fadeTimeout">60</span><span class="bannerOffset">0</span><span class="bannerOpacity">1</span><img src="lib/img/1.png" alt="Integrated tools offer WYSIWYG editing"><img src="lib/img/2.png" alt="Most software is complicated, not ours."><img src="lib/img/3.png" alt="Don't think because you know more than the average user that you can't take advantage of our software"></div><div class="navigation"></div></div><div id="content"><script type="text/javascript">isAcceptingNewWork();</script><div><h2>Welcome</h2><p>GI.Board is a CMS (Content Management System) written from scratch by Garrett Innovations. We strive to make self-service content for our customers so you don't have to wait for content changes to be updated. You can simply log into your site and make changes on the fly. Making all aspects of the software as intuitive as possible will help users understand how to do something without having to learn how to code.</p><p>Our WYSIWYG (What you see is what you get) HTML editors assist you in making professional looking websites with little to no knowledge. However, we do not limit our more experienced users by only offering these easy-to-use solutions. We still offer the more advanced, raw HTML editors aswell.</p><h2>Other Services</h2><p>Don't have time to build a site from scratch? We understand! This is why we offer many other services to aid you in making your website. Wether it is pre-built templates, artwork creation, or a fully-custom website. We can meet your needs! We can even host the website for you, all you would need to do is purchase a domain name from your favorite registrar and point it at our servers.</p><h2>Trust</h2><p>We stand behind our products 100%. In fact this website is running on GI.Board! There is nothing more that demonstrates a companies trust in their product than using it themselves as their main presence in the market.</p></div></div><div id="footer"><div class="creator">Powered By: <img src="lib/img/giboard.png" alt="Creator Badge" title="Website Developed By Garrett Innovations" onclick="goto('http://www.garrett-innovations.com')"></div><div id="copyright" class="copyright"> © 2004-2013 Garrett Innovations. All Rights Reserved. </div> <div id="isonline" class="isonline"> </div></div> <script type="text/javascript" src="lib/js/boxSlider.js"></script> </div></body></html> The part that is deleting is: <div class="transistor"><span class="pixelSize">30</span><span class="threshold">0.9</span><span class="speed">0.06</span><span class="time">2000</span><span class="opacitySpeed">0</span><span class="fadeTimeout">60</span><span class="bannerOffset">0</span><span class="bannerOpacity">1</span><img src="lib/img/1.png" alt="Integrated tools offer WYSIWYG editing"><img src="lib/img/2.png" alt="Most software is complicated, not ours."><img src="lib/img/3.png" alt="Don't think because you know more than the average user that you can't take advantage of our software"></div><div class="navigation"></div> Also the part that loads the <script type="text/javascript">isAcceptingNewWork();</script> is not showing up either. The live version of above code: www.garrett-innovations.com/giboard The working hardcoded site with working JS: www.garrett-innovations.com The reason some of the css and js files load in the body is because anything within the body tags are being loaded in via ajax.
  2. like its "dim" (opacity .25 or something) and when you hover it becomes "bright" (opacity 1.0)? Or am I not understanding? if so, this is actually done with css no javascript needed: .imgLink img{opacity:0.25; filter:alpha(opacity=0.25); -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s;}.imgLink img:hover{cursor:pointer;opacity:1.0; filter:alpha(opacity=1.0); -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s;}
  3. i got it. its choppy but you can space it as needed <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <style type="text/css"> body{ margin: 0 0 0 0;} </style><script type='text/javascript'>//<![CDATA[$(document).ready(function(){$('.keyboardscroll').css('height', document.height);$('.keyboardscroll').css('width', document.width);});$(document).resize(function(){$('.keyboardscroll').css('height', document.height);$('.keyboardscroll').css('width', document.width);});$(window).load(function(){$(function() { var boxLefts = []; $('.keyboardscroll').each(function(i, el){ boxLefts.push(this.offsetTop); }); $(document).keydown(function(e) { var dir = false, targetTop = -1; switch (e.keyCode) { case 38: dir = -1; break; case 40: dir = 1; break; default: break; } console.log(this); if (dir) { e.preventDefault(); winDown = window.scrollY; $.each(boxLefts, function(i, v){ if ((dir == 1 && winDown < v && targetTop < 0) || (dir == -1 && winDown > v)) { targetTop = v; } }); if (targetTop >= 0) { $('html, body').animate({scrollTop: targetTop}, 200); } } });});});//]]> </script></head><body> <div id="wrapper"> <section class="keyboardscroll" style="background:red">Start</section> <section class="keyboardscroll" style="background:blue">Middle</section> <section class="keyboardscroll" style="background:lime">Bottom</section></div></body></html>
  4. wow i feel real stupid now... I was editing the wrong JS file. I forgot that I relocated the site to another folder and I was updating the old source not the new one. It is working now. Thanks for everyone's help.
  5. Super weird in Firefox and Chrome the alerts are not popping up at all. But still it works fine in chrome and not firefox. The updated code as it is right now. function isAcceptingNewWork(){$.get("lib/php/isAcceptingNewWork.php") .done(function(data) { if(data == 'yes'){ createDiv('isAcceptingNewWork','greenBanner'); alert(document.getElementById('isAcceptingNewWork')); document.getElementById('isAcceptingNewWork').innerHTML = "We are currently accepting new work. Feel free to contact us for a consultation!"; alert(document.getElementById('isAcceptingNewWork').innerHTML); } else { createDiv('isAcceptingNewWork', 'redBanner'); alert(document.getElementById('isAcceptingNewWork')); document.getElementById('isAcceptingNewWork').innerHTML = "We are not accepting any new work proposals at this time. We appologize for the inconvenience."; alert(document.getElementById('isAcceptingNewWork').innerHTML); } });}function createDiv(divID, divClass){var newDiv = document.createElement("div");if(divID != ""){ newDiv.setAttribute("id", divID); } else { alert('Fatal Error: A request to create a DIV was received, however no id was given. DIV will not be created without setting a id. newDiv([id],[class]);'); } newDiv.setAttribute("class", divClass); //document.getElementById('content').insert if (document.getElementById('content').firstChild){ document.getElementById('content').insertBefore(newDiv, document.getElementById('content').firstChild); } else { document.getElementById('content').appendChild(newDiv); }} The live page: www.garrett-innovations.com
  6. I commented out the document.getElementById('content').insert and changed the function to createDiv() instead of newDiv(). Still not working on my end. @ingolme: #isAcceptingNewWork does exist otherwise it would not show on the screen empty without text. If it wasnt showing I wouldnt see the background color of the div, correct? as for the linebreaks not sure what you mean by that. Care to elaborate? Thanks everyone for your help so far!
  7. EDIT: I understand now so when you press the down arrow you want it to scroll until the top of the next div is the top of the page correct? This is sample code I used in a previous project for scrolling. <html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script type="text/javascript"> function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); }</script></head> <body> <div id="home" style="padding:10px; background:gray; color:black;"> <a onclick="javascript:goToByScroll('home');">Home</a><br/> <a onclick="javascript:goToByScroll('1');">1</a><br/> <a onclick="javascript:goToByScroll('2');">2</a><br/> <a onclick="javascript:goToByScroll('3');">3</a><br/> </div> <div id="1" style="padding:10px; background:silver; height:800px; vertical-align: top; display:block; color:black;"> 1 </div> <div id="2" style="padding:10px; background:lime; height:800px; vertical-align: top; display:block; color:black;"> 2 </div> <div id="3" style="padding:10px; background:yellow; height:800px; vertical-align: top; display:block; color:black;"> 3 </div></body></html>
  8. Everything is working fine in Chrome and IE but the innerHTML does not print in Firefox. I turned on firebug and no errors in console. So confusing...I know for a fact the JS for creating <div id="isAcceptingNewWork"></div> is being created because i have css that shows either a green or red background and it is showing up. But the text is missing. I already tried using innerText also with no luck. I have the following JS function isAcceptingNewWork(){ $.get("lib/php/isAcceptingNewWork.php") .done(function(data) { if(data == 'yes'){ newDiv('isAcceptingNewWork','greenBanner'); document.getElementById('isAcceptingNewWork').innerHTML = "We are currently accepting new work. Feel free to contact us for a consultation!"; } else { newDiv('isAcceptingNewWork', 'redBanner'); document.getElementById('isAcceptingNewWork').innerHTML = "We are not accepting any new work proposals at this time. We appologize for the inconvenience."; } } );} function newDiv(divID, divClass){ var newDiv = document.createElement("div"); if(divID != ""){ newDiv.setAttribute("id", divID); } else { alert('Fatal Error: A request to create a DIV was received, however no id was given. DIV will not be created without setting a id. newDiv([id],[class]);'); } newDiv.setAttribute("class", divClass); document.getElementById('content').insert if (document.getElementById('content').firstChild){ document.getElementById('content').insertBefore(newDiv, document.getElementById('content').firstChild); } else { document.getElementById('content').appendChild(newDiv); }} and the following HTML: <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link rel="shortcut icon" href="lib/img/favicon.png" /> <title>GI.Board</title> <link rel="stylesheet" type="text/css" href="lib/css/main.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="lib/js/main.js"></script> </head> <body> <div id="maincontent"> <div id="header"> <div> <img src="lib/img/logo.png" alt=""/> </div> </div> <div id="scrolling"> <img src="lib/img/1.png" alt="Say Goodbye To Hardcoding" /> </div> <div id="content"> <script type="text/javascript"> isAcceptingNewWork(); </script> </div> </div> </body></html>
  9. oh wow... i just realized its called headCenter not headerCenter. I knew it was something like a typo. I'll change that bit of code and see. yea its working now. thanks for the help.
  10. I modified the JS with your suggestion and its still not working function updateSlider(amt){ adjustHeight = screen.height - amt; $('#header').css('bottom', adjustHeight+'px'); $('#header').css('height', amt+'px'); $('#sliderValue').text(amt);} function loadHeader(){ hwidth = screen.availWidth - 60; $('#headerCenter').css('width', parseInt(hwidth)+'px'); updateSlider(15);} function updateSlider2(amt){ $('#headerCenter').css('width', parseInt(amt)+'px'); $('#sliderValue2').text(amt);} if your want to see the actual page: www.watchtbr.com/rizeup the getHeader button calls loadHeader()and the top slider does the heightthe bottom slider does the width. I am using chrome to test.
  11. I am using some JS to resize objects using slidersI have the following html <div id="header"> <div style="display:inline; position:absolute;bottom:0px;"> <table style="border-collapse:collapse;"> <tr> <td id="headLeft" class="header"> </td> <td id="headCenter" class="header"> </td> <td id="headRight" class="header"> </td> </tr> </table> </div></div> Also I have the following CSS: #header{position:fixed;top:0px;left:0px;right:0px;vertical-align: bottom;text-align:center;color:silver;z-index:1000;}.header{padding:0 0 0 0; margin:0 0 0 0;}#headLeft{background:url('../img/topleft.png') transparent no-repeat bottom left;width:30px;height:1000px;}#headCenter{background:url('../img/topcenter.png') transparent repeat-x bottom center;height:1000px;width:200px;}#headRight{background:url('../img/topright.png') transparent no-repeat bottom right;width:30px;height:1000px;}#header table{margin:auto;} And then I am using the following JS: function updateSlider(amt){ adjustHeight = screen.height - amt; $('#header').css('bottom', adjustHeight+'px'); $('#header').css('height', amt+'px'); $('#sliderValue').text(amt);} function loadHeader(){ hwidth = screen.availWidth - 60+"px"; $('#headerCenter').css('width', hwidth); updateSlider(15);} function updateSlider2(amt){ $('#headerCenter').css('width', amt+'px'); $('#sliderValue2').text(amt);} updateSlider() works fineupdateSlider2() doesn't re-size the width at all.also loadHead() is also not re-sizing the width either. Can anyone see a mistake i'm making... I have been staring at this for like 2 hours now.
  12. Sometimes I feel the same way. What I normally do is take a break from the project for a day and work on something else to "Clear My Head". For instance, I have been slowly developing a CMS from scratch. I will work on a part of that when I get stressed with a primary project.
  13. All DOM commands are cross-browser if im not mistaken. you might have an issue with old versions of IE but you can act like all other websites and tell your user they may need to upgrade their browser to a newer version to gain full functionality of your site.
  14. thanks for pointing me in the correct direction I basically works except i have one problem. There is a div in the container that does not get renamed. var streamCount = document.getElementById('streams'); var count = 1; for(var x = 0; x < streamCount.childNodes.length; x++) { if(streamCount.childNodes[x].nodeName == 'DIV') { streamCount.childNodes[x].id = "stream"+count; count++; } } that's the modified code to match my actual structure. what i left out above was the "newStream" div that is after all the other "stream#" divs. i tried adding "-1" to the streamCount.childNodes.length to keep it from updating the last div. Example: <div id="streams"> <div id="stream1"></div> <div id="stream2"></div> <div id="stream3"></div> <div id="stream4"></div> <div id="newStream"></div></div> Sorry that i was not more clear before.
  15. all credit to justsomeguy on this one but I had a similar issue adding elements via DOM and he pointed me to this document for help https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore there is a part that shows how to add after also not just before
  16. This might be confusing but I will try to explain as much as possible. I am making a page that allows you to view multiple twitch.tv streams on the same page. I have included the option to remove a stream from the page. When this happens I would like to rename (change the id property) of all the divs on the page that hold the various streams so they are sequential. Example <div id="stream1"><div><div id="stream2"><div><div id="stream3"><div><div id="stream4"><div> Scenario: Stream2 has ended for the night and the user opts to close it. so now it look something like this <div id="stream1"><div><div id="stream3"><div><div id="stream4"><div> I would like to run a JS function to fix them so its like this again <div id="stream1"><div><div id="stream2"><div><div id="stream3"><div> stream 2 being the old stream3 and stream3 being the old stream4 Any idea how I would accomplish this?
  17. yea. my webserver must not of been updating. because its working now. Sorry.
  18. So i have the following code: <div id="console"> <div class="consoleExpansion"> <img src="lib/console_expand.fw.png" alt="Expand Console" title="Expand/Compress Toolbox Console" onclick="toggleConsole();" /> </div> <div id="streamSize" class="toolbox"> <label>Stream Width:</label> <div id="slider"> 300px <input id="slide" type="range" min="300" max="1920" step="5" value="450" onchange="updateSlider(this.value)" /> 1920px </div> <div id="16-9">Width: 450px Height: 253px</div> </div> <div id="layouts" class="toolbox"> <form> <label>Choose A Layout:</label><br> <input id="singleRow" name="layout" type="radio" value="single" checked onclick="updateChat('shown')" />Single Row with Chat<br> <input id="multiRow" name="layout" type="radio" value="multi" onclick="updateChat('hidden')" />Multi Row without Chat<br> </form> </div></div> Also have the following CSS: #console{ display:block; position:absolute; bottom:0px; left:0px; right:0px; border:0px transparent hidden; height:102px; background:#003535; padding:10px; overflow:hidden;} .toolbox{ display:inline-block; background:dimgray; color:silver; border:2px gray solid; padding:5px; margin-right:10px; position:static;}.consoleExpansion{ text-align: center; margin:0 0 0 0; top:-8px; position:relative; border:0px transparent hidden;}.consoleExpansion img{ cursor:pointer;} So basically its a collapsible toolbox that anchors to the bottom of the screen. Problem is when i collapse the toolbox I am setting the height of the #console to 5px but the different toolboxes are not following the overflow:hidden setting. They are just moving down below the screen and remain visible (I know this because a scroll bar shows up and you can scroll down and see the items). Its almost as if they are not recognizing they are children of #console. If you would like a visual example you can see the live site at www.watchtbr.com/multi.php the toolbox is expanded by clicking on the silver/gray image in the bottom center of the screen. It is set to toggle the div height with the following code: var consoleVisibility = null;function toggleConsole(){ if(consoleVisibility == 'shown'){ $('#console').css('height', '5px'); consoleVisibility = 'hidden'; } else if(consoleVisibility =='hidden') { $('#console').css('height', '102px'); consoleVisibility = 'shown'; } else { $('#console').css('height', '5px'); consoleVisibility = 'hidden'; }} any help is much appreciated.
  19. i got it. left the inline-table but set vertical-align on the #streams and .td css and the div stays at the top now.
  20. um... because it worked I guess i could try something else. Any suggestions. Just tried inline-block, same problem. inline blows up the div. It doesnt conform to the size restrictions set. block seems to work but doesnt set the div on the same row it sets it below the stream. table-cell doesnt make it drop but the height get expanded to where it drops with inline-table
  21. I guess it is a CSS issue... I modified the js to remove the span and just add the div.still not sure whats causing the div to drop though. I broke it down using chrome developer to pull the post processed HTML Prior to calling getStream(): <div id="streams"> <div id="stream1" class="td stream" style="width: 450px; height: 253.125px;"> <object type="application/x-shockwave-flash" class="stream-object" data="http://www.twitch.tv/widgets/live_embed_player.swf" width="100%" height="100%" style="visibility: visible; "> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <param name="allowNetworking" value="all"> <param name="wmode" value="transparent"> <param name="flashvars" value="hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=000"></object> </div> <div id="newStream" class="td newStream" onclick="getStream()" style="width: 450px; height: 253.125px;"> <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."> </div></div> After calling getStream(): <div id="streams"> <div id="stream1" class="td stream" style="width: 450px; height: 253.125px;"> <object type="application/x-shockwave-flash" class="stream-object" data="http://www.twitch.tv/widgets/live_embed_player.swf" width="100%" height="100%" style="visibility: visible; "> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <param name="allowNetworking" value="all"> <param name="wmode" value="transparent"> <param name="flashvars" value="hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=000"> </object> </div> <div id="newStream" class="td newStream" onclick="getStream()" style="width: 450px; height: 253.125px;"> Enter the channel name:</br> <input type="text" width="400px" name="streamer" id="streamer"></br> <input type="button" width="300px" value="Open Stream" onclick="addStream(document.getElementById('streamer').value); resetNewStream()"> </div></div> the css is almost exactly the same for .newStream and .stream the only difference is .stream hides the border applied by .td I took out the styles that a re not being called above: <style type="text/css"> body{ background:url('lib/bg.jpg') no-repeat top center #151515; font-family: "century_gothic"; margin:0 0 0 0; padding: 0 0 0 0; } #container{ vertical-align: top; text-align: center; } .td{ display:inline-table; border:4px silver solid; width:450px; height:253px; } .stream{ padding: 4px 0px 0px 4px; border:4px transparent hidden; position:relative; } .newStream{ padding: 4px 0px 0px 4px; color:silver; cursor:pointer; position:relative; } @font-face { font-family: 'century_gothic'; src: url('lib/fonts/century_gothic.eot'); /* IE9 Compat Modes */ src: url('lib/fonts/century_gothic.eot?iefix') format('eot'), /* IE6-IE8 */ url('lib/fonts/century_gothic.woff') format('woff'), /* Modern Browsers */ url('lib/fonts/century_gothic.ttf') format('truetype'), /* Safari, Android, iOS */ url('lib/fonts/century_gothic.svg#svgFontName') format('svg'); /* Legacy iOS */ } </style> Here is the getStream(): function getStream(){ result = "Enter the channel name:</br>"+ "<input type=\"text\" width=\"400px\" name=\"streamer\" id=\"streamer\" /></br>"+ "<input type=\"button\" width=\"300px\" value=\"Open Stream\" onclick=\"addStream(document.getElementById('streamer').value); resetNewStream()\" />"; document.getElementById('newStream').innerHTML = result; document.getElementById('streamer').focus();}
  22. Not sure if I am in the right section for this but js code is triggering this event. I am working on a site for a friend and I am basically finished until I just broke it. www.watchtbr.com/multi.php basically what is wrong is when you click on the Add a stream, it replaces the image with a form to get the channel name you would like to add to the page.if you are not familiar with twitch.tv and need a channel to test with you can use mine sweetlouhd. All of that works except when you click on the add stream the div drops down from where it was. I have no idea what happened. It started when i added the form to the getStream() function.Here is the full source: <!DOCTYPE html><html> <head> <title>WatchTBR.com | Multi-Stream | Created By: SweetLouHD</title> <link rel="shortcut icon" href="lib/russian.fw.png" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body{ background:url('lib/bg.jpg') no-repeat top center #151515; font-family: "century_gothic"; margin:0 0 0 0; padding: 0 0 0 0; } #container{ vertical-align: top; text-align: center; } #streams{ color:silver; } .td{ display:inline-table; border:4px silver solid; width:450px; height:253px; } .stream{ padding: 4px 0px 0px 4px; border:4px transparent hidden; } .chat{ padding: 4px 0px 0px 4px; border:4px transparent hidden; } .newStream{ padding: 4px 0px 0px 4px; color:silver; cursor:pointer; } .toolbox{ display:inline-block; background:dimgray; color:silver; border:2px gray solid; padding:10px; margin-right:10px; } .hidden{ display:none; } @font-face { font-family: 'dirty_ego'; src: url('lib/fonts/dirty_ego.eot'); /* IE9 Compat Modes */ src: url('lib/fonts/dirty_ego.eot?iefix') format('eot'), /* IE6-IE8 */ url('lib/fonts/dirty_ego.woff') format('woff'), /* Modern Browsers */ url('lib/fonts/dirty_ego.ttf') format('truetype'), /* Safari, Android, iOS */ url('lib/fonts/dirty_ego.svg#svgFontName') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'eroded'; src: url('lib/fonts/eroded.eot'); /* IE9 Compat Modes */ src: url('lib/fonts/eroded.eot?iefix') format('eot'), /* IE6-IE8 */ url('lib/fonts/eroded.woff') format('woff'), /* Modern Browsers */ url('lib/fonts/eroded.ttf') format('truetype'), /* Safari, Android, iOS */ url('lib/fonts/eroded.svg#svgFontName') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'century_gothic'; src: url('lib/fonts/century_gothic.eot'); /* IE9 Compat Modes */ src: url('lib/fonts/century_gothic.eot?iefix') format('eot'), /* IE6-IE8 */ url('lib/fonts/century_gothic.woff') format('woff'), /* Modern Browsers */ url('lib/fonts/century_gothic.ttf') format('truetype'), /* Safari, Android, iOS */ url('lib/fonts/century_gothic.svg#svgFontName') format('svg'); /* Legacy iOS */ } </style> <script> var loggedin = 0; loggedin = 1; </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="lib/popout.min.js"></script> <script> popup = 1; $(function(){ popoutFuncs(); keyPress(); }) </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35974676-1']); _gaq.push(['_setDomainName', 'watchtbr.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); var streamcount=1; var streamWidth = null; var my_div = null; var newDiv = null; var half = null; function addStream(streamName) { var single = document.getElementById('singleRow'); var multi = document.getElementById('multiRow'); if(single.checked){ var newDiv = document.createElement("span"); newDiv.innerHTML = tbrStream(streamName); my_div = document.getElementById("newStream"); document.getElementById('streams').insertBefore(newDiv, my_div); streamcount += 1; document.getElementById('slider').innerHTML = loadSlider(streamcount); addChat(streamName, "shown"); if(streamWidth < half){ updateSlider(streamWidth); } else { updateSlider(450); } document.getElementById('slider').innerHTML = loadSlider(streamcount); } else if(multi.checked){ var newDiv = document.createElement("span"); newDiv.innerHTML = tbrStream(streamName); my_div = document.getElementById("newStream"); document.getElementById('streams').insertBefore(newDiv, my_div); streamcount += 1; document.getElementById('slider').innerHTML = loadSlider(streamcount); addChat(streamName, "hidden"); updateSlider(streamWidth); }else{ alert('Error:addStream. Cannont determine what layout is selected.'); } } function addChat(streamName, visibility) { var newDiv = document.createElement("span"); newDiv.innerHTML = tbrChat(streamName, visibility); my_div = document.getElementById("newChat"); // add the newly created element and it's content into the DOM document.getElementById('chat').insertBefore(newDiv,my_div); } function tbrChat(channel, visibility) { if(visibility =="shown"){ result = "<div class=\"td chat\">\n"+ "\t<iframe frameborder=\"0\" scrolling=\"no\" id=\"chat_embed\" src=\"http://twitch.tv/chat/embed?channel="+channel+"&popout_chat=true\" height=\"400px\" width=\"100%\"></iframe>\n"+ "</div>\n"; } else { result = "<div class=\"td chat hidden\">\n"+ "\t<iframe frameborder=\"0\" scrolling=\"no\" id=\"chat_embed\" src=\"http://twitch.tv/chat/embed?channel="+channel+"&popout_chat=true\" height=\"400px\" width=\"100%\"></iframe>\n"+ "</div>\n"; } return(result); } function tbrStream(channel) { result = "\t<div id=\"stream"+streamcount+"\" class=\"td stream\">\n"+ "\t\t<object type=\"application/x-shockwave-flash\" class=\"stream-object\" data=\"http://www.twitch.tv/widgets/live_embed_player.swf\" width=\"100%\" height=\"100%\" style=\"visibility: visible; \">\n"+ "\t\t<param name=\"allowFullScreen\" value=\"true\">\n"+ "\t\t<param name=\"allowScriptAccess\" value=\"always\">\n"+ "\t\t<param name=\"allowNetworking\" value=\"all\">\n"+ "\t\t<param name=\"wmode\" value=\"transparent\">\n"+ "\t\t<param name=\"flashvars\" value=\"hostname=www.twitch.tv&channel="+channel+"&auto_play=true&start_volume=000\"></object>\n"+ "\t</div>\n"; return(result); } function getStream() { result = "<div style=\"display:inline-block;\" class=\"center\">Enter the channel name:</div>\n"+ "<div style=\"display:inline-block;\" class=\"center\"><input type=\"text\" width=\"400px\" name=\"streamer\" id=\"streamer\" /></div>\n"+ "<div style=\"display:inline-block;\" class=\"center\"><input type=\"button\" width=\"300px\" value=\"Open Stream\" onclick=\"addStream(document.getElementById('streamer').value)\" /></div>"; document.getElementById('newStream').innerHTML = result; document.getElementById('streamer').focus(); //addStream('the_black_russian'); } function updateSlider(slideAmount) { if(streamWidth==null){ streamWidth = 450; slideAmount = 450; } $('.stream').css('width', slideAmount+'px'); $('.stream').css('height', slideAmount*9/16+'px'); $('.newStream').css('width', slideAmount+'px'); $('.newStream').css('height', slideAmount*9/16+'px'); $('.chat').css('width', slideAmount+'px'); $('#16-9').text("Width: "+slideAmount+ "px Height: "+slideAmount*9/16+"px"); streamWidth = slideAmount; } function loadSlider(numofstreams) { var single = document.getElementById('singleRow'); var multi = document.getElementById('multiRow'); if(single.checked){ if(numofstreams < 3){ half=(screen.width/numofstreams)-(15*numofstreams); } else { half=(screen.width/numofstreams)-(15*(numofstreams-2.5)); } }else if(multi.checked){ if(numofstreams < 5){ half=(screen.width/numofstreams)-(15*(numofstreams-2.5)); } else { half=(screen.width/3)-(15*(3-2.5)); } }else{ alert('Error:Load Slider. Cannont determine what layout is selected.'); } result = "\t\t300px \n"+ "\t\t<input id=\"slide\" type=\"range\" min=\"300\" max=\""+half+"\" step=\"5\" value=\""+streamWidth+"\" onchange=\"updateSlider(this.value)\" />\n"+ "\t\t "+half+"px\n"; return(result); } function updateChat(visibility){ if(visibility=='hidden'){ $('.chat').css('display', 'none'); } else { $('.chat').css('display', 'inline-table'); } } </script> </head> <body onload="addStream('the_black_russian');"> <div id="streams"> <div id="newStream" class="td newStream" onclick="getStream()"> <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..." /> </div> </div> <div id="chat"> <div id="newChat"></div> </div> <div id="console"> <div id="streamSize" class="toolbox"> <label>Stream Width:</label> <div id="slider"> 300px <input id="slide" type="range" min="300" max="1920" step="5" value="450" onchange="updateSlider(this.value)" /> 1920px </div> <div id="16-9">Width: 450px Height: 253px</div> </div> <div id="layouts" class="toolbox"> <form> <label>Choose A Layout:</label><br> <input id="singleRow" name="layout" type="radio" value="single" checked onclick="updateChat('shown')" />Single Row with Chat<br> <input id="multiRow" name="layout" type="radio" value="multi" onclick="updateChat('hidden')" />Multi Row without Chat<br> </form> </div> </div> </body></html>
  23. ok totally overlooked that document.body... works now. thanks a lot.
  24. ok need a little help with the DOM part. I never really worked with DOM. I have made the following function: function addNewStream() { // create a new div element // and give it some content var newDiv = document.createElement("span"); newDiv.innerHTML = newStream(streamcount); // add the newly created element and it's content into the DOM my_div = document.getElementById("streams"); document.body.insertBefore(newDiv, my_div.nextSibling); } It adds the code just fine, the only problem is instead of adding the content inside of <div id="streams"></div> it adds it after. <div id="streams"></div><span> <div id="stream1" class="td newStream" onclick="getStream()"> <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."></div></span> Ideally i would like to to be: <div id="streams"><span> <div id="stream1" class="td newStream" onclick="getStream()"> <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."></div></span></div>
  25. thanks for the response ill check that out now
×
×
  • Create New...