Develop Reference

Flexbox and responsive iframes

I'm trying to mantain the 16:9 ratio when I insert responsive iframes inside a flexbox.
.video-media-youtube-inner {
display: flex;
flex-wrap: wrap;
}
div[class^="video-media-youtube-inner-vi"] {
flex: 0 0 50%;
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
div[class^="video-media-youtube-inner-vi"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-media-youtube">
<div class="video-media-youtube-inner">
<div class="video-media-youtube-inner-vi01">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
<div class="video-media-youtube-inner-vi02">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
<div class="video-media-youtube-inner-vi03">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
</div>
But, as you can see from the snippet, the iframe width is shrinked correctly but the height remain always the same. Is it possible to mantain the 16:9 ratio in flexbox items?

Try adding an extra <div> around the <iframe>s:
.video-media-youtube-inner {
display: flex;
flex-wrap: wrap;
}
div[class^="video-media-youtube-inner-vi"] {
flex: 0 0 50%;
}
div[class^="video-media-youtube-inner-vi"] .sixteen-by-nine {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
div[class^="video-media-youtube-inner-vi"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-media-youtube">
<div class="video-media-youtube-inner">
<div class="video-media-youtube-inner-vi01">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
<div class="video-media-youtube-inner-vi02">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
<div class="video-media-youtube-inner-vi03">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
</div>
</div>
On another note - Perhaps you are using a convention I'm not familiar with, but I think it would be more standard and also more maintainable to just use a consistent class like video-media-youtube-inner for your inner <div>s and then assign them unique ids (vi01, vi02, vi03). That way, you could just access them via .video-media-youtube-inner in your CSS, or #vi01 if you need to target a specific one.

jquery remove duplicate elements after loaded

i have a plugin which shows me Images in a 360 3D-View.
If i open the Webpage, in the Background are loading 36 Pictures and after loading the Pictures the Plugin take one Picture and show it.
So, my Problem is that i can do some other actions on the page before all pictures are loaded and i load some other data after i click on a button with ajax and if i do other actions BEFORE all Pictures are loaded, i get duplicate entries in the HTML Code and some pictures are shown and other not something like this (this code generate the 3D Plugin).
<div>
<div rel="0" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img0.png" class="3dweb">
</div>
<div rel="1">
<img src="img1.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="2" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="1" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img1.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: block;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: block;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="0" style="position: absolute; width: 100%; height: 100%; display: block;">
<img src="img0.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
my solution was that after all images are loaded, i delete the duplicate entries and show only one picture.
the problem is that my javascript/jquery code freeze the browser and i don't know why, perhaps i think it gives a better solution but i havent a better solution.
my javascript/jquery code
var myVar = setInterval(function(){ myTimer() }, 4000);
function myTimer() {
if($('[rel=35]').length > 0) {
$('.js-loading-car-image').css("display","none");
var x = 1;
var i = 0;
while (i < 35) {
var tmp = $('[rel='+i+']').next();
if($(tmp).attr("rel") == x) {
x++;
i++;
} else {
$('[rel='+i+']').next().remove();
}
}
for(var i=0; i<36;i++) {
var display = $('[rel='+i+']').css("display");
if(display=="block") {
$('[rel='+i+']').css("display", "none");
}
}
$('[rel=26]').css("display","block");
$('.js-3d-images').fadeIn("slow");
myStopFunction();
}
}
function myStopFunction() {
clearInterval(myVar);
}
Anybody ideas why the Browers are freezing or which i could/should do better?

I removed some values from your code and create a basic structure. Check whether this is the solution you are looking for
var dataset = $('#image-data > div');
var rel = [];
for(var j = 0 ; j < dataset.length; j++ ){
var x = $(dataset[j]).attr('rel');
if( jQuery.inArray(x, rel) >= 0){
$(dataset[j]).remove();
}
rel.push(x);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-data">
<div rel="0">
<img src="img0.png" alt="rel 0">
</div>
<div rel="1">
<img src="img1.png" alt="rel 1">
</div>
<div rel="2">
<img src="img2.png" alt="rel 2">
</div>
<div rel="3">
<img src="img3.png" alt="rel 3">
</div>
<div rel="1">
<img src="img1.png" alt="rel 1">
</div>
<div rel="3">
<img src="img3.png" alt="rel 3">
</div>
<div rel="3">
<img src="img3.png" alt="rel 3">
</div>
<div rel="0">
<img src="img0.png" alt="rel 0">
</div>
</div>

How to input value in code mirror using selenium web driver?

I'm currently facing an issue related to input values in code mirror (FYI: input is html code)
Any help much appreciated!!
This is what i was doing so far (but i need to insert values in each line of code mirror)
JavascriptExecutor js = (JavascriptExecutor)driver;
Js.executeScript("arguments[0].CodeMirror.setValue(\"" + value + "\");", driver.findElementBy(By.id("id")));
Page source code is:
<div class="CodeMirror cm-s-default">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 5px; left: 35px;">
<textarea wrap="off" style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: medium none;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea>
</div>
<div class="CodeMirror-vscrollbar" cm-not-content="true" style="min-width: 18px;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" cm-not-content="true" style="min-height: 18px;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1" draggable="true">
<div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 31px; min-width: 7px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: medium none;">
<div class="CodeMirror-measure">
<span>
<span>​</span>
x
</span>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 22.85px;"> </div>
</div>
<div class="CodeMirror-code">
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -30px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line ">
<span>
<span cm-text="">​</span>
</span>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
So the problem is how to input value in different lines in code mirror..

Your question is not very clear but I think what you are looking for is to insert text into different lines instead of all on one line. If that's the case, you need to insert \n in your string where you want carriage returns.
An example string would be string sample = "<html>\n <test>\n</html>" which should produce
<html>
<test>
</html>

I'm able to input code mirror with line breaks, by changing the input value to this..
<html>\\r<test>\\r</html>

how to show element if visible in view-port with jQuery? (UPDATE)

I create a page that have flowing code:
UPDATE HTML:
<div class="viewPort">
<div class="load">
<div class="item" id="1"></div>
<div class="item" id="2"></div>
<div class="item" id="3"></div>
<div class="item" id="4"></div>
<div class="item" id="5"></div>
<div class="item" id="6"></div>
<div class="item" id="7"></div>
<div class="item" id="8"></div>
<div class="item" id="9"></div>
</div>
</div>
CSS:
.viewPort {
border: 1px solid #ddd;
width: 500px;
height: 280px;
overflow: scroll;
position: relative;
}
.load {
width: 900px;
height: 900px;
}
.item {
background: yellow;
/** display: none; **/
width: 300px;
height: 300px;
float: left;
}
UPDATE jQuery:
$('.load').on('mouseenter','.item',function(){
//$(this).css('display','block');
var getID = $(this).attr('id');
alert(getID);
});
http://jsfiddle.net/mr_mohsen_rasouli/6Y29N/1/
and content are hidden! If I enter the mouse into .item the .item element became visible, that was bad. I decided and try to change the function to that when I scroll and enter item to viewPort become visible?
but everything I tried did not work.
How can I do that?

You can use Viewport Selectors plugin for jQuery. It's pretty straightforward.
Here's the link:
http://www.appelsiini.net/projects/viewport
You can use it like this:
$('.element').each(function(){
if( $(this).is(':in-viewport') ){
$(this).fadeIn();
}
});

I may suggest you to use opacity instead of display. Check this jsfiddle
$('.item').hover(function(){
$(this).css('opacity','1');
});
And change the css to
.item {
background: yellow;
opacity: 0;
width: 300px;
height: 300px;
float: left;
}

CSS/alignment issues when populating page with d3.js charts

I don't understand why there is empty space between the left column (highlighed in image) and the header. This only happens when i populate the middle column with chart. Looking at chrome developer i don't understand what i am missing. Here is a snippet of the code. I tried adding margin and padding both to the bottom of the image on left column but that didn't help. What am i missing?
<body style="padding-left: 5px;">
<div id="header" style="width: 960px; height: 100px; background-color: #F5F5F5">
<p>Bubble Inc</p>
</div>
<div id="container" style="width: 1100px; height: 1000px"">
<div id="leftCol" style="width: 225px; display: inline-block; margin-bottom: 50px; padding-bottom: 30px;"></div>
<div id="midCol" style="width: 600px; display: inline-block;"></div>
<div id="rightCol" style="width: 225px; display: inline-block;"></div>
</div>
<script type="text/javascript">

The problem is that the big charts drag the smaller down, because you have no vertical alignment rule. I added a big place holder chart (id: bigContent) to your code to show the effect:
<style>
#leftCol { background-color: red }
#rightCol { background-color: green }
#midCol { background-color: blue }
#bigContent { height: 200px;}
</style>
<div id="header" style="width: 960px; height: 100px; background-color: yellow"><p>Bubble Inc</p></div>
<div id="container" style="width: 1100px; height: 1000px">
<div id="leftCol" style="width: 225px; display: inline-block;">A</div>
<div id="midCol" style="width: 600px; display: inline-block;">
<div id="bigContent">Biiig Content</div>
</div>
<div id="rightCol" style="width: 225px; display: inline-block;">C</div>
</div>
You can fix the problem by adding a vertical alignment rule to the style section.
#container>div { vertical-align: top; }