I've built an upload button that's formatted to look like your typical html button, instead of the browser standard file upload form. The approach was to style an anchor element and overlay a transparent file input element on top.
This approach works fine in all browsers but IE. In IE, when the user clicks the upload button a text cursor appears as if the user had clicked on a text input box. The user can trigger the file upload dialog by double clicking the button. But this isn't the behavior we want or that anyone expects.
I'm at a loss as to why this is happening. I've set up a jsfiddle demonstrating the issue here:
http://jsfiddle.net/davelee/yfSmc/3/
Meet this bug on IE11, fix it with font-size: 0;
I have just worked on this exact issue. With IE, yes, there is a small area on the left of the button that acts as a text input (for the file name to be entered manually). The solution that I figured out was to increase the font-size of the input field. Strange, I know, but by increasing the font-size, you increase the "Browse..." button portion of their input field, and therefore increase the clickable area and push out the text portion of their upload button. Since the button is transparent anyway, nobody is the wiser :)
Setting the width and height of the file input element fixes the issue in both ie8 and ie9.
http://jsfiddle.net/davelee/yfSmc/4/
Take a outer div to that input file apply over flow hidden and width to it, then to the input file apply some css like: font-size, margin-left in negative.
<div class="outerWrap">
<input type="file" id="fileUpload"/>
</div>
and the css will be:
.outerWrap {
width: 200px;
height: 50px;
overflow: hidden;
}
#fileUpload {
width: 210px;
height: 50px;
margin-left: -10px;
font-size: 70px;
}
adjust the width and margin-left according to your requirement.
for reference got this link: http://jsfiddle.net/TrdJ8/
and try it out on IE-9
try adding css
z-index
to your absolute elements.
lowest element
z-index:1
highest
z-index:2;
and set a z-index on the container element.
Related
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I tried to replicate the problem I'm having on my website with the below js fiddle but couldn't.
http://jsfiddle.net/YD6PL/116/
HTML:
<input class="givenLetters" type="text" value="h" disabled>
CSS:
.givenLetters {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
font-weight:bold;
text-decoration:underline
}
For some reason on the website when the user clicks and holds the mouse button they can scroll the input text up and down. It would be like being able to drag the 'h' in the js fiddle example up and down but still within the textbox.
What could cause this behavior? I would like the website to function as the js fiddle but can't figure out what would be different with the website.
The box-sizing, display or line-height properties come to mind if you're getting scrollable text. Open up a web development console (Firebug in Firefox or CTRL+SHIFT+J in Chrome), use the element selector to choose the element and then start disabling properties until the effect stops. Keep in mind it could be a combination of properties as well.
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.
Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?
The problem is:
I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!).
If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...
Please advice something
Thanks.
Here it is: http://jsfiddle.net/kizu/66JXn/
Some notes about this solution:
Use <button></button>, 'cause it can include other blocks.
You'll need a bit of extra code to make all these work in Fx and IE:
For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.
You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.
That's it :)
No, and this is bad practice. CSS is for static content only.
What you should do, is define a template file with variables in it such as:
template.js
my_backgroundImage = "url('somepic.png')";
then your file would load
x = document.createElement('image');
x.src = my_backgroundImage
Attribute selectors might work, but they aren't very flexible. Try this one:
img[src=""] {
background-image: url('none.png');
height: 100px; /* Height of BG image */
width: 100px; /* Width of BG image */
}
It doesn't change the image's src= attribute, but it performs the same function.
Here's my idea.
You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.
I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):
for every <img> tag:
if tag.classes contains class not in whitelist:
for every class not in whitelist:
this.src = newClass.backgroundImage;
this.removeClass(newClass)
It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.
(This is a problem for which JS is the solution, but ignoring that:)
One option is to wrap the button and an extra div (lets call it div.overlay) in a parent container.
Set the container to to position:relative.
Set the button to only display text, as usual. Set the div.overlay to position:absolute, width and height to 100%, and left and top to 0, and a z-index higher than the button. Set the image you want to display as the background-image of div.overlay.
With images enabled, the user sees the image, and the image can be changed using only CSS.
With images, or CSS disabled, the user only sees the plaintext submit button.
You might have to do some trickery to get clicking div.overlay to submit the form, perhaps just make div.overlay a duplicate submit button. Also, who knows what Googlebot makes of overlay techniques like these.
It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...
.cssclass,
.cssclass:after{
display:block;
width:100px;
height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
position:absolute;
top:0;left:0;
content:url("button.jpg");
}
See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.
Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.
Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.
If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.
In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.
So my html was like this:
<input type="submit" id="btnSearch" class="searchButton" value="Search">
then my class may read something like:
.searchButton {
backgorund-image: url('searchButtonImage.png');
font-family: sans serif;
font-size: 10px;
color: #808080;
padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
width: 100px; // you can put this as in-line style if you make a more generic class
}
If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.
Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.
(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)
Can you do it with javascript?
I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.
Here is what I use:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width != "0%")
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%
you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif
hope that helps
I have a textfield is there a way to hide the blinking text cursor? I say this because I am doing a horror/mystery website and one of the clues is to start typing anywhere.
Maybe I can do it with javascript?
The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow.
Use this link to see it live in jsfiddle.
input[type="text"]{
color : transparent;
text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
outline : none;
}
Update:
Known to not work in iOS 8 and IE 11
Another idea of my is a bit more hacky and requires javascript.
HTML and CSS part:
You make 2 input fields and position one exactly on top of the another with z-index, etc. Then you make the top input field completely transparent, no focus, no color, and alike.
You need to set the visible, lower input to disabled, so that it only shows the content of the above input, but not actually works.
Javascript part:
After all the above you sync the two inputs. On keypress or on change you copy the contents of the higher input to the lower.
Summing all the above: you type in an invisible input, and that will be sent to the backend when the form submitted, but every update of the text in it will be echoed into the lower visible, but disabled input field.
caret-color: transparent !important; works in newer browsers
Try this:
$(document).ready(
function() {
$("textarea").addClass("-real-textarea");
$(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
$(".textarea-wrapper textarea.hidden").keyup(
function() {
$(".textarea-wrapper textarea.-real-textarea").val($(this).val());
}
);
$(".textarea-wrapper textarea.-real-textarea").focus(
function() {
$(this).parent().find("textarea.hidden").focus();
}
);
}
);
.textarea-wrapper {
position: relative;
}
.textarea-wrapper textarea {
background-color: white;
}
.textarea-wrapper,
.textarea-wrapper textarea {
width: 500px;
height: 500px;
}
.textarea-wrapper textarea.hidden {
color: white;
opacity: 0.00;
filter: alpha(opacity=00);
position: absolute;
top: 0px;
left: 0px;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
<textarea></textarea>
</div>
The idea is to create a second, invisible <textarea> over/on-top-of the real one. The user is typing in the invisible one but the text doesn't appear (nor the caret/cursor) as it is invisible! You then use JavaScript to assign its value to the visible one.
But it doesn't seem to work in IE8 :'( the caret is still visible even though the opacity is cranked up to 11.
But it works in Firefox... ?
I was looking for a way to hide the blinking cursor on iOS devices for date inputs that trigger a calendar, because you could see the cursor blinking on top of the calendar picker.
input:focus { text-indent: -9999em; }
So in this case my CSS works nicely, obviously the downside is that if you need to see what you are typing then it is not good
I think this is a perfect solution:
make the input wide enough, align right to screen right, thus make cursor and content locate at the outside of the screen, while it's still clickable
Unfortunately you can not style the text cursor with CSS. You can only do some very bad JavaScript tricks but depending on the layout and requirements of your website, it might not be possible at all. So I would recommend to forget the whole idea.
<input style="position: fixed; top: -1000px">
Works in iOS8.
you can "Hide textfield blinking cursor" by calling blur function on focus event
<input type="text" onfocus="this.blur()"/>
function noCursor(a){
var a = document.getElementById(a),
b = document.createElement('input');
b.setAttribute("style","position: absolute; right: 101%;");
a.parentNode.insertBefore(b, a);
if(a.addEventListener){
b.addEventListener("input",function(){a.value = b.value});
a.addEventListener("focus",function(){b.focus()});
}else{
a.attachEvent("onfocus",function(){b.focus()});
b.attachEvent("onpropertychange",function(){a.value = b.value});
};
}
noCursor('inp');
<input id="inp">
You can use the function for each element jou want no cursor for.
Setting the input to readonly also does this since it prevents focus but it may not be applicable to many use cases that still need it.
<input type="text" readonly />
List of recommended css solutions to hide the caret
caret-color: transparent; - For my case this approach wasn't good enough since you're still able to manipulate the input field in order to show the caret on ios. You can reproduce it on an ipad by focusing on an input then press the keyboard button that brings the keyboard down. After that you can simply just click on the input field again and suddenly the caret appears. I have also been able to see the cursor on iphones but i'm not exactly sure how to reproduce it since it seems kind of random.
opacity: 0 - This approach does not work on android devices since you won't be able to focus on the input. Another thing I don't like is the fact that the site wouldn't automatically scroll up/down to the input after focusing.
text-indent: -9999em; - This isn't really a solution in itself since the caret always would be in the left upper corner of the input, atleast on ios devices. Though if you set the width of the input to overflow the website's width then you wouldn't be able to see the caret.
visibility: hidden; display: none; - These solutions do remove the caret but you'll not be able to focus on the input, not even if you've implemented a click event to do it.
font-size: 0; - I do not recommend this approach since it doesn't work on adroid devices and apparently some windows computers. The browser will also zoom in on the input if the font-size is less than 16px therefore you would have to add maximum-scale=1 to the meta viewport tag. You would also have to display the input somewhere else than the input field.
What I did
I ended up not using any of these methods since they didn't work well for my project. I instead used a lightweight code editor like Lajos Mészáros also recommended and made the height of the input 0. That also means you'll need to make a click event on another element that sets the focus for the input. You can look at Monkeytype for reference (I'm not affiliated to that website).
just made a proof of concept for a friend of mine, using #sinfere 's idea:
demo: http://jsfiddle.net/jkrielaars/y64wjuhj/4/
The start of the input is offset so it falls outside of the container (which has overflow hidden)
The actual caracters (and blinking cursor) wil never enter into view.
The fake div is placed below the input field so a tap on the fake div will set focus on the invisible input.
<div class="container">
<div id="fake" class="fake">
<span class='star empty'></span>
<span class='star empty'></span>
<span class='star empty'></span>
<span class='star empty'></span>
</div>
<input type="text" id="password" class="invisible" maxlength="4">
</div>