make the whole section responsive - javascript

i was trying to make a section of website, responsive by giving heights and widths in % instead of pixels, but it is not working so please help to make it responsive.
while changing resolution it is not working, i want the ending border with it also while it goes to different resolution..
HTML
<section class="banner ik">
<div class="img_box">
<div class="fadein">
<img src="banner/b1_03.jpg">
<img src="banner/ban2_03.jpg">
<img src="banner/ban3_03.jpg">
</div>
</div>
</section>
JS
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
CSS
.banner{
width: 100%;
height: auto;
border-bottom: solid 1px black;
margin: 0 auto;
}
.ik {
z-index: -1;
position: absolute;
height: 405px;
}
.img_box{
width: 100%;
overflow: hidden;
}
.fadein {
position: relative;
width: 100%;
height: 420px;
}
.fadein img { position:absolute; left:0; top:0; width: 100%; }

Related

Z-index iframe on an iframe

Is this possible? I have tried setting z-index: 999; on the one I want to overlap on on, but then but no luck.
basically i am trying to overlap #cgdiv on #cDiv
Style:
#cgDiv {
z-index:999;
display: inline-block;
height: 100%;
vertical-align: top;
width: 30%;
}
#contentGenerator, #content {
height: 100%;
width: 100%;
}
#cDiv {
z-index:998;
display: inline-block;
height: 100%;
vertical-align: top;
width: 69.5%;
}
body { margin: 0}
Html
<HTML>
<HEAD>
</HEAD>
<BODY >
<DIV id="cgDiv">
<IFRAME id="contentGenerator" src="content.html">
</IFRAME>
</DIV>
<DIV id="cDiv">
<IFRAME id="content" src="startNSM.html">
</IFRAME>
</DIV>
</BODY>
</HTML>
yes. you can set position:absolute and top:0 to overlap them
position: absolute;
top: 0;
see this fiddle example
https://jsfiddle.net/qvct1tnm/2/

How to keep an image at 50% of the page and containing its height

I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.

Making a JS add slide show

Hello I am making a JS slide show script. The problem I am having is that the slide2 div that I am using to load the second img is not playing nice with the frame. when you click the next slide the new dive is put at the bottom of the frame. I want the new frame to come next to the old image. can you guys help me get this right? ill be around to answer any questions.
$(document).ready(function() {
$('#next_slide').on('click', function(e) {
console.log("next_slide was clicked");
$("#slide1").toggleClass('clicked');
$("#slide2").toggleClass("clicked");
});
});
body {
margin: 0px;
}
#main {
display: flex;
justify-content: center;
}
#slide_show {
background-color: gray;
border: 1px solid black;
width: 50%;
height: 350px;
margin-top: 50px;
display: flex;
}
#slide1 {
width: 100%;
height: 100%;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slide2 {
width: 0%;
float: right;
height: 100%;
position: fixed;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slid_container {
width: 100%;
height: 100%;
background-color: gray;
}
#next_slide,
#last_slide {
opacity: .5;
width: 20px;
height: 100%;
background-color: yellow;
}
#slide1.clicked {
transition: width 2s;
width: 0px;
}
#slide2.clicked {
transition: width 2.1s;
width: 100%;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<div id="main">
<div id="slide_show">
<div id="last_slide">
</div>
<div id="slid_container">
<div id="slide1">
</div>
<div id="slide2">
</div>
</div>
<div id="next_slide">
</div>
</div>
</div>
</body>
</html>
It looks like I was able to hack a fix by setting the display mode for the slid_container div to flex and making the transitions both to 2s each. If there is a better way to do this feel free to respond.

Resizing images to fit in a container perfectly

