Display Image on Div/Text Overlay [duplicate] - javascript

How to align the tooltip the natural style: right bottom of the mouse pointer?
<!DOCTYPE html>
<html>
<head>
<title>Tooltip with Image</title>
<meta charset="UTF-8">
<style type="text/css">
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip span img {
float:left;
}
.tooltip:hover span {
display:block;
position:absolute;
overflow:hidden;
}
</style>
</head>
<body>
<a class="tooltip" href="http://www.google.com/">
Google
<span>
<img alt="" src="http://www.google.com/images/srpr/logo4w.png">
</span>
</a>
</body>
</html>

For default tooltip behavior simply add the title attribute. This can't contain images though.
<div title="regular tooltip">Hover me</div>
Before you clarified the question I did this up in pure JavaScript, hope you find it useful. The image will pop up and follow the mouse.
jsFiddle
JavaScript
var tooltipSpan = document.getElementById('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
CSS
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
Extending for multiple elements
One solution for multiple elements is to update all tooltip span's and setting them under the cursor on mouse move.
jsFiddle
var tooltips = document.querySelectorAll('.tooltip span');
window.onmousemove = function (e) {
var x = (e.clientX + 20) + 'px',
y = (e.clientY + 20) + 'px';
for (var i = 0; i < tooltips.length; i++) {
tooltips[i].style.top = y;
tooltips[i].style.left = x;
}
};

One way to do this without JS is to use the hover action to reveal a HTML element that is otherwise hidden, see this codepen:
http://codepen.io/c0un7z3r0/pen/LZWXEw
Note that the span that contains the tooltip content is relative to the parent li. The magic is here:
ul#list_of_thrones li > span{
display:none;
}
ul#list_of_thrones li:hover > span{
position: absolute;
display:block;
...
}
As you can see, the span is hidden unless the listitem is hovered over, thus revealing the span element, the span can contain as much html as you need. In the codepen attached I have also used a :after element for the arrow but that of course is entirely optional and has only been included in this example for cosmetic purposes.
I hope this helps, I felt compelled to post as all the other answers included JS solutions but the OP asked for a HTML/CSS only solution.

