Jump to content

dzhax

Members
 View Profile  See their activity

  • Posts

    363

  • Joined

  • Last visited

 Content Type 

Posts posted by dzhax

    JavaScript Tutorial and Reference

    in JavaScript

    Posted · Edited by dzhax

    Hi I am trying to greate a fade in on the image which is trigered by a a:hover.I can get the teansition to work on the <a> tag but not the image. <article class="mainContent"> <ul class="contentStyls"> <li><a class="imgLink" href="#">Brick work<img class="hoverImg" src="_images/hoverImg/BrickWork.jpg" /></a></li> </ul></article>
    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;}

    Keyboard-navigation problem

    in JavaScript

    Posted

    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>

    .innerHTML not printing in Firefox

    in JavaScript

    Posted

    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

    .innerHTML not printing in Firefox

    in JavaScript

    Posted

    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!

    Keyboard-navigation problem

    in JavaScript

    Posted · Edited by dzhax

    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>

    .innerHTML not printing in Firefox

    in JavaScript

    Posted · Edited by dzhax

    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>

    trouble resizing objects

    in JavaScript

    Posted · Edited by dzhax

    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.

    trouble resizing objects

    in JavaScript

    Posted · Edited by dzhax

    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.

    trouble resizing objects

    in JavaScript

    Posted

    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.

    renaming divs according to their order displayed on the screen.

    in JavaScript

    Posted · Edited by dzhax

    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.

    renaming divs according to their order displayed on the screen.

    in JavaScript

    Posted

    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?

    child divs not listening to parent div overflow setting

    in CSS

    Posted · Edited by dzhax

    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.

    I change the HTML of a div and it moves... :(

    in JavaScript

    Posted · Edited by dzhax

    um... because it worked :Bucktooth: 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

    I change the HTML of a div and it moves... :(

    in JavaScript

    Posted

    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();}

    I change the HTML of a div and it moves... :(

    in JavaScript

    Posted

    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>

    adding another object to a page

    in JavaScript

    Posted

    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>

    adding another object to a page

    in JavaScript

    Posted · Edited by dzhax

    I am working on a website for a video game streamer I watch and sometimes he plays with other streamers and viewers want to watch them both or in some cases more than 2, all play at the same time. So there are sites that do "dual streams" that will allow you to show both videos on the same page. My idea was to make something similar but scale-able to however many streams are needed. So far I have js functions with all the HTML needed add the video player but not sure how i would add a new video to the page without having to refresh. I am using the document.getElementByID('streams').innerHTML = mainStream()+newStream(); right now to manually show the primary stream and a image to click on to add another stream. 

    function mainStream()	 {	  result = "\t<div id=\"stream1\" 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=the_black_russian&auto_play=true&start_volume=100\"></object>\n"+	   "\t</div>\n";	   return(result);	 }	 function newStream(streamNum)	 {	  result = "\t<div id=\"stream"+streamNum+"\" class=\"td newStream\" onclick=\"getStream()\">\n"+	  "\t\t<img src=\"lib/new_stream.fw.png\" style=\"width:100%; height:100%\" alt=\"new stream\" title=\"Click to open a new stream...\" />\n"+	   "\t</div>\n";	   return(result);	 }

    In hard code it would look like this when printed:

    <div id="streams">	 <div id="stream1" class="td stream" style="width: 301px; height: 169.3125px;">		  <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=100"></object>	 </div>	 <div id="stream2" class="td newStream" onclick="getStream()" style="width: 301px; height: 169.3125px;">		 <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream...">	 </div></div>

    What I am looking to do is when someone triggers getStream() for it to add another stream and list the newStream() code last. This would make the new stream #2 and push the open a new stream part to stream #3. I also would like to add in functionality to close a specific stream. Any help is much appreciated! If I did not explain enough please let me know I will try my best to fill in any details I may have missed.

×
×
  • Create New...