Bootstrap 3:
I'm trying to float a button center halfway outside the panel-footer. But the whole layout is responsive so I need to have it when the screen size is resized or smaller it is still correct.
I created a bootply with my attempt that is close but doesn't stay when the screen is resized.
Thanks,
Nate
Bootply Trial
Is this what you wanted to get? http://www.bootply.com/114327
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-btn {
left: 50%;
bottom: -17px; /* half of the button height */
margin-left: -77px; /* half of the button width */
/* instead of bottom and margin-left, you can use translateX as well. */
}
play with css position property and use margin to get exact position. see the comments for the .bottom-btn class.
Related
I am having a trouble getting formula for bootstrap affix layout. Please check image for layout.
All green sections height must be dynamic. Affix should move only in white region.
For top offset I use sections A height.
What formula should I use for bottom offset?
CSS side works fine (I guess).
Try calc() formular, something like this.
height: calc(100% - HCpx);
Where HC is height of C in pixel. For Mozilla, Webkit or Opera browser, you will need to add redundant heights as:
.your_css {
height: calc(100% - HCpx);
/* mozilla */
height: -moz-calc(100% - HCpx);
/* webkit */
height: -webkit-calc(100% - HCpx);
/* opera */
height: -o-calc(100% - HCpx);
}
$().affix({
offset: {
top: 0,
bottom: function() {
return(this.bottom = $('.footer').outerHeight(true))
}
});
try this for footer height.
i answered what im understood.
please expain clearly if not..thanks
Is it possible to constrain the aspect ratio of a window in an NW.JS app?
I have content which is 800 x 600. In the package.json manifest, I can define the window settings as...
"window": {
"toolbar": false
, "width": 800
, "height": 600
, "min_width": 800
, "min_height": 600
}
I use CSS to preserve the aspect ratio of the content and to fill the window as well as possible:
html, body{
margin: 0;
height: 100%;
}
main {
position: relative;
width:100vw;
max-width:133.3333vh; /* max-width / width = aspect ratio */
min-width: 800px;
height:75vw;
max-height:100vh; /* max-height / height = aspect ratio */
min-height: 600px;
margin: 0 auto;
}
However, if you make the window too wide, a blank area appears on either side. If you make it too tall for its width, a blank area appears at the bottom.
Is there a setting that forces a given aspect ratio?
Or is there now a window resize event that I can listen for so that I can apply window.resizeTo(height*1.333,height) as soon as the window's size is changed?
There does appear to be a resize event:
https://github.com/nwjs/nw.js/issues/799
https://github.com/nwjs/nw.js/wiki/window
You could use code like this to set your event listener:
gui = require('nw.gui');
w = gui.Window.get();
w.on('resize', yourFunctionHere);
but be careful about changing the window size in the handler (e.g. using resizeTo()) as that will trigger a resize and could cause all kinds of chaos. It might work to make the resize conditional on the current aspect ratio, but I can imagine you could still run into problems if you hit some limit or other. Offhand I don't know if there are some facilities (akin to event bubbling &c) that would help in this situation.
I am trying to position the control nav in flexslider 2 (the dots for each slide). Default is text-align:center. If you change to the left it positions to the left no problem. If you change to right then while it positions to the right it also shows text numbers of each slide over each dot.
How can I position this to the right WITHOUT the text numbers showing up? Furthermore, why are they showing up when aligned to the right?
You can see this happen out of the box in its default state by just changing the value to the below.
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: right;}
I thought that changing the -9999px to a positive had worked for me, until I realized that it just pushed the text way off the screen. But you could still scroll to it. My fix, leave the text-indent at -9999px; and add
color: rgba(0, 0, 0, 0); .
The last 0 in this controls the alpha, and with it at 0, that makes the numbers completely invisible.
removing width allows positioning without the number issue
I had problems with this, removing the width doesn't work. Here is a solution that does work:
.flex-control-nav {
text-align: right;
}
.flex-control-paging li a {
text-indent: 9999px;
}
When aligning the control nav to the right, you need to change the text indent from negative -9999px to a positive 9999px.
Use this code to adjust the positioning without the numbers.
/* Control Nav */
.flex-control-nav {position: absolute; bottom: 25px; right: 20px;}
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
I'm creating a card-flip effect using webkit transformations. I have it working as I like in one section, where I have a DIV that rotates around its center axis giving the look of a card that is flipping over.
I now want to add this same effect to a page transition. I'm using the same CSS and HTML structure, but in this case I'm not getting an effect that rotates around a center axis.
Instead, it looks like the transformation is rotating along the y axis anchored to the left of the object rather than the center (so it looks like a door opening, rather than a card flipping).
I've been reading through the spec's but can't figure out which property controls the rotation axis' position. What do I need to add or change with this to get the flip working?
html structure:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
and the css (.flip is being added via jQuery to start the effect)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}
Try this on your wrapper
-webkit-transform-origin: 50% 0 0;
Though you may or may not have to have its width explicitly set.