I prefer this technique:
function showTooltip(e) {
var tooltip = e.target.classList.contains("tooltip")
? e.target
: e.target.querySelector(":scope .tooltip");
tooltip.style.left =
(e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
? (e.pageX + 10 + "px")
: (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
tooltip.style.top =
(e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
? (e.pageY + 10 + "px")
: (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}
var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
color: red;
cursor: pointer;
}
.couponcode:hover .tooltip {
display: block;
}
.tooltip {
position: absolute;
white-space: nowrap;
display: none;
background: #ffffcc;
border: 1px solid black;
padding: 5px;
z-index: 1000;
color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.
(see also this Fiddle)

You can use jQuery UI plugin, following are reference URLs
http://jqueryui.com/tooltip/
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://jquery-plugins.bassistance.de/tooltip/demo/
Set track to TRUE for Tooltip position relative to mouse pointer
eg.
$('.tooltip').tooltip({ track: true });

This CAN be done with pure html and css. It may not be the best way but we all have different limitations. There are 3 ways that could be useful depending on what your specific circumstances are.
The first involves overlaying an invisible table over top of your link with a hover action on each cell that displays an image.
#imagehover td:hover::after{
content: " ";
white-space: pre;
background-image: url("http://www.google.com/images/srpr/logo4w.png");
position: relative;
left: 5px;
top: 5px;
font-size: 20px;
background-color: transparent;
background-position: 0px 0px;
background-size: 60px 20px;
background-repeat: no-repeat;
}
#imagehover table, #imagehover th, #imagehover td {
border: 0px;
border-spacing: 0px;
}
<a href="https://www.google.com">
<table id="imagehover" style="width:50px;height:10px;z-index:9999;position:absolute" cellspacing="0">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Google</a>
The second relies on being able to provide your own cursor image
#googleLink{
cursor: url(data:application/octet-stream;base64,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),auto;
}
Google
While the normal title tooltip doesn't technically allow images it does allow any unicode characters including block letters and emojis which may suit your needs.
Google

We can achieve the same using "Directive" in Angularjs.
//Bind mousemove event to the element which will show tooltip
$("#tooltip").mousemove(function(e) {
//find X & Y coodrinates
x = e.clientX,
y = e.clientY;
//Set tooltip position according to mouse position
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
});
You can check this post for further details.
http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html

function showTooltip(e) {
var tooltip = e.target.classList.contains("tooltip")
? e.target
: e.target.querySelector(":scope .tooltip");
tooltip.style.left =
(e.clientX + tooltip.clientWidth + 10 < document.documentElement.clientWidth)
? (e.clientX + 10 + "px")
: (document.documentElement.clientWidth + 5 - tooltip.clientWidth + "px");
tooltip.style.top =
(e.clientY + tooltip.clientHeight + 10 < document.documentElement.clientHeight)
? (e.clientY + 10 + "px")
: (document.documentElement.clientHeight + 5 - tooltip.clientHeight + "px");
}
var tooltips = document.querySelectorAll('.hastip');
for(var i = 0; i < tooltips.length; i++) {
tooltips[i].addEventListener('mousemove', showTooltip);
}
.hastip {
border-bottom: 1px dotted black;
position: relative;
display: inline-block;
cursor: pointer;
}
.hastip:hover .tooltip {
display: block;
}
.tooltip {
position: fixed;
white-space: nowrap;
display: none;
background-color: #ffffcc;
border: 1px solid black;
color: #000;
padding: 5px;
border-radius: 6px;
z-index: 1000;
font-size: 13pt;
font-weight: initial;
}
Lorem ipsum dolor sit amet, <span class="hastip">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="hastip">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="hastip">laborum<span class="tooltip">This is yet
another tooltip</span></span>.

Related

jQuery Find Closest Element Inside div Based on mousemove Event

Google uses a feedback feature that highlights the background color of content elements (ex:p, div, ul, h2, etc.) when the user mouses over a div to the right side of the content.
I believe the following CSS class is applied to the element to highlight its background:
.inline-feedback__highlight {
background: #d2e3fc;
-webkit-border-radius: .3125rem;
border-radius: .3125rem;
}
Using jQuery or JavaScript and CSS, I'd like to achieve the same result.
My Question
How can I identify what the closest element in <div id="content">...</div> is?
I was thinking some form of x,y coordinates and offset from the top of the content div.
My Code
$(function() {
let halfBtnHt = Math.ceil($('#track-button-div').height() / 2);
$('#track-container').on('mousemove', function(e) {
// console.log(e.offsetX, e.offsetY);
$('#track-button').css({
'transform': `translateX(0) translateY(${e.offsetY - halfBtnHt}px)`,
'visibility': 'visible',
})
}).on('mouseout', function(e) {
$('#track-button').css({
'visibility': 'hidden'
})
})
})
#content-container {
position: relative;
border: 1px solid black;
width: 500px;
height: auto;
margin: 100px auto;
}
#content {
padding: 2rem;
}
#track-container {
position: absolute;
text-align: center;
top: 0;
bottom: 0;
width: 64px;
right: -56px;
z-index: 1;
}
#track-button {
width: 42px;
height: 42px;
border-radius: 30px;
pointer-events: none !important;
}
#track-button-div {
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content-container">
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iusto? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dolores earum esse eveniet libero minima pariatur repellat sed sunt ut?</div>
<pre class="prettyprint linenums prettyprinted">
<ol class="linenums">
<li class="L0">Hey</li>
</ol>
</pre>
<p>Blanditiis corporis ducimus laudantium nisi pariatur quasi repellat sunt, ut? Consequuntur dolores earum</p>
</div>
<div id="track-container">
<div id="track-button-div">
<button id="track-button" class="btn btn-outline-primary">
<i class="fas fa-quote-right"></i>
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="track.js"></script>
</body>
</html>
Here's what Google's Feedback Feature Looks Like
Look at snippet below:
(function ($) {
'use strict';
$(function () {
var
namespace = 'mmdm',
//-----
mainElementID = '#__elements_container',
highlightClass = 'founded-element__highlight',
//-----
mainElement = $(mainElementID),
movableElementContainer = $('#__movable_element_container'),
movableElement = $('#__movable_element');
// some utility
function getTouch(event) {
var touch = event;
if (('ontouchstart' in document.documentElement) || navigator.maxTouchPoints > 0) {
touch = event.originalEvent.touches && event.originalEvent.touches.length ? event.originalEvent.touches[0] : event;
if (event.type === 'touchstart' || event.type === 'touchmove') {
touch = event.targetTouches[0] || event.changedTouches[0];
}
}
return touch;
}
// define function(s)
function removeHighlightClass() {
mainElement.find('*').removeClass(highlightClass);
}
function findElementsWithSameYNHighlightIt(e) {
var x, y, meOffset, el;
meOffset = mainElement.offset();
x = (e.pageX - meOffset.left) / 2;
y = e.pageY - $(window).scrollTop();
el = document.elementFromPoint(x, y);
if (!$(el).is(mainElement) && $(el).closest(mainElementID).length) {
$(el).addClass(highlightClass);
}
}
function showMovableElement() {
movableElement.addClass('show');
}
function hideMovableElement() {
movableElement.removeClass('show');
}
function moveMovableElement(e) {
var y, mecTop = movableElementContainer.offset().top;
y = e.pageY;
// bound move to the main movable container
if (y >= mecTop && y <= (mecTop + movableElementContainer.outerHeight())) {
movableElement.css({
'top': y - mecTop - (movableElement.outerHeight() / 2)
});
}
removeHighlightClass();
}
// attach event(s)
movableElementContainer
.on('mousemove.' + namespace + ' touchmove.' + namespace + ' mouseenter.' + namespace + ' touchstart.' + namespace, function (e) {
if (!e.defaultPrevented && e.cancelable) {
e.preventDefault();
}
//-----
var touch = getTouch(e);
showMovableElement();
moveMovableElement(touch);
findElementsWithSameYNHighlightIt(touch);
}).on('mouseleave.' + namespace + ' touchend.' + namespace, function (e) {
if (!e.defaultPrevented && e.cancelable) {
e.preventDefault();
}
//-----
hideMovableElement();
removeHighlightClass();
});
});
})(jQuery);
* {
box-sizing: border-box;
}
#__elements_main_container {
display: flex;
}
#__elements_container {
width: 500px;
}
#__movable_element_container {
position: relative;
width: 40px;
}
#__movable_element_container::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #ccc;
transform: translate(-50%);
z-index: 1;
}
#__movable_element {
position: absolute;
display: none;
align-items: center;
justify-content: center;
left: 50%;
width: 40px;
height: 40px;
text-align: center;
border-radius: 50rem;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
transform: translate(-50%);
z-index: 2;
}
#__movable_element.show {
display: flex;
}
.founded-element__highlight {
background-color: #cecdff;
border-radius: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="__elements_main_container">
<div id="__elements_container">
<h1>
A heading tag!
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
</ul>
</div>
<div id="__movable_element_container">
<i id="__movable_element" class="fa fa-quote-right"></i>
</div>
</div>
Please don't judge the code quality, I made it just for the sake of testing and making it do what you initially asked about selecting the closest element.
Check this sandbox with a working example
The key here is the usage of elementFromPoint function, the sandbox should just give a general idea and you can tailor it to your needs!

How to scroll the circle using mouse wheel?

I have one circle and I have to rotate 360 deg using mouse scroll wheel or arrow but it will start when circle touches the blue border. Now my code is working when I scroll it and touch the blue border. But I have to scroll the circle using the mouse wheel. I mean using mouse wheel I have to rotate the circle also reverse.
Is there any idea how to do that?
$(window).bind('scroll', function() {
var l_360 = document.getElementById("l_360");
var controller = new ScrollMagic.Controller();
var tween = TweenLite.to(l_360, 3, {
x: -1910,
y: 350,
rotation: 360,
opacity: '1',
ease: Linear.easeOut
});
var scene = new ScrollMagic.Scene({
triggerElement: "#l_360"
})
.setTween(tween)
.setClassToggle('#l_360', 'fade-in')
.addTo(controller);
});
.parent_img {
position: fixed;
right: 0;
top: 0;
width: 100%;
text-align: right;
}
.content,
.content_2,
.content_3 {
width: 700px;
position: relative;
}
.content {
margin-top: 400px;
}
.main_l {
position: fixed;
right: 115px;
top: 20px;
z-index: 100;
}
.main_l .l_circle {
width: 250px;
height: 250px;
background-color: #EFBD40;
border-radius: 50%;
display: flex;
}
.main_l .l_circle h2 {
margin: auto;
color: #fff;
font-size: 35px;
}
.blue {
background-color: #0082ff;
transform: skew(0deg, -10deg);
z-index: -1;
/*color: #fff;*/
}
.blue .container {
transform: skew(0deg, 10deg);
position: relative;
top: 50px;
}
<div class="main_l" id="l_360">
<div class="l_circle">
<h2>360 circle</h2>
</div>
</div>
<div class="blue">
<div class="container">
<div class="content">
<h2>This is just for testing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
Using the wheel event will give you deltas for the direction you scroll the wheel. For example, to detect a vertical wheel movement the property deltaY will be either a negative value (forward) or positive (backward):
You can use the value directly if you wish, but it may vary depending on browser and system.
Example
var div = document.querySelector("div");
var angle = 0;
document.onwheel = function(e) {
if (e.deltaY) { // we have a wheel for vertical (common) direction
e.preventDefault();
angle += e.deltaY < 0 ? 4 : -4; // what direction?
div.style.transform = "rotate(" + angle + "deg)"; // do something
}
};
body {margin:30px}
div {border-radius:50%;border:3px solid #09f;width:150px;height:150px;}
<div> O</div>

Offsetting a hash tag link to adjust for fixed header when typing url in browser in JS

I wish to create a page that allows hash tags to jump to certain contents of the page.
e.g.
http://example.com/page1 is a normal page
http://example.com/page1#info will jump to the tag with id #info
This is default browser behaviour so no issue there.
The problem begins when I have a fixed browser header, as I need some extra offset so that the fixed header does not cover up the element.
For internal links on the page this is not an issue as I just use the following code:
var scrollOffset = 175;
$('a.tab-button[href^="#"]').on('click', function(event) {
var $target = $(targetId);
console.log($(this).attr('href'));
if( $target.length ) {
event.preventDefault();
window.scrollTo(0, $target.offset().top - scrollOffset);
}
})
where scrollOffset is the number of pixels I wish to offset it by.
However the issue lies when typing the url in the browser it self and clicking enter (as supposed to clicking a URL anchor tag on the page directly). Although it scrolls to the element correctly; there is no offset, between the browser window and the element, causing it to be hidden under the fixed navigation bar.
Note I am aware of the following technique already:
h2:before {
display: block;
content: " ";
margin-top: -285px;
height: 285px;
visibility: hidden;
}
and other CSS tricks in http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/
Therefore please give JS answers only please!!!
The following seems to work. The gotoHash() function is basically the same as your existing code, except it's within a timeout, which makes event.preventDefault() unnecessary. This also solves a problem when the function runs after document ready but before the browser has scrolled to a hash:
location.hash = '#d3'; //used for demonstration purposes only
function gotoHash(id) {
setTimeout(function() {
var $target = $(id),
scrollOffset = 100,
y = $target.offset().top - scrollOffset;
if ($target.length) {
window.scrollTo(0, y);
}
});
}
$('a[href^="#"]').on('click', function() {
gotoHash($(this).attr('href'));
});
$(document).ready(function() {
gotoHash(location.hash);
});
body {
font: 12px verdana;
margin: 100px 0px;
}
header {
height: 100px;
background: yellow;
border: 1px solid gray;
position: fixed;
top: 0;
width: 100%;
}
div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
div 1
<br>
div 2
<br>
div 3
<br>
div 4
<br>
</header>
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="d2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="d3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div id="d4">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

How to Create a Link to a DIV

Here is what im working on... A maximizable and minimizable pop-up that is called by an hyperlink.
<html>
<style type="text/css">
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
/* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
</style>
<script type="text/javascript">
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
}
</script>
CLICK HERE<!--Right Here -->
<div style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop" onclick="close_pop(this);">&times</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
</div>
</div>
But the pop up opens with the page and i want the pop up to only be opened when the hyperlink commented is clicked and not when the page is loaded. Any help will be much appreciated. I have tried different methods on the hyperlink but to no avail.
Please check the link below
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
/* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">&times</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
The pop-up element isn't being hidden on initial page load.
Add style to the pop-up element in CSS.
display:none
Give the pop-up element an ID attribute for easier Javascript targeting
id="pop1"
Add attribute to the hyperlink
onclick="open_pop('#pop1')"
Add javascript function
function open_pop(elem)
{
elem.style.display = 'block';
}
Or to synchronise more effectively with your code, give the pop-up one of your custom classes to modify the display style.
I would also consider using ID's for Javascript selection as opposed to crawling through parents which could break the code if children elements or added or removed from the tree.
in simple code,
html
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
javascript
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
I could not share my jsfiddle link. so this helps you i guess.
OR
Just make the div style = "display:none" on mouse click toggle the display.

Make CSS tooltip follow cursor

I'm creating a CSS based tooltip that is going to have a lot of content in the tooltip and instead of being in a static place I was wondering is there a easy way to make it follow the cursor as you hover over the link.
Here is a example of the CSS based tooltip
<div class="couponcode">First Link
<span class="coupontooltip">Content 1</span>
</div>
.couponcode:hover .coupontooltip {
display: block;
}
.coupontooltip {
display: none;
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}
http://jsfiddle.net/q46Xz/
Something like this
var tooltip = document.querySelectorAll('.coupontooltip');
document.addEventListener('mousemove', fn, false);
function fn(e) {
for (var i=tooltip.length; i--;) {
tooltip[i].style.left = e.pageX + 'px';
tooltip[i].style.top = e.pageY + 'px';
}
}
FIDDLE
Here's a version that keeps into account the height and width of your window:
function showTooltip(e) {
var tooltip = e.target.classList.contains("coupontooltip")
? e.target
: e.target.querySelector(":scope .coupontooltip");
tooltip.style.left =
(e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
? (e.pageX + 10 + "px")
: (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
tooltip.style.top =
(e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
? (e.pageY + 10 + "px")
: (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}
var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
color: red;
cursor: pointer;
}
.couponcode:hover .coupontooltip {
display: block;
}
.coupontooltip {
position: absolute;
white-space: nowrap;
display: none;
background: #ffffcc;
border: 1px solid black;
color: black;
padding: 5px;
z-index: 1000;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="coupontooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="coupontooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="coupontooltip">This is yet
another tooltip</span></span>.
(see also this Fiddle)

Categories

Resources