Centering tooltip? - html

I'm trying to get my tooltip to be at the top & center of my page, regardless of window size and screensize. I have the following, but my tooltip appears on the top left corner:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
area {
display: inline-block;
}
</style>
<script>
$(function() {
$( document ).tooltip({ position: {
my: "center bottom",
at: "center top",
}
});
});
</script>

Please use last version of iQuery
Try to center in this way:
$(".tip_holder").hover(function(){
var currentTipHolder = $(this);
var $tipTxt = $(this).text();
var $tipTitle = $(this).attr('title');
$('#icis_dashboard').prepend('<div id="tooltip">' + $tipTxt + '</div>');
// jQueryUI position
$('#tooltip').position({
of: currentTipHolder,
at: 'center top',
my: 'center bottom'
});
},function() {
$('#tooltip').remove();
});

Related

How to stop jQuery from fading on nested div's?

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>

How to make right sidebar sticky in jQuery?

I need jQuery code for the sticky right sidebar in blogger. This sidebar should stop at the footer, but it's not. It should stick at a specific scroll, so the user can see the content on the sidebar.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $(".column-right-inner").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(".column-right-inner").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(".column-right-inner").stop().animate({
marginTop: 0
});
};
});
});
</script>

Bootstrap 4 : align content inside cards deck

I have a deck of cards in my Bootstrap 4 page. I want to align these button to have a nicer look. How can we do that?
Here is an image:
And here is the demo : http://7freres.com/new
The table dosen't seem to works, as they are separated.
Thanls
You can make all the card-text elements to have the same height.
One way to do it can be through javascript. Write a function like this:
document.addEventListener("DOMContentLoaded", function(event) {
adjustCardTextHeights();
});
function adjustCardTextHeights() {
var heights = $(".card-text").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".card-text").height(maxHeight);
}
Or with jQuery:
$( document ).ready(function() {
adjustCardTextHeights();
});
function adjustCardTextHeights() {
var heights = $(".card-text").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".card-text").height(maxHeight);
}
This gets you:
You could set position: absolute; bottom: 20px; for the buttons and add an extra padding-bottom: 50px; to the card-block

positioning issue with hyper link

I have a div containing simple text. I should show only 3 lines of that text with showMore link. on clicking of showMore link I need to show all the text inside it with showLess link. Right now I am using overflow property to achieve this. But have a small problem that I should show "showMore" link immediately after the text. So how can I position the hyperlink inside the text?
My Code
jQuery(document).ready(function () {
jQuery('.showMore').click(function (event) {
var contentDiv = jQuery('.contentDiv');
contentDiv[0].style.height = 'auto';
jQuery(event.target).hide();
jQuery('.showLess').show();
});
jQuery('.showLess').click(function (event) {
var contentDiv = jQuery('.contentDiv');
var lineHeight = getLineHeight(contentDiv[0]);
contentDiv[0].style.height = lineHeight * 3 + 'px';
jQuery(event.target).hide();
jQuery('.showMore').show();
});
});
<!doctype html>
<html>
<body >
<div>
<div class = "contentDiv">
some content <br r1<br> r2<br> r3 <br> r4<br> r5
</div>
Show More
Show Less
</div>
</body>
</html>
.contentDiv a {
float : right;
}
.contentDiv {
overflow: hidden;
height:3.6em;
background:#ccc;
font-size : 12pt ;
font-family :Courier;
}
.showMore {
float: right;
}
.showLess {
position: relative;
float: right;
display : none;
margin-bottom : 5px
}
Just one of the million ways you could achieve this: fiddle
HTML
<div id="text">Lots of text..</div>
Show More
Show Less
CSS
#text {height:55px;overflow:hidden;}
#showless {display:none;}
jQuery
$('#showmore').on('click', function(e){
$('#text').css('overflow', 'visible').css('height', 'auto');
$('#showless').show();
$(this).hide();
e.preventDefault();
});
$('#showless').on('click', function(e){
$('#text').css('overflow', 'hidden').css('height', '55px');
$('#showmore').show();
$(this).hide();
e.preventDefault();
});
To position the 'show more' in the bottom right (as requested in your follow-up comment), put the <a> tag inside the div and position it absolutely. Fiddle
HTML
<div id="text">Lots of text..
Show More
</div>
Show Less
CSS
#text {height:55px;overflow:hidden;position:relative;}
#showmore {position:absolute;bottom:0;right:0;background:#fff;padding-left:10px;}
#showless{display:none;}

html5 - drag a canvas

