I just tried putting text over my video. The video autostarts when hovering it. With the Text on it the hover is "disabled". Is there any option to display the text without effecting the hover? Text is absolute.
I use a js to start the video. The Text is in a div on top.
window.onload = function() { //executes this code after the DOM loads
//--- this is the selector element. Feel free to change this if you don't want all video objects targeted.
const vids = document.getElementsByTagName(`video`)
//--- Now we loop over all of the selected elements and add event listeners
for (let i = 0; i < vids.length; i++) {
vids[i].addEventListener( `mouseover`, function(e) {
vids[i].play()
})
vids[i].addEventListener( `mouseout`, function(e) {
vids[i].pause()
})
}
}
Image from Webinspector
So you can add the two following css properties to the text object so that the user cannot interact with them.
.text-class {
user-select: none;
pointer-events: none;
}
If you still want the users to be able to select the text, say if copy & pasting the text is important you can just do.
.text-class {
pointer-events: none;
}
Related
How can i change image source on hover with only CSS
i tried but was able to find only answers with javascript.
this is my code:
<img src="">
i want to change image to 1.gif when user mouse hover it.
you can target the image first. and then from there when user mouser over the image you can change src attribute
target image.
const img = document.getElementById('imgId');
make mouser over event like this
img.addEventListener('mouserover', callback);
then you make your own function like this
function callback(event) {
if (img.src=== '1.gif') {
img.src = '2.gif';
}
}
return the 1.gif image when the mouseout
img.addEventListener("mouseout", anotherCallback);
function anotherCallback(event) {
if (img.src !== "1.gif") {
img.src = '1.gif';
}
}
I am using html2canvas.js 0.4.1 to convert a DOM to canvas for printing. When the text has a background color on a span, and the span wraps to the next line, then the canvas version covers the whole rectangle of the 2 wrapping lines. It doesn't just cover the text. Furthermore it hides the text in the prior span.
The following fiddle demonstrates it pretty well. The 'one one' span is completely covered up by the blue background on the 'two two' span.
https://jsfiddle.net/sddah9k2/1/
css:
#content {
width:200px;
}
.select {
background-color:#3efcdb
}
html:
<div id='content'>
<span >one one one one one one </span>
<span class="select" >two two two two two two </span>
<span >three three three three three </span>
</div>
<div id="img-out"></div>
code:
html2canvas($("#content"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
My theory is html2canvas can't tell what the bounding box of the spans are, or maybe it just doesn't support multiple rectangles as bounds.
Is there any type of CSS effect I can use on the HTML text that will render correctly in html2canvas? It doesn't have to be a background color, but I have to somehow indicate that the wrapping span is highlighted.
Canvas does not support multi line inline texts. So your libraries splits it up, but the wrapping .select box gets the dimensions like an inline-block element.
You need to split and wrap every highlighted word with a seperate span.
JS:
var $selected = $('#content.notupdated .select');
$selected.each( function() {
var $this = $(this);
var words = $this.text().split(" ");
$this.empty();
$.each(words, function(i, v) {
$this.append($("<span>").text(v + ' '));
});
});
$('#content.notupdated').removeClass('notupdated').addClass('updated');
I updated you fiddle for that: https://jsfiddle.net/sddah9k2/7/
I even updated #Kaiidos improved fiddle of yours: https://jsfiddle.net/sddah9k2/6/ (I worked primarily on that one)
I already accepted Seika85 answer since his was the first. Here is what I ended up with, retaining the original span and also to do this for every 'select' span:
link:
https://jsfiddle.net/sddah9k2/9/
js:
// Get all the select spans
$('span.select').each(function (ix, block) {
// split the text spans on word so it wraps in the same place
var txtar = $(block).text().split(' ');
// Remove the class on the outer span, but keep it intact.
$(block).removeClass('select');
$(block).html(''); // empty it
// Replace each word. Note the space before closing span!
$(txtar).each(function (ix, txt) {
$(block).append($('<span class="bg">'+txt+' </span>'));
});
});
css:
.select {
background-color:#3efcdb;
}
.bg {
background-color:#3efcdb;
}
On the following site:
Link to site with issues
I have three buttons at the bottom of each thumbnail (hover to see them). The three buttons open up a prettyphoto box that uses the title attribute under the image (hidden as white currently next to the gallery nav buttons).
I need the HMTL title attribute to remain within the HTML. I just do not need the ugly tooltip when you hover over the buttons.
Does anyone know how to remove hover title tooltip on links?
I think you are after a workaround like this:
First put a class suppress on every link you want its tool-tip to be removed on hover:
<a class="suppress" title="">link text</a>
Then you may have this snippet in your code:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].className == 'suppress') {
links[i]._title = links[i].title;
links[i].onmouseover = function() {
this.title = '';
}
links[i].onmouseout = function() {
this.title = this._title;
}
}
}
I have a main div (parent) with a input (child) and 2 other child div (clickable).
I want to capture focus out event for the main div - not when input or other 2 clickable div are clicked or focused. I have set up an event handler using jQuery to capture focusin focusout events on all the elements.
What I see is when I click on the input:
first input is focused
then the main div.
If I click on any other clickable divs
event fires first focusout for input
then main div and then other div gets focus in and main div get focusin.
I don't want main div to loose focus when clicked on other clickable divs.
How can I achieve this? I want to validate the input on lose focus but not when clicked other divs.
So far this is what I have : Fiddle
HTML :
<div id="main">
<input id="i" type="text" />
<div id="Div2" class="icons" style="background-color:blue; right: 25px;" onclick="log('Clear Clicked');"></div>
<div id="Div1" class="icons" style="background-color:red;" onclick="log('DD Clicked');"></div>
</div>
CSS :
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
#main {
top: 50px;
left: 200px;
position: absolute;
border: 1px solid #00bfff;
width: 250px;
height: 27px;
}
input {
border: none;
width: 248px;
height: 25px;
position: absolute;
z-index: 200;
}
.icons {
text-align:center;
border:1px solid blue;
height: 23px;
width: 23px;
position: absolute;
top: 2px;
right: 2px;
z-index: 99999999999999999999999;
background-position: center;
background-repeat: no-repeat;
}
jQuery :
$("#main").focusin(function () {
log("Main div got focused");
});
$("#i").focusin(function () {
log("input got focused");
});
$("#Div2").focusin(function () {
log("dropdown div got focused");
});
$("#Div1").focusin(function () {
log("clear div got focused");
});
$("#main").focusout(function () {
log("Main div lost focused");
});
$("#i").focusout(function () {
log("input lost focused");
});
$("#Div2").focusout(function () {
log("dropdown div lost focused");
});
$("#Div1").focusout(function () {
log("clear div lost focused");
});
function log(msg) {
//window.console.log(msg);
$("body").append("<p>" + msg + "</p>");
}
Any help or guidance appreciated
Here is a best way to solve, because I had the same problem too ^_^
There is a attr of event: "relatedTarget"
relatedTarget will provide the next element of this event
So, if next element is not your box OR anything inside your box, trigger focus out.
But FIRST you have to let your <div> element focusable, you have to add tabindex='-1' on div like this
<div id="main" tabindex='-1'>
the script is short:
$("#main, #main *").blur(function(e){
if(!$(e.relatedTarget).is("#main, #main *")){
//focus out.
}
});
The focus will lost and get inside #main, but you can do anything when the focus is lost from #main area.
This is a little different to your request, but I guess this may be what you want.
If this is, the code would be very clean.
Based on this accepted answer Is there a way to use event.preventDefault with focusOut? If not, why?
$(document).on('mousedown', function (event) {
target = event.target;
main = document.getElementById("main");
input = document.getElementById("i");
if (target == input) return true;
parent = event.target.parentNode;
if (parent == main) {
event.preventDefault(); //prevent default DOM action
event.stopPropagation(); //stop bubbling
return false; // return
}
});
OK, so it looks like you are constructing some sort of input widget. I see that the #main div is the outer container of the widget, the input is for entering text, and then you have two other divs serving as buttons or something. You want to validate the value of the input when the user tries to exit the widget, and you are trying to capture this event by listening for focusout on #main. This won't work because a div isn't an element that can receive focus. See the answer here for more.
I can prove to you that your div isn't focusable with a little experiment:
If you put e.stopPropagation() in both your focusin and focusout listeners for your input, you'll see that your main div is never actually focused or unfocused itself; it was just receiving the focusin and focusup events as they bubbled up the DOM tree from your input.
So, this means we have to tackle your problem from another angle.
Let's describe what it means for your widget to lose focus with a short user story:
User clicks on the input/#main/#Div1/#Div2 -- widget gains focus
User clicks on input (if he/she hasn't already) and types some text -- widget focus is not lost
User clicks somewhere on #main -- widget focus is not lost
User clicks #Div1 and then #Div2 -- widget focus is not lost
User clicks somewhere else on the page -- widget focus is lost -> validation runs
We now know exactly which events during which states should cause validation to run.
First, let's keep track of the 'focus' state of the widget with a boolean variable:
var isFocused = false;
The widget starts out in the unfocused state and becomes focused when there is a click anywhere in #main or its children OR when the input is somehow focused (could be via tabbed-into with the keyboard):
$("#main").on('click',function(){
isFocused = true;
});
$("#i").on('focus',function(){
isFocused = true;
});
The only time the widget becomes unfocused is when a) it's focused and b) the user clicks somewhere else on the page:
$(document).on('click',function(){
if(isFocused){
isFocused = false;
//kick-off the validation check!
}
});
But since all events bubble-up the DOM tree by default, multiple clicks within #main will bubble up to document.body and trigger a validation check. To prevent this, we call stopPropagation on the click event in the #main's click handler:
$("#main").on('click',function(e){
isFocused = true;
e.stopPropagation();
});
That's it!
I hope I was correct about what you're after.
Here's a working fiddle with above code.
Here is simple way to do it (As far as i understood)
$('#Div1').click(function(){
log('Clear Clicked');
//$('#main').focusin();
$('#i').focus();
});
$('#Div2').click(function(){
log('DD Clicked');
//$('#main').focusin();
$('#i').focus();
});
here is fiddle
The other way to workaround is to add a small setTimeout before running focusout handler.
You can easily whitelist a list of elements to exclude with and clearTimeout when they get focusin.
Div don't have a placeholder attribute
<div id="editable" contentEditable="true"></div>
I want <Please your enter your Name> to show in DIV when the User backspace the whole text in the DIV, or no text on inside, How can I do it?
Here is a pure CSS only solution:-
<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-ph)
}
</style>
Here, we basically select all contentEditable <divs> that are empty & blurred. We then create a pseudo element before the CSS selection (the editable div) and fix our placeholder text (specified the data-ph attribute) as its content.
If you are targeting old school CSS2 browsers, change all occurrences of data-ph to title
Correction.......the :empty selector is not supported in IE version 8 and earlier.
What I find in other answers is that when using :not(:focus) pseudo class, I have to click again in order to get the blinking cursor and be able to type. Such issue doesn't happen if I click on an area other than the placeholder.
My workaround is simply removing :not(:focus). Even though in this way the placeholder will still be there after I click on the editable div, I'm able to type no matter where in the div I click, and the placeholder disappears immediately after I type something.
BTW, I inspected YouTube's comment div implementation, seems they are doing the same thing, e.g. #contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty:before
.editableDiv1,
.editableDiv2 {
border-bottom: 1px solid gray;
outline: none;
margin-top: 20px;
}
.editableDiv1[contentEditable="true"]:empty:not(:focus):before {
content: attr(placeholder)
}
.editableDiv2[contentEditable="true"]:empty:before {
content: attr(placeholder)
}
<div class="editableDiv1" contentEditable=true placeholder="If you click on this placeholder, you have to click again in order to get the blinking cursor and type..."></div>
<div class="editableDiv2" contentEditable=true placeholder="Click on placeholder is fine, it'll disappear after you type something..."></div>
You can try this one !
html:
<div contentEditable=true data-text="Enter name here"></div>
css:
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text) }
check it out (demo)
in HTML
<div id="editable" contenteditable="true">
<p>Please your enter your Name</p>
</div>
in JavaScript
jQuery.fn.selectText = function(){
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$("#editable").click(function() {
$("#editable").selectText();
});
jsFiddle