I'm a beginner and just learning, so I was hoping to get some quick help with some code that I'm using to help me with a project I'm working on.
Basically, the code that I'm using to help me with my project is shown below, and it's only letting me show one tool tip for each element. How would I be able to have each element show a different tooltip using this code? Your help is much appreciated!
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>jQuery tooltips example</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">hint (mouseover me)</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
</body>
</html>
Here is a link to test.
Try something more like this?
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
console.log($(event.target).data('tip'));
var tip = $(event.target).data('tip');
$('div.tooltip').remove();
$('<div>', {
class: "tooltip",
html: "I am "+tip+" :)"
})
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("#username, #hint").hover(
function(e){
showTooltip(e);
},
function(e){
hideTooltip(e);
}
);
Here's an example: http://jsfiddle.net/2kzeX/1/
Related
How would i be able to find the top, left, bottom and right position of multiple moveable elements on a page? I tried jQuery .position() for it, however the function gives me the position of only the most recent moveable element created (div). Here's the code -
Finding Position -
$(document).on('click', function(e) {
var createdWindow = $(nWindow).position();
var createdWindow_right = $(nWindow).position().left + $(nWindow).width();
var createdWindow_bottom = $(nWindow).position().top + $(nWindow).height();
console.log("Top position: " + createdWindow.top + ", Left position: " + createdWindow.left + ", right position: " + createdWindow_right + ", bottom position: " + createdWindow_bottom);
// returns an object with x/y coordinates of the top-left corner of the element
});
Div Creation -
function windowProperties(containment,x,y,width,height){ //New Window Style and jQuery Functions
$(containment).append('<div id="window'+divCount+'"><p id="para'+divCount+'">Drop Here</p></div>');
nWindow = document.getElementById('window'+divCount);
paragraph = document.getElementById('para'+divCount);
paragraph.style.color = "black";
paragraph.style.fontSize = "20px";
paragraph.style.fontWeight = "bold";
paragraph.style.padding = "10px";
paragraph.style.textAlign = "center";
nWindow.style.width = width+"px"; //680
nWindow.style.position = "absolute";
nWindow.style.height = height+"px"; //294.75
nWindow.style.opacity = "0.5";
nWindow.style.background = "white";
nWindow.style.zIndex = "200";
nWindow.style.top = x+"px";
nWindow.style.left = y+"px";
};
Use draggable event property of an element and send event on drag events.
For Example:-
<div draggable = true ondragstart="abc(event)>
//some HTML CODE
</div>
<script>
function abc(event)
{
console.log(event) // here in this event you get all the data of draggable elements
}
</script>
Consider the following example.
$(function() {
$.fn.getPosition = function() {
var results = $(this).position();
results.right = results.left + $(this).width();
results.bottom = results.top + $(this).height();
return results;
}
$(".drag").draggable({
containment: "parent",
stop: function(e, ui) {
console.log($(this).attr("id"), $(this).getPosition());
}
});
});
.cnt {
width: 340px;
height: 340px;
border: 1px solid black;
}
.drag {
width: 20px;
height: 20px;
background: #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="cnt">
<div class="drag" id="box-1"></div>
<div class="drag" id="box-2"></div>
</div>
This creates a function that can get you the full position. You can then use that in stop callback for a Drag action.
My Question is: Change opacity of a particular div, on mouse hover, and add a text label, to display which div is being hovered and changed opacity.
My Solution so far- I have changed the opacity, but for all the divs(HISTOGRAM, basically).
Problem- Want to change for a particular div, on HOVER.
HTML File
<head>
<title>Statistical Histograms</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="boxes.css">
<!-- <script src="alter.js"></script> -->
</head>
<body>
<script type="text/javascript" src="box.js"></script>
<form>
Number:<input type="text" id="number"/><br>
<input type="button" id="button1" value="Draw" onClick="draw()"/><br>
<input type="button" id="button2" value="Change Color" onClick="color()"/><br>
<div id="histContainer" style="position: relative;"> </div>
<!-- <input type="button" id="color_change" style="float: right;" value="Change Color" /> -->
</body>
JavaScript File
function draw()
{
var nums = document.getElementById("number").value.split(",");
console.log(nums);
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
console.log("h max is " + h_max);
console.log("n max is " + n_max);
//var h_max = Math.max(h);
//var a = parseInt(nums);
//var create = document.getElementById("shape");
for (var i = 0 ; i <= nums.length ; i++)
{
//var x = parseInt(nums[i]);
//var final_width = w / x;
var x_cor = (i+1) * w;
//var y_cor = i * w * 0.5;
var h = factor * nums[i];
console.log(x_cor);
console.log(h);
//console.log(h_max);
var change = document.getElementById("histContainer");
//change.className = 'myClass';
var bar = document.createElement("div");
bar.className = 'myClass';
//var c_change = document.createElement("div2");
//change.appendChild(c_change);
change.appendChild(bar);
console.log(change);
//change.style.x.value = x_cor;
//change.style.y.value = y_cor;
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
//bar.style.transform = "rotate(-1deg)"
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
//var color1 = document.getElementById("histContainer");
//var bar_color = document.createElement("div");
//color1.appendChild(change);
//bar.style.color = "rgba(1,211,97,0.6)";
}
}
$(document).ready(function() {
$("#histContainer").bind("mouseover", function() {
var shade = $("#histContainer").css("opacity");
$("#histContainer").css("opacity", "0.7");
$("#histContainer").bind("mouseout", function() {
$("#histContainer").css("opacity", shade);
});
//$("histContainer").css("opacity", "0.4");
});
});
Add a class to all divs you would like to attach the hover event to, e.g.
<div class="histogram" id="histogram1"></div>
<div class="histogram" id="histogram2"></div>
<div class="histogram" id="histogram3"></div>
<div class="histogram" id="histogram4"></div>
Then use jquery's hover function to capture the event:
$(document).ready(function() {
$('.histogram').hover(
function() { // handler in
$( this ).css('opacity', 0.7);
// Additional actions (display info, etc.)
}, function() { // handler out
$( this ).css('opacity', 1);
// Additional actions (hide info, etc.)
}
);
})
Use CSS for this.
CSS:
#hover-content {
display:none;
}
#hover-me:hover #hover-content {
display:block;
}
#hover-me:hover {
opacity: 0.8;
}
HMTL:
<div class="container">
<div id="hover-me">
<span>Hover Me</span>
<div id="hover-content">
This content is visible only when you mouse hover the parent div and it has no transition.
</div>
</div>
</div>
Shouldn't you use CSS for that? Give a equal class to your divs and then just do :
.your_div : hover {
opacity: 0.8;
}
check out this snippet if you want only backgroundto be opaque try rgba()
$(document).ready(function() {
$('.histogram').hover(
function() {
$( this ).css('opacity', '0.7');
}, function() {
$( this ).css('opacity', '1');
}
);
})
.histogram{
height:40px;
width:40px;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.yell{
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="histogram red" >1</div>
<div class="histogram blue">2</div>
<div class="histogram green">3</div>
<div class="histogram yell" >4</div>
Use this javascript instead. It works.
function draw()
{
var nums = document.getElementById("number").value.split(",");
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
for (var i = 0 ; i <= nums.length ; i++)
{
var x_cor = (i+1) * w;
var h = factor * nums[i];
var change = document.getElementById("histContainer");
var bar = document.createElement("div");
bar.className = 'myClass';
change.appendChild(bar);
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
}
}
$(document).ready(function() {
$(document).on("mouseover",".myClass", function(index,el) {
$(this).text($(this).index());
var shade = $(this).css("opacity");
$(this).css("opacity", "0.7");
$(document).on("mouseout",".myClass", function() {
$(this).css("opacity", shade);
});
});
});
I have an animation which is called using onmousedown. I have another function which stops the animation (onmouseup).
The problem is that it only works the first time. By that I mean when I hold the button, it works and then stops when I stop pressing down but if I try to use either of the buttons after that first time nothing happens. It just won't move.
This is my HTML code (index.htm):
<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
<img id='player' src='img/player.png' style='height:64px;'></img>
<div class='buttons'>
<button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button>
<button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button>
</div>
</body>
</html>
<script type='text/javascript' src='move.js'></script>
This is my javascript code (move.js):
var elem = document.getElementById("player");
function OnButtonDownl (button) {
var posl = document.getElementById("player").style.left;
window.idl = setInterval(framel, 5);
function framel() {
posl--;
elem.style.left = posl + 'px';
}}
function OnButtonUpl (button) {
clearInterval(idl);
}
var elem = document.getElementById("player");
function OnButtonDownr (button) {
var posr = document.getElementById("player").style.left;
window.idr = setInterval(framer, 5);
function framer() {
posr++;
elem.style.left = posr + 'px';
}}
function OnButtonUpr (button) {
clearInterval(idr);
}
Probably not important but here is my css (style.css):
body {
width: 100%;
height: 100%;
position:relative;
margin:0;
overflow:hidden;
}
#player {
position: absolute;
left:0;
bottom:0;
}
.buttons {
position:absolute;
right:0;
bottom:0;
}
Thanks for any help in advance.
You're running into 2 issues.
When you first get posl and posr, you're getting an empty string that JS is coercing to 0.
The -- and ++ won't work after you append the px (thus making posl and posr into string values)
Your posl-- (and posr++) can increment that coerced 0. That's why it works the first time through. The next time you mousedown the document.getElementById("player").style.left is a string — like "-1px" — that isn't interpreted as falsy (won't be coerced into 0). You can get around that by using parseInt() when you cache posl|posr but you have to provide a fallback of 0 because parseInt("") returns NaN…
You can work around that like so (with similar changes when you get posr):
var posl = parseInt( document.getElementById("player").style.left, 10 ) || 0;
var elem = document.getElementById("player");
function OnButtonDownl(button) {
//var posl = document.getElementById("player").style.left;
var posl = parseInt(document.getElementById("player").style.left, 10) || 0;
window.idl = setInterval(framel, 5);
function framel() {
posl--;
elem.style.left = posl + 'px';
}
}
function OnButtonUpl(button) {
clearInterval(idl);
}
var elem = document.getElementById("player");
function OnButtonDownr(button) {
//var posr = document.getElementById("player").style.left;
var posr = parseInt(document.getElementById("player").style.left, 10) || 0;
window.idr = setInterval(framer, 5);
function framer() {
posr++;
elem.style.left = posr + 'px';
}
}
function OnButtonUpr(button) {
clearInterval(idr);
}
body {
width: 100vw;// changed for example only
height: 100vh;// changed for example only
position: relative;
margin: 0;
overflow: hidden;
}
#player {
position: absolute;
left: 0;
bottom: 0;
}
.buttons {
position: absolute;
right: 0;
bottom: 0;
}
<img id='player' src='//placekitten.com/102/102' />
<div class='buttons'>
<button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)">Left</button>
<button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">Right</button>
</div>
I was rewrite your code and it work (for me).
function Move(elem){
this.interval;
var posr = parseInt(getComputedStyle(document.getElementById("player")).left);
this.handleEvent = function(event) {
switch (event.type) {
case 'mousedown':
this.interval = setInterval(function() {
if (event.target.id == 'moveright') {
posr++;
} else if (event.target.id == 'moveleft'){
posr--;
}
document.getElementById("player").style.left = posr + 'px';
},5);
break;
case 'mouseup':
clearInterval(this.interval);
break;
}
}
elem.addEventListener('mousedown', this, false);
elem.addEventListener('mouseup', this, false);
}
var button_right = document.getElementById("moveright");
var button_left = document.getElementById("moveleft");
Move(button_right);
Move(button_left);
And in html you can remove js event listeners (this need only id).
First of all it is good practice to put your script tag inside your html tags:
<html>
<head>...</head>
<body>...</body>
<script type='text/javascript' src='move.js'></script>
</html>
Done that check this solution:
HTML:
<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
<img id='player' src='https://placeimg.com/54/45/any' style='height:64px;'></img>
<div class='buttons'>
<button id='moveleft' onmousedown="OnButtonDown('left')" onmouseup="OnButtonUp()"><--</button>
<button id='moveright' onmousedown="OnButtonDown('right')" onmouseup="OnButtonUp()">--></button>
</div>
<script type='text/javascript' src='move.js'></script>
</body>
</html>
And js:
var nIntervId;
var b;
var elem = document.getElementById("player");
var posl = document.getElementById("player").style.left;
function OnButtonDown(button) {
b = button;
nIntervId = setInterval(frame, 5);
}
function frame() {
if(b==='left'){
posl--;
elem.style.left = posl + 'px';}
else{
posl++;
elem.style.left = posl + 'px';
}
}
function OnButtonUp() {
clearInterval(nIntervId);
}
http://output.jsbin.com/varaseheru/
On this page I find effect that I like and try to put it on my site but after six hour googling still nothing
http://terranea.demos.sabrehospitality.com/
So when you clik on "guide" in navigation footer slide up.
#IndexGuide{
position:relative;
width:100%;
z-index:98;
background:#fff;
}
is my div CSS and with this function I get result but with no animation like on that page
function GuideSlide(){
$('#IndexGuide').css({
'position': 'absolute',
'top': '80px',
'z-index': '100'
});
};
I look in their page source and they do something like this
$('#guide-toggle').click(function () {
$(this).toggleClass('active');
$('#guide-close').toggleClass('visible');
$('#work-cont').slideToggle();
$('#myModal2 .close').click();
if ($(this).hasClass('active')) {
currentOffset = $(document).scrollTop();
scrollPageTo(0);
} else {
scrollPageTo(currentOffset);
}
if($('#masthead,#myCarousel').length>0) {
$('#masthead,#myCarousel').slideToggle();
}
return false;
});
I try to modify but with no result.
Here is script that worked in all browsers for me!
$(document).ready(function() {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").css({top:newPosition}, 1000, function(){});
});
var flag = 'up';
function GuideSlide(){
if(flag == 'up'){
$("#IndexGuide").animate({"top": "80px"}, 1000);
flag = 'down';
}
else {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").animate({top:newPosition}, 1000, function(){});
flag = 'up';
}
};
try this check fiddle
<div class="link"><a class="open-modal" href="#myModal">Guide</a></div>
<div style="position:relative;">
<div class="header">header</div>
<div id="IndexGuide" class="footer">Footer</div>
</div>
js
var flag = "up";
$(".open-modal").click(function(){
if(flag == "up"){
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "0%"}, 2000, function() {
});
flag = 'down';
} else {
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "100%"}, 2000, function() {
});
flag = 'up';
}
})
reference https://stackoverflow.com/a/15626812/1699833
Do it with animate(). Something like this
$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
// after animation stuff
});
You could also do it without edit the position to absolute and set a negative margin-top.
Refer this link http://api.jquery.com/toggle/
I hope The following simple example will give you the solution as you expected. The following example is got from the link http://api.jquery.com/toggle/. I've copied the code so that you no need to search through the website.
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p { background: #dad; font-weight: bold; font-size: 16px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Toggle 'em</button><p>Hiya</p><p>Such interesting text, eh?</p> <script>
$( "button" ).click(function()
{
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>
This is a function thats supposed to move an image slowly to the right, it isnt working... what did i mess up?
<script type="text/javascript">
var userWidth = window.screen.width;
function moveRight(id, speed) {
var pp = document.getElementById(id);
var right = parseInt(pp.style.left);
var tim = setTimeout("moveRight(id, speed)",50);
right = right+speed; // move
if (right > window.screen.height / 2)
{
right=0;
pp.style.left = right+"px";
}
}
</script>
Looks like id and speed aren't getting passed into moveRight(). When they're in the string as you have them they won't get evaluated. Have a look at this, it seems to do the trick. I stripped it down a little.
<div id="test" style="width: 50px; height: 50px; left: 0px; background-color: #000; position: absolute;"> </div>
<script type="text/javascript">
function moveRight(id, speed) {
var pp = document.getElementById(id);
var right = parseInt(pp.style.left) || 0;
right += speed; // move
pp.style.left = right + "px";
var move = setTimeout(function() {
moveRight(id, speed);
}, 50);
}
moveRight('test', 1);
</script>
A jsfiddle to play with. You can tweak it to your liking.