We Keep Coding

Tooltips work in Firefox but not in Chrome

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.

Making a JS toggle div close when another is opened, and change image on click

I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!

You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});

Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.

Trying to make a button in html with javascript

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.

Resize the input type="file" browse button in firefox?

Is there anyway using CSS or JS that you can resize the input type="file" Browse button in firefox?
I know you cannot change the text of the button but all I need to do is make this button wider for firefox. So using a -moz css rule would be perfect.

Styling file input buttons is very limited for security reasons. There are some workarounds, but none are perfect. Check out this post on QuirksMode:
http://www.quirksmode.org/dom/inputfile.html

Edit: As others have noted firefox does not suuport the method below I would refer to the following link http://www.quirksmode.org/dom/inputfile.html
The following is a pretty simple solution. I would advise adding a class to the label though. Basically you style the label instead of the input avoiding cross browser issues and width and height bugs:
<label>
<input type=file>
</label>
CSS
label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;}
label {background:green;width:200px;height:100px;display:block; /* more styles here */}
http://jsfiddle.net/DVLxp/

Here is the main idea: http://www.quirksmode.org/dom/inputfile.html
And this might be helpfull for resizing input area
input{font-size: 100px;}
Works fine for me.

What websites often do when they need a "customized" file upload widget: have the "real" file upload field hidden. Add a text field that will show the current value of the file upload field and a button that will trigger file selection in the file upload field. Here an example:
<input id="file" type="file" style="display: none;"
onchange="document.getElementById('text').value = this.value;">
<input id="text" type="text" readonly><input type="button"
onclick="document.getElementById('file').click();" value="Choose file">

Try this one: http://jsfiddle.net/CnHj5/
Works in Firefox and a nice pointer cursor is available.
HTML:
<div class="upload">
<input class="upload" type="file" />
</div>
CSS:
input.upload {
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
position: absolute;
right:0;
font-size: 200px;
cursor: pointer;
}
div.upload {
background-color:green;
width:200px;
height:100px;
position: relative;
display:block;
overflow:hidden;}

As for me, Zhenya Shevchenko gave one of the best working solutions. Using his method, we can create cross-browser file input button: http://jsfiddle.net/JHcFR/
<div class="fileInput">
<input type="file" />
</div>
.fileInput {
overflow: hidden; width: 500px; height: 200px; background: red;
}
.fileInput input {
font-size: 200px; opacity: 0;
float: right; filter: alpha(opacity=0); /*IE*/
}

A file input button for all browsers, is this possible?

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.