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.

Use classList.toggle on external CSS

So I've been messing around with JS, and I wanted to make a dark theme toggle button as seen here.
However, that tutorial only shows how to make it work with the <style> tag in HTML, not using an external CSS file.
How could I make it toggle the class .d_theme from an external CSS file?

No difference between external and internal CSS when you use JS to toggle
document.getElementById("chk").addEventListener("change",function() {
document.getElementById("x").classList.toggle("mystyle",this.checked)
})
/* This can be in an external file */
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<label><input type="checkbox" id="chk">Change theme</label>
<div id="x">Here is some text</div>

How to change the default value of color input in Google Extension

I am building an extension and in my settings.html file I have a color input:
<input id="input_color" style="width: 20px; margin-left: 8px; margin-top: 3px;" type="color" value="#ff0000"><span class="radio"> Highlight color</span>
I thought that setting up the value="" will make the default color red, but If I install the extension, the color is set to black. I haven't find a solution of changing the color so It would be red after the installation of the extension.
What is the correct way of implementing this?

Try adding it to the style property instead
<input id="input_color"
style="width: 20px; margin-left: 8px; margin-top: 3px; color: #ff0000">

Replacing static background image with simple j Query slideshow

I'm busy building a website and have a banner in it. The banner consists out of a static background image with static text overlay.
Now I want to keep the banner with the text overlay, but replace the static background image with a simple slideshow. The images should be replaced every 3 seconds. It should be a continuous loop, triggered on page load event. This function should utilize jQuery.
This is the html code for the banner as it is at the moment:
<!--BANNER HTML-->
<div class="banner">
<div class="banner-text">
<h1>LONG LAYOVER?</h1>
<h1>Is Amsterdam Schiphol your transfer hub?</h1>
<h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
</div>
</div>
This is the CSS:
.banner h1, .banner h1, .banner h4 {
margin: 0;
text-shadow: 2px 2px 6px #000;
text-align: center;
}
.banner {
color: white;
background: url(images/bannerimage.png) top left/cover no-repeat;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Does anybody have a smart solution to my problem?

The simpliest answer comes to my mind is defining functions and call them in timeout functions as shown in the DEMO here
You can also use togglaClass instead of .css() function. I would prefer toggleClass but just did this was is quicker for me.

Need help in writing into an iFrame

I am facing issues in writing into iframe, I am able to identify the iframe but I am not able to write anything into the frame. Whenever I try to write into the frame I am getting below error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
Command duration or timeout: 211 milliseconds
Build info: version: '2.43.1', revision: '5163bce', time: '2014-09-10 16:27:33'
This is the screenshot of my HTML Code.
HTML Snippet:
<div id="offer_description_field" class="control-group wysihtml5_type description_field ">
<label class="control-label" for="offer_description">
Description
</label>
<div class="controls well">
<ul class="wysihtml5-toolbar" style="">
<textarea id="offer_description" class="bootstrap-wysihtml5ed" rows="3" name="offer[description]" data-richtext="bootstrap-wysihtml5" data-options="{"csspath":"/assets/bootstrap-wysihtml5.css","jspath":"/assets/bootstrap-wysihtml5.js","config_options":"null"}" cols="48" style="display: none;"></textarea>
<input type="hidden" name="_wysihtml5_mode" value="1">
<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px; width: 327.8px; height: 60px; top: auto; left: auto; right: auto; bottom: auto;"></iframe>
<p class="help-block">Required. Add offer description.</p>
</div>
</div>
When I create a simple HTML file with above code snippet I am not able to interact with element. Manually I am able to write anything inside this iframe when it is coming with full code base. Looks like it is replacing the textarea with iframe. Not sure how to deal with this type of element.
This is how it appears on the panel.
Can anybody help?

This error doesn't have to do with the IFRAME. In fact, the element you are interacting with isn't inside the IFRAME. The reason you can't interact with it is stated in the error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
The element is not visible. If you look at the TEXTAREA element, it is marked with style="display: none;" which is why it is not visible. Selenium was designed to interact with the page as a user would and so will not interact with hidden elements. You will need to approach this problem as a user would... how would a user get that text area to appear? I'm assuming click something, etc. You will need your script to execute whatever a user would do, then the TEXTAREA will become visible, and will be able to be interacted with.

you should takecare of following things while working with frames :
1.Select the frame .
then enter into the text/textarea.
Note: sometimes the elements are not in the visible area in the UI hence we may required to take the element into view port , following below code spinet before entering into the text/textarea :
WebElement element = driver.findElement(By.id("id_of_element"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
2.then deselect the frame .
Hope this would work for you .

Switch into that iframe either by id/class using following code
driver.switchTo().frame(driver.findElement(By.id("Enter id of element")));
OR
driver.switchTo().frame(driver.findElement(By.class("Enter class of element")));
Once you switched to the frame select the element with your normal steps.
like
driver.findelement(By.id/class/css/xpath("Enter Element id/class/css/xpath"));
Then, if you want to select any other element from the main frame, simply go back to your main frame with following code
driver.switchTo().defaultContent();