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.
Related
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.
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.
My javascript is supposed to remove a DIV from it's id when the time is past 20 hours. But it doesn't seem to work with following code.
JS:
if (new Date().getHours() > 20) {
document.getElementById("carttext").remove();
}
HTML:
<div class="block block-cart-header" style="padding: 0px;" id="carttext">
<div class="block-content" style="background: none; padding: 2px; min-height: 10px; text-align: center; background-color: #e2e2e2;">
<span style="font-size: 10px;" id="ordertext">Modtag <span id="day1"></span>, bestil før</span><br>
<b id="countdown1" style="color: black;"></b>
</div>
</div>
A possible scenario and most common mistake could be that your JavaScript is processed even before the DOM element is created, this means your JavaScript is looking for an element and removing it even before it is created (This should log an error message in console). After JS is processed, your DOM is created and so is your ElementById("carttext"). That is why you are not seeing the results you expect.
What you should do is make sure <script> tags are placed at bottom of your HTML document.
Also, log the messages of your actions in console, it will help you a lot tracing the errors.
Edit 1: The coders in comments are saying the same thing, make sure you fix that.
I have the following problem:
When the text I wrote is to long for the DIV, it breaks at unpleasant places, how do I set it at where to break?
Long text: Test: Hello My Name Is Tim4497
But it breaks after "Test:" so it looks like below:
Test:
Hello My Name Is Ti
Do you know how to make it look like:
Test: Hello My Name
is Tim4497.
after the line break, it has to line up after "Test:"
Also, if it breaks into multiple lines, the line spaces must be the same.
So far this is what I have but doesn't do what I wanted.
HTML-Code:
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
How to solve this problem with JS or Html/CSS?
Thank you :),
tim4497
There are many ways to do it... Perhaps one of the cleanest would be through css table and table-cell. This will place your elements side-by-side perfectly.
Make your wrapper div a display: table and your spans display: table-cell. (don't forget to put your ":" inside a span too, for better visual)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS:
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/ - Resize the screen and see, or set a width to the last span...
You can use floated DIV's to achieve something like this effect:
<div style="width: 200px; background: blue;">
<div style="float:left; background: red;">Name:</div>
<div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
<div style="clear: both;"></div>
</div>
Floating can be a complicated topic if you don't know much about it, though. See All About Floats from css-tricks.com.
http://jsfiddle.net/eezpzj0L/
I currently have a web site in which I am using some Javascript to change the Background of a DIV.
The DIV is defined as follows :
<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
and the Javascript I am using is as follows :
var docEl = document.getElementById('outerscreen');
docEl.style.backgroundImage = "url('pics/intro.gif')";
My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.
Can anyone shed any light on what the problem is and how I might be able to resovle this.
Thanks in advance
Chris
Assuming that you have some content inside #mainscreen, the most likely explanation is that #mainscreen is floated, so it isn't used when calculating the height of it's parent, but that you have a Doctype (or no Doctype at all) that triggers Quirks mode in Internet Explorer, so it doesn't allow floats to fall through the bottom of their containers.
Add a Doctype that triggers standards mode (so IE will be more consistent with other browsers)
set overflow: hidden on #outerscreen
This does work in FF4 and Opera10. You need to specify the height and width of <div id="outerscreen">, or have some content inside which takes up screen real estate for this effect to be visible.
Although i don't recommend using a table for your layout here is a solution that works better and gives you more control
<style type='text/css'>
.outerCell {
width: 750px; height: 300px; background-color: Black; border: 0px;
}
.outerScreen {
background-image : url('pics/intro.gif');
height: 300px;
}
</style>
<td class='outerCell' >
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
now the javascript:
var docEl = document.getElementById('outerscreen');
docEl.className = "outerScreen";
Having your style defined in a css is more flexible when you want to make changes,
code seperation is always good
I think the problem is with the '
try:
docEl.style.backgroundImage = "url(pics/intro.gif)";