I need to use bootstrap for the div element with css changes. i tried with col-xs-* and col-md-* for the div but it not working. I need a help regarding when the browser resize it adaptable to the page.
HTML:
<body ng-controller="MainCtrl">
<div class="pull-right metrics-section ng-scope">
<span class="metrics-header-section col-sm-2 ng-scope"
ng-repeat="items in metrics">
<p class="ng-binding">{{items.value}}</p>
<p>{{items.name}}</p>
<p class=" metrics-divider"> </p>
</span> </div> </body>
.css:
.metrics-section {
background-color: #b6b5b5;
border-radius: 3px;
height: 31px;
margin-top: 0px;
}
.metrics-header-section {
font-size: 12px;
color: #003265;
width: 155px;
height: auto;
padding-top: 1px; }
.metrics-header-section p:not(.metric-divider) {
margin: 2px;
width: auto;
text-align: center;
display:block;
}
.metrics-header-section p:first-child {
font-size:13px;
color:#3D6186;
}
.metrics-header-section p:nth-child(2) {
font-size:9px;
color:#3D6186;
}
span.metrics-header-section > p.metrics-divider {
position: relative;
bottom: 25px;
border-right: 1px solid #003265;
height: 20px;
}
.metrics-header-section:nth-child(4) > p.metrics-divider {
position: relative;
bottom: 15px;
border-right: none;
height: 20px;
}
.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.metrics = [
{name : "COMPLETED", value : "12"},
{name : "EXCEEDING", value : "18"},
{name : "APPROACHING", value : "10"},
{name : "AVAILABLE", value : "40"}
];
});
The output as follows:
12 18 10 40
COMPLETED | EXCEEDING | APPROACHING | AVAILABLE
You need to load Boostrap's CSS, not just the Javascript. Add this to the <head> tag:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Related
First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here.
Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.
My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?
Any guidance would be extremely helpful.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
you are actually very close to a working transition with the code you have.
I've implemented a more complicated hero transition on my website and took some code from there to get yours to work.
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
I've made but a few adjustments.
First off, any hero parent element, with the hero-p attribute, should contain just that attribute. So no need for the quotation marks :)
<paper-shadow hero-p .. >
Every element that's part of the Hero transition, needs a hero attribute.
Again, without the quotation marks. <div id="chip_body" .. hero .. >
And the same thing goes for the element you're transitioning to.
<div id="card_container" .. hero .. >
I've put a working version of your code on my website.
There's page containing the <chip-card> element and a second page containing the working template file.
Index page
Template file
Please note : I edited the reference to webcomponentsjs to conform with my folder structure.
Feel free to ask me if there's anything else!
Currently i have a running slideshow as my website background (3 images)
I also have a logo in the middle of these 3 images, which remains there throughout the duration of the slideshow.
Whilst the first image is displayed (when the website is loaded up) the logo image (which also has the function of a button) can be clicked and direct you to another website, however when the images change, the logo remains, however the ability to click is gone...
all help greatly appreciated
here is my current code
$(document).ready(function() {
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
body {
-webkit-background-size: 1390px 700px;
-moz-background-size: 1390px 700px;
background-size: 1390px 700px;
}
h1 {
font-size: 600%;
color: white;
margin-top: 0.5em;
}
h3 {
color: white;
margin-top: -50px;
}
.GFImage {
margin-top: 65px;
border: 0;
}
.Footer {
position: fixed;
bottom: 0;
width: 100%;
margin-left: -8px;
color: white;
background: #151515;
opacity: 0.8;
text-align: center;
vertical-align: middle;
height: 7%;
}
#mask {
width: 100%;
height: 100%;
background: #000000;
top: 0;
left: 0;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<br>
<h1>Welcome to GF</h1>
</center>
<center>
<br>
<h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
<a href="Home Page .html">
<img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
</a>
</center>
<div class="Footer">
<p>Copyright © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
Seams like the link goes below the images.
I was able to solve this adding to the link element these properties:
position:absolute;
z-index:9
and then it should work.
EDIT
Just as a suggestion, have a look at this example, it could be useful if you are at the first try with html and css:
http://css-tricks.com/perfect-full-page-background-image/
I need to display a table via ng-grid, but the table has a <caption> tag. See the yellow section in the image below. How can I achieve it?
ng-grid uses divs, not tables. You can use a custom headerRowTemplate to achieve a similar result, however.
The default header row template is here: https://github.com/angular-ui/ng-grid/blob/master/src/templates/headerRowTemplate.html
You can create your own and add a row on top, then reference it with the headerRowTemplate option in your grid options:
<script type="text/ng-template" id="myHeaderTemplate">
<div>
<div class="headerTop ngHeaderCell">
<span class="content">Submissions</span>
</div>
<div style="height: 30px; top: 30px; position: absolute">
<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell">
<div class="ngVerticalBar" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>
<div ng-header-cell></div>
</div>
</div>
</div>
</script>
Make sure that the header container is sized to hold both the column headers and your caption:
.ngHeaderContainer, .ngHeaderScroller {
height: 60px !important;
}
And add styles for the caption:
.headerTop {
height: 30px;
width: 100%;
border-bottom: 1px solid #ccc;
background-color: #FFD700;
padding: 0px 0 0 6px;
}
.headerTop .content {
padding: 6px;
position: absolute;
bottom: 0;
top: 0;
color: #fff;
}
Here's a demonstration plunker:
http://plnkr.co/edit/fT1IrO?p=preview
I'm trying to make a status display with 3 numbers inline with other text like so:
-- a kind of flipped "Isotope notation".
I can do this with tables but a CSS approach is eluding me at the moment.
Ideally, I'd like to structure the HTML something like this (or simpler):
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<div class="gains">2666</div>
<div class="losses">-13</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
But I can't quite make it work. This almost does it:
div.sharesblock {
display: inline-block;
margin-right: 3ex;
position: relative;
}
div.updwncontainer {
position: absolute;
right: -2.8ex;
top: -0.3ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
But that absolute positioning doesn't work well with variably-sized numbers. EG:
Here's the jsFiddle.
Update:
Oops. The above HTML does not validate. <p> elements are not allowed to have block-element children.
The production code replaces the p nodes with lis.
Tested and this does not affect the answers below, though. They work the same irregardless.
Here is the kind of testing I used to pick an answer.
Use relatives position and float
FIDDLE
html
<p>
<div class="sharesblock">
<div class="shares">25355</div>
<div class="updwncontainer">
<div class="gains">2666666</div>
<div class="losses">-139999</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
css
div.sharesblock {
margin-right: 3ex;
position: relative;
clear:both;
}
div.sharesblock .shares{
float:left;
margin-right:.5ex;
}
div.updwncontainer {
position: relative;
float:left;
margin-right:.5ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}
Demo Fiddle
Remove position absolute from .updwncontainer & use float:left property on .shares & .updwncontainer.
CSS
div.sharesblock {
margin-right: 3ex;
position: relative;
}
.shares {
float:left;
margin-right: 5px;
}
div.updwncontainer {
position: relative;
float: left;
margin-right: 5px;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}
Is this what you are looking to achieve? (jsFiddle) Feel free to add the margins you want.
By the way, according to these guys, avoid div.className in CSS when not needed. Simply use .className instead.
Adjusted HTML:
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<span class="gains">2666</span>
<br/>
<span class="losses">-13</span>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
CSS:
.sharesblock {
display: inline-block;
vertical-align:middle;
}
.shares {
display:table-cell;
vertical-align:middle;
padding-right: 0.5ex; /* OP Added */
}
.updwncontainer {
display: table-cell;
vertical-align:middle;
line-height: 1ex; /* OP Corrected from px units */
padding-bottom: 0.5ex; /* OP Added to tweak alignment -- better than other solutions. */
}
.losses {
font-size: 1.1ex;
color: red;
}
.gains {
font-size: 1.1ex;
color: green;
}
I'm using bootstrap's collapse.js to expand and collapse some input groups in a rails app. I'm using JS to determine if the group is expanded or not and have created CSS classes to add a "+" or "-" to show whether it's open or closed:
Open:
Closed:
As you can see from the CSS, I'm using a background image that's a png within my images:
.expandable {
background: url('/assets/plus.png');
padding-top: 4px;
width: 400px;
height: 30px;
background-repeat: no-repeat;
padding-left: 55px;
display: block;
}
.expanded {
background: url('/assets/minus.png');
padding-top: 4px;
width: 400px;
height: 30px;
background-repeat: no-repeat;
padding-left: 55px;
display: block;
}
I would like to use the glyphicon-plus and glyphicon-minus instead of these .png files.
What's the best way to accomplish this?
Updated:
In order to get the proper styling, I changed the CSS to:
.expandable {
height:40px;
width:50%;
margin:6px;
}
.expandable:before{
content:"\2b";
font-family:"Glyphicons Halflings";
line-height:1;
margin:5px;
}
.expanded {
height:40px;
width:50%;
margin:6px;
}
.expanded:before{
content:"\2212";
font-family:"Glyphicons Halflings";
line-height:1;
margin:5px;
}
And for reference, my HTML is:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<p1 class="panel-title" >
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="expandable">
Provider details
</a>
<p2>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
blah, blah....
And JS to detect the opening/closing of the sections:
$ ->
$(".expandable").click () ->
$this = $(this)
if $this.hasClass("expandable")
$this.removeClass("expandable").addClass "expanded"
else $this.removeClass("expanded").addClass "expandable" if $this.hasClass("expanded")
return
return
Here, try this Bootply. Would this suffice?
<div id="lol"></div>
#lol{
height:40px;
border:1px solid #555;
width:50%;
margin:30px;
}
#lol:before{
content:"\2b";
font-family:"Glyphicons Halflings";
line-height:1;
margin:10px;
display:inline-block;
}
I did something similar to get an arrow effect, using absolute positioning to move the glyph to where I wanted it:
li.arrow {
&:after {
content:"\e080";
font-family:"Glyphicons Halflings";
position: absolute;
right: 15px;
top: 10px;
}
padding-right: 25px;
}