I searched this question all over on here and found a couple of examples and I tried one in particular, but it is not working at all like I am wanting it to.
I have set the container's height to 600px and it is not even coming close. I am sure it is due to my image width only being 33%, but is there a way to get these taller at all or am I stuck with the height only being this tall?
I don't get why the far right image isn't even going to the top of the container. I at least want that to be like that.
Is there anyway to adjust the height for these images or will that pull it completely out of proportion?
$(window).load(function(){
$('.home-img-block').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
#home-img-blocks {
width: 100%;
height: 600px;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
width: 33%;
height: 100%;
border: 1px solid black;
display: inline-block;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
max-width: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>
Following way you can cover whole height of your container. Remove max-width from image and give vertical-align:top and overflow: hidden; to container.
But not that, it will cut your image because it will not maintain aspect ratio as height is so high and width small.
$(window).load(function(){
$('.home-img-block').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
#home-img-blocks {
width: 100%;
height: 600px;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
width: 33%;
height: 100%;
border: 1px solid black;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.home-img-block img.wide {
max-height: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>
Well, you have set your height to auto for the pics so if your rightmost picture has different original size than the other 2 that might be the problem. You can try to add an id for the last picture and than work with it specifically increasing its height. You can also try to use bootstrap it is incredible useful for dividing you screen on equal parts.
#home-img-blocks {
font-size: 0;
height: 600px;
width: 100%;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
border: 1px solid black;
box-sizing: border-box;
display: inline-block;
height: 100%;
overflow: hidden;
position: relative;
width: 33.33%;
}
.home-img-block img.wide {
height: 100%;
margin-left: -20%;
width: auto;
}
.home-img-block img.tall {
height: 100%;
margin-left: -50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
</div>
</div>
You can try the above code, It will work out for all normal desktop screen perfectly..
html
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
</div>
</div>
css
#home-img-blocks {
display:flex;
flex-direction:center;
/* flex-wrap:wrap; */ /* turn this on if you want the images to wrap on smaller browsers */
width:auto; /* calculates to 1156px wide */
height: 600px;
}
.home-img-block {
flex:0 0 896px; /* round down of narrowest image at 600px height */
overflow:hidden;
border: 1px solid black;
}
.home-img-block img {
max-height:100%;
}
js
no need
http://codepen.io/anon/pen/WrdELK
Documentation
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Support
http://caniuse.com/#search=flex
Do extra code specifically for ie11 if need be (#home-img-blocks -> display:table / .home-img-block --> display:table-cell) but look in ie11 first, because it may be fine.

Button activated div slide goes under instead of over

I was trying to build an interface where when you click a button a full sized div with all it's content fills up the whole screen. There are two sliding divs, it works one way, but the other way the div slides under the first div.
I was attempting to use toggle - and switch to a css that increases the DIVS width property to take over the screen.
Is there a way to accomplish this? Here is my code and a fiddle at the bottom:
HTML:
<div class="container">
<div class="left">
<div class="one">
<a href="#"><div class="openone">
<div class="vertical-text-one">OPEN ONE</div>
</div></a>
ONE</div></div>
<div class="right">
<div class="two">
<a href="#"><div class="opentwo">
<div class="vertical-text-two">OPEN TWO</div>
</div></a>TWO
</div></div>
<div class="header" >
TOP
</div>
</div>
Javascript:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
});
});
CSS snippet:
.left{
background-color: #06C;
width:50%;
height: 100%;
overflow:hidden;
float:left;
z-index: 1;
transition: width 1s;
}
.left.clicked {
width: 98%;
background-color: #06C;
z-index: 100;
}
.right{
background-color: #3AD;
float:right;
width:50%;
height: 100%;
z-index: 1;
transition: width 1s;
}
.right.clicked {
width: 98%;
background-color: #3AD;
z-index: 100;
overflow: hidden;
}
.two{
position:absolute;
top: 110px;
}
.one{
position:absolute;
top: 110px;
}
.openone {
position: relative;
height: 50%;
width:200px;
background-color: #06C;
left: 101%;
}
.opentwo {
position: relative;
height: 50%;
width:200px;
background-color: #3AD;
left: 0px;
}
http://jsfiddle.net/hmyLrzta/19/
Just expand your coding with this:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
$('.right').toggleClass('hidden');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
$('.left').toggleClass('hidden');
});
});
CSS:
.hidden {
display: none;
}
This will render the not active panel invisible using display: none;
http://jsfiddle.net/hmyLrzta/21/

Categories