This question already has answers here:
Hide div when user reaches the bottom of page
(3 answers)
Closed 1 year ago.
I have a fixed image
<img id="project-badge" src=x">
with this CSS:
#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
}
The image stays fixed on the right side as the user scrolls down the page.
Im trying to get it to disappear once it's about 50-100px from the bottom of the screen. Some sort of smooth transition disappear would be great too so it's not so sudden.
Can it be done with pure CSS, and if not, how can it be done with Javascript?
$(window).scroll((function() {
// when you have multiple element to disappear
$(this).scrollTop> x && ("your_identy_element").each(function(a){
// effect disappear smooth timeout
setTimeout((function() {
$("your_identy_element").eq(a).addClass("your_styling_disappear")
}), 650 * (a + 1))
})
}
))
maybe what you mean is the paralax landing element effect, I want to give a direct example of the code but I'm too lazy to code and it's quite a hassle, so I gave the youtube tutorial link about paralax landing element "https://www.youtube.com/watch?v=cEkCIn4rY4Q"
but it's language in indonesia, iam suggest you for watch until end and try.
as far as I know, there is no way to do this using CSS however it can be done with javascript using the code below.
window.onscroll = function(event) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
//you can add a css class to you're image element
}
};
You can do this without the overhead of listening and reacting to scroll by using IntersectionObserver.
Plant a 1px element 200px up from the bottom of the content (or wherever you want the badge to start disappearing), observe it so when it is in the viewport the badge fades away and when it leaves the viewport (i.e. the user scrolls up again) fade it in.
let observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
const badge = document.querySelector("#project-badge");
if (entry.isIntersecting) { badge.classList.remove("fadein"); }
else { badge.classList.add("fadein"); }
});
});
observer.observe(document.querySelector("#pixel"));
#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
/* ADDED */
opacity: 0;
transition: opacity 1s;
}
#project-badge.fadein {
opacity: 1;
}
#pixel {
position: absolute;
width: 1px;
height: 1px;
top: calc(100% - 200px);
}
/* JUST FOR THE DEMO */
#content {
background: linear-gradient(to bottom, white, gray);
position: relative;
height: 200vh;
}
#project-badge {
background-image: linear-gradient(to right, cyan, lime);
height: 30px;
width: 130px;
}
<img id="project-badge" src="x">
<div id="content">CONTENT - SCROLL DOWN AND UP TO SEE BADGE FADE OUT AND IN
<div id="pixel"></div>
</div>
I'm trying to code an image which turns to different image by hovering over it.
By clicking on the image an embedded video pops up (in a light box).
I've tried several different things. That's my current code. Hope someone can help me code a lightbox that pops up with an embedded youtube video by hovering over it.
By the way, I'm aiming for something like on this page -> https://www.garyvaynerchuk.com/
thank you already
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
}
.container:hover .overlay {
opacity: 1;
}
.image2 {
display: block;
width: 50%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.youtube.com/watch?v=18AgmjVPEqc">
<img src="http://politsatire.com/wp-content/uploads/2017/08/playbutton_before.png" alt="Avatar" class="image">
<div class="overlay">
<img src="http://politsatire.com/wp-content/uploads/2017/08/playbutton.png" alt="Avatar" class="image2">
</div>
</div>
</body>
</html>
HTML & CSS are not enough to use modals, you need Javascript too in order to handle all related events.
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
You need to adapt this example to your needs.
Original code from: https://www.w3schools.com/howto/howto_css_modals.asp
Using bootstrap modal, you can achieve something like this:
-http://jsfiddle.net/julysfx/ysqhswxc
I have a weird problem and honestly I have no idea how to do that.
I have a box with background image. Over the background image I have a lot of boxes with a background color and text. I would like the color of the text in every box to be transparent, so the color will be the part of the background image that text is above.
Here is an example: http://jsfiddle.net/wjdwohdd/5/
Instead of the green background, it should be an image.
<div class="box">
<div class="background">
Example text
</div>
</div>
.box {
width:200px;
height:20px;
background-color: green;
padding: 10px;
}
.background {
color: transparent;
height: 100%;
width: auto;
background-color: red;
text-align: center;
}
If I set color: transparent, the text's color becomes red and I am not sure even if it is possible to be the background image.
EDIT: I updated my jsfiddle. I would like the color of the text to be the part of the image that is behind the text.
You can do that, but you need a pretty new property: mix-blend-mode.
Even though it, support is growing: it has been supported in FF for a while, and it is supported in the latest Chrome.
To get it, you need a gray text on a red background, and set the mode to hard-light
body {
background-image: url(http://placekitten.com/1200/800);
}
.test {
font-size: 300px;
color: #888;
background-color: red;
mix-blend-mode: hard-light;
}
<div class="test">TESTING</div>
i would suggest to use a color for the font in the parent element and then in the child element inherit the font color, not sure what you really want
.box {
width:200px;
height:20px;
background-color: green;
padding: 10px;
color: blue;
}
.background {
color: inherit;
height: 100%;
width: auto;
background-color: red;
text-align: center;
}
otherwise use a rgb color for the font in the child element with a transparency then your background will be visible for example something like color: rgba(0, 0, 0, 0.5);
I dont know whether it is possible to do using CSS. Only solution that I can come up with is using Canvas. But it is too complicated and lot of coding. back canvas contains the image that you want to show and in front canvas you do background coloring and letter writing. Here goes the code:
HTML
<body>
<canvas id="back">
</canvas>
<canvas id="front">
</canvas>
</body>
CSS
#back{
position: fixed;
top: 40px;
left: 40px;
z-index: -1;
}
#front{
position: fixed;
top: 60px;
left: 60px;
z-index: 99;
}
JavaScript
window.onload = function(){
var h = new Image();
h.src = 'images/color.jpg';
var back = document.getElementById('back');
back.width = h.width;
back.height = h.height;
back.getContext('2d').drawImage(h,0,0,h.width,h.height);
var front = document.getElementById('front');
var back = document.getElementById('back');
front.width = h.width - 40;
front.height = h.height - 40;
var ctx = front.getContext('2d');
ctx.fillStyle="#ED6";
ctx.fillRect(0,0,h.width - 40,h.height - 40);
ctx.font="150px Verdana";
ctx.fillStyle= 'rgba(0,0,0,1)';
ctx.fillText("HELLO" , h.width/2 - 300 , h.height/2 - 25);
maketransparent(front,back);
};
function maketransparent(front,back){
var backimage = back.getContext('2d').getImageData(0,0,back.width,back.height);
var frontimage = front.getContext('2d').getImageData(0,0,front.width,front.height);
for(var i=0; i<frontimage.data.length; i=i+4){
var line=Math.floor(i/(4*front.width));
line=line+20;
var backi=(line*back.width*4) + 80 + (i%(front.width*4));
if(frontimage.data[i]+frontimage.data[i+1]+frontimage.data[i+2]<50){
frontimage.data[i]=backimage.data[backi];
frontimage.data[i+1]=backimage.data[backi+1];
frontimage.data[i+2]=backimage.data[backi+2];
}
}
front.getContext('2d').putImageData(frontimage,0,0);
}
I have a custom twitter share button that is in the bottom right of my page. Its an image inside a div that is meant to rollover, but it wont rollover. Is it even possible to add rollover images inside a div?
so is there a workaround that will make the image rollover?
HTML:
<div id="twitter"><img src="Images/twitter_06.png" width="46" height="51" ></div>
CSS:
#twitter {
font-family: "Bebas Neue";
color: #000;
margin: 0 auto;
padding: 0;
right: 40px;
bottom: -12px;
position: fixed;
z-index: 100;
font-size: 30px;
}
If this is a simple image rollover don't use JS for this use CSS.
a.twitter {
display: block;
cursor: default;
width: 400px;
height: 300px;
background: url('images/twitter.png') top left;
}
a.twitter:hover {
background-position: center left;
}
a.twitter:active {
background-position: bottom left;
}
Mark it up in HTML like so...
<div class="twitter">
</div>
You can do that with javascript.
<div class="twitter"><img src="1.png"/></div>
<script type="text/javascript">
var t = document.getElementsByClassName("twitter")[0];//i only have one element with that tag so...
//if you are going to put more you can loop through them
prepareRollOver(t);//call the function to prepare the rollover
function prepareRollOver(target){
target.onmouseover = function (){
img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array
img.src="src1.png"
}
target.onmouseout = function (){
img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array
img.src="src2.png"
}
}
</script>
You can also do this with css like this
.twitter{
background:url("1.png");
}
.twitter:hover{
background:url("10.png");
}
But remove the img tag inside the div, you don't need it if you are going to use css
Change src1.png and src2.png to match your file names.
I currently set the title attribute of some HTML if I want to provide more information:
<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>
Then in CSS:
.more_info {
border-bottom: 1px dotted;
}
Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip. title attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?
You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.
Javascript (done with jQuery):
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: silver;
padding: 4px;
left: 0;
white-space: nowrap;
}
Demo: http://jsfiddle.net/xaAN3/
Here is a CSS only solution. (Similar to #Jamie Pate 's answer, but without the JavaScript.)
We can use the pseudo class :hover, but I'm not sure all mobile browsers apply these styles when the element is tapped. I'm using pseudo class :focus because I'm guessing it's safer. However, when using pseudo class :focus we need to add tabindex="0" to elements that don't have a focus state intrinsically.
I'm using 2 #media queries to ensure all mobile devices are targeted. The (pointer: coarse) query will target any device that the primary input method is something "coarse", like a finger. And the (hover: none) query will target any device that the primary pointing system can't hover.
This snippet is all that's needed:
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
/*Semantic Styling*/
body {
display: grid;
place-items: center;
text-align: center;
height: 100vh;
}
a {
height: 40px;
width: 200px;
background: #fa4766;
color: #fff;
text-decoration: none;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
/*Functional Styling*/
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
<a title="this is the Title text" tabindex="0">Tag with Title</a>
Obviously, you'll need to open this on a mobile device to test it.
Here is a Pen with the same code.
Given that a lot of people nowadays (2015) use mobile browsers, and title still hasn't found a form of exposure in mobile browsers, maybe it's time to deprecate reliance upon title for meaningful information.
It should never be used for critical information, but it is now becoming dubious for useful information, because if that information is useful and cannot be shown to half the users, then another way of showing it to almost all users needs to be found.
For static pages, perhaps some visible text near to the relevant control, even as fine print. For server-generated pages, browser sniffing could provide that only for mobile browsers. On the client side, javascript could be used to trap the focus event, via bubbling, to show the extra text next to the currently focussed element. That would minimise the screen space taken up, but would not necessarily be of much use, since, in a lot of instances, bringing focus to a control can only be done in a way that immediately activates its action, bypassing the ability to find out about it before using it!
Over all though, it appears that the difficulties of showing the title attribute on mobile devices, may lead to its demise, mostly due to needing an alternative that is more universal. That is a pity, because mobiles could use a way to show such extra info on-demand, without taking up the limited screen space.
It seems strange that the w3c and mobile browser makers did not do anything about this issue a long time ago. At least they could have displayed the title text on top of the menu that appears when a long press on a control is made.
Personally, I wish it was placed at the top of a right-click/long-touch menu, as it won't timeout, and would be available on all browsers.
The other alternative is to construct footnotes, so an [n] type superscript is put next to the element/text needing more info, linking to explanatory text in a list at the bottom of the page. Each of those can have a similar [n] type link back to the original text/element. That way, it keeps the display uncluttered, but provides easy bidirectional swapping in a simple way. Sometimes, old print media ways, with a little hyperlink help, are best.
The title attribute has been hijacked by some browsers to provide help text for the pattern attribute, in that its text pops up if the pattern doesn't match the text in the input element. Typically, it is to provide examples of the right format.
Slightly more elaborated version of flavaflo's answer:
Uses pre-defined div as pop-up that can hold HTML, rather than reading from a title attribute
Opens/closes on rollover if mouse is used
Opens on click (touch screen) and closes on click on the open pop-up or anywhere else on the document.
HTML:
<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>
CSS:
.more_info {
border-bottom: 1px dotted #000;
position: relative;
cursor: pointer;
}
.more_info .popup {
position: absolute;
top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
background: #fff;
border: 1px solid #ccc;
padding: 8px;
left: 0;
max-width: 240px;
min-width: 180px;
z-index: 100;
display: none;
}
JavaScript / jQuery:
$(document).ready(function () {
//init pop-ups
$(".popup").attr("data-close", false);
//click on pop-up opener
//pop-up is expected to be a child of opener
$(".more_info").click(function () {
var $title = $(this).find(".popup");
//open if not marked for closing
if ($title.attr("data-close") === "false") {
$title.show();
}
//reset popup
$title.attr("data-close", false);
});
//mark pop-up for closing if clicked on
//close is initiated by document.mouseup,
//marker will stop opener from re-opening it
$(".popup").click(function () {
$(this).attr("data-close",true);
});
//hide all pop-ups
$(document).mouseup(function () {
$(".popup").hide();
});
//show on rollover if mouse is used
$(".more_info").mouseenter(function () {
var $title = $(this).find(".popup");
$title.show();
});
//hide on roll-out
$(".more_info").mouseleave(function () {
var $title = $(this).find(".popup");
$title.hide();
});
});
Demo here https://jsfiddle.net/bgxC/yvs1awzk/
As #cimmanon mentioned: span[title]:hover:after { content: attr(title) } gives you a rudimentary tooltip on touch screen devices. Unfortunately this has problems where the default ui behavior on touch screen devices is to select the text when any non-link/uicontrol is pressed.
To solve the selection problem you can add span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }
A full solution may use some other techniques:
Add position: absolute background, border, box-shadow etc to make it look like a tooltip.
Add the class touched to body (via js) when the user uses any touch event.
Then you can do body.touched [title]:hover ... without affecting desktop users
document.body.addEventListener('touchstart', function() {
document.body.classList.add('touched');
});
[title] {
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
border-radius:2px;
position: relative;
}
body.touched [title] > * {
user-select: none;
}
body.touched [title]:hover > * {
user-select: auto
}
body.touched [title]:hover:after {
position: absolute;
top: 100%;
right: -10%;
content: attr(title);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: white;
box-shadow: 1px 1px 3px;
padding: 0.3em;
z-index: 1;
}
<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>
Depending on how much information you want to give the user, a modal dialogue box might be an elegant solution.
Specifically, you could try the qTip jQuery plugin, which has a modal mode fired on $.click():
The title attribute is not supported in any mobile browsers **in a way that it would show the tooltip the same as to desktop mouse users** *(the attribute itself is ofcourse supported in the markup)*.
It's only basically for desktop users with a mouse, keyboard only users can't use it either, or screenreaders.
You can achieve almost similar with javascript as you said.
I was searching for an easy CSS only solution, and this is really the most easy one I found:
<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">
<span aria-label="Whats up!" data-balloon-pos="up">Hover me!</span>
Working example: https://jsfiddle.net/5pcjbnwg/
If you want to customize the tooltip, you find more info here:
https://kazzkiq.github.io/balloon.css/
To avoid using JavaScript, I used this CSS-only tooltip:
http://www.menucool.com/tooltip/css-tooltip
It works great in Mobile and Desktop, and you can customize the styles.
Thanks to #flavaflo for their answer. This works in most cases but if there is more than one title to lookup in the same paragraph, and one opens over the link to another, the unopened link shows through the first. This can be solved by dynamically changing the z-index of the title that has "popped up":
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
$(this).css('z-index', 2);
} else {
$title.remove();
$(this).css('z-index', 0);
}
});
Also, you can make both the hover over display and the click display multiline by adding
(linefeed) to the title='' attribute, and then convert that to <br /> for the html click display:
$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');
Extremely late to the party but for future visitors, here is a tweak of #Flavaflo's answer to fade the "tooltip" in and out
JQuery:
$(".more_info").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$($title).fadeOut(250, function() {
$title.remove();
});
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: green;
padding: 4px;
left: 0;
color: white;
white-space: nowrap;
border-radius:3px;
animation: fadeIn linear 0.15s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
Fiddle here: http://jsfiddle.net/L3paxb5g/
I know this is an old question, but i have found a CSS solution that works on mobile too, it doesn't use title at all and it's easy to implement, explained here:
https://www.w3schools.com/css/css_tooltip.asp
Explanation:
On mobile, with the touchscreen,the first input acts as css hover, so it works like a toggle tooltip when you press on it.
Code example:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #666;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 15em;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -8em;
opacity: 0;
transition: opacity 0.3s;
padding: 0.5em;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>