I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.
However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?
Here's the CSS that I have so far:
.testprojbody
{
background-color: black;
padding: 0;
overflow: hidden;
}
.slider-holder
{
width: 98%;
height: 665px;
border: 2px black solid;
background-color: white;
float: center;
margin-left: 9px;
}
.slider
{
width: 987px;
height: 610px;
overflow: hidden;
float:center;
margin-top: 25px;
border: 2px black solid;
margin-left: 35px;
}
.holder
{
width: 200%;
height: 200%;
position: relative;
}
.slide
{
float: left;
width: 987px;
height: 610px;
position: relative;
}
.slider-navright
{
text-align: center;
margin: 310px 0 0 1030px;
position: absolute;
}
.slider-navright a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #999;
}
.slider-navleft {
text-align: center;
margin: 310px 0 0 12px;
position: absolute;
}
.slider-navleft a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #999;
}
.slider-navtop {
text-align: center;
margin: 2px 0 0 501px;
position: absolute;
}
.slider-navtop a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #999;
}
.slider-navbot {
text-align: center;
margin: 642px 0 0 501px;
position: absolute;
}
.slider-navbot a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 20px solid #999;
}
Here's the Javascript, which allows for nav & animation and so on:
<script type="text/javascript">
var positionH = 0
var positionV = 0
$(document).ready(function(){
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNavRight: $(".slider-navright"),
sliderNavLeft: $(".slider-navleft"),
sliderNavTop: $(".slider-navtop"),
sliderNavBot: $(".slider-navbot"),
},
timing: 400,
slideWidth: 987,
slideHeight: 610,
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// nav code
this.el.sliderNavRight.on("click", "a", function(event) {
slider.handleNavRightClick(event, this);
});
this.el.sliderNavLeft.on("click", "a", function(event) {
slider.handleNavLeftClick(event, this);
});
this.el.sliderNavTop.on("click", "a", function(event) {
slider.handleNavTopClick(event, this);
});
this.el.sliderNavBot.on("click", "a", function(event) {
slider.handleNavBotClick(event, this);
});
},
handleNavRightClick: function(event, el) {
positionH+=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavLeftClick: function(event, el) {
positionH-=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavTopClick: function(event, el) {
event.preventDefault();
positionV--;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
handleNavBotClick: function(event, el) {
event.preventDefault();
positionV++;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
};
slider.init();});
</script>
<script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
if (event.keyCode == 39){
//go right
event.preventDefault();
$('.slider-navright a')
.click();
} else if (event.keyCode == 37){
//go left
event.preventDefault();
$('.slider-navleft a')
.click();
} else if (event.keyCode == 38){
//go up
event.preventDefault();
$('.slider-navtop a')
.click();
} else if (event.keyCode == 40){
//go down
event.preventDefault();
$('.slider-navbot a')
.click();
}
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
</script>
and here's the relevant HTML:
<body class="testprojbody">
<div class="slider-holder">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-x0y0"></div>
<div class="slide" id="slide-x1y0"></div>
<div class="slide" id="slide-x0yA"></div>
<div class="slide" id="slide-x0y0"></div>
</div>
</div>
<nav class="slider-navright">
Move Right
</nav>
<nav class="slider-navleft">
Move Left
</nav>
<nav class="slider-navtop">
Move Up
</nav>
<nav class="slider-navbot">
Move Down
</nav>
</div>
</body>
</html>
Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!
Thanks.
Looks like the first lines on your JavaScript could be what you're looking for.
Have you tried changing the values of
var positionH = 0
var positionV = 0
to the positions you want?
EDIT
Okay so following on you can use those variables you'll just need to add a little more code to your init method...
init: function() {
this.bindUIEvents();
this.el.slider.scrollLeft(positionH);
this.el.slider.scrollTop(positionV);
}
Then change the positionH and positionV variables.
Related
If there are multiple jquery draggable divs I want to see guides and snap to guides, edges and corners of others divs.
Here's the code:
$(".draggable").draggable();
$(".draggable").resizable();
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image{
height: 150px;
width: 200px;
}
img{
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
The blue line in following image is what i want to be shown while divs are being dragged
see image here. Divs should snap to the blue guiding lines when divs are aligned.
don't change the relative and absolute position of classes as I've used them to overlay one div on another.
I tried searching online but solutions are too old, awakward and work with jquery 2.x
Please help!
To address the first part of your question, you can manage the guides like so.
$(function() {
function moveGuides(top, left) {
$("#guide-h").css("top", top + "px");
$("#guide-v").css("left", left + "px");
}
function getMyCorners(el) {
var p = $(el).position();
return {
top: p.top,
left: p.left,
bottom: p.top + $(el).height(),
right: p.left + $(el).width()
};
}
function startGuides(targetEl) {
var c = getMyCorners(targetEl);
moveGuides(c.top, c.right);
$(".guide").show();
}
function stopGuides() {
$(".guide").hide();
}
$(".draggable").draggable({
start: function(e, ui) {
startGuides(this);
},
drag: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
$(".draggable").resizable({
start: function(e, ui) {
startGuides(this);
},
resize: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
});
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image {
height: 150px;
width: 200px;
}
img {
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
With helper functions, you can reveal the guides, and move them based on specific events.
The next, and much more involved portion, would be to create collision detection for the various elements. This will require checking against each of the elements involved against all the other elements. For example:
if($("#guide-h").position().top == $(".draggable").position().top){
// Stop event
}
I am guessing that you are looking to create alignment. So when a Guide collides with an edge, it should prevent the User from dragging or resizing the element further in that direction. Also, do you want it to Snap and what tolerance should that snap be?
Since you did not provide those details, I am not really able to address your second question in full.
I'm doing progress bar the problem is bar animation is not working. I want bar track moves left to right simultaneously % also moves I try but not working animation is not working properly.
can anyone suggest.
thanks.
$(document).ready(function() {
function ProgressBar() {
$('.progress-bar').each(function() {
var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
$(this).find('.progress-bar--barTrack').css('width', percent + '%');
$(this).find('.progress-bar--label').append(percent + '%');
$('.progress-bar--barTrack').animate({
width: $(this).percent,
}, 5000);
});
}
ProgressBar();
});
.progress-bar {
position: relative;
}
.progress-bar-s1 .progress--barTitle {
padding: 1% 1% 3% 0;
width: 15%;
}
.progress-bar-s1 .progress-bar--inner {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
background-color: #ebebeb;
}
.progress-bar-s1 .progress-bar--barTrack {
position: relative;
display: block;
padding: 20px 0;
width: 0;
background-color: #F7CA18;
}
.progress-bar-s1 span.progress-bar--label {
position: absolute;
top: 35%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
<div class="progress--barTitle">Integrity</div>
<div class="progress-bar--inner">
<span class="progress-bar--barTrack" data-width="60"></span>
</div>
<span class="progress-bar--label"></span>
</div>
Don't set the width of barTrack using .css() method and use correct variable i.e. percent instead of $(this).percent to set width in the animate method.
As per comment i want to move 60% also simultanously
You need to animate .progress-bar--label also and also modify its CSS rules.
$(document).ready(function() {
function ProgressBar() {
$('.progress-bar').each(function() {
var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
$(this).find('.progress-bar--label').text(percent + '%');
$(this).find('.progress-bar--barTrack, .progress-bar--label').animate({
width: percent + '%'
}, 5000);
});
}
ProgressBar();
});
.progress-bar {
position: relative;
}
.progress-bar-s1 .progress--barTitle {
padding: 1% 1% 3% 0;
width: 15%;
}
.progress-bar-s1 .progress-bar--inner {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
background-color: #ebebeb;
}
.progress-bar-s1 .progress-bar--barTrack {
position: relative;
display: block;
padding: 20px 0;
width: 0;
background-color: #F7CA18;
}
.progress-bar-s1 span.progress-bar--label {
position: relative;
text-align:right;
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
<div class="progress--barTitle">Integrity</div>
<span class="progress-bar--label"></span>
<div class="progress-bar--inner">
<span class="progress-bar--barTrack" data-width="60"></span>
</div>
</div>
I tried to write a program to practice my js skills. There are 3 balls and they are hidden at first. I want the ball_1 shows up first, and after 1 sec, ball_1 disappears. Next, ball_2 shows up and after 1 sec it disappears; same logic goes with ball_3. When I run my code, the first two balls does not hide. I am not sure what is going wrong. The code below are the html, css, and js code that i wrote. Hope someone could help me out. Thank you in advance.
$(document).ready(function() {
var notes = ['ball_1', 'ball_2', 'ball_3'];
for (i = notes.length; i > 0; i--) {
var note = notes.shift();
$('#' + note).addClass('shown');
setTimeout(function() {
$('#' + note).removeClass('shown');
}, 1000);
}
});
#ball_1 {
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2 {
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3 {
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ball">
<div id="ball_1" class="not_shown"></div>
<div id="ball_2" class="not_shown"></div>
<div id="ball_3" class="not_shown"></div>
</div>
In general never modify an array when iterating using a for loop. The shift method will remove the first item from the array thus modifying it's length. Instead do this:
$(document).ready(function() {
var notes = ['ball_1','ball_2','ball_3'];
var i; // You were declaring "i" in global namespace before. Don't do that.
for(i = 0; i < notes.length; i++){
var note = notes[i];
$('#' + note).addClass('shown');
setTimeout(function() {
$('#' + note).removeClass('shown');
},1000);
}
});
Also you will see from my note that you were defining "i" in the global namespace. It is never good to do that so always make sure to define your variables at the beginning of the function block if using "var".
EDIT: missed a semicolon
EDIT2: completely missed that i needed to change up the loop condition.
You are looking for an asnychronous play of events - first ball_1 shows up for 1 sec and after that ball_2 shows up for 1 sec and so forth.
Something like this won't work:
for( var i = 0; i < notes.length; i++){
$('#' + notes[i]).addClass('shown');
setTimeout(function() {
$('#' + notes[i]).removeClass('shown');
},1000);
}
because the timeouts will be registered one after the other in quick succession and all the balls will show up and hide in little over one second.
So you can create a callback and set the timeout for the next ball only after the previous ball has been shown fully for 1 sec - see demo below:
$(document).ready(function() {
var notes = ['ball_1', 'ball_2', 'ball_3'];
hideBall(notes,0);
});
function hideBall(notes,i) {
$('#' + notes[i]).addClass('shown');
hide(function() {
if(++i < notes.length) {
hideBall(notes,i);
}
}, notes[i]);
}
function hide(callback, note) {
setTimeout(function() {
$('#' + note).removeClass('shown');
callback();
}, 1000);
}
#ball_1 {
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2 {
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3 {
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1,
#ball_2,
#ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ball">
<div id="ball_1" class="not_shown"></div>
<div id="ball_2" class="not_shown"></div>
<div id="ball_3" class="not_shown"></div>
</div>
Hope this is what you need
$(document).ready(function() {
var notes = ['ball_1','ball_2','ball_3'];
for(i = notes.length; i > 0; i--){
var note = notes[i];
$('#' + note).addClass('shown');
hideBall(note, i)
}
});
function hideBall(note) {
setTimeout(function() {
$('#' + note).removeClass('shown');
},1000 * i);
}
#ball_1{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2{
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3{
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1, #ball_2, #ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
<div id = "ball_1" class = "not_shown"></div>
<div id = "ball_2" class = "not_shown"></div>
<div id = "ball_3" class = "not_shown"></div>
</div>
What you are trying won't work as it will run the for loop all in one go, setting up 3x timeouts.
try something like this
jQuery(document).ready(function($) {
function myBallLoop(){
// increment as needed
if(typeof note == 'undefined') {
var note = 1;
} else if (note == 3){
break; // end loop
} else {
note ++;
}
// show current ball qickly
$('#ball_' + note).show('fast', function(){
// call back after show event
// hide current ball after 1 sec
r = setTimeout(function(){$('#ball_' + note).hide()}, 1000);
// self call function after 2 seconts
t = setTimeout(function(){myBallLoop();, 2000}
});
}
// loop start
myBallLoop();
});
Take advantage of what jquery gives you.
Iterate using $.each is also the same as ES5's forEach. Using delay method to delay a function of adding classes is similar to setTimeout.
$(document).ready(() => {
var notes = ['ball_1','ball_2','ball_3'];
let showBalls = (i, item) => {
$('#' + item).delay(i * 1000).queue(() => {
$('#' + item).addClass('shown');
$('#' + notes[i - 1]).removeClass('shown').clearQueue();
});
}
$.each(notes, (i, item) => {
showBalls(i, item);
});
});
#ball_1{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_2{
width: 10px;
height: 10px;
background: #0000FF;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_3{
width: 10px;
height: 10px;
background: #7FFF00;
border: 2px solid #ccc;
border-radius: 50%;
}
#ball_1, #ball_2, #ball_3 {
width: 10px;
height: 10px;
border: 2px solid #ccc;
border-radius: 50%;
}
.not_shown {
display: none;
}
.shown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "ball">
<div id = "ball_1" class = "not_shown"></div>
<div id = "ball_2" class = "not_shown"></div>
<div id = "ball_3" class = "not_shown"></div>
</div>
Ok i have a div where there are messages from other users. I want that when they type something, that if the div is overflowing, the scrollbar goes to the bottom of the div I have tried this:
$('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
but i hace this error:
enviar.js:10 Uncaught TypeError: Cannot read property 'top' of undefined
the test page:
<body background="fondos/fondo-inicio.jpg"">
<ul>
<li><a class="active" href="inicio.php">Inicio</a></li>
<li>Administracion</li>
<li>Reporta</li>
<ul style="float:right;list-style-type:none;">
<li>Sobre mi</li>
<li>Logout</li>
</ul>
</ul>
<div id="contenedor"><span id="final"></span></div>
<input type="text" id="mensaje" name="mensaje" />
<button id="boton">Enviar</button>
</body>
You just need to update the scroll position when you append the content.
This code works,and the essential part is the updatePos() function that i have added in
Whether you use php or otherwise, this is the bit that will make the difference.
You can use your original code and append the updatePos() but this is for example purposes (obviously i don't have access to your db)
$(function() {
$('#boton').on('click', function() {
var content = $('#mensaje').val();
$('#contenedor').append(content + '<br>');
$('#final').animate({
scrollTop: $('#contenedor').offset().top
}, 1000);
$('#mensaje').val('');
updatePos();
});
});
$(function() {
$('#mensaje').keydown(function(event) {
if (event.which == 13 || event.keycode == 13) {
var content = $('#mensaje').val();
$('#contenedor').append(content + '<br>');
$('#mensaje').val('');
updatePos();
}
});
function updatePos() {
var element = document.getElementById("contenedor");
element.scrollTop = element.scrollHeight;
}
});
#contenedor {
width: 40%;
height: 200px;
border-style: solid!important;
border-width: 3px!important;
overflow-y: scroll;
position: relative;
margin-bottom: 10px;
top: 20%;
left: 30%;
background-color: white;
border-style: solid;
border-width: 3px;
border-color: #07B3D1;
}
#mensaje {
width: 20%;
height: 6%;
position: relative;
display: inline-block;
left: 30.2%;
border-style: solid;
border-width: 3px;
border-color: #07B3D1;
}
#boton {
width: 5%;
min-width: 75px;
height: auto;
border-style: solid;
border-width: 3px;
border-color: #07B3D1;
position: relative;
display: inline-block;
left: 30%;
transition: all 0.5s;
font-size: 100%;
}
#boton:hover {
box-shadow: 0 10px 10px 0 #FFFFFF;
}
#final {
width: 100%;
height: 200px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body background="fondos/fondo-inicio.jpg">
<ul>
<div id="contenedor"> <span id="final"></span></div>
<input type="text" id="mensaje" name="mensaje">
<button id="boton">Enviar</button>
</ul>
</body>
You provided the following code:
$('div').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
Which looks as though you've wrapped the #final element in two jQuery wrappers. Remove the duplicate $() and it should work as expected. It's undefined because it can't parse a jQuery object from another jQuery object. Here's the corrected code:
$('div').animate({
scrollTop: $('#final').offset().top
}, 1000);
I'm trying to attach some kind of tips above buttons and show them on hover so they will appear directly aside to mouse pointer. I want to store text for those tips in data-attributes of buttons and create them dynamically using jquery. I use .pageX .pageY stuff to find coordinates of cursor, but it's working fine only in certain point of scroll.
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.pageY-230,
left: e.pageX+15
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.pageY-230,
left: e.pageX+15
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>
You better watch it: http://jsfiddle.net/millerJr/ps8vf8ce/
So, how to attach those tips to pointer directly, regardless to scroll position? Thanks!
You need to use e.clientX and e.clientY in this manner
top: e.clientY+$(this).height() and left: e.clientX+$(this).width()/2 for bottom center of this element in scope. You can add anything else wrt the current element hovered upon
e.clientX and e.clientY will provide the exact mouse co-ordinates
Snippet Below
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>