In my web-app, I implemented some tooltips on buttons with images. In Firefox, they work as expected, that is, they appear right below the button when you hover over that button. However, in Chrome, they appear far left of the button.
CSS:
.tooltip {
display: none;
}
button:hover .tooltip {
display: block;
position: absolute;
background: #ffffaa;
z-index: 10;
padding: 2px;
font-style: italic;
font-family: Times;
}
HTML:
<div id="simulationButtons">
<button id="playPauseButton">
<img
src="play.svg"
alt="play"
id="playImage"
style="display: inline"
/>
<img
src="pause.svg"
alt="pause"
id="pauseImage"
style="display: none"
/>
<span class="tooltip">Play/Pause</span>
<!--Didn't know modern browsers don't display alts automatically
when you hover over an image.-->
</button>
This works as expected in Firefox (this is Firefox for Android, but it looks similar on desktop):
However, for some reason, in Chrome, tooltips are moved to the left of the button (this is Chrome on Android, I haven't managed to install Chrome on my Linux, but I think it will look similar in Chrome on desktop):
So, what is going on in Chrome? How can I fix it?
You need to set position:relative in <button id="playPauseButton"> or in <div id="simulationButtons">
You are using position:absolute to position the tooltip so the parent "button" should have position:relative
Add this code in your css and it will work fine.
#playPauseButton, #fastForwardButton, #singleStepButton, #stopButton {
position: relative;
}
Whenever you make new buttons like these, make sure to add position:relative to that button too.
Related
Problem:
I have observed an undesirable behaviour in Chrome and Opera that occurs when one joins two p
tags by deleting the separation between them. Chrome and Opera delete contenteditable=false element(widget) and text after.
Example:
example on jsfiddle
html:
<div contenteditable="true" class="editor">
<p>This is the first paragraph.</p>
<p>←Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p>
</div>
css:
.widget{
display: inline-block;
padding: 5px;
background-color: gray;
}
.editor{
font: 20px Trebuchet MS
}
Question:
Why? How fix it?
I reported this bug long time ago for Blink and Webkit. It's kind of critical and there's no workaround. Webkit team tried to fix it, but as far as I can see, they introduced new bug ;|.
PS. Yes, this answer does not propose any fix, but the only fix is overriding delete and backspace keys behaviour.
I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.
I have a Flash Animation inside of iFrame. And when I try to hide it, IE10 keep it displayed and overlapping other content.
<body style="background-color: #EEE">
Testing IE10
<div id="swfDiv">
<iframe src="swf.html" width="500" height="50"></iframe>
<br />
<button onclick="document.getElementById('swfDiv').style.display='none'">Hide</button>
</div>
<div style="background-color: #DDD">
This try to hide the animation, but it is not working on IE10. <br/> It works fine in others browsers and earlier versions of IE.
</div>
</body>
Update 02/08/2013
I found the same problem in Safari (5.1.7)
Apparently the best solution will be move it off the screen:
.xhide
{
display: block;
position: absolute;
left:-9999px;
}
We can add this class on click to hide it, something like:
document.getElementById('swfDiv').className = "xhide";
Navigating away before closing the iframe solved my problem on a XBAP, I think it will work for flash too
var $iframe = $("#id");
$iframe[0].src = 'about:blank';
$iframe.remove();
Google Chrome has the following input control:
More info on how to use it can be found here.
I need to make the microphone bigger. It would also be nice if I could use a custom image for the microphone. I found that adjusting the width and height of the input element does not make the microphone larger.
#speech {
-webkit-transform: scale(4,4)
}
This is what I worked out:
and the html for that is:
<html>
<body>
<img src="Capture.JPG" alt="Smiley face" width="80" style="margin-top:70px; margin-left:120px; position:absolute;" />
<input style="-webkit-transform: scale(8,8); opacity:.001; width:50px; border:none; margin-left:00px; margin-top:100px;" type="text" speech="speech" x-webkit-speech="x-webkit-speech" />
</body>
</html>
anyways now I could use the events:
onspeechchange="processspeech();"
onwebkitspeechchange="processspeech();"
to place the text where appropriate...
Currently, the only way to increase the size of the microphone is to increase the font-size of the input element.
HTML:
<input type="text" id="speech" value="some text here" x-webkit-speech />
CSS:
#speech {
font-size: 20px;
}
For people still looking for this: I managed to style it by setting the opacity of the speech element to 0, then overlaying it with a visible element that you can style yourself. Then I used jQuery to trigger a click on the speech element when you click on your overlayed element :) This way you can even use your own image!
As a note, as far as I know there will be an edited version of the W3C spec for the speech element in the future, that should give developers more control over the look and feel (source: http://www.adobe.com/devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html)
In Webkit you can enter the shadow DOM to alter the layout of default browser elements. This is how I did it using a custom icon font from icomoon.io (font "Font Awesome" has a nice microphone), but you can of course also use any background image on the input::-webkit-input-speech-button element itself.
input::-webkit-input-speech-button {
-webkit-appearance: none; /* Important to undo default styling. */
height: 100%;
padding: 0 1em;
cursor: pointer;
&:before {
content: '\e601';
font-family: icomoon;
}
}
Is it possible to use uploadify to allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.
I have tried other approaches here, here and here. All are not compatible with all browsers.
What else can I use / do to have my file input element as an image?
I would like to have my file input button to look consistent in all browsers.
I can't remember the source of the technique but this seems to be cross-browser. Tested in:
Google Chrome 9
FireFox 3.6
Internet Explorer 6-9
Opera 10
Safari for Windows
Here is the complete code:
HTML:
<div>
<button><!-- this is skinnable -->Pick a file ...</button>
<input type="file" />
</div>
CSS:
div
{
position:relative;
width: 100px;
height: 30px;
overflow:hidden;
}
div button
{
position: absolute;
width: 100%;
height: 100%;
}
div input
{
font: 500px monospace; /* make the input's button HUGE */
opacity:0; /* this will make it transparent */
filter: alpha(opacity=0); /* transparency for Internet Explorer */
position: absolute; /* making it absolute with z-index:1 will place it on top of the button */
z-index: 1;
top:0;
right:0;
padding:0;
margin: 0;
}
The idea is to make the <input type="file" /> transparent and place it on top of some style-able content (a <button> in this case). When the end user clicks the button she will actually click the <input type="file" />.
The simple way to use a "label" tag and "for" property. Like this http://jsfiddle.net/Txrs6/ but in this case we don't see a chosen file.
CODE
<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`
<input style="display: none;" type="file" id="inputFile">
Another way with js http://jsfiddle.net/PZ5Ep/
Your best bet in that case would be to use a flash uploader. This would introduce a complete separate control and would have no dependency on the browser. There are plenty of them on the net. Here's one : http://swfupload.org/
If it's only the upload button you want to style, why can't you use CSS? That should work across all browsers.
If you put your code on jsFiddle, I can tell you more about what you can do.