We have a solution utilizing JavaScript, but I'm also curious if there is a way to do this with pure CSS?
The Situation
I'm relatively new to responsive design, and in the past have stuck with positioning, etc to achieve my layouts. I'm attempting to create a simple responsive header that resizes in a specific way.
My Dilemma
The header is a 29px high bar at the top of the page, with 29x29 buttons at either end. In the middle, bordering the button on the right, is a div (for page titles) that I want to have a min width of 300, but I also want it to expand with the browser width.
Here is the catch: I want this title div to pull away from the left button, leaving a gap of a max-width of 200px. Once the max-width of the gap is reached, I would like the title div to start expanding, staying pressed up against the right button. See as follows.
note: I've created a jsfiddle here for experimenting
I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.
Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.
Okay well here is what I have so far. WILL EDIT in the morning (kind of tired)
I feel this is definitely possible but it does require javascript. The fact that you want there to be a 200px space available requires javascript or some sort of programming to tell the styling to do that.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<div id="container">
<header>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
</header>
</div>
</body>
<script>
if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
document.getElementById("div2").style.width = "200px";
}
</script>
</html>
So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.
Another thing to point out is that while the javascript does working for if the nav is growing, it doesn't for shrinking. I didn't implement a way for it to be able to shrink if say the user decided to shrink his window size because I have it set to lock the width at 200px (I guess a way to work around that would be with an } else { clientWidth = "100%"? Not sure. Hope this gets you on the right track though.
Related
How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
When we want to insert a Facebook like box, we're given auto-generated code to insert into our website.
Unfortunately, the width of the like box is hard baked into the code:
<div class="fb-like-box" data-href="https://www.facebook.com/bibandtucker.net.au" data-width="450" data-colorscheme="light" data-show-faces="false" data-width="300" data-header="true" data-stream="true" data-show-border="false"></div>
How can I make the Facebook like box responsive, so that it will reduce in width to accommodate content areas less than the hard coded width value?
You can see the problem on this website. Watch what happens when you reduce the width of the view port.
You can make it fluid by doing this (googled for it):
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
width: 100% !important;
min-width: 200px;
}
You can make it responsive by finding where it starts messing up the layout:
#media (max-width:1100px) {
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
width: 100% !important;
min-width: 200px;
}
}
Since it's an iframe that you don't control, you can't style it further.
Demo: http://jsbin.com/mehil/1
This no longer works as of 2015 -- facebook has updated their code so that there is a minimum width of 180px.
to get around this you have to use JS.
in this case, .facebook-likebox is the wrapper (which is dynamically being scaled in relation to other elements), and .fb-page is the container for the iframe. the code is cross browser.
here is my code snippit:
facebookScale = function () {
var adjustWidth;
adjustWidth = $('.facebook-likebox').width() / 180;
return $('.fb-page').css({
'-webkit-transform': 'scale(' + adjustWidth + ')',
'-moz-transform': 'scale(' + adjustWidth + ')',
'transform': 'scale(' + adjustWidth + ')'
});
}
$(function(){
$(window).on('resize', facebookScale);
})
EDIT: also make sure the following is in your CSS:
.fb-page{
transform-origin: 0 0;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
Edit 2: facebook seems to have updated the widget to now have a min width of 180. so the code has been updated to reflect that. the widget should resize to fit the width of your container otherwise
<div class="fb-wrap">
<div class="fb-like-box" data-href="http://www.facebook.com/#"
data-width="100%" data-height="#"
data-show-faces="true" data-stream="false" data-header="false"></div>
</div>
.fb-wrap {
padding-top: 10px; width:90%; margin: 0 auto;}
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style]
{width: 100% !important; }
This works perfectly for me
this works for me with show faces true
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]
{max-width: 100% !important;}
I have an AngularJS 1.2.2 web application with a <div> that I show/hide based on some $scope property. Using the ngAnimate module, I animate the showing and hiding of the <div>.
<div id="square" ng-show="showSquare" class="animate-shiny"></div>
I also have a class I want to place on this <div> and for this I use ngClass.
<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>
And as it so happens, sometimes that class gets applied at the same moment as when the <div> is shown/hidden. This causes the show/hide animation to not work anymore, apparantly it finds ngClass more interesting to animate, even though I don't want to use ngAnimate for that animation.
Here's a Plnkr that demonstrates the behavior. Clicking the show/hide button works great, clicking the make cool button works great, but the button that combines these two causes the show/hide animation to break.
How do I fix this? And can I do it without manually addressing $animate?
Thanks in advance!
The problem is that you are trying to animate using the class and not discriminate between when things should animate. That is, your transition effect applies to the class in general, which ng-animate perceives as having to do work whenever that class is referenced. I modified your css a bit to get pretty close, if not exactly, what you want:
#square {
width: 50px;
height: 50px;
background-color: blue;
transition: 0.4s all ease-out;
}
#square.cool {
box-shadow: 0 0 10px 3px green;
background-color: lightgreen;
}
#square.ng-hide-add, #square.ng-hide-remove
{
display: block !important;
}
#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
margin-left: -80px;
opacity: 0;
}
#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
margin-left: 0;
opacity: 1;
}
Here is the new plunkr so you can play with it: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview
If you want to ONLY animate the show/hide and do not want a transition for the color, simply move the transition to the #square.ng-hide-add, #square.ng-hide-remove declaration.
I'm pulling my hair here. Trying to come up with a simple responsive layout where two fluid boxes are aligned next to each other. The main box must always be centered in the browser window, while the other should be aligned beside it in its top right corner. See example image below -
Tried different approaches involving negative percentages and three-column faux layouts but it just doesn't work.
Demo: http://dabblet.com/gist/7201560
Markup:
<div class='container'>
<div class='main-col'></div>
<div class='right-col'></div>
</div>
CSS:
.container {
text-align: center;
}
.main-col, .right-col {
display: inline-block;
vertical-align: top;
text-align: left;
margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.main-col {
width: 50%;
margin-left: 20%; /* equal to .right-col's width */
}
.right-col {
width: 20%;
}
What's happening here:
The centered main column and right column have display: inline-block, and they're centered in the viewport by giving their container text-align: center. They're still not centered the way you want though. Since they're sibling elements you can use margin to push the main column to the left with a value equal to right-column's width, essentially centering itself.
Hi you can check my try in this link http://jsfiddle.net/WHq8U/17/.
I had to use a little jquery to calculate the sidebar absolute position. Let me know your opinion about this.
I have a website running on a mapping platform called Ushahidi. The default template is quite boxy so I was fiddling with the CSS and rounding everything off using border-radius.
It has helped with other elements but the map is such a square it won't ease up!
It might be that it's not possible, wondered if anyone here had any experience of this. The html using inspect element and view source are different. Not sure what this means exactly but guessing that the html is pulled in by the map provider?
Here is the html on view source:
<div class="map " id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
<div id="mapScale"></div>
<div id="mapMousePosition"></div>
<div id="mapProjection"></div>
<div id="mapOutput"></div>
</div>
I've added a screen of inspect element HTML too. Looks like it's using "Open Layers". I've heard of that but don't fully understand whats going on.
Is it possible to round the edges of my map? Here is the site if that helps: http://tinyurl.com/c8djrvr
Apply the border-radius to two layers.
CSS
div.map {
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 25px; /* ADD THIS */
}
#OpenLayers_Map_11_OpenLayers_ViewPort {
border-radius: 25px; /* ADD THIS */
}
It works. Use however many pixels you want. I used 25px.
I would suggest more general and safer CSS selectors (since ID #OpenLayers_Map_11_OpenLayers_ViewPort is generated by OpenLayers and it's value is unpredictable; and OL 2.12 and older produce ID's, that contain dot and are therefore unsuitable for CSS selectors):
.olMap, .olMapViewport {
border-radius: 25px;
}