I have 2 div:
<div id="one"></div>
<div id="two"></div>
Normally the 2nd is over the first. But I want the first to stay in front with zorder:
div {
position: absolute;
width: 100px;
height: 100px;
}
#one {
top: 20px;
left: 20px;
background: red;
zorder: 2;
}
#two {
top: 50px;
left: 50px;
background: blue;
zorder: 1;
}
Why does this not work?
This is HTML and so I guess you meant z-index:
#one {
z-index: 2;
}
#two {
z-index: 1;
}
Related
I tried to recreate the sliding image feature on the website superlist.com using html and I found a tutorial that made it work.
HTML
<div id="left-side" class="side">
<h2 class="title">
Sometimes a simple header is
<span class="fancy">better</span>
</h2>
</div>
<div id="right-side" class="side">
<h2 class="title">
Sometimes a simple header is
<span class="fancy">better</span>
</h2>
</div>
<a id="source-link" class="meta-link" href="https://superlist.com" target="_blank">
<i class="fa-solid fa-link"></i>
<span class="roboto-mono">Source</span>
</a>
<a id="yt-link" class="meta-link" href="https://youtu.be/zGKNMm4L-r4" target="_blank">
<i class="fa-brands fa-youtube"></i>
<span>2 min tutorial</span>
</a>
CSS
:root {
--yellow: rgb(253, 216, 53);
--blue: rgb(98, 0, 234);
--dark: rgb(20, 20, 20);
}
body {
background-color: var(--dark);
margin: 0px;
}
.side {
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
position: absolute;
width: 100%;
}
.side .title {
font-family: "Rubik", sans-serif;
font-size: 8vw;
margin: 0px 10vw;
width: 80vw;
}
.side .fancy {
font-family: "Lobster", cursive;
font-size: 1.3em;
line-height: 0.8em;
}
#left-side {
background-color: var(--blue);
width: 60%;
z-index: 2;
}
#left-side .title {
color: white;
}
#left-side .fancy {
color: var(--yellow);
}
#right-side {
background-color: var(--yellow);
}
#right-side .title {
color: var(--dark);
}
#right-side .fancy {
color: white;
}
/* -- YouTube Link Styles -- */
#source-link {
top: 60px;
}
#source-link > i {
color: rgb(94, 106, 210);
}
#yt-link {
top: 10px;
}
#yt-link > i {
color: rgb(239, 83, 80);
}
.meta-link {
align-items: center;
backdrop-filter: blur(3px);
background-color: rgba(40, 40, 40, 0.9);
border-radius: 6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: inline-flex;
gap: 5px;
left: 10px;
padding: 10px 20px;
position: fixed;
text-decoration: none;
transition: background-color 350ms, border-color 350ms;
z-index: 10000;
}
.meta-link:hover {
background-color: rgb(40, 40, 40);
}
.meta-link > i, .meta-link > span {
height: 20px;
line-height: 20px;
}
.meta-link > span {
color: white;
font-family: "Rubik", sans-serif;
transition: color 600ms;
}
JS
const left = document.getElementById("left-side");
const handleMove = e => {
left.style.width = `${e.clientX / window.innerWidth * 100}%`;
}
document.onmousemove = e => handleMove(e);
document.ontouchmove = e => handleMove(e.touches[0]);
I used the code and it worked fine but I was wondering whether you could do the same using flutter. I tried searching for specific widgets that allow you to make this kind of slider, but until now I haven't found anything satisfying, so I'm guessing you'd need a custom solution here.
How can I make this feature possible using flutter?
https://drive.google.com/file/d/1_FxXK2Ymo1GLRRIiNzmfIt95-DsYy1O2/view?usp=sharing
you can see a UI example above
I'm using this example from mapbox.
I want to create something similar to the sidebar listings that can be seen on Airbnb and Zillow
:example
I was able to apply columns to the sidebar itself, but not a grid to the individual listings.
See in here:N
before
after
I tried changes in html, css, js as well. No success. Does anybody know how to do it?
<div id="map"></div>
<div class="map-overlay">
<div class="listing-box">
<div id="feature-listing" class="listing"></div>
</div>
</div>
#map {
position: absolute;
left: 50%;
width: 50%;
top: 0;
bottom: 0;
}
.map-overlay {
position: absolute;
width: 50%;
top: 0;
bottom: 0;
left: 0;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
max-height: 100%;
overflow: auto;
}
.map-overlay input {
display: block;
border: none;
width: 100%;
border-radius: 3px;
padding: 10px;
margin: 0px;
box-sizing: border-box;
}
.map-overlay .listing-box {
display: block;
margin: 10px;
}
.map-overlay .listing {
postiton: absolute;
display: inline-block;
width: 100%;
padding-bottom: 0px;
-webkit-column-count: 2; /* Chrome/Opera, Safari */
-moz-column-count: 2; /* Mozilla Firefox */
column-count: 2;
-webkit-column-gap: 10px; /* Chrome/Opera, Safari */
-moz-column-gap: 10px; /* Mozilla Firefox */
column-gap: 10px;
-webkit-column-rule: 1px single grey; /* Chrome/Opera, Safari */
-moz-column-rule: 1px single grey; /* Mozilla Firefox */
column-rule: 1px single grey;
}
.map-overlay .listing > * {
display: block;
height: 150px;
padding: 5px 10px;
margin-bottom: 10px;
}
.map-overlay .listing a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #404;
text-decoration: none;
background: red;
}
.map-overlay .listing a:last-child {
border: none;
}
.map-overlay .listing a:hover {
background: #f0f0f0;
}
listingEl.innerHTML = "";
if (features.length) {
features.forEach(function(feature) {
var prop = feature.properties;
var item = document.createElement("a");
item.href = prop.wikipedia;
item.target = "_blank";
item.textContent = prop.name + " (" + prop.abbrev + ")";
item.addEventListener("mouseover", function() {
The whole project can be found here.
It seems like your problem is CSS only and you need to remove certain style's to get the view of the listing given on https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/
Remove .map-overlay .listing { CSS as it divide your grid with column-count: 2;
.map-overlay .listing a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #404;
text-decoration: none;
/* background: red; */ //<---remove
}
.map-overlay .listing > * {
display: block;
/* height: 150px; */ //<---remove
padding: 5px 10px;
/* margin-bottom: 10px; */ //<---remove
}
Screenshot:
Good Luck!
I am trying to load a full width navigation bar by clicking a menu icon. And i am using angular 5. I have tried googling about DOM manipulation in angular 5+ versions but its really confusing and complicated.
My question is about how can i change or manipulate these html elements using angular(typescript) like we used to do with plain javascript and JQuery.
My question is all about changing the width of a div but i want to know how can i work with other css styles and DOM manipulation techniques.
Here is my code
home.component.html
<section id="top">
<div id="menu">
<a id="toggle" (click)="openMenu()" >
<i class="fa fa-bars menu-bar" aria-hidden="true"></i>
</a>
</div>
<div id="sidenav" class="overlay" ref="#sidenav">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<div id="heading">
<div id="logo">Koa</div>
<div id="tagline">next generation web framework for node.js</div>
</div>
</section>
home.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
styles.scss
/* You can add global styles to this file, and also import other style files */
#import "~bootswatch/dist/lux/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/lux/_bootswatch.scss";
body {
background-color: #F5F5F5;
}
//navbar
#menu {
position: fixed;
top: 35px;
right: 42px;
z-index: 50;
}
#menu a#toggle {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background:transparent;
border-radius: 2px;
border: 1px solid transparent;
z-index: 5;
font-size: 1.3rem;
color: black;
}
//sidenav
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
//heading or showcase
#heading {
position: absolute;
top: 50%;
margin-top: -150px;
text-align: center;
width: 100%;
}
#logo {
font: 150px 'Italiana', sans-serif;
text-transform: lowercase;
}
#tagline {
font-size: 16px;
}
You can use [ngClass]="{'scssClassName': condition}" for conditioning class appendance on div like this:
<div class="existingClassWithNormalWidth" [ngClass]="{'scssClassNameWithFullWidth': condition}">{{childTags}}</div>.
You can also give different classes for different conditions on same tags like this: [ngClass]="{'scssClassName': condition, 'scssClassName2': condition2, 'scssClassName3': anyBooleanVariable,}"
You can set condition(or boolean) to be true by clicking button. Angular will automatically append the class to div itself.
You can also use [ngStyle] for only full width, but if you want to give extra style, you better make a class to SCSS and use [ngClass].
Find official doc for class https://angular.io/api/common/NgClass
(If you want to append class)
Find official doc for style only https://angular.io/api/common/NgStyle
(If only you want to make full width with ngStyle)
I would like to make this image just with css. (No need jquery and actions) How to do it?
https://www.google.hu/search?q=easy+pie+chart&rlz=1C1MSIM_enHU614HU614&espv=2&biw=1920&bih=979&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMIzI-jvdSExgIVRrkUCh0jBQBX#imgrc=DSIkq4T-4XdNAM%253A%3BMH0ADANO8vzAwM%3Bhttp%253A%252F%252Fi1-scripts.softpedia-static.com%252Fscreenshots%252FEasy-pie-chart_1.png%3Bhttp%253A%252F%252Fwebscripts.softpedia.com%252Fscript%252FGraphs-and-Charts%252FEasy-pie-chart-75237.html%3B518%3B171
This is very complex.
See this demo: http://jsfiddle.net/d7vKd/871/
You are almost required to use javascript/jquery to have any functionality.
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
Javascript
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
// Read more here: https://medium.com/#andsens/radial-progress-indicator-using-css-a917b80c43f9
LESS
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
#circle-size: 120px;
#circle-background: #d6dadc;
#circle-color: #97a71d;
#inset-size: 90px;
#inset-color: #fbfbfb;
#transition-length: 1s;
#shadow: 6px 6px 10px rgba(0,0,0,0.2);
#percentage-color: #97a71d;
#percentage-font-size: 22px;
#percentage-text-width: 57px;
margin: 50px;
width: #circle-size;
height: #circle-size;
background-color: #circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: #circle-size;
height: #circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: #shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform #transition-length;
transition: -ms-transform #transition-length;
transition: transform #transition-length;
border-radius: 50%;
}
.mask {
clip: rect(0px, #circle-size, #circle-size, #circle-size/2);
.fill {
clip: rect(0px, #circle-size/2, #circle-size, 0px);
background-color: #circle-color;
}
}
}
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: (#circle-size - #inset-size)/2;
margin-top: (#circle-size - #inset-size)/2;
background-color: #inset-color;
border-radius: 50%;
box-shadow: #shadow;
.percentage {
height: #percentage-font-size;
width: #percentage-text-width;
overflow: hidden;
position: absolute;
top: (#inset-size - #percentage-font-size) / 2;
left: (#inset-size - #percentage-text-width) / 2;
line-height: 1;
.numbers {
margin-top: -#percentage-font-size;
transition: width #transition-length;
span {
width: #percentage-text-width;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 800;
font-size: #percentage-font-size;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #percentage-color;
}
}
}
}
#i: 0;
#increment: 180deg / 100;
.loop (#i) when (#i <= 100) {
&[data-progress="#{i}"] {
.circle {
.mask.full, .fill {
-webkit-transform: rotate(#increment * #i);
-ms-transform: rotate(#increment * #i);
transform: rotate(#increment * #i);
}
.fill.fix {
-webkit-transform: rotate(#increment * #i * 2);
-ms-transform: rotate(#increment * #i * 2);
transform: rotate(#increment * #i * 2);
}
}
.inset .percentage .numbers {
width: #i * #percentage-text-width + #percentage-text-width;
}
}
.loop(#i + 1);
}
.loop(#i);
}
Here's what I've got so far:
JSFiddle
CSS:
#button-top { width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px;overflow: hidden;}
#button-top:hover, #button-bottom:hover {cursor: pointer;}
.slide { position: relative; height: 100px; overflow: hidden; width: 350px; }
.slide img {position: relative; z-index: 100;}
.slide p {width: 80px; padding:8px 16px; color: #fff; margin: 0; }
.innerTop, .innerBottom { position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; display: none; }
#button-bottom { width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px;overflow: hidden;}
SCRIPT:
$('#button-top').click(function() {
$('.innerTop').toggle('slide');
});
$('#button-bottom').click(function() {
$('.innerBottom').toggle('slide');
});
HTML:
<div class="hide-mobile" id="button-top">
[IMG]
<div class="slide innerTop"><p>HIDDEN SLIDING CONTENT</p></div>
</div>
<div class="hide-mobile" id="button-bottom">
[IMG]
<div class="slide innerBottom"><p>HIDDEN SLIDING CONTENT</p></div>
</div>
I'd like the blue inner div to slide from RIGHT to LEFT.
It can be easily done using animate function. Here is the solution:
$('#button-top').toggle(function() {
$('.innerTop').animate({'left':'3px'});
}, function() {
$('.innerTop').animate({'left':'103px'});
});
$('#button-bottom').toggle(function() {
$('.innerBottom').animate({'left':'3px'});
}, function() {
$('.innerBottom').animate({'left':'103px'});
});
http://jsfiddle.net/nAaMV/6/
You can do this:
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#button-top').click(function() {
$('.innerTop').toggle('slide', options, duration);
});
$('#button-bottom').click(function() {
$('.innerBottom').toggle('slide', options, duration);
});
Please make sure to include the jQuery UI file in your code, like I have included in the fiddle ( See the checkbox for the jQuery UI 1.9.2 checked in right side ).
FIDDLE DEMO #1 or FIDDLE DEMO #2