Overlay css not working - javascript

i'm putting an overlay so that the elements on my page are disabled.
On my page there are two elements.
One is an anchor tag and another is a file upload input control.
File upload control is invisible by default and is triggered on clicking the anchor tag.
The problem is i have an overlay over these controls but its not working for the invisible file upload control.
During overlay if i click on the file upload area its triggered.Here is jsfiddle
Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable
Here is the html code
<div class="ast">
<div class="notEdit-overlay"></div>
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a>
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R
</div>
Jquery code
$('#uploadQrCode').click(function(){
$('#qrCodeFileUpload').click();
});
And here is the css
.hideQRUpload
{
position:absolute;
opacity:0;
width:0px;
height:0px;
}
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: red;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.ast{
position: relative;
}

Change css for .notEdit-overlay like this
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: none;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1;
}
should use z-index.
http://jsfiddle.net/T5E8D/3/

Try adding pointer-events: none for your upload field – http://jsfiddle.net/T5E8D/2/

Related

How to get an Image in the foreground with Bootstrap?

I'm trying to set a loading-GIF in the foreground of the users screen during an Ajax-request. The Gif should be in the middle of the webpage also if the user scrolls down or up. Is there a layout method in Bootstrap to realize this?
I'm not sure where to place this HTML snippet
<div id='loading' style='display: none'>
<img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/>
</div>
You can do it with CSS. Create an overlay wich will cover the page (overlay) by setting the z-index to 9999 to make sure it's at the foreground. To actually set the spinner in the center of the screen you can use top and translate properties. For example:
CSS:
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.loading-overlay > .inner
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The HTML markup looks like this:
<div class="loading-overlay"><div class="inner"><img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/></div></div>
To add a transculent background to the overlay, simply add background: rgba(0,0,0,0.85); to the .loading-overlay class.
Good luck!
You can place it anywhere but you would need to style the div using CSS to keep it in the middle of the page
This should work for you:
#loading{
position: fixed;
top: 50%;
left: 50%;
}

make file input an href

I need to hide an input so that I looks like you're clicking a regular custom button and firing an input type"file". I've looked at a couple examples and used what I saw, but for some reason I can't get the <a> tag to fire. What Am I missing?
HTML:
<input id="ad-docs[]" type="file" name="ad-docs[]" multiple="multiple" style="display:none;"/>
<a id="upload_link" class="button-link button-link-blue">BROWSE</a>
JS:
$("#upload_link").click(function(){
$("#ad-docs[]").click();
});
You have some invalid characters in your selector -> []
You can avoid this problem by using the jQuery Attribute Equals Selector for your ID, like this
$("[id='ad-docs[]']").click();
You can use CSS for doing this and using z-index and opacity you should be able to achieve this.
Sample Code
HTML
<div id="container">
<input type="file" id="txtFile" />
<button id="btnFile">
Click me
</button>
</div>
CSS
#container {
positin: relative;
}
#txtFile {
position: absolute;
z-index: 50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape */
-moz-opacity: 0;
/* Safari 1.x */
-khtml-opacity: 0;
/* Good browsers */
opacity: 0;
}
#btnFile {
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
JSFIDDLE
If i understand correctly, you want to hide the file-input and control it via a "nicer" button. Try this:
html
<span class="btn-file">
<span>Click to select or simply drag and drop files here...</span>
<input type="file" id="files" required multiple>
</span>
css
.btn-file {
position: relative;
overflow: hidden;
height: 4em;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

Input type=file shows incorrect in IE8-9

I have a big project and many css styles. And I have input file type that shows incorrect in ie8 and ie9. I just see background-color and text "Browse...". So, when I exclude border from style using development tools in IE ... it shows correct. But I can't remove border using js or css. When I set default value: border: medium none #000 it doesn't work. Maybe it inherited style. How I can remove border-style from input-element.
Has anyone had this problem? I need default button for input-file control. How I can use js (jQuery) or css? IE has native style for elements?
HTML:
<input name="ImportFileInp$InputField" class="cs-fileinput" id="ImportFileInp_InputField" type="file"/>
CSS:
.cs-fileinput {
width: 71px;
margin-left:5px;
}
but in browser i see: border: 0px none currentColor
In accordance to our discussion, you should Customize your upload button.
The issue is not only in IE browser. Each browser has a different style (own style) for <input type="file" /> button.
Here is some example of how you can customize your upload button:
HTML code
<div class="custom-upload">
<input type="file">
<div class="fake-file">
<input disabled="disabled" >
</div>
</div>
CSS
.custom-upload {
position: relative;
height: 40px;
width: 350px;
margin:30px;
}
.custom-upload input[type=file] {
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;
}
.custom-upload .fake-file {
background:url(http://www.fold3.com/i/upload-icon.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input {
font-size:16px;
height:40px;
width:300px;
}
JavaScript Code
$('.custom-upload input[type=file]').change(function(){
$(this).next().find('input').val($(this).val());
});
Thus, you can just change backgroung in .custom-upload .fake-file class to whatever image you want and it will have the same view in all browsers.

jQuery popup does not work - simple custom popup

I have a simple jquery popup. I am having issues making it work. Right now the popup does not show up. The Live webpage can be seen at: http://www.domainandseo.com/fibro/index.html
If you scroll down a little there is a link that says "click to enlarge" which should make the popup show up.
My html is:
<div id="lightbox">
<img src="img/cross.png" alt="X" />
<img src="img/lightbox-img.jpg" alt="Supplemental Facts" class="lightbox-img" />
</div>
<div class="overlay"></div>
The CSS is:
#lightbox {
width: 722px;
height: 732px;
background: #FFF;
z-index: 1000;
position: absolute;
left: 250px;
top: 100px;
display: none;
}
.cross {
float: right;
}
.lightbox-img {
margin-left: 90px;
margin-top: 45px;
}
.overlay {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:130%;
z-index:998;
background: url(../img/gray.png) repeat;
display: none;
}
And the jQuery for the popup:
$(document).ready(function(){
//open popup
$(".pop").click(function(){
$("#lightbox").fadeIn(1000);
$(".overlay").css ({display: 'block'});
positionPopup();
});
//close popup
$(".close").click(function(){
$("#lightbox").fadeOut(500);
$(".overlay").css ({display: 'none'});
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#lightbox").is(':visible')){
return;
}
$("#lightbox").css({
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
Change
$(".#lightbox")
to
$("#lightbox")
This is a simplified version that should be easily implemented into your code. The problem with using an anchor tag to trigger the event is that an empty anchor tag will send the user back to the top of the page. Use a div instead.
http://jsfiddle.net/tvb4X/

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?
Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.
I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}

Categories