I have a huge HTML5 Canvas, and I want it to work like google maps: the user can drag it and see only a small part of it (the screen's size) all the time. it renders only the part you can see on the screen.
how can I do it? do you have an idea?
2 simple steps:
place the canvas inside a div container with overflow:hidden
use any method to make your canvas draggable (I will use jQuery UI)
To follow my method you need to go to the jQuery UI website and download any version of the jQuery UI (you can create a custom version only consisting of the UI Core and Draggable Interaction for this example.)
Unpack the .zip file and move the 'js' folder to your page directory.
Inlcude the .js files contained in the folder into your page.
Place the following code between your <head></head>-tags to get your canvas draggable:
<script type="text/javacript">
$(function() {
$("#CanvasID").draggable();
});
</script>
Here's an example:
<!DOCTYPE>
<html>
<head>
<title>canvas test</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <!-- include the jQuery framework -->
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script> <!-- include JQuery UI -->
<style type="text/css">
#box{
width: 400px;
height: 400px;
border:5px solid black;
overflow:hidden;
position:relative;
} /* Just some basic styling for demonstration purpose */
</style>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext('2d');
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(200,200,200,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
}
// just a simple canvas
$(function() {
$( "#myDrawing" ).draggable();
});
// make the canvas draggable
}
</script>
</head>
<body>
<div id="box">
<canvas id="myDrawing" width="800" height="800">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
Hope this get's you going.
note: This is just a basic example. This will still need some editing. For example the user can drag the canvas totally out of the viewport (perhaps constraining the Canvas to the div may do the trick?). But this should be a good starting point.
I would use two canvases. Keep your huge source canvas hidden and copy portions of it to a second smaller visible canvas. Here's my quickly hacked-up proof of concept:
<!DOCTYPE HTML>
<html>
<head>
<title>canvas scroll</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#source {
display: none;
}
#coords{
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
#coords p{
background: #fff;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var $window;
var img;
var $source; var source; var sourceContext;
var $target; var target; var targetContext;
var scroll = {
x : 0,
y : 0
};
var scrollMax;
function init() {
// Get DOM elements
$window = $(window);
$source = $('canvas#source');
source = $source[0];
sourceContext = source.getContext("2d");
$target = $('canvas#target');
target = $target[0];
targetContext = target.getContext("2d");
// Draw something in source canvas
sourceContext.rect(0, 0, source.width, source.height);
var grd = sourceContext.createLinearGradient(0, 0, source.width, source.height);
grd.addColorStop(0, '#800080');
grd.addColorStop(0.125, '#4B0082');
grd.addColorStop(0.25, '#0000FF');
grd.addColorStop(0.325, '#008000');
grd.addColorStop(0.5, '#FFFF00');
grd.addColorStop(0.625, '#FFA500');
grd.addColorStop(0.75, '#FF0000');
grd.addColorStop(0.825, '#800080');
sourceContext.fillStyle = grd;
sourceContext.fill();
/*
* Setup drag listening for target canvas to scroll over source canvas
*/
function onDragging(event){
var delta = {
left : (event.clientX - event.data.lastCoord.left),
top : (event.clientY - event.data.lastCoord.top)
};
var dx = scroll.x - delta.left;
if (dx < 0) {
scroll.x = 0;
} else if (dx > scrollMax.x) {
scroll.x = scrollMax.x;
} else {
scroll.x = dx;
}
var dy = scroll.y - delta.top;
if (dy < 0) {
scroll.y = 0;
} else if (dy > scrollMax.y) {
scroll.y = scrollMax.y;
} else {
scroll.y = dy;
}
event.data.lastCoord = {
left : event.clientX,
top : event.clientY
}
draw();
}
function onDragEnd(){
$(document).unbind("mousemove", onDragging);
$(document).unbind("mouseup", onDragEnd);
}
function onDragStart(event){
event.data = {
lastCoord:{
left : event.clientX,
top : event.clientY
}
};
$(document).bind("mouseup", event.data, onDragEnd);
$(document).bind("mousemove", event.data, onDragging);
}
$target.bind('mousedown', onDragStart);
/*
* Draw initial view of source canvas onto target canvas
*/
$window.resize(draw);
$window.trigger("resize");
}
function draw() {
target.width = $window.width();
target.height = $window.height();
if(!scrollMax){
scrollMax = {
x: source.width - target.width,
y: source.height - target.height
}
}
targetContext.drawImage(source, scroll.x, scroll.y, target.width, target.height, 0, 0, target.width, target.height);
$('#x').html(scroll.x);
$('#y').html(scroll.y);
}
$(document).ready(init);
</script>
</head>
<body>
<div id="coords">
<p>Drag the gradient with the mouse</p>
<p>x: <span id="x"></span></p>
<p>y: <span id="y"></span></p>
</div>
<canvas id="source" width="4000" height="4000"></canvas>
<canvas id="target"></canvas>
</body>
</html>