I have made a simple javascript which during window.onload fades in the body when finished.
I want to create an overlay with a specific class instead which shall do the reverse. I want the overlay to simply fade out and after the animation the object would be destroyed or set as display:none.
<style>
body {
opacity: 0;
transition: opacity 500ms ease-in-out;
}
</style>
<script>window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};</script>
How to accomplish this in the best way possible?
You asked with a jQuery tag so i anwser you with a jQuery code.
$(function() {
var $overlay = $('#overlay');
$overlay.css('opacity', 0);
setTimeout(function() {
$overlay.remove();
}, 500);
});
#overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
transition: opacity 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</div>
<div id="overlay"></div>
You can achieve this by adding a class to <body> on load and defining any styles and transitions in CSS.
While this technique ensures inheritance throughout your document, enabling any number of solutions, the most straightforward is to utilise an :after pseudo element on your <body>:
window.onload = function () {
// add a 'ready' class once the window has loaded
document.body.classList.add("ready");
};
body {
background: red;
color: white;
text-align: center;
}
/* this creates your overlay without unnecessary HTML markup */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
/* transition the overlay out when body has a 'ready' class */
body.ready::after {
opacity: 0;
visibility: hidden;
/* transitioning visibility to "hidden" allows a seamless opacity transition */
transition-property: opacity, visibility;
/* Set your animation duration here */
transition-duration: 0.4s;
}
<h1>Awesome content</h1>
Sidenote: To allow for users without javascript enabled (who would otherwise see a blank screen), you might also consider allowing a 'no-js' class on <html> (replaced with 'js' in your <head>). Your css pseudo declaration would then be: html.js body::after{...}. More info: What is the purpose of the HTML "no-js" class?
Related
I am working on an assignment for University, and I want to create a Rich Text Editor using HTML, CSS and JS.
I am using the MIDAS API and I know it is not recommended to use it but it's only for a short term project.
My problem is with printing the content of my div since it always appears where my div is situated and not on the top of my page.
Requested Solution: A way to print only the content of the contenteditable div or a way to move it to the top of the page.
HTML
<button class="fa fa-print" onclick="printtext()"></button>
<div id="editor1" class="border1" contenteditable="true" style="min-height:10em; padding:1em;">
</div>
JS
function printtext() {
window.print();
}
CSS
<style type="text/css" media="print">
body {
visibility: hidden;
}
#editor1 {
visibility: visible;
border: none !important;
}
#page { size: auto; margin: 0; }
</style>
Funny enough when i was creating this question, the bulb in my head lit.
I added these 3 lines to my CSS.
CSS
#editor1 {
visibility: visible;
border: none !important;
position: absolute;
z-index: 1;
top: 5em;
}
I have several HTML elements that I need to display a tooltip on hover. These are not conventional HTML elements and come from a generated script on the backend, which I do not have permissions to alter. What I want to know, from a front end perspective, is how I can display a tooltip without declaring this in the HTML.
I tried using Bootstrap tooltips, but you need to declare this in the HTML tag as a title, so it's not useful. So, as the example shows below, I need some text saying 'Action' to appear in a tooltip when you hover over the 'Action' element that contains 'should'. Same will be applied when you hover over the text 'approximate number of' contained in the 'Quantifier' element - the word 'Quantifier' should be displayed. Hope this makes sense.
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
<script>
$(document).ready(function(){
$("Action").hover(function(){
});
$("Quantifier").hover(function(){
});
});
</script>
<body>
So far non-conclusive, as I can only change CSS values and not tooltip text.
You can try updating the title property on those elements. One thing to note is that HTML tags will appear in lowercase when compiled.
$(document).ready(function() {
var style = document.createElement('style');
style.type = 'text/css';
$('head')[0].appendChild(style);
style.innerHTML =
`action, quantifier {
position: relative;
display: inline-block;
margin-top: 20px;
}
action[title]:hover:after, quantifier[title]:hover:after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
action[title]:hover:after {
color: red;
border: solid 1px black;
}
quantifier[title]:hover:after {
color: blue;
border: solid 1px black;
}`;
$('action')[0].title = 'Action';
$('quantifier')[0].title = 'Quantifier';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>
add a tooltip for an tag with JS/jQuery without change the html structure. You can modify the css based on requirement.
jQuery(function($){
//If you are able to add class then use $('.add_tooltip').hover
// use $('Quantifier, Action').hover
$('Quantifier, Action').hover(
function () {
//let text = $(this).html(); //this is for html content of hover element
let text = $(this).prop("tagName");
//Add the tag name of hover element to tooltip div
$(this).append('<div class = "tooltip">'+text+'</div>');
//display the tooltip with animation.
$(this).find('.tooltip').hide().fadeIn('slow');
},
//On hover out remove the tooltip.
function () {
$(this).find('.tooltip').remove();
}
);
});
Quantifier, Action{
cursor: pointer;
position:relative;
}
.tooltip{
display: inherit;
background: black;
margin: auto;
padding: 10px;
position: absolute;
z-index: 1000;
width: 200px;
height: 40px;
color: #fff;
top: 18px;
left:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
I have a php sql query that will generate a lot of images, and I need a code that will overlay a semi transparent image on top of the original image on hover.
I've seen a lot of code to do this with CSS, but that will add a ton of html code that I don't think is needed. The query can return up to like 4000 results with 40x40 images and I need just one overlay image to overlay all of them (only the one hovering) on hover.
So technically, this is what I need
Javascript
find class or id iconoverlay
onhover overlay this transparent image
HTML
<img src="" class or id="iconoverlay" />
I'm currently using JQuery in my site but I'm not familiar with javascript.
If you have a span, a or similar block tag wrapping img. You can do this:
<a class="imgHover" href="#"><img src="" /></a>
<style>
.imgHover { display: inline-block; position: relative;}
.imgHover:after {content:''; width: 100%; height: 100%; background: #000 url('MyPlaceholderURI.jpg') no-repeat center center; display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s linear; }
.imgHover:hover:after {opacity: 1}
</style>
You can see this in action here:
https://codepen.io/fabioarantes89/pen/rwMqNE
here's some code to float a div on hovering over an element:
function createTooltips(elem) {
if (!elem.getAttribute) return;
if (elem.getAttribute('tooltip')) {
$(elem).hover(
function (event) {
$('#tt').html(this.getAttribute('tooltip'));
$('#tt').css('left',(event.pageX + 10) + 'px');
$('#tt').css('top',event.pageY + 'px');
$('#tt').show();
},
function (event) {
$('#tt').hide();
});
}
for (var i = 0; i < elem.childNodes.length; i++) {
createTooltips(elem.childNodes[i], num);
}
}
createTooltips(document.body[0]);
All you need to do then if put your img tags into the "tooltip=" attribute and add to your page
I have a little script that adds a div named "doge" using innerHTML when clicking on a button on my page, and on this page there's a div with a CSS keyframes animation.
However, when I click on the button to add the div named "doge" on my page, the CSS animation is "replayed". Why? How can I fix that?
function addHtml() {
document.getElementById("wow").innerHTML += '<div class="doge">such wow</div>';
}
#keyframes color {
10% {
background: #4CAF50;
}
50% {
background: #3F51B5;
}
100% {
background: #009688;
}
}
.myDiv {
background: #000;
color: #fff;
animation: color 1s;
}
.doge {
background: #F57F17;
}
<div id="wow">
<div class="myDiv">Hi!</div>
<br>
<button onclick="addHtml()">Add HTML!</button>
</div>
JSFiddle
It's because you're modifying all of the element's HTML when you modify the .innerHTML property.
According to MDN:
.innerHTML - Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
In doing so, the DOM assumes that the .myDiv element has just been added which means that the animation is going to be replayed. To work around that, use the .appendChild() method instead:
Updated Example
var div = document.createElement('div');
div.textContent = 'such wow';
div.className += 'doge';
document.getElementById("wow").appendChild(div);
Alternatively, as Teemu points out, you can also use the .insertAdjacentHTML() method:
Updated Example
document.getElementById("wow").insertAdjacentHTML('afterend', '<div class="doge">such wow</div>');
I have a div element which is deliberately too small for the text inside it. I want the overflow to be hidden, but I want the text inside the div to be the 'bottom' of the text block i.e the end of the sentence to be shown and the start of the sentence to be hidden.
It would be even better if I could get an elipsis, e.g INSTEAD of a regular elipsis cutting off the end of a sentence:
|the cat jumped over...|
I would want an elipsis at the beggining of the block i.e
|...over the high fence|
Can anybody help me?
Here's one way:
1) Place the text in a wrapper element with position:absolute and bottom:0
2) Since the text will always be larger than the width of outer div...as the question says:
I have a div element which is deliberately too small for the text
inside it.
...we can set an ellipsis before the text using generated content on the outer element
DEMO
div {
width: 120px;
height: 18px;
overflow: hidden;
position: relative;
border: 1px solid green;
}
div:before {
content: '...';
display: inline-block;
}
span {
position: absolute;
bottom: 0;
}
<div><span>the cat jumped over the fence</span>
</div>