Develop Reference

Bootstrap responsive gallery with match height for images

Im trying and trying too build something i think simple but right know i dont know how to do it ;) Honestly i mad it few months ago but i lost files and i don have any idea how to build it right now
So, im using Bootstrap to build gallery i have 2 different sizes of images long and short ones
Long ones are 1920x1200, short 1200x1200px
im trying to build it in grid like
<div class="row">
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-6">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
<div class="col-md-3">
<img src="yourImg" />
</div>
</div>
Of course it should look like in my preview img
and of course img should be in the center of each column.
I tried to use JS for match heigh and it works fine but of course image is out of the parent div and i cant fix it. I cant use background-image beacuse JS is not reading the size of div.
Any ideas ? How to build it ? The best thing is that i build it ...... and right now i can build it again !
Thank you very very much !

If you want the image to match the containing div's size you should add this code to the CSS:
img {
max-width: 100%;
max-height: 100%;
}
you can also save the original ratio by using this instead:
img {
max-width: 100%;
height: auto;
}

First of all, the structure of the html is wrong,
each row has 12 columns, you have put all the columns of each row into one row.
The code should be like this:
<div class="row">
<div class="col-md-6">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img>
</div>
<div class="col-md-6">
<img>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
<div class="col-md-3">
<img>
</div>
</div>
Like this, the images should be organized more or less as you want

How do I prevent two divs from jumping around my webpage when it first loads?

Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>

If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}

google maps iframe not working dynamically (auto show hide) in safari but working in google chrome

I referred to a few questions related to iframe not working in safari. those answers suggest to use an alternative of iframe(Ajax or jQuery as an alternative to iframe). But i have already developed the website without testing in safari. I don't want to change the implementation at the last development stage.
Issue:
I am trying to integrate google maps iframe into my webpage.
The website changes responsively based on window size. The divs were
initially coded in adobe reflow. Using Edge Animate i have inserted
the html files into these divs.
The problem lies in the fact that when I try to resize google maps
page, the div on the mobile site still shows on the desktop one and
vice versa. This occurs only on Safari browser.
Heres the code i used in edge Animate.
var container = sym.$('mapBox');
var map = '<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2595.2028231859395!2d7.7518645!3d49.4239794!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47966d5189fba81f%3A0x8ab04632090ea019!2sTU+Kaiserslautern!5e0!3m2!1sen!2sde!4v1432133191497"
width="'+container.width()+'" height="'+container.height()+'"
frameborder="0" style="border:0"></iframe>';
container.html(map);
and heres the html page.
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="Video" class="clearfix">
<div id=“mapdiv_Stage" class=“EDGE-MAPDIV">
<div id="Logo" class="clearfix">
<div id="logo_Stage" class="EDGE-LOGO">
</div>
</div>
<div id="N" class="clearfix">
<div id="n_Stage" class="EDGE-N">
</div>
</div>
<div id="E" class="clearfix">
<div id="e_Stage" class="EDGE-E">
</div>
</div>
<div id="T" class="clearfix">
<div id="t_Stage" class="EDGE-T">
</div>
</div>
<div id="R" class="clearfix">
<div id="r_Stage" class=“EDGE-R">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="S" class="clearfix">
<div id="s_Stage" class="EDGE-S">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="I" class="clearfix">
<div id="i_Stage" class="EDGE-I">
</div>
</div>
</div>
<div id="bigsocial" class="clearfix">
<div id="youtube" class="clearfix">
<div id="youtube_Stage" class="EDGE-YOUTUBE">
</div>
</div>
<div id="instagram" class="clearfix">
<div id="instagram_Stage" class="EDGE-INSTAGRAM">
</div>
</div>
<div id="googleplus" class="clearfix">
<div id="googleplus_Stage" class="EDGE-GOOGLE">
</div>
</div>
<div id="wiki" class="clearfix">
<div id="wiki_Stage" class="EDGE-WIKI">
</div>
</div>
<div id="twitter" class="clearfix">
<div id="twitter_Stage" class="EDGE-TWITTER">
</div>
</div>
<div id="facebook" class="clearfix">
<div id="facebook_Stage" class="EDGE-FACEBOOK">
</div>
</div>
</div>
</div>
<div id="Tablet" class="clearfix">
<div id="tab_Stage" class="EDGE-Tab">
</div></div>
<div id="smallsocial" class="clearfix">
<div id="Facebook1" class="clearfix">
<div id="facebook3_Stage" class="EDGE-FACEBOOK3">
</div>
</div>
<div id="Twitter2" class="clearfix">
<div id="twitter3_Stage" class="EDGE-TWITTER3">
</div>
</div>
<div id="Wiki3" class="clearfix">
<div id="wiki3_Stage" class="EDGE-WIKI3">
</div>
</div>
<div id="Youtube4" class="clearfix">
<div id="youtube3_Stage" class="EDGE-YOUTUBE3">
</div>
</div>
<div id="Instagram5" class="clearfix">
<div id="instagram3_Stage" class="EDGE-INSTAGRAM3">
</div>
</div>
<div id="googlelus6" class="clearfix">
<div id="google3_Stage" class="EDGE-GOOGLE3">
</div>
</div></div>
</div>
</body>
</html>
“mapdiv_Stage” is the html with edge animate created map html.
How do I rectify this problem?
screen shot of chrome. This pic shows the code perfectly working in chrome (the map is not shown below a certain size)
screen shot of safari. The map should be hidden if the size reduces below a certain limit. This is not working in safari.
Both the screen shots are taken at the same browser screen size and the functionality is working in chrome and not working in safari.

