I found a solution to highlight words in a page using what Wendel Nascimento wrote on this site.
What I'm looking for is if this can be done on a page that is embedded. So highlight words on an embedded page (in the same domain). How can this be done?
Below the code of how to highlight words on the same page. When I simply replace the h1 part with a iframe or embed tag and refer to another page on my domain with the text nothing is highlighted.
<html>
<head>
<style>
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1 id="colouredText">This is a green text, and here a red text. This is green too and this again a red text</h1>
<script>
var text = document.getElementById("colouredText");
var words = text.innerHTML.split(" ");
for(var i = 0; i < words.length; i++) {
if(words[i] == "red") {
words[i] = "<span class='red'>" + words[i] + "</span>";
}
if(words[i] == "green") {
words[i] = "<span class='green'>" + words[i] + "</span>";
}
}
text.innerHTML = words.join(" ");
</script>
</body>
Related
var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 2000);
});
p {padding: 75px 15px 15px 15px;text-align: center;}
#dvImage {background-size:cover;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvImage" style="width: 600px;height: 400px;">
<div id="text">
<p>How do I get this text to stop fading?</p>
</div>
</div>
I'm trying to create a background image rotator, that changes images and fades between each image. I've almost got it, but on the site that I'm using it, has a nested image and text, which is also fading. I only want it to fade the background images and not any of the nested div's.
I created an example here with a nested div (and paragraph tag with text).
https://jsfiddle.net/bobthegoat2001/3hrgua82/6/
Does anyone know how I could fix this? Any help would be great. Thanks!
<p style="display:none">I guess Stack Overflow wanted some code, so I just put some random here. The jsfiddle will make more since.</p>
You can use position absolute and then set z-index to -1 but you need to move nested div's out of your div #dvImage
var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 2000);
});
p {padding: 75px 15px 15px 15px;text-align: center;}
#dvImage {position:absolute; z-index:-1;width:600px; height:400px; background-size:cover;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvImage"></div>
<div id="text">
<p>How do I get this text to stop fading?</p>
</div>
Result has no space.
Code has a space between words.
How do I fix this? I need to use inline-block (or any inline display) because my animation won't work without it.
CSS
This is the javascript for the animation.
const text = document.querySelector("h1");
const strText = text.textContent;
const splitTxt = strText.split("");
text.textContent = "";
for(let i=0; i < splitTxt.length; i++){
text.innerHTML += "<span>"+ splitTxt[i] + "</span>";
}
let char = 0;
let timer = setInterval(onTick, 50);
function onTick() {
const span = text.querySelectorAll('span')[char];
span.classList.add('fade');
char++;
if(char === splitTxt.length) {
complete();
return;
}
}
function complete() {
clearInterval(timer);
timer = null;
}
Edit: I fixed this by putting a in between the letters.
If you want every word of the h1 to be inside of a span tag, you should do the split with a whitespace, like this:
const splitTxt = strText.split(" ");
In your code you have the quotes inside the split function without the space between, and that will cause that every character to be in a span.
You mean this?
header {
position:relative;
height: 200px;
width: 200px;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
}
<header>
<h1>
myText
</h1>
</header>
Saying I have an input type="file" field. One can drop a file on this input(like in Firefox) instead of clicking "browse" and selecting the file.
Now, I want to customize it a bit, by changing the field's background color when one is about to drop a file in the input. I cannot really use :hover since it matches even when you're not drag&dropping. Is there a CSS (pseudo-class) to do that?
And is there a CSS way to style different if the file being dropped is not accepted and if it is? Say, if the field accepts only PNG files using accept attributes, I would make the field green if you're about to drop a PNG file on it, and red if that's another type of file.
Is there a CSS way to do these today? Is there a planned way to do so in CSS (like in upcoming specs/in current specs but not implements anywhere)?
UPDATE: Thanks to #Renato's comment, according to https://github.com/w3c/csswg-drafts/issues/2257, the drop pseudo-class has been dropped now.
There is :drop and :drop() pseudo-class, which is currently in Working Draft status.
According to [moderator: link to spam removed], the browser support is not good.
For "file being dropped is not accepted" case, :drop(invalid active) is expected to work, in future.
I had the same question and solved it a little differently than nashcheez. Still using JavaScript, though (I used jQuery here to simplify things):
function drag(ev) {
ev.dataTransfer.setData("text", "foo");
}
function allowDrop(ev) {
$(ev.target).attr("drop-active", true);
ev.preventDefault();
}
function leaveDropZone(ev) {
$(ev.target).removeAttr("drop-active");
}
function drop(ev) {
ev.preventDefault();
$(ev.target).removeAttr("drop-active");
alert(ev.dataTransfer.getData("text"));
}
#draggableItem {
height: 50px;
width: 150px;
background-color: #eee;
}
#dropZone {
height: 50px;
width: 150px;
background-color: #efe;
}
#dropZone[drop-active=true] {
box-shadow: inset 0px 0px 0px 2px #00C;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggableItem" draggable="true" ondragstart="drag(event);">Drag Me</div>
<div id="dropZone" ondragover="allowDrop(event);" ondragleave="leaveDropZone(event);" ondrop="drop(event);">Drop Here</div>
I've tested this on Safari, Firefox and Chrome, but I haven't tried IE. I'm probably breaking a rule with the custom attribute, but it seems to work while I'm waiting for CSS4.
There is absolutely no pure css cross-browser solution currently for changing element's properties when dragging and dropping elements into the browser window.
What you are trying to do here can be achieved by Javascript/jQuery using a hidden container and showing it only when the object is inside the draggable container.
There is this demo I had saved earlier if you would like to have a look into:
var resetTimer;
var reset = function() {
$('#d1').hide();
};
var f = function(e) {
var srcElement = e.srcElement ? e.srcElement : e.target;
if ($.inArray('Files', e.dataTransfer.types) > -1) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';
if (e.type == "dragover") {
if (resetTimer) {
clearTimeout(resetTimer);
}
$('#d1').show();
console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
} else if (e.type == "dragleave") {
resetTimer = window.setTimeout(reset, 25);
} else if (e.type == "drop") {
reset();
alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
}
}
};
document.body.addEventListener("dragleave", f, false);
document.body.addEventListener("dragover", f, false);
document.body.addEventListener("drop", f, false);
body {
border: 1px solid black;
}
#d0,
#d2 {
border: 1px solid black;
}
#d1 {
border: 1px solid black;
display: none;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="d0">drag files onto this page</div>
<div id="d1">-> drop here <-</div>
<div id="d2">and stuff will happen</div>
</body>
There is no CSS-Solution. My isue was to change Color on drag-over (Chrome does not support, Opera does)
I do it this way:
`<input id="xyz" type="FILE" value=""
ondragover ="this.style.backgroundColor='#88FF88';"
ondragleave="this.style.backgroundColor='#FFFFFF';"
/>
<input type="button" onclick="srFU(this);" value="send File" />`
(Originally : To transform or not to transform)
I wanted to start spinning the DIV box so it would spin behind the text boxes. BECAUSE the text boxes did not seem to care what I did with the DIV I just made the javascript spin the DIV. To my surprise - by spinning the DIV the text boxes spun with the DIV and when they went outside of the DIV boxes area - they are now clipped. If I comment out the transforms the text boxes go back to ignoring anything I do with the DIV. So ideas why it is doing this? Do I maybe have to always do a transform and just set the degrees to zero(0)? Ideas and comments are welcome. :-) Here is the code:
PS: I put in the BODY's "overflow:hidden;" because I was testing that out too. Just a FYI. :-)
<html>
<head>
<title>Test</title>
<style>
.p1 { position:absolute;
top:50px;
left:50px;
border: 1px solid grey;
padding: 5px;
font-family: sans-serif,Arial,Helvetica,Verdana,"Trebuchet MS",Tahoma,"MS Sans Serif",Geneva;
font-size: 12pt;
width: 150px;
height: 10pt;
overflow: hidden;
z-index:0;
}
</style>
</head>
<body style='overflow:hidden;'>
<div id='d1' name='d1' style="width:500px;height:400px;overflow:hidden;z-index:1;
border:1px solid black;clip: rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);">
<p id='p1' name='p1' class='p1'>This is a test of how HTML works</p>
<p id='p2' name='p2' class='p1'>This is a test of how HTML works</p>
<p id='p3' name='p3' class='p1'>This is a test of how HTML works</p>
</div>
<script>
function moveIt(n)
{
document.getElementById("p1").style.left = n;
document.getElementById("p2").style.top = n;
document.getElementById("p3").style.left = n;
document.getElementById("p3").style.top = n;
// document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
if( n < 2000 ){ setTimeout("moveIt(" + (n + 1) + ")", 1 ); }
else { moveIt2(n); }
}
function moveIt2(n)
{
document.getElementById("p1").style.left = n;
document.getElementById("p2").style.top = n;
document.getElementById("p3").style.left = n;
document.getElementById("p3").style.top = n;
// document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
if( n > -1000 ){ setTimeout("moveIt2(" + (n - 1) + ")", 1 ); }
else { moveIt(n); }
}
moveIt(50);
</script>
</body>
</html>
A CSS transform on a parent element affects all the parent's children. That's why the text rotates.
You can prevent their rotation by applying a negative rotation equal in amount to the parent's positive rotation.
Also: You need to supply units such as px when setting the position of elements, like this:
document.getElementById('p1').style.left = n + 'px';
Working Fiddle
I want to create Web pages that allow users to drag and drop images into boxes in various parts of the page, so that they can then print the pages with their images.
I want the image to automatically resize when it's dropped in the box. I combined some of the code at http://html5demos.com/file-api with some of the code at http://html5demos.com/file-api-simple to get something like I want.
In the current version of the code (below), the image width does not resize the first time you drop the image into the box, but it does the second time.
Any suggestions how I can get the image width to resize automatically the first time you drop the image into the box?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Test</title>
</head>
<body>
<header>
<h1>HTML5 Test 1</h1>
</header>
<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>
<article>
<div id="holder"></div>
<p id="status">File API & FileReader API not supported</p>
<p>Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file - without uploading the file to any servers.</p>
</article>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.src = event.target.result;
// note: no onload required since we've got the dataurl...I think! :)
if (img.width > 300) { // holder width
img.width = 300;
}
holder.innerHTML = '';
holder.appendChild(img);
};
reader.readAsDataURL(file);
return false;
};
</script>
</body>
</html>
I found a simple answer that I think works really well for my needs, based on a bit of CSS in http://demos.hacks.mozilla.org/openweb/DnD/dropbox.css used for http://demos.hacks.mozilla.org/openweb/DnD/.
In the code I included in my question above, I added this to the CSS code:
#holder > * {
display: block;
margin: auto;
max-width: 300px;
max-height: 300px;
}
and I deleted this:
if (img.width > 300) { // holder width
img.width = 300;
}