I've been trying to bind events to jquery objects (code below) but its really not working at all. Could somebody offer me a suggestion? Thanks!
var img = thumbnail[0].appendChild(document.createElement('img'));
img.className = 'smallboard';
img.src = 'res/smallboard' + i + '.jpg';
img.onload = function() {console.log('small board loaded.');}
img.style.top = (8-i)*height+5 + 'px';
img.style.left = 4 + 'px';
var jqimg = $(img);
jqimg.bind('click', function(){
console.log(i + '');
show_board(i-1, true);
});
Here, thumbnail is a jquery element and i is a small whole number. I had problems with binding it in another way as well. (code below)
highlight = $('<div id="level_highlight"></div>');
highlight.css('height', height + 'px');
highlight.css('width', width + 'px');
highlight.css('display', 'inline');
highlight.css('left', posx + 'px');
highlight.css('top', posy + 'px');
highlight.bind('mouseover', function() {console.log('mousing over highlight');});
Its not working here either. I feel I am making a silly error somewhere. I'm using Chrome.
Thank you!
seems to work for me...
see my jsFiddle example. Am I missing something?
Is it just an error in your retranscription here or did you froget
the var before highlight ?
var highlight = $('');
Did you append it somewhere in the DOM ($('body').append(highlight);) or something, if it already exists, you should do var highlight = $('#level_highlight'); instead
Thanks guys. The answer was that since this code is an over-simplification of the code-base, I'd missed out a part where the z-index for the container element for this section was set to -10. Set that part correct and it worked like a charm.
Thanks.
Related
Hello everyone this is my first question so I might have done it wrong.
What I am trying to achieve is is have multiple <aside> elements all with the same ID Class and of course Tag be able to be moved anywhere on the screen with drag and drop characteristics. I have found a JSFiddle demonstrating the code I am basing this around that uses one aside element with the ability to be moved anywhere, but will not work when multiple elements are used. The code controlling the movement is here:
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' +
(parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
}
var dm = document.getElementById('dragme');
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
The part I am having trouble with is the drop system which requires the elements to have individual ids. I also need to have all aside elements have to same id and I don't want to use classes. I have tried and thought and searched the web for the past three days with no luck of finding an answer as all link back to this same code. I have looked into getting the index of the last element clicked but cannot find a way to get all elements with the same ID. Thanks in advanced - bybb
Update: Have broken the dnd system need help with that:
var dragindex = 0;
$(document).ready(function(){
$("aside").click(function(){
dragindex = $(this).index();
});
});
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('#winborder');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
}
function makewindow(content, storevar) {
storevar = document.createElement('aside');
storevar.setAttribute("dragable", "true");
storevar.setAttribute("id", "winborder");
var content = document.createElement('div');
content.setAttribute("id", "wincontent");
storevar.appendChild(content);
document.body.appendChild(storevar);
storevar.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
}
Have tried with and without '#' on getelementbyid
The following code will allow drag and drop; I'm sorry it doesn't follow your previous coding style.
Here is a JSFiddle showing it in action: https://jsfiddle.net/6gq7u8Lc/
document.getElementById("dragme").onmousedown = function(e) {
this.prevX = e.clientX;
this.prevY = e.clientY;
this.mouseDown = true;
}
document.getElementById("dragme").onmousemove = function(e) {
if(this.mouseDown) {
this.style.left = (Number(this.style.left.substring(0, this.style.left.length-2)) + (e.clientX - this.prevX)) + "px";
this.style.top = (Number(this.style.top.substring(0, this.style.top.length-2)) + (e.clientY - this.prevY)) + "px";
}
this.prevX = e.clientX;
this.prevY = e.clientY;
}
document.getElementById("dragme").onmouseup = function() {
this.mouseDown = false;
}
On a side note, you won't be able to give them all the same id. The DOM doesn't support such a thing. If you want to add multiple elements of the same type, I would suggest a 'container' parent div, adding the elements as children of the div, and iterating through the .children attribute to access each.
Don't know if you want to use Jquery or not, but I know it's way simpler than the raw javascript solution. I've been searching the internet and Stack Overflow for a simple drag-and-drop anywhere on a web page solution, but I couldn't find one that worked. The other answers to this question have been weird for me. They sometimes work, sometimes don't. However, a friend suggested using the Jquery version, and wow, it's so much simpler. Just one line of code!
var dragme = document.getElementsByClassName("dragme");
for (var i = 0; i < dragme.length; i++) {
$(dragme[i]).draggable();
}
.dragme {
cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<h1 class="dragme">Try dragging me anywhere on this sample!</h1>
<h2 class="dragme">Drag me, too!</h2>
IMPORTANT NOTE: This code does not work with just Jquery, it also requires the Jquery UI file.
If the above sample does not work for you, please comment the error it show below. Note that this works for an unlimited amount of elements. This specific example is for elements with the class "dragme", so just replace that with your own class. For one element, it is a single line of code: $("#yourid").draggable();.
This code works for me on Google Chrome. Hope this helps anyone coming on to this page late, like me!
The following code is working fine, but I'm looking for a way to animate/interpolate between the two creating a slide effect. How can I achieve this?
(I need to have the odd click function as is probably because of how the rest of the site works, otherwise I would have used the jqueryUI slide function)
$('.boxbtn').on('click', function () {
var boxwidth = $('.box').width();
console.log(boxwidth);
console.log('-' + boxwidth + 'px');
var oddClick = $(this).data("oddClick");
$(this).data("oddClick", !oddClick);
if (oddClick) {
$(".box").css('margin-left', ('-' + boxwidth + 'px'));
}
});
Wird, I thought this is obvious but not necessarily, can anybody tell me how to detect margin with jQuery? I have this and in console i have good result but it's not working on page:
var margin_left = circle.css('margin-left').toLowerCase();
circles_container.css('margin-left', -margin_left + 'px');
Much thx for help.
I would say this should be more accurate:
var margin_left = circle.css('margin-left');
circles_container.css({marginLeft: '-'+margin_left});
OK i have this and also it's work:
var margin_left = l_circle.css('margin-left').replace("px", "");
container.css('margin-left', -margin_left + 'px');
Try this -
var marginLeftVal = circle.css('marginLeft');
marginLeftVal = parseInt(marginLeftVal)*-1;
circles_container.css({
marginLeft: marginLeftVal
});
YOu could also start using the JSizes library.
Found on this page:
http://www.bramstein.com/projects/jsizes/
Allows you to easily retrieve or set a property of margin, padding, or other attributes.
I'm trying to create a javascript function that (onmouseover) would increase elements height and width by 10px (1px increase 10 times with setTimeout), but instead my element increases 200px in height and 100px in width. That doesn't make any sense. Example on how it's not working properly: www.modwebsolutions.com/test3/ My source code:
var el;
function changeSize(id) {
var elem=document.getElementById(id);
el=elem;
for (var i=0; i<10; i++) {
setTimeout(changeS,100);
}
}
function changeS() {
var tempHeight=el.offsetHeight;
var tempWidth=el.offsetWidth;
el.style.height=tempHeight + 1 +"px";
el.style.width=tempWidth + 1 + "px";
}
// Update: tried
el.style.height=(parseInt(tempHeight) + 1) +"px";
el.style.width=(parseInt(tempWidth) + 1) + "px";
this time only adds 50px to height and still 100px to width... instead of 10px each way.
UPDATE: it seems that I'm gonna have to answer my own question, I'm still not sure, but I think it has to do with iterations running ahead of setTimeout and messing everything up. Unfortunately it seems that setTimeout can only work ok in recursive functions.
UPDATE2: recursive approach doesn't work as well... a total dead end.
May be because tempWidth and tempHeight are trated as string you should try...
el.style.height= (parseInt(tempHeight) + 1) +"px";
el.style.width= (parseInt(tempWidth) + 1) + "px";
Change the function to:-
function changeS() {
var tempHeight=el.offsetHeight;
var tempWidth=el.offsetWidth;
el.style.height = (parseInt(tempHeight) + 1) +"px";
el.style.width = (parseInt(tempWidth) + 1) + "px";
}
Hope this helps because I feel offsetHeight will return *px which will result the style height to be *pxpx which will fail to render properly!
Cheers
From a similar problem,
Instead of
tempHeight + "px";
try
tempHeight + "pxpx";
Although it makes no sense and it's not documented, I found this to correct to the proper heights in IE10 as well as Firefox, Chrome and Opera using the style.height property. IE earlier versions not tested. It must be a data type problem.
How can I get position of an element based on view? So as viewer scroll I get different values.
jQuery is prefered.
Do you mean relative to the viewable window?
If so, you can use something like this:
$("#element").offset().top - $(window).scrollTop()
That will return a positive number until it is scrolled off the window, at which point it will return a negative number.
$(function() {
$(window).scroll(function() {
var pos = $('#button_id').offset(),
top = pos.top - $(window).scrollTop(),
lft = pos.left - $(window).scrollLeft();
$("#where").html("Top: " + top + "\nLeft: " + lft);
});
});
Try it out with this jsFiddle
HTML something like the following:
<div id="button_id">Button ID</div>
<div id="where"></div>
Maybe something like this?
(jQuery)
var pos = $('#button_id').position();
alert("POSITION: \nLeft: "+pos.left + "\nTop: " + pos.top);
Source:
http://blog.ekini.net/2009/01/30/jquery-find-position-the-exact-position-of-an-element-in-the-browser-window/
Good luck, if you edit your question maybe I´ll be able to helo you better