Modal - content is getting out of modal on smaller monitors? - javascript

I've downloaded a free modal plugin called blockUI, and used it as my image uploading modal.
So far i've designed, positioned everything, but I have one problem:
When I make my browser screen smaller, OR go on iphone, or go on my other screen, some content gets out of the modal
See example here:
(source: gyazo.com)
See LIVE example of the website to test on your screen:
https://argonite.net/img/
Why is this happening? I have set min-width, the modal should automatically resize the background and let the content in.
Information:
.file_bg Each file will be stored in file_bg, it's like a block that will hold image preview, progress bar, and more.
#button_start - the progress bar
#button_remove - #button_link - Remove / Copy to clipboard icons
CSS File:
http://pastebin.com/QwF4Vj3B
JS file:
http://pastebin.com/xWt6bC32
Why is it doing that?

for div.blockUI blockMsg blockPage change min-width:35%; to width:35% and add min-width with a fixed pixel value (520px seems to be good in your case). That should do the trick. For mobile, you can use #media queries to apply different values for width and min-width.
div.blockUI blockMsg blockPage {
width:35%;
min-width:520px;}

Related

Issue with loading images from local JSON in ngx-slick carousel - Angular 7

I have a master details component who load a content from a local JSON and change JSON object and Url on buttons click (next/prev) via pipe in Anguar 7. Also I use ngx-slick carousel. On init page loading image isn`t show (you can see just a slider dots like on screenshot below), when go to next page and than on previous one via buttons image show normally. This is only happens when set adaptiveHeight option to true in the carousel setting otherwise everything is great.
But I need that option set to true, because images not have same size.
Slider Issue preview - just show a blue dot
Slick list div preview here - div with slick-list class have a height of 1px in inline style.
After Google / StackOverflow research I found that is might because image loading before slider. I try different ways to solve this but unfortunately with no success. :(
Component Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/work/work-single/work-single.component.ts
Pipe Url:
https://github.com/markostalma/markostalma-dev/blob/master/src/app/pipes/master-details.pipe.ts
One of site url to see issue:
https://www.markostalma.ninja/selected-work/gizmosphere-infographic
Thanks in advance!
Bug Fixed! This is solution for now.
// Fix slider adaptive height bug on init
slickInit(slideEvent) {
slideEvent.slick.$slider.find('img').first().on('load', () => {
let height = $('.slickImg-item').height();
$('.slick-list').height(height);
console.log("Slider Init");
});

How to do an element that is toggable on small screen sizes but always visible on big

I want to have a menu that is toggable in small screen sizes and always visible on medium sizes upwards.
The behavior should be (basically) exactly like this demo here.
The steps are:
Go to a small screen size (til the body outline is gold)
Check that it's toggable
When the menu is hidden and you get a bigger screen size, the menu should appear
When the menu is not hidden, go to a bigger screen size and it should remain shown
When on a big screen size, and element was hidden, you should see it but when you drag to a smaller size, it should get hidden
When on a big screen size, and element was NOT hidden, you should see it but when you drag to a smaller size, it should get hidden
To achieve this is very easy with:
$(".click").click(function() {
$(".menu").toggleClass("hidden-md-down");
});
My problem now is that I want to animate this show and hide and I can't do it with the class toggle.
So I have to rely on for example slideToggle() and here is where my problem lies, see demo here.
If you now go to a small screen size, hide the menu and make the window size bigger, the menu won't appear because of the hide() function.
I know this could be solve with a $(window).resize but I definitely don't want that solution since it's terrible for performance for such a small feature.
So how can I either have this toggle class with an animation or do it with js without the resize method?
I've put my comment into an answer instead: "For best performance wire your window size check to only the end of the browser resize, not to every stage."
This code works and it only runs .5 sec after the end of the window resize event rather than during (better performance). Run the code full page and squeeze your browser window to see it in action.
Instead of sending the text values #width and #height you can elect to run your menu toggle or deactivate it; I'd do this by removing the js class you're using to activate the menu initially.
And make your menu an unordered list and set it to be inline on desktop and an unbulleted list on mobile using css.
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var widthReport = $("#width").text($(this).width());
var heightReport = $("#height").text($(this).height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="width"></div>
<div id="height"></div>

Media Scaling on short portrait pages issue with Google Cloud Print

I am writing a program that automatically prints labels for our laboratories with all of the appropriate information. The labels are printed by a Brother QL-710W label printer and the label printing is initiated by Google Cloud Print. When printing to pages that have a greater height than width (i.e. if I am using a small width label tape and printing LANDSCAPE, there are no problems; however, if I try to print in portrait with a shot height, the page scaling has issues. I am posting a picture here to illustrate the problem.
The image at the left (top as displayed) has the appropriate scaling for this print-out, I made the page height the same as the width. For the middle image, I lowered the page height to about 2/3 of the page width and you can see the page content being scaled and the left and right margins being expanded. Finally at the appropriate page height, almost no room is left for the page content.
Note: when I print the page using the browser print dialog, I am able to print the image as expected, though it does have two pages instead of one that can be overcome by selecting only one page to print (see image here).
The Google Clout Print ticket looks like this:
var ticket = {
version: "1.0",
print: {
duplex: {
type: "NO_DUPLEX"
},
copies: {copies: 1},
media_size:{
width_microns:62000,
height_microns:22860
},
page_orientation: {
type: "PORTRAIT"},
margins: {
top_microns:0,
bottom_microns:0,
left_microns:0,
right_microns:0
},
page_range: {
interval:
[{start:1,
end:1}]
}
}
};
The cloud print is initiated by a "Print" button that builds the page content as a blob:
"content" : HtmlService.createHtmlOutput(html).getBlob(),
Ways that I have tried to remedy the situation:
I have made the margins of the print out 0 as seen in the ticket
above.
I have also tried to edit the media and print css:
"#media print{header nav, footer {display: none;}}"+
"#page{margin:0pt !important; padding:0pt !important; size:2.4in 0.9in;}"+
I have tried making the div elements smaller, but as you can see from the affect made by even small changes to the page height (middle image) this has little effect.
Anyone know what I'm missing here?
When you print (successfully) from the browser, the browser converts the content to PDF before sending it to Cloud Print. Since that works, but tries to print a second (blank) page, my guess is that whitespace is creeping in below the content you're interested in.
I suggest you take a good look at the HTML blob, and also consider converting the HTML to PDF. PDF has much higher fidelity for situations like this (view in browser; send to Cloud Print black box; print on a label printer).
Ive been doing countless tests trying to figure out why images are being printed with a border when its set to borderless printing.
This may help.
The same source file was printed, results:
JPG: borderless yes, force raster yes, printed 5mm thick border.
PDF: borderless yes, force raster yes, printed 4mm oversized for paper.
PDF: borderless yes, force raster no, printed 2mm thin boarder.
HTML images seem to be handled like jpg images.
Fit and shrink to paper options dont change the above results.

Changing a backgroundImage set via JavaScript using a CSS media query

I have a responsive menu on my website. In full size, hovering over a button changes the background of the whole menu (not the button!). As I believe that it is impossible to change the background of a div on hovering over one of its child elements via CSS (please correct me if I'm wrong), I do this via JavaScript. For each menu button, I have a function like the following. Each button gives a different background image.
function arme() {
if (document.documentElement.clientWidth > 590) {
var bild = "url('" + bildliste[3] + "')";
document.getElementById('auswahlbox').style.backgroundImage=bild;
}
}
As you can see, for lower resolutions (> 590px), the background of the menu does not change because the menu looks different then. The background then is always the same image. CSS looks like this:
#media only screen and (max-width: 590px) {
#auswahlbox { background:url(images/koerperbilder/koerperbg.jpg);
}
If I load my website in full size and then make the viewport smaller, the background of the menu changes to the image that is set via CSS. That's how it's supposed to work.
However, now to my problem: If I load my website in full size, hover over a random button (thus activating the JavaScript function above) and then make the viewport smaller, the background doesn't change. It stays the way it was set by hovering over the button. Apparently, a backgroundImage that was set via JavaScript beforehand can't be changed back by a simple CSS media query like the one above.
My question is: How can I change a backgroundImage that was set via JavaScript using a CSS media query? And if that is not possible, how can I solve my dilemma?
Right now, this problem is ruining the user experience. Since all other rules of the media query get applied (among them background-position and background-repeat), everything falls apart whenever someone resizes the viewport after hovering over a button. I wonder if someone can help.
Thank you in advance - and sorry for my bad English.
As you have set backgroundImage property through JavaScript
document.getElementById('auswahlbox').style.**backgroundImage**=bild;
You should set same property in CSS also. So use following code
#media only screen and (max-width: 590px) {
#auswahlbox { **background-image**:url(images/koerperbilder/koerperbg.jpg);
}

Vertically Scrolling in Window 8 store app

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...

Categories