Header caught and sticks after scroll

I want the header to stick on scroll as shown here. (http://davist11.github.io/jQuery-Stickem/)
Source site (https://github.com/davist11/jQuery-Stickem)
I have a full screen video at the top of the page playing and I want to scroll and have the header stick when it hits it. Similarly there is a small border at the top on the other pages I want the scroll to miss then stick when it reaches this point.
Here is what it currently looks like
http://jsfiddle.net/wp7ornmv/
EDIT: Scroll on the HTML window
<div id="logo">
</div>
<div id="intro">
<video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
<source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
<source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
</video>
</div>
<div id="container">
<div id="content">
<div id="Mbackground">
<div id="Ncontainer">
<div id="Ncontain">
<div id="Nlogo">Logo
</div>
<div id="Nmenu">
<div class="Nlink">Contact
</div>
<div class="Nlink">About
</div>
<div class="Nlink">Work
</div>
</div>
</div>
</div>
</div>
<div id="Mbackground">
<div id="Mbody">
<div class="Mrow">
<div class="Mcontainer">
<a href="project.html" class="transition">
<span class="link-spanner"></span>
</a>
<div id="Mimageone" class="Mimage">
</div>
<div id="Mborderone" class="Mborder">
</div>
<div id="Mboxone" class="Mbox">
<div class="Mtext">
<div class="Mtitle">Title
</div>
<div class="Msubtitle">Subtitle
</div>
<div class="Mdescrip">Descript
</div>
</div>
<div class="Meye">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footerhalf1">
</div>
<div id="footerhalf2">
<div id="footercontents">Made by
</div>
</div>
</div>

This is a javascript supported behavior by stickem. You may find it HERE
Just make sure your container has a position relative and your sidebar has a position:fixed; top:0; left:auto and you will have it done.
This technique is quite common on websites running advertisements on a side panel. There is a lot more intricate information about this online and I assure you, using the source for the demo you provided along with the stickem jquery library, you will be done in no time.
Good luck

Display image only if it enter in some define position

I have one vertical slider page.
in every slide I have one image and I have iphone container.
like
now this page slides vertically show next slides comes in center and its also contains image on center.
now I want something like that image only displayed when its comes in iphone container.
as here in second image my images showing even out of iphone container so I dont want to do that
my code
<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>
<div class="port_list">
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
</div>

You create a container div for your phone and put there a div for the sildes. with overflow:hidden you can hide the additional content.
<div id="phone">
<div id="slides">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />
Check this fiddle: http://jsfiddle.net/qfzBk/2/