I found this snipplet online and altered it so I hoped it would work for me:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/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:lightblue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>Testpage</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">Tooltip</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX + 15;
var tooltipY = event.pageY - 20;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var testext = {
"hint_text": {
"attr1": "String1/1",
"attr2": "String1/2"
},
"username_text": {
"attr1": "String2/1",
"attr2": "String2/2"
}
};
var showTooltip = function(event, id) {
var outputid= id+"_text";
$('div.tooltip').remove();
$('<div class="tooltip">'+testext[$outputid]['attr2']+'</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>
I have for example the id "hint" and I want to use the hint_text/attr2 tooltip. So I take the id ( var showTooltip = function(event, id)) and append "_text" to it (var outputid= id+"_text";) and then use that to get the tooltip ($(''+testext[$outputid]['attr2']+'').appendTo('body');).
When I use a static value like testext['hint_text']['attr2'] it works but like this I can't get it done.
Where am I going wrong?
Any ideas?
Thanks in advance.
Hi Please try the following code ....
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/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:lightblue;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>Testpage</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">Tooltip</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX + 15;
var tooltipY = event.pageY - 20;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var testext = {
"hint_text": {
"attr1": "String1/1",
"attr2": "String1/2"
},
"username_text": {
"attr1": "String2/1",
"attr2": "String2/2"
}
};
var showTooltip = function(event, id) {
if(id!='document'){
var outputid= this.id+"_text";
$('div.tooltip').remove();
$('<div class="tooltip">'+testext[outputid]['attr2']+'</div>').appendTo('body');
changeTooltipPosition(event);
}
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
Related
I want the image to follow along with the mouse when the mouse is move but when the mouse has clicked once anywhere the image stops following; it begins following when the mouse has clicked again
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Mousemove">
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$(document).click(function(e) {
$(".image").mousemove({ top: e.pageY, left: e.pageX });
});
});
</script>
</head>
<body>
<img class="image" src="../images/food%20photgraphy2.jpg" height="50px" width="55px" alt="food">
</body>
</html>
As you can see, when the mouse moves the image doesn't follow along with the mouse and I'm not able to click anywhere. Why is my code not working?
Simply as you can see in this snippet, I add a class once the document clicked and and based on that we change the element position, bind/unbind mousemove event and also remove the added class or not based on alternated click, I think this is what you want:
$(document).ready(function () {
$(this).click(function (e) {
if ($('body').hasClass("clicked")) {
$('body').removeClass("clicked");
$("img").css({ top: 0, left: 0 });
$(this).unbind('mousemove');
} else {
$('body').addClass("clicked");
$(this).mousemove(function (e) {
$("img").css({ top: e.pageY, left: e.pageX });
});
}
});
});
img {
position:absolute
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/30x30">
Updated snippet:
$(document).ready(function () {
$(this).mousemove(function (e) {
if (!$('body').hasClass("clicked")) {
$("img").css({ top: e.pageY, left: e.pageX });
}
});
$(this).click(function (e) {
if ($('body').hasClass("clicked")) {
$('body').removeClass("clicked");
//$("img").css({ top: 0, left: 0 });
//$(this).unbind('mousemove');
} else {
$('body').addClass("clicked");
//$(this).mousemove(function (e) {
//$("img").css({ top: e.pageY, left: e.pageX });
//});
}
});
});
img {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/30x30">
Click toggle between events, nest the mousemove in one instance along with addClass('image') and then removeClass('image') in the other.
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$('#move').clickToggle(function() {
$(this).mousemove(function(e) {
$('.image').css({
'top': e.clientY - 20,
'left': e.clientX - 20
});
});
$('#img').addClass('image');
}, function() {
$('.image').removeClass("image");
});
#img {
position: relative;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="move">
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQXNfNpnfElPqK1QE2BSbDlBd49DQZE-xlNxRlLKQxIscKgIKpP&usqp=CAU" height="50px" width="55px" alt="food" id="img">
<div id="log"></div>
</body>
I want a draw something canvas tag , when i put in div it doesnt work. I taked this code from github. it isnot working within div.
github url => https://github.com/GeekLaunch/simple-drawing-web-app
how can i do this ? actually i dont know canvas library. but this codes enough for me. In my project i use bootstrap css library.
var canvas, ctx,
brush = {
x: 0,
y: 0,
color: '#000000',
size: 10,
down: false,
},
strokes = [],
currentStroke = null;
function redraw() {
ctx.clearRect(0, 0, canvas.width(), canvas.height());
ctx.lineCap = 'round';
for (var i = 0; i < strokes.length; i++) {
var s = strokes[i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var j = 0; j < s.points.length; j++) {
var p = s.points[j];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
}
function init() {
canvas = $('#draw');
ctx = canvas[0].getContext('2d');
function mouseEvent(e) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y,
});
redraw();
}
canvas.mousedown(function (e) {
brush.down = true;
currentStroke = {
color: brush.color,
size: brush.size,
points: [],
};
strokes.push(currentStroke);
mouseEvent(e);
}).mouseup(function (e) {
brush.down = false;
mouseEvent(e);
currentStroke = null;
}).mousemove(function (e) {
if (brush.down)
mouseEvent(e);
});
$('#save-btn').click(function () {
window.open(canvas[0].toDataURL());
});
$('#undo-btn').click(function () {
strokes.pop();
redraw();
});
$('#clear-btn').click(function () {
strokes = [];
redraw();
});
$('#color-picker').on('input', function () {
brush.color = this.value;
});
$('#brush-size').on('input', function () {
brush.size = this.value;
});
}
$(init);
body {
margin: 0;
}
.top-bar {
display: flex;
flex-direction: row;
background-color: #3af;
border-bottom: 2px solid black;
position: absolute;
width: 100%;
}
.top-bar * {
margin: 5px 10px;
}
#draw {
display: block;
}
:<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-bar">
<button id="save-btn">Save</button>
<button id="undo-btn">Undo</button>
<button id="clear-btn">Clear</button>
<input type="color" id="color-picker"></input>
<input type="range" id="brush-size" min="1" nax="50" value="10"></input>
</div>
<div style="border:1px solid red;width:500px;height:500px;margin:auto;">
<canvas id="draw" style="border:1px solid red;"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="draw.js"></script>
</body>
</html>
From my observation, the save button is not working on chrome. Because apparently Google Chrome has removed support for top-frame navigation, you can see more informations here: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM
You may try to render the canvas data to an iFrame.
Add below function to your draw.js file:
function debugBase64(base64URL){
var win = window.open();
win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}
Now run the function when click event occurred.
$('#save-btn').click(function () {
debugBase64(canvas[0].toDataURL());
});
Hope it works !
Task:
I created a shape with 4 buttons, and need it to move to 4 directions depending on the button clicked (pure JS).
This is what I created - check out the snippet.
Problem:
Left/Right directions work great, but Up/Down do not.
Any idea why? Looks like both directions are identical. :/
Thanks a lot for your help, much appreciated!
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.left = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.left = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
As pointed by #Temani, in functions moveUp and moveDown, changing shape.style.left to shape.style.top will solve the problem.
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.top = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.top = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
I have written a jquery based application which display images from flickr. A working example is posted in jsfiddle DEMO
The only problem I am having is the endless scroll is not working ie its not getting the next 5 images when I start to scroll close to the bottom.
How can i get the endless scroll to work and how do I know that it has reach the end of all the image(s)?
My code below :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Endless Scroll Flicker feed test 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript">
function myAJAXfun(page) {
var searchTerm = $("#search").val(); // get the user-entered search term
//alert(searchTerm);
var URL2='http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e58bbdc1db64c8f63ff7f7460104aa9d&';
//tags=flower&text=&per_page=5&page=10&format=json
var perpage=5;
currentpage=page;
console.log("currentpage in func "+currentpage);
var tags="&tags="+ searchTerm;
var tagmode="&tagmode=any";
var jsonFormat = "&format=json";
var ajaxURL= URL2+"per_page="+perpage+"&page="+currentpage+tags+tagmode+jsonFormat;
//var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;
$.ajax({
url:ajaxURL,
dataType:"jsonp",
jsonp:"jsoncallback",
success: function(data) {
if(data.stat!="fail") {
console.log(data);
$("#photos").empty();
$.each(data.photos.photo, function(i,photo) {
var photoHTML="";
photoHTML+= "<img src='";
photoHTML+="http://farm"+photo.farm+".static.flickr.com/"+photo.server+"/"+photo.id+"_"+photo.secret+"_q.jpg'";
photoHTML+=" title='"+photo.title+"'" ;
photoHTML+="><br>";
console.log(photoHTML);
$("#photos").append(photoHTML).fadeIn(200);
});
}
}
});
}
$(document).ready(function() {
$("#submit").click(function (event) {
myAJAXfun();
});
$("#photos").scroll(function(){
var page=1;
//var scrolloffset=20;
// if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
// if($("#scrollbox").scrollTop() == $(document).height() - $("#scrollbox").height()-20) {
// check if we're at the bottom of the scrollcontainer
// if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight())
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)
{
$("#submit").click();
myAJAXfun(page);
page++;
// scrollalert()
console.log("page "+page);
}
});
});
</script>
<style type="text/css" >
/*
#container{ width:400px; margin:0px auto; padding:40px 0; }
#scrollbox{ width:400px; height:300px; overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; margin-top:150px;}
#container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}*/
#searchBar {align:center; position:fixed; height:65px; background-color:#777; border:1px solid red; width:100%;top:0;}
#photos {position: absolute; left: 186px; top: 105px; width: 376px; height:550px; overflow:auto; }
</style>
</head>
<body>
<div align="center" id="searchBar">
<div>Enter Search Term</div>
<form><input type="text" id=search />
<input type="button" id=submit value="Search" /><input type="reset" value="Clear" /></form>
</div>
<div id="photos"></div>
</body>
</html>
What you could do is put another div under your "photos" div called "footer" or something. Then you can use the jquery function $(window).scroll() function in conjunction with a, for example, footerInView() function. If the footer is in view when you scroll, you should then call your ajax function again to get new pictures.
For example...
var loading = false;
function footerInView()
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
var elemBottom = elemTop + $("#footer").height();
return (elemBottom >= docViewTop);
}
$(window).scroll(function() {
if(footerInView() && !loading)
{
loading = true;
//call your ajax function and append it to your photos div
}
});
Something like this would probably get the results you're looking for.
I need your help,
How can I re-minimize (set the textarea's class back to normal) when I reclick on the button "expand"
I can get it to work, but just not the other way around.
Here is my HTML + Javascript
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.normal {
width: 400px;
height: 25px;
}
.expand {
height: 400px;
width: 400px;
}
</style>
<script type="text/javascript">
function expand() {
document.getElementById('subject_area').className = "expand"
document.getElementById('expand').value = "minimize"
}
</script>
</head>
<body>
<input class="normal" id="subject_area" type="textarea" >
<input id="expand" type="button" value="expand" onclick="expand()">
</body>
</html>
You can do:
var subject = document.getElementById('subject_area');
var btnExpand = document.getElementById('expand');
subject.className == "expand" ? subject.className = "normal" : subject.className = "expand";
btnExpand.value == "minimize" ? btnExpand.value = "expand" : btnExpand.value = "minimize";
var subject = document.getElementById('subject_area');
var button = document.getElementById('expand');
function expand() {
if (subject.className === 'normal') {
subject.className = 'expand';
button.value = 'minimize';
} else {
subject.className = 'normal';
button.value = 'expand';
}
}
Fiddle here: http://jsfiddle.net/ToddT/aPqgh/