Sorry if the title makes no sense, I didn't know how to call this issue, lol.
So... I have this android app which shows a parking lot, with the parking layout as the background and some cars showing "inside" each parking when needed. This is easy to build using different layouts for each parking and changing the image sources from empty to a car, etc.
The thing is... I need to replicate this on a web page, And I have no idea how could I build a background and change images on top of it. I suppose I could make a bunch of divs for each parking, changing the img sources when needed and use the parking lot layout as the background for the whole thing, however I don't know if this would be the best practice, and the whole idea doesn't really sound responsive to me.
Any ideas?
I don't expect/need it to change in real time like you can do with Android, but I do need to replicate the idea of changing images programatically on top of a background.
Thanks!
The only real way to overlay images with CSS is by having a relatively displayed container with it's inner image elements absolutely positioned.
Using this idea, it'd be possible to absolutely position the car images on top of your image parking spots.
That being said, why don't you create a more abstract representation of this parking lot?
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.available {
background-color: green;
}
.unavailable {
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<h1>Parking spot availability</h1>
<p>Green indicates an available spot. Red indicates an unavailable spot.</p>
<div class="flex-container">
<div class="available">1</div>
<div class="unavailable">2</div>
<div class="available">3</div>
</div>
</body>
</html>
For something like this, I would recommend using jQuery. Register event handlers for each of your images and adjust the src property accordingly. I have provided an example below for review:
$('.car').on('click', function () {
$(this).prop('src', 'https://placeholdit.co//i/300x150?text=A%20Completely%20New%20Image!&bg=111111');
});
.playground {
background-color: #ccc;
width: 500px;
height: 500px;
}
.car {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playground">
<img src="https://placeholdit.co//i/200x150?text=The%20Original%20Image" class="car" />
</div>
Related
I dunno how exactly I can explain my issue or if the title is specific enough.
But what I want to do is for example I have a game like Tic Tac Toe and if the game finish a message should pop up the entire screen which block any other interactions except there is a button only.
Like that:
I think something with display: ???
Ive made a simple example for you how it could be done:
<head>
<style>
.content {
color: red;
}
.overlay {
z-index: 1;
width:100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color:black;
opacity: 0.8;
}
.msg {
background-color: white;
width: 70px;
padding: 50px;
font-weight: bold;
text-align:center;
position: absolute;
top:40%;
left: 45%;
}
</style>
</head>
<body>
<p class="content">some content</p>
<div class=overlay>
<p class="msg">TEST</p>
</div>
</body>
</html>
this shows a black overlay over the complete Screen with a "TEST"-Message, you can add more Items like Buttons to the "overlay"-div if you want to.
But keep in mind, to use the "position: absolute;" attribute.
You can show or hide it by setting the "display: none" (hide) css-attribute to the "overlay"-div or setting "display: revert;" to show it
You need to create a fullscreen overlay.
Link: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Then you can add a Javascript event so that your quiz restarts when the user clicks the restart button. Hope this helps!
You might want to look at this post, How can I disable an entire HTML page on an event like in the case of JavaScript alert? I found it just by searching your question on Google. You'll probably need to use jquery for the solution.
I want to hover over a text and display an image then. This works so far, but to be honest the "hitbox" is too small. The image is just getting shown when I actually hover over the text. I would be cool if one could make that hitbox taller. Is there any possible solution for this problem?
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
.is_hidden{
display: none;
position: absolute;
}
.under_line{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<span><b>Lorem Ipsum</b></span>
I would love to have it like on this site. Have a look at these tables and then hover over an element like for example like Execute:
It feels so smooth and nice. I already looked with the developer tool into the css of this but couldn't find anything that helps me..
If I understand what you are trying to do correctly, you could try adding some padding and negative margin to your CSS like so:
span {
padding: 30px;
margin: -30px;
}
This will make the element 30px larger on each side, but the negative margin will allow the surrounding text to not be pushed away by the same 30px amount.
There are many ways and it is actually hard to tell what is the best solution without knowing the context, so heres a basic proposal:
span {
display: block;
padding: 10px;
}
You should ofcourse not style the span element in general, but this fits to your example. Better would be to wrap your text in an element and set the style there.
The padding will increase the "hitbox" / size of your element.
Better Solution:
js
$(document).ready(function () {
$('.hovering').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
css
.hovering {
padding: 10px;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<p class="hovering"><b>Lorem Ipsum</b></p>
You could achieve this using pure css. Put the image and text in a div and detect when the div is hovered over, then hide/show the image using the :hover selector.
HTML
<div id="hoverhere">
<img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg"/>
<p>
<b>Lorem Ipsum</b>
</p>
</div>
CSS
img{
width: 200px;
display: none;
position: absolute;
right: -200px;
top: -100px;
}
#hoverhere{
position: relative;
width: 100px;
margin-top: 100px;
}
#hoverhere:hover img{
display: block;
}
#hoverhere:hover p{
text-decoration: underline;
}
Fiddle
http://jsfiddle.net/L7L1bep6/1/
I updated my answer to mimic the site you linked more closely.
If I create an isometric grid of tiles using only HTML (each grid item being a diamond-shaped image), the tiles overlap on the corners. So, clicking on one will likely click the image that is overlapping it.
I can use JavaScript to get the X/Y of the mouse click event and determine which image was clicked. I can use HTML5 and, similarly, translate the X/Y of the click into an image.
I'm looking into using SVG to rotate images 45 degrees. Then, they don't overlap. I can use an on-click on the SVG objects. So far, this appears to be the simplest method of handling click events in isometric view in HTML.
Is there a method of displaying non-square objects in HTML that I've overlooked?
Long time since this question was asked, so most probably you already found the answer that you were searching for, but I would like to clarify it for anyone reaching here with the same doubt.
If you apply CSS transformations to an HTML element, you don‘t need to make any JavaScript calculation to know if it was clicked. Looking at your comment it seems that you think that the mouse events work in the element boundary box instead of the element itself, but it doesn‘t work in that way. The mouse events are triggered when the area respective to the element is clicked, respecting its transformations.
Take a look at this small snippet. The tiles have been transformed with CSS transformations, click on the tiles so you can check that the events are triggered taking into account the diamond shape of each one.
document.querySelectorAll('.isometric').forEach(tile => {
tile.addEventListener('click', function () {
this.dataset.active = 1 - (this.dataset.active || 0);
});
});
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
left: 50%;
position: relative;
top: 50%;
transform: translateY(-100px);
}
.isometric {
background-color: #CCC;
height: 100px;
outline: 2px solid #FFF;
position: absolute;
width: 100px;
}
.isometric[data-active="1"] {
background-color: #F00;
}
<script src="https://unpkg.com/isometric-css#2.2.3/index.js"></script>
<div class="container">
<div class="isometric" data-view="top" ></div>
<div class="isometric" data-view="top" data-right="100"></div>
<div class="isometric" data-view="top" data-left="100" data-left="100"></div>
<div class="isometric" data-view="top" data-right="100" data-left="100"></div>
</div>
I'm designing my future blog page, and i realized that most of people load the same exact image twice, in this case a bigger logo image and a medium or small logo image.
The thing is, you already loaded a big logo image, so why waste resources loading a smaller version instead of just using the same image and resizing it with css?
I couldn't find any reason to do that, so i began to think of methods to use the same image several times, reducing the http request and page load time.
The idea i have now is using a sprite with just 1 image, the big logo, then you just use it twice:
Full logo: just use it as you would use any other sprite image
Medium logo: Resized sprite image
Right now this is the best way i found to do it:
http://tobyj.net/responsive-sprites/#notes
I am looking for the best way to do this, or another alternative, but no JS, having to load a js file defeats the purpose of reducing HTTP requests.
What do you think? any ideas?
Greetings.
SOLVED: Thanks guys, it was easier than i thought, and now i'm thinking, who the hell design the templates? they add a ton of duplicated not needed HTTP requests and code :S
You can:
1. Resize the img
img {
max-width: 100%;
height: auto;
}
.big-logo {
width: 100%;
}
.medium-logo {
width: 50%;
}
.small-logo {
width: 30%;
}
<div class="big-logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>
<div class="medium-logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>
<div class="small-logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>
2. Use the image as a background
.big-logo,
.medium-logo,
.small-logo {
background: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png') no-repeat top left;
background-size: cover;
}
.big-logo{
width: 500px;
height: 149px;
}
.medium-logo {
width: 250px;
height: 74px;
}
.small-logo {
width: 150px;
height: 44px;
}
<div class="big-logo"></div>
<div class="medium-logo"></div>
<div class="small-logo"></div>
I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so