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.
Related
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>
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.
I'm unsure if this is the correct approach, or even question, so I will elaborate.
Please visit this live page http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3
I am basically asking if it is possible to overlay a link somewhere in the header div? Specifically over the sticker background image on the right?
I didn't build the site, but I have just added the sticker to the right corner of the header div. (FYI it's a Joomla site so uses a PHP template file.).
I did this as a background image and used some padding and negative margin to make it overflow, then I realised the sticker needs to link to their order page.
Would an image map be the best way to make this into a link? Or is there a better method?
If an image map is the way has anyone got a code example.
I've tried the below code, which I edited from a tutorial on a similar subject, this doesn't work
<div id="header" usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>
Paste the following code as is and it will work for you
Append a <a> to the end of your header div:
<div id="header">
<div...
<div id="menu">...
<a class="my-map" href="#"></a>
</div>
And then add the following styles:
#header{
position:relative;
}
.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}
I don't know how popular imagemaps are anymore :). You can position the element absolutely relative to the header with the following (for example). Codepen sketch: http://cdpn.io/klsEp
HTML
<div class='header'>
<a class='sticker'>Click me</a>
</div>
CSS
Consider this simple example.
.header {
background: green;
height: 200px;
position: relative;
width: 800px;
}
.sticker {
background: red url('..') no-repeat center;
bottom: -20px;
color: white;
cursor: pointer;
display: block;
height: 100px;
position: absolute;
right: -30px;
width: 100px;
}
.sticker:hover {
background: black;
}
In your HTML, I cannot find the link to menu_bg6.png, but that is where you must put the usemap= tag, as in:
<img src="menu_bg6.png" alt="an image" usemap="#usethismap">
So, not on the DIV tag, but on the IMG tag.
Then you can create a corresponding <map> tag and it should work for you (although, don't forget to insert a URL for the click to action - currently yours is '#').
Here is a simple jsFiddle with more ideas for positioning clickable areas over an image.
Here is an article that discusses how to create pseudo "image maps" for DIVs - without an IMG tag.
I have a image where text/link is overlayed on top. My problem is that sometimes the text in the foreground will hide the link in the image in the background. I assume this is because the text box forms an invisible rectangle around the text, thus creating a region that appears it should belong to the image but is actually being covered by the text. I am wondering if it is possible that when I mouse over this region, I will be linking to my image link as oppose to my text link (see illustration).
http://jsfiddle.net/WHpMr/
Try this, i.e. put your tag inside : http://jsfiddle.net/WHpMr/3/
HTML:
<div class="ad">
<span class="link middle right">my text link abcdefg<br>meow<br>meow<br>meow</span>
<img src="http://www.placekitten.com/320/200">
</div>
CSS:
.ad {
position: relative;
height: 200px;
width: 320px;
}
.link {
position: absolute;
padding: 20px;
pointer-events: none;
}
.inline-link {
pointer-events: all;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }
You are correct in thinking that. The element will create a block containing the content. You could use the Map Element if you are hell bent on doing that.
If you make each line its own link, that will minimize the problem. If you really want to go all out, you can make each word its own link. But you're getting into stuff that's easier to do with some JS automation instead of manually in the HTML.
EDIT: Here's an attempt at a vanilla JS solution that works for your simple example, at least:
http://jsfiddle.net/aLN2d/35/
I have been working on a project in GWT for which i need to show a loading image as like "Please Wait...".
I was able to fix this till page loads. But during history token changes, i cant show the same. I created a division as shown below,
<div id="loader">
<div id="loaderPanel">
</div>
<div id="loaderImage">
<div id="loaderText">
<b>Please Wait...</b>
</div>
<img src="images/loader.gif"/>
</div>
</div>
Also, here is my CSS
#loaderPanel {
background-color: white;
display: block;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
#loaderImage {
background-color: transparent;
left: 48%;
position: fixed;
top: 48%;
z-index: 1002;
}
#loaderImage img{
height:22px;
margin-left:4px;
margin-top:0px;
width:119px;
}
#loaderText{
font-family:'Verdana';
font-weight:bold;
font-size:0.9em;
float:left;
}
This is the piece of code i used to make the DIV visible & invisible.
DOM.getElementById("loader").getStyle().setDisplay(Display.NONE);
DOM.getElementById("loader").getStyle().setDisplay(Display.BLOCK);
Can anyone please suggest me a better way to show a loading GIF image for History Changes?
YOu should implement HistoryListener and show the gif when the onModuleLoad() method is called:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/History.html
I got the Answer,
It was not showing the Loading Image because the execution locally was much faster. But when it comes to production mode, i found that, it is showing a loading image for a while.
Since my client strictly needs to show the loader, he suggested me to add a small delay. So i added the delay inside a Timer Scheduled. By the time it shows the loader, i did the Pre-Fetching of the Images and other objects used in the page.
So i mark my question as Closed...