dzhax Posted March 28, 2013 Share Posted 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted March 28, 2013 Share Posted 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. Link to comment Share on other sites More sharing options...
dzhax Posted March 28, 2013 Author Share Posted 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();} Link to comment Share on other sites More sharing options...
justsomeguy Posted March 28, 2013 Share Posted March 28, 2013 Why did you choose inline-table for display? Have you tried other options? Link to comment Share on other sites More sharing options...
dzhax Posted March 29, 2013 Author Share Posted March 29, 2013 (edited) 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 Edited March 29, 2013 by dzhax Link to comment Share on other sites More sharing options...
dzhax Posted March 29, 2013 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 29, 2013 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now