I am newbie to this and can't find many specific answers. I am looking for a way to change text labels into images when the viewport is scaled down to mobile sizes. I have additional issues because I am doing so with Leaflet, a java script library for Open Street Maps. They organize things a little different and I have to inject my styling.
Here is my live page with icons: https://leksplay.com/playgroundmap (still working on my SSL cert).
My full inline styles are at the bottom. I have a couple of things going on here.
I am styling the input directly because Leaflet inserts a div between label and input not allowing me to trigger animation on the label based on "checked" input states.
I am injecting a class into my labels through javascript. Leaflet allows this, example:
var overlayMaps = {
"All Playgrounds": dummy[0],
"<img class='icons' src='https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png' alt='Restrooms'>": dummy[1],
"<img class='icons' src='https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png' alt='Public grills'>": dummy[2],
"<img class='icons' src='https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png' alt='Accessible equipment'>": dummy[3],
"<img class='icons' src='https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png' alt='Indoor area'>": dummy[4],
"<img class='icons' src='https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png' alt='Fully fenced'>": dummy[5],
"<img class='icons' src='https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png' alt='Partially fenced'>": dummy[6],
"<img class='icons' src='https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png' alt='Animals'>": dummy[7],
"<img class='icons' src='https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png' alt='Pool or beach'>": dummy[8],
"<img class='icons' src='https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png' alt='Toddler Area'>": dummy[9]
};
I am also having some issues with my flex container on smaller screens because of margins I can't manage to fix. On mobile there is too much space on the left and right side causing the container to only have two columns when clearly there is space for 3 or 4. Example:
photo of current mobile view
I am sure there is a way, maybe with jQuery (which I dont know), to either fix the flex container on mobile or simply transition from text only on desktop to icons when on a smaller screen. Here is a live example of the text only version: https://leksplay.com/test-and
My end goal is to find a way that can display my control box (filters) on mobile without the browser creating an overflow scroll box or making the user scroll needlessly far to get to the actual map.
Any help is appreciated.
<div class="flexcontainer">
<div id="new-parent">
</div>
</div>
<script>// Create the control and add it to the map;
var control = L.control.layers(null, overlayMaps,{collapsed:false});
control.addTo(map);
// Call the getContainer routine.
var htmlObject = control.getContainer();
// Get the desired parent node.
var a = document.getElementById('new-parent');
// Finally append that node to the new parent.
function setParent(el, newParent)
{
newParent.appendChild(el);
}
setParent(htmlObject, a);
</script>
<style>
*, *::before, *::after {
box-sizing: border-box;
vertical-align: middle;
}
body {
color: #435757;
background: radial-gradient(#fff, #dac4cd);
font: min(3vw, 16px) 'Montserrat';
justify-content: center;
align-items: center;
flex-direction: column;
}
label:first-of-type {
border: 3px solid #689c93;
margin: min(1vw,10px) 75%;
flex: 0 0 30%;
border-radius: 100px;
}
label {
display: block;
position: relative;
padding: min(.5vw, 5px) min(3vw, 15px) min(.5vw, 5px) min(.5vw, 5px);
color: #000;
background-color: transparent;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color .2s, box-shadow .2s;
flex: 0 0 20%;
border-radius: 100px;
}
.flexcontainer {
display: flex !important;
flex-wrap: wrap;
}
.icons {
width: 70px;
}
#new-parent {
position: relative;
}
</style>
<style>
.leaflet-control-layers-selector {
--primary: #679C92;
--secondary: #E0E0E0;
--duration: 0.5s;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
outline: none;
cursor: pointer;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
perspective: 240px;
border-radius: 50%;
width: min(3.5vw, 25px);
height: min(3.5vw, 25px);
background-size: 300% 300%;
transition: transform 0.3s;
transform: translate(0vw, 0vw);
transform-origin: center center;
animation: var(--name, unchecked) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before, .leaflet-control-layers-selector:after {
content: '';
position: absolute;
height: var(--height, 13px);
left: 3px;
top: var(--top, 3px);
background: var(--background, var(--primary));
animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before {
clip-path: polygon(0 0%);
}
.leaflet-control-layers-selector:active {
--scale: 0.95;
}
.leaflet-control-layers-selector:checked {
--name: checked;
--name-icon-b: checked-icon;
--name-icon-a: unchecked-icon;
}
#keyframes checked-icon {
from {
transform: translateZ(12px);
}
to {
transform: translateX(16px) rotateY(90deg) translateZ(12px);
}
}
#keyframes unchecked-icon {
from {
transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
}
to {
transform: translateZ(12px);
}
}
#keyframes checked {
from {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 50% 50%;
}
}
#keyframes unchecked {
from {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 50% 50%;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
</style>
<style>
.leaflet-control-layers-expanded {
padding: 0px 0px 0px 0px !important;
background: transparent !important;
}
.leaflet-control-layers {
box-shadow: 0 0px 0px rgba(0,0,0,00) !important;
background: transparent !important;
border-radius: 0px !important;
}
.leaflet-control-layers-overlays {
display: flex !important;
position:unset;
justify-content: center;
flex-wrap: wrap;
flex-basis: unset;
align-items: center;
width: 75%;
margin: 0px 12.5% 0px 12.5%;
align: center;
}
</style>
Here is the solution:
Step 1: hide the text when the browser size is less than 991px or in mobile screens which have size less than 991px;
Step 2: set a background image.
#media all and (max-width:991px){
#tst1{
background-image:url('https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst2{
background-image:url('https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst3{
background-image:url('https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst4{
background-image:url('https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst5{
background-image:url('https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst6{
background-image:url('https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst7{
background-image:url('https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst8{
background-image:url('https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst9{
background-image:url('https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
}
<span id="tst1">Restrooms</span>
<span id="tst2">Public grills</span>
<span id="tst3">Accessible equipment</span>
<span id="tst4">Indoor area</span>
<span id="tst5">Fully fenced</span>
<span id="tst6">Partially fenced</span>
<span id="tst7">Animals</span>
<span id="tst8">Pool or beach</span>
<span id="tst9">Toddler Area</span>
I have done little modification to your code to make things working.Please run it full screen and reduce the browser's size to see the changes.
Also, replace the areas of your code with this code and apply css.I have taken 991px as breakpoint, but you can take breakpoint of your choice.
I got the following problem:
On click I am trying to animate the position, width and height of an absolute positioned div. Additionally I am trying to change the background-size through jQuery.
What happens is that it changes all the CSS properties correctly, but not background-size.
It's supposed to change background-size:100% auto to background-size:auto 100%. It just seems to ignore that.
Does anyone know why this problem occurs?
$(".item").click(function(){
$(this).animate({
'width': '94vw',
'height': '94vh',
'top': '3vh',
'left': '3vw',
'background-size': 'auto 100%'
}, 500);
$(".again").fadeIn();
});
$('.again').click(function() {
location.reload();
});
*{
margin:0;
padding:0;
}
.item{
background:#a0a0a0;
width:50%;
height:100px;
position: absolute;
top:0;
left:0;
cursor:pointer;
overflow:hidden;
background-image:url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
.again{
display:none;
position:absolute;
bottom:20px;
width:100px;
left:calc(50% - 50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<button class="again">Again</button>
Why not use CSS transitions combined with a class instead of jQuery animate() ?
Here I use the class .big to toggle your CSS rules. I also added transition: all .5s; on your .item to enable transitions.
$(".item").click(function() {
$(this).toggleClass('big');
});
* {
margin: 0;
padding: 0;
}
.item {
background: #a0a0a0;
width: 50%;
height: 100px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
overflow: hidden;
background-image: url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
transition: all .5s;
}
.item.big {
width: 94vw;
height: 94vh;
top: 3vh;
left: 3vw;
background-size: auto 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
I have a problem adding 2 divs in parallel and giving them a full height.
i already have the divs in parallel, but the problem is when i want to give them the full height:100%; it happens nothing.
Which properties do i have to change to make possible this??
The idea is to have a cover page, without x-scrollbar and y-scrollbar, only a cover photo, divided
this is my code:
https://jsfiddle.net/davidlerma87/3u8v01b4/2/
Well
First: As you can see, i have a menu bar on top that actually is not working well.
Second: I want below 2 parallels columns with full height
Third: this is for mobile too.
The problem is the position of the divs that are misaligned
regards and thanks!!
Again quick explanation,
screen divided in two columns but with full height including the top menu
Please check this fiddle, I have made necessary changes in css
html,body { height:100%; }
body {
background: url("img/GProxpt.jpg") no-repeat center center fixed;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding:0;
margin:0;
color:#f1f3f5;
font-family: "Courier New";
font-size:14px;
}
.container-fluid {
background-color: rgba(0, 0, 0, 0.6);
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
height: 100%;
/* overflow: auto; */
}
.icon-menu {
margin-top:20px;
margin-right:7em;
float:right;
cursor:pointer;
width:30px;
height:40px;
}
.icon-menu:hover {
width:35px;
height:45px;
}
.row-menu { background:red; min-height: 100%;}
.left-side {
width:100%;
height:100%;
padding-left:20px;
margin-top:7em;
}
.left-side .title {
color:#DCEA5F;
font-size:50px;
}
.left-side .title .sub-title {
font-size:35px;
}
.left-side .text-par {
padding-top:20px;
padding-right:0;
font-size:20px;
}
.cols {
/* position: absolute; */
display: block;
min-height: 100vh;
margin-top: 20px;
float: left;
}
.outer-right-side {
position:relative;
background:#18232E;
margin-right:0;
margin-top:0;
}
.outer-left-side {
margin-bottom:0;
position:relative;
background:white;
}
https://jsfiddle.net/3u8v01b4/5/
Updated fiddle : https://jsfiddle.net/51wwmvqx/
Removed the scrolls and made HTML structure changes.
You can try this:
.cols {
height: 100vh;
}
In my site I have a switch between a down arrow & and an up arrow. See here
How do I change this to a CSS transition, so there's a brief break between the switch?
Here's my code:
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>
You can do this in 2 ways that I can think of. One is by jQuery-UI and add a
.delay(2000)
to the end of your transition. The other way is in your css class for your transition is do a
transition-delay: 2s;
For the arrow, it would be better to transition and rotate the image.
.rotate{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
Here is a neat website to help you with that: http://www.css3maker.com/css3-transition.html
What I am trying to achieve is a container with three inline divs that expand on the whole container when the mouse is hovered on them. One of the divs is floated to the right, one to the left, and one is centred. Here is a jsfiddle page so you can understand better what I am trying.
https://jsfiddle.net/hn59ooL5/
<div id="container">
<div id="container-left">
<div id="info-img-container" onmouseover="hoverOverLeft();" onmouseout="unHoverLeft();">
<img id="info-img" src="images/info.png" alt="info" name="info"/>
</div>
<div id="info-text-container">
Hover your mouse over this card to find info on how to use this website
</div>
</div>
<div id="container-right">
container right
</div>
<div id="container-center">
</div>
</div>
and the css:
#container{
margin: auto;
width: 85%;
height:55%;
display: block;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#container-left{
position: absolute;
background-color:#F8F8FF;
width: 33%;
height:100%;
display: inline-block;
float: left;
z-index:2;
transition: all 2s ease-in-out;
}
#container-left:hover{
width:100%;
z-index:999;
transition: all 2s ease-in-out;
}
#container-right{
position:absolute;
background-color:#6050DC;
width: 33%;
height:100%;
display: inline-block;
float: right;
z-index: 4;
right:0;
transition: all 2s ease-in-out;
}
#container-right:hover{
width:100%;
z-index:201;
transition: all 2s ease-in-out;
}
#container-center{
width: 33%;
height:100%;
display: inline-block;
position: absolute;
left: 33.5%;
z-index: 3;
background:url("../images/cloud.jpg") no-repeat;/*sets background pattern*/
background-size: cover;
}
#info-img-container{
float:left;
display: inline-block;
margin-left:0;
width:28%;
height:100%;
vertical-align: middle;
}
#info-text-container{
float: right;
display: inline-block;
font-size: 50px;
position:relative;
margin-right:0;
width:65%;
}
#info-img{
height: 100%;
width: 220px;
vertical-align: middle;
}
I am getting the two side divs to expand, the left one is expanding to the right and the right one to the left, but I do not know how to make the center one expand on both sides. Any ideas how can I do this with HTML/CSS/JavaScript?
Add the following css and you should get a fullscreen hover on the center div.
#container-center:hover {
width: 100%;
left: 0;
right: 0;
z-index: 5;
}
Don't forget to add the transition to #container-center if you want it to match the other hovers.