In edge cases my select box options drop out of view and can not be scrolled/seen.
Desired outcome(s):
A smarter drop down/up behavior for chosen.js select that makes the optimal decision for viewing the most options at once.
-and/or-
A baseplate that truly stays fixed to the bottom of the screen. It starts there and stays there, and, as the page contents outgrow the window, the contents of the window rise out of view instead of descend out of view. With this I could make the baseplate high enough to act as a buffer to keep the select from getting too close to the edge of the viewing window for at least a partial scroll becoming inaccessible. I'm using a header/article/footer model I found on w3schools, but I don't understand it well.
New lines containing select are dynamically added to the DOM by the user in this application, and when the contents fill up the available browser height the edge case appears. I'm using chosen.js with being able to type in a search for a possible option match. I can type in a search, but don't know if I hit a match until I hit enter. If I didn't know what the options were already, selecting something would be impossible. Without chosen.js, the select box behavior is to start dropping up when it would run out of room dropping down. I'm guessing either:
chosen.js is incapable of dropping up
the decision to drop up/down does not take into account added dimensions introduced by chosen's search features.
I tried a number of different code playgrounds to provide a sample to work with, but I can't find one that will recognize chosen.js This shows acceptable behavior through non-chosen select:
https://jsfiddle.net/f4L27u9g/#&togetherjs=teea1GGbe7
[Minus a solution, if you can direct me towards providing a chosen-enabled sample that would be helpful]
<Html>
<head>
<script type="text/javascript" src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script>
function addTransaction(){
$('<Select>')
.attr('class', 'chosen-select')
.attr('style', 'width:150px;')
.appendTo($('#myForm'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<option>').text('sample').appendTo($('.chosen-select'));
$('<br>').appendTo($('#myForm'));
$(".chosen-select").chosen({});
$('.chosen-select').trigger("chosen:updated");
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
padding: 1em;
}
header {
position: relative;
background-color: #665;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
}
article {
position: relative;
padding: 20px;
background-color: #f1f1f1;
}
footer {
background-color: #777;
padding: 5px;
text-align: center;
color: white;
position: absolute;
right: 0;bottom:0;left:0;
}
section:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<header>
random header
</header>
<article>
random article
<Form id="myForm" action="#" method="post"></Form>
</article>
<footer class="footer">
<Form id="addTransactions" style="float:left">
<button class="addNewTransaction" id="addNewTransaction" type="button" onclick="addTransaction()">Add</button>
</Form>
</footer>
</body>
</html>
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.
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'm trying to figure out why in Chrome (and only in Chrome) an element of the header of my site change position after reloading. It has certainly something to do with the cache, since when I press Ctrl + Shift + F5 the layout fixes itself.
The troublesome part is this:
#header-helpful {
clear: right;
color: #696969;
display: inline-block;
float: right;
font-size: 15px;
font-weight: 500;
line-height: 1.4em;
}
header-helpful .action {
display: inline-block;
float: left;
line-height: 20px;
padding: 4px 0px;
}
header-helpful .value {
margin-left: 5px;
}
<div id="header-helpful">
<div class="search-form">
<form method="get" id="searchform" action="https://rhesis.it/"></form>
</div>
<!-- end .search-form -->
<div class="action">
<div class="value">ISSN 2037-4569</div>
</div>
The element <div class=action"> looks fine on the first load, but after a reload goes down along with the <div class="value">.
I tried to look for a solution, but nothing I tried works.
You you want to check, the site is rhesis.it.
Do you have any idea? Any help appreciated!
Edit 1: The problem fixes itself just by increasing/decreasing the size of the window. But realoading it resurfaces.
Edit 2: here's what I (and other) see:
first load or Ctrl + Shift + F5
after reloading
I checked the page with Chrome and the issue you describe never appears.
To check if cache is envolved try this: type in Chrome location the address adding a random number after a ?, something like rhesis.it?5675859 or whatever number you want.
At this point your page should appear correctly paginated, than reload it...
If the problem disappear shurely the cache is envolved and should disappear deleting the whole cache of Chrome or the single envolved file of the cache.
In my html right now I have the label and input above the aside which I am trying to toggle like so:
<label for="hamburger"><img src="images/hamburger.png"></label>
<input type="checkbox" id="hamburger" />
<aside>
<!-- stuff -->
</aside>
<main>
<!-- stuff -->
</main>
To make things a little complicated, the hamburger only shows up once we reach a media query of max-width 768px like so:
#media(max-width:768px) {
aside {
margin: -335px;
}
main {
margin-left: 0;
}
label {
position: absolute;
top: 20px;
left: 25px;
width: 25px;
height: auto;
display: block;
cursor: pointer;
}
#hamburger:checked + aside {
margin: 0px;
}
}
So what happens is the aside gets pulled to the left, which makes it invisible, the main now fills the screen and its margin disappears and the label(#hamburger) shows up. When I click the newly appeared #hamburger it toggles back and forth between the aside showing up and not showing up. The problem I am having is this: I would like for the hamburger to move with the main section as I toggle back and forth, instead of sitting above the aside in the html. But if I move the label and checkbox inside the main I can't target the aside because #hamburger:checked + aside (for the + to work, I need to have it directly above it).
So the question is can I target other class with #hamburger:checked .class {}, because if I can, I cant seem to figure out how. If I cant do that how can I work around it?
I am sorry for the long winded question but I wanted to make sure I'm thorough in explaining my problem.
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.