How to make my button stay in its stationary position - javascript

My problem is when i try to select in my selectbox my button move below to the select dropdown list.
I want to make the button stay even if the dropdown list in selectbox appear.
current output:
http://jsfiddle.net/GZSH6/2/
html:
<div class="form-group input-group fixedBtn">
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-list-alt"></span> Create Account</button>
</div>
</div>
css:
.fixedBtn {
position: fixed;
display: block;
}

I wouldn't bother with fixed or absolute positioning as it can be fickle and is not very extendable. Instead, put a height on the wrapping element and set the overflow to visible.
.col-sm-offset-1.col-sm-12 { height: 32px; overflow: visible; margin-bottom: 1.0em; }
Here is the jsFiddle: http://jsfiddle.net/mifi79/JvFV9/2/
The problem with the absolute positioning answers is that if you were to add another form field above it, it would break the display (here is the Fiddle to demo how the other solutions break)

Try this:
.col-sm-12:not(.col-sm-offset-1) { position:absolute; top:50px; }
(you can tweak with the top value to get it exactly how you want it).
jsFiddle demo.

It's not enough to set its position to fixed (or absolute for that matter). You need to set its coords explicitly.
<button style="position:fixed;top:45px;" type="button" class="btn btn-warning input-md">
<span class="glyphicon glyphicon-list-alt"></span> Create Account
</button>
In this case, I'll set its top coordinate to 45px.

Related

Darken/color a selected element (content-box) and add a check-mark-icon AngularJS

My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?
You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.

Parent Container Doesn't Respect Child Height

Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw

Increase the size of Bootstrap 2.3's Glyphicons

Is there an easy way of increasing the size of Glyphicons?
I found some solution like Font Awesome but don't want to include new CSS library just to increase size 2 icons.
Setting the font-size of the <span> tag worked for me
<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
As of Bootstrap 3, glyphicons have been changed into fonts rather than sprites. This gives you more flexibility. For example, you can just set the font-size and move on.
<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>
Or you can simply write a modifier class:
.glyphicon-2x {
font-size: 48px;
}
Just need to set the fontsize up :)
You have more than one option to do this:
First (set it straight to the element)
<span class="glyphicon glyphicon-search" style="font-size:30px"></span>
Second (set it in a css file)
.glyphicon{
font-size: 30px;
}
Third (build modify-classes) [i prefer this posibility]
.glyphicon-2x{
font-size: 40px;
}
.glyphicon-3x{
font-size: 60px;
}
...
Usage:
<span class="glyphicon glyphicon-2x glyphicon-search"></span>
there are more options to get the third one more tiny. there for you should read more about
Less
according to your question and the comment that brandon gave me, you can use the above with a other icon contianer.
Bootstrap 2.3
First
<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>
Second
.icon-search{
-webkit-transform:scale(1.8);
-moz-transform:scale(1.8);
-o-transform:scale(1.8);
}
Third
.icon-x2{
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-o-transform:scale(2.0);
}
.icon-x3{
-webkit-transform:scale(3.0);
-moz-transform:scale(3.0);
-o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>
This is one way to increase the size of icons in Bootstrap 2.3. As I note in my comment, the results will be pretty poor because you are scaling the spritesheet image.
JSFiddle demo
.test {
background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
width: 90px;
height: 90px;
background-size: 2100px 800px;
}
Consider Fontello instead. They allow you to generate a custom font based on the icons you choose.
You can use:
.icon-whatever {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
But, it will look fuzzier the larger you go, as it is scaling the image up. A font-icon library will scale a lot better.
You can override bootstrap's class, for example:
// Size and position are not working.
.icon-glass {
background-size: 800px;
backgroung-position: 10px 50px;
width: 24px;
height: 24px;
}
The problem is that icons will look ugly due to the resolution.
Hope this helps!
If you use the glyphicons for buttons it's pretty simple:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
The btn-lg defines the size. You can use btn-lg, bnt-sm, btn-sx
Edit:
If you don't use buttons or lg is not large enough, you can add an own class and use font-size (only tested in bootstrap 3.0). In bootstrap 3.0 glyphicons exist as .svg so they won't look ugly
Example:
<button type="button" class="btn btn-default btn-lg myGlyphicon">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS:
.myGlyphicon {font-size: 120%;}
or
.myGlyphicon {font-size: 70px;}
You can use IcoMoon.io
a very easy to use tool for generating icon font of different colours ,size's and even you can generate sprites from you selection.
I just found a very easy way—using "transform". For example, place:
.glyphicon-chevron-right {transform:scale(2.9,2.9);}
in your CSS to increase it 2.9 times.
If you're using Bootstrap 3, why don't you use em widths on the icon? If the icons are embedded within headings/paragraphs/bodies etc. then using a font size in ems will increase the size of the icons relative to the paragraph that they're in.
For example, if you have:
<span class="glyphicon glyphicon-adjust"></span>
In the css that customizes your bootstrap, simply add:
.glyphicon {font-size: 1.25 em;}
This will scale the glyphs.
Try including class lead
<span class="glyphicon glyphicon-home lead"></span>
Or rap it inside a <h4> tag

Multiple buttons in the header

I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}

Alternative to jQuery's slideDown() and slideUp() not affecting the display property

I've been trying to use the slideDown() effect for a website I'm working on, but I'm having difficulty getting the effect I want. Here's a sample showing what I want to accomplish.
<div>
blahblahblahblah
<span id="span_more" style="display:none">
blahblahblah
</span>
<a class="link_more" id="more">More…</a></div>
</div>
Basically, when "More..." is clicked, I want the text that's currently hidden to appear using a sliding effect while staying inline with the end of the visible text. This doesn't seem possible with slideDown() because it is changing display to block.
Thank you very much.
Unfortunately, this is essentially impossible. jQuery's animation relies upon the element having height and width. Inline elements do not have these dimensions set or settable, so animations (whether using animate or slideUp) must make them block-level elements.
fadeIn does work, and may be a useful alternative.
You'll need to wrap your text that always shows in a span or div that floats left, have the "additional" text float left as well, and have your link clear: both;, but this structure will make a simple .slideDown() work:
<div>
<span style="float: left;">blahblahblahblah</span>
<span id="span_more" style="display: none; float: left;">
blahblahblah
</span>
<div style="clear: both;"><a class="link_more" id="more">More…</a></div>
</div>
Here's a demo showing this in action: http://jsfiddle.net/7yqMr/
I've had that problem before. At that time it seemed not possible to change the jQuery behaviour, and I ran into problems while writing a routine that would do the same with inline blocks. So, I switched to just using display: block elements with float: left to keep them in one line.
<div>
<div style="display: block; float: left;">blahblahblahblah</div>
<div id="span_more" style="display: none; float: left;">
blahblahblah
</div>
<a style="display: block; float: left;" class="link_more" id="more">More…</a></div>
</div>

Categories

Resources