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

dzhax · March 28, 2013

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>

justsomeguy · March 28, 2013

It looks like it has something to do with the stream to the left of it, maybe the div inside the span.

dzhax · March 28, 2013

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

justsomeguy · March 28, 2013

Why did you choose inline-table for display? Have you tried other options?

dzhax · March 29, 2013

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

Edited March 29, 2013 by dzhax

dzhax · March 29, 2013

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.

dsonesuk · March 29, 2013

inline elements size themselves on content and padding used, height, width won't make any difference.block elements width will fill the length available to it within its parent element, and stack above other sibling block elements, unless float is used to make them sit side by side to each other within the space available to them, and height and width can be set.

Sign In

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

Recommended Posts

dzhax

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

dzhax

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

dzhax

Link to comment

Share on other sites

dzhax

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity