I have a problem, I am using Angular2 , I want have differents styles with ngClass switch the index 'NgFor' but I dont get anything ....
Sorry for my English.
<div class='line'></div>
<clr-icon *ngFor="let step of steps; let i = index" shape="circle"
class='circle' attr.ng-class="circle{{ i + 1 }}"
size="36">
</clr-icon>
<clr-icon *ngIf="steps.length == 1" attr.ng-class="circle{{ 2 }}" shape="circle" class='circle' size="36"></clr-icon>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mycontainer {
position: relative;
width: 100%;
display: block;
}
.step {
position: absolute;
left: 0%;
width: 100%;
.circle {
color: black;
margin-top: -30px;
background-color: white;
}
.circle1 {
position: absolute;
left: 0%;
}
.circle2 {
position: absolute;
right: 0%;
background-color: black;
color: yellow;
/*#calcularposicion();*/
}
}
.line {
height: 5px;
width: 100%;
background-color: green;
}
In my second circle I would see color 'yellow' but I don't see anything.
If I inspect the Html I have class='circle' and class='circle2'
Change attr.ng-class to [ngClass]. NgClass is not an attribute. It is a directive provided by Angular.
<clr-icon *ngFor="let step of steps; let i = index" [ngClass]="'circle' + (i + 1)"></clr-icon>
<clr-icon *ngIf="steps.length == 1" [ngClass]="'circle2'"></clr-icon>
Related
Issue: I cannot natively lazy load an iframe on a modal window. When I check the waterfall in Inspect element > Network, the iframe loads immediately.
Goal: The iframe should load ONLY when modal is triggered. Can you help please?
I don't use dependencies like jQuery, but javascript is OK if it provides a solution. I tried the native and several other lazy loading solutions with no success.
My code:
.modal-state {
display: none
}
.modal-state:checked+.modal {
opacity: 1;
visibility: visible
}
.modal-state:checked+.modal .modal__inner {
top: 0
}
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: #f2f2f2;
transition: opacity .01s ease;
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer
}
.modal__inner {
transition: top .01s ease;
height: max-content;
position: relative;
max-width: 1200px;
width: -webkit-fill-available;
margin: auto;
padding: 1em 1em;
}
.modal__close {
position: absolute;
right: 1.1em;
top: 0;
/*-.3em*/
width: 1.1em;
height: 1.1em;
cursor: pointer;
z-index: 1
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #999;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #000
}
.modal__close:before {
transform: rotate(-45deg)
}
.container-pay {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe-pay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<p>In our <label for="modal-store">merchandize store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-store"></label>
<div class="modal__inner"><label class="modal__close" for="modal-store"></label>
<p>
<div class="container-pay">
<iframe loading="lazy" class="responsive-iframe-pay" src="https://store.website.com"></iframe>
</div>
</p>
</div>
</div>
iFrames load when they're encountered in the rendered HTML DOM. Since your iFrame exists as part of the initially loaded code, it will load when the parser hits that portion of the HTML.
You can defeat that initial load action by either adding the iFrame to the DOM or modifying the URL right before the modal window is opened.
Modifying the <iframe src="" /> is likely the best solution since it will keep the loaded content for any additional times the modal is displayed.
You can do this by adding an "onchange" event to the checkbox which will run the javascript to change the src attribute of the iframe.
Make sure to change the src on the iframe to an empty string"" so it doesn't try to load anything right away.
var toggle = document.getElementById('modal-store');
var frame = document.getElementById('the-iframe');
var urlTarg = "https://google.com";
// put the page you want to load in the frame in the urlTarg
function toggleModal() {
if(toggle.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
.modal-state {
display: none
}
.modal-state:checked+.modal {
opacity: 1;
visibility: visible
}
.modal-state:checked+.modal .modal__inner {
top: 0
}
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: #f2f2f2;
transition: opacity .01s ease;
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer
}
.modal__inner {
transition: top .01s ease;
height: max-content;
position: relative;
max-width: 1200px;
width: -webkit-fill-available;
margin: auto;
padding: 1em 1em;
}
.modal__close {
position: absolute;
right: 1.1em;
top: 0;
/*-.3em*/
width: 1.1em;
height: 1.1em;
cursor: pointer;
z-index: 1
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #999;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #000
}
.modal__close:before {
transform: rotate(-45deg)
}
.container-pay {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe-pay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<p>In our <label for="modal-store">merchandize store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" onchange="toggleModal" />
<div class="modal">
<label class="modal__bg" for="modal-store"></label>
<div class="modal__inner"><label class="modal__close" for="modal-store"></label>
<p>
<div class="container-pay">
<iframe id="the-iframe" loading="lazy" class="responsive-iframe-pay" src=""></iframe>
</div>
</p>
</div>
</div>
Edit: Apply to multiple different buttons showing content in the same iframe
You can apply this to multiple iframe targets on the same page or the same site with a few modifications. This assumes that:
You'll re-use the modal window AND iframe HTML code.
That you want to display a different URL each time the modal is opened
The modal window HTML exists on each HTML page that you want to have modal + iframe.
You would modify the Javascript to something like this:
// you'll pass all the required values to the function
function toggleModal(checkbox, frameTarg, urlTarg) {
var frame = document.getElementById(frameTarg);
if(checkbox.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
You will only need the javascript once per parent page since the same function can work for any combo of checkboxes, iframes, and URLs
And the checkbox HTML to:
(Note: the same function could be applied to a button, link, etc)
<input class="modal-state"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'the-iframe', 'https://theurltoloadinframe.com')"
/>
<input class="modal-state2"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'iframe2', 'https://someotherurltoload.com')"
/>
Basically, the function expects you to pass in:
The current checkbox - (denoted by this)
The ID of the iframe you want to change make sure its a string with quotes
The URL you want to load in the iFrame also in a string
I have following image as following,
How can i write text on image above and achieve the outcome as the following?
Try this, I hope it'll help you out. Thanks
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper label {
color: #fff;
font-size: 24px;
position: absolute;
}
.wrapper #id1 {
left: 20px;
top: 20px;
}
.wrapper #id2 {
right: 20px;
top: 20px;
}
.wrapper #id3 {
left: 20px;
bottom: 20px;
}
.wrapper #id4 {
right: 20px;
bottom: 20px;
}
.wrapper #id5 {
right: 20px;
top: 50%;
transform: rotate(90deg)
}
.wrapper #id6 {
left: 20px;
top: 50%;
transform: rotate(-90deg)
}
<div class="wrapper">
<label id="id1">Text Left!</label>
<label id="id2">Text Right!</label>
<label id="id3">Text Bottom Left!</label>
<label id="id4">Text Bottom Right!</label>
<label id="id5">Text Rotate Right!</label>
<label id="id6">Text Rotate Left!</label>
<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>
Assuming you have HTML like:
<div class="container">
<img />
<p>Foo</p>
</div>
something like this would work (you'll have to fiddle the values obviously):
.container {
position: relative;
img{ z-index: 1; // img styles here }
p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }
}
Step by step:
Position the text absolutely
Rotate it 90 degrees
Set a Z-index higher than the image
Position the text correctly on the image
Profit ...
My question is actually more complex then the title, but I couldn't come up with a better one.
Initial Setup:
I use Bootstrap v4.0.0-alpha.2 and I ripped out this simple sidebar. I'm not sure why and if it's relevant but I also set flex: true in my _library-variable-overrides.scss (I use css-burrito) but since I only set it to try it out, I'm probably okay with turning it off. ;-)
What I want to do:
I would like to have a button in the sidebar that is bottom aligned. Ideally it's centered horizontally in the sidebar and has about 1em margin to the bottom.
What my code looks like:
_shell.scss & _sidenav.scss:
#shell-wrapper {
padding-left: 0;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
padding-left: 250px;
#shell-content-wrapper {
position: absolute;
margin-right: -250px;
}
}
#media(min-width:768px) {
#shell-wrapper {
padding-left: 250px;
}
#shell-wrapper.toggled {
padding-left: 0;
#shell-content-wrapper {
position: relative;
margin-right: 0;
}
}
#shell-content-wrapper {
padding: 20px;
position: relative;
}
}
#sidenav-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
#sidenav-wrapper {
width: 250px;
}
}
#shell-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
/* Sidenav Styles */
.sidenav-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
li {
text-indent: 20px;
line-height: 40px;
a {
display: block;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
a:active, a:focus {
text-decoration: none;
}
}
>.sidenav-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
a {
color: #999999;
}
a:hover {
color: #fff;
background: none;
}
}
}
#media(min-width:768px) {
#sidenav-wrapper {
width: 250px;
}
#shell-wrapper.toggled #sidenav-wrapper {
width: 0;
}
}
and index.html:
<div id="shell-wrapper" class="toggled">
<div id="sidenav-wrapper">
<ul class="sidenav-nav">
<li class="sidenav-brand">
Brand
</li>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li id="logout">
<button class="btn btn-danger-outline">Logout</button>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button">
☰
</button>
<div id="shell-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Main Content Here-->
</div>
</div>
</div>
</div>
</div>
The logout button is one in question. I just tried doing it as a <li> of the sidenav-nav but I'm not tied to this setup.
What I have tried so far:
a lot!
What came closest to what I want was adding this:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
It's pretty close to my goal on a desktop browser, but hitting that show me this on a phone button in chrome, the logout button is just gone.
i haven't worked with css-buritto, but you could look into giving the button a class or id and passing the position:relative argument you can then set a bottom: 1em and that should position the button at the bottom. alternativly you can also look into the other position elements like fixed that could also do the trick
like you mentioned a the end
#logout {
position: relative;
bottom: 1em;
}
Is it possible to change color of the line on wrapped text? I mean, e.g, a black text and a red line!?
You can do some CSS tricks to do it like this:
.line-through-text {
position: relative;
color: blue;
}
.line-through-text:before {
border-bottom: 2px solid orange;
position: absolute;
content: "";
width: 100%;
height: 50%;
}
<h2>
Hello There! <span class="line-through-text">This is wrong,</span> This is correct
</h2>
Sorry, i'll post correct answer in a minute :) (misread)
var pOut = $("span").css("text-decoration"); //line-through
if (pOut == "line-through") {
$("span").css("color", "red");
}
span {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>hello <span>crazy world</span> world!</p>
Edit:
span {
position: relative;
font-size: 50px;
padding: 0;
margin: 0;
}
span.redline:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 55%;
left: 0;
border-top: rgba(255, 0, 0, 1) 4px solid;
}
<p>hello <span class="redline">crazy</span> world!</p>
I'm trying to create a webpage that shows an almost fullscreen map. The map should fill the space between header and footer. This is the code I have so far:
HTML:
<header>
<div class="mainBodyElement" id="header">
</div>
</header>
<div id="content">
<div id="map"></div>
</div>
<footer>
<div class="mainBodyElement" id="footer">
<p>© 2013</p>
</div>
</footer>
Javascript:
var map;
function initOpenLayers() {
/* Example code from openlayers.org */
map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.OSM("OSM (without buffer)"),
new OpenLayers.Layer.OSM("OSM (with buffer)", null, {
buffer: 2
})],
controls: [
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Attribution()]
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
$(document).ready(function () {
initOpenLayers();
});
CSS:
<!-- <> -->
* {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
html, body {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.mainBodyElement {
position: absolute;
width: 100%;
overflow: hidden;
}
#header {
top: 0;
left: 0;
height: 50px;
background-color: #2CA07A;
color: white;
}
#footer {
top: auto;
bottom: 0;
height: 34px;
width: 100%;
overflow: hidden;
background-color: #2CA07A;
color: white;
}
#content {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 34px;
overflow: auto;
background: #EEE;
}
/* login
----------------------------------------------------------*/
#login {
float: right;
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login .email {
background: none;
margin: 0;
padding: 0;
color: #CCCCCC;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
#map {
width: 100%;
height: 100%;
}
I've created a fiddle (http://jsfiddle.net/palpitation/MUKRe/3/) which shows a working example (it'll fill when you zoom in which is alright), but it also shows my question:
The first line of the CSS is:
<!-- <> -->
This is invalid syntax because it's in a CSS block, but if I omit it, the map won't show. Even if I omit the <> part of this line only, the map won't show anymore. I'm at a loss and really don't know how to keep it working without this strange line of code. If I keep the line though, Visual Studio keeps bugging me about invalid syntax. I don't like to have invalid syntax to keep my code running, so I hope that someone can tell me what I'm doing wrong here.
Your <!-- <> --> is invalidating and causing your rules in the first set of curly brackets to break. This css,
* {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
along with your weird line of code should be removed, and everything should be fine. Specifically, it is the * {overflow: hidden;} which is the culprit.
overflow: hidden;
is the problem