I did a search here and couldn't find any questions with answers that were suitable to this.
I am writing a hockey scoring chance tracker and basically I want to show an image of the hockey ice and each time you click on the image it remembers where you clicked, puts a small red circle where you clicked with a number on top. That number is to be an auto incrementing number. Ultimately I want to track where all the mouse clicks are for storage into a database.
To the side of the image will be a form and each time the mouse is clicked it adds a new row to the table. This part is not too hard, I could easily do it with jquery.
The problem I am having is trying to find a quick easy way to keep laying the same image, multiple times, on top of another image, where the user clicks. I have been looking into HTML5/Canvas, as well as just plain javascript/jquery to do this.
I am here asking for suggestions on easy ways to do this.
Thanks
Here's a super simple jsfiddle with the beginnings of how I might go about doing it - let me know if you've any questions/concerns/need help making further improvements, and I'll be glad to update!
http://jsfiddle.net/jking/4dMJG/
(just prevent my divs are images, and the sidebar is a real form...)
Here is how I would do - simple, short way, I don't know how you want to extend it:
I would create an array, and bind event listener to the div you want your user to click on.
Every time the user clicks on this image, an event object is passed through, you can read out the X and Y coordinates of the mouse - .position() or .offset() depending on your layout.
Create a JSON object, which stores these values:
var hit = {
id: 1,
x: 250,
y: 365,
//add more attributes if you like/need
//for this particular 'hit'
}
And the you can store this object (-notation) in an array:
hitz.push(hit);
Now you should 'update' your UI based on this array.
Just loop through with a for...in loop and create your images:
var hockeyIceClone= $("div.hockey-ice").clone(true);
for (var i in hitz) {
var hit = hitz[i];
hockeyIceClone.append(
//assuming that your .hockey-ice div has position:relative at least
var image = $(new Image('image/path.png'));
//add more stuff for image if you like
$(image).css({
position: absolute,
left: hit.x,
top: hit.y
})
);
}
$("div.hockey-ice").replaceWith(hockeyIceClone);
The reason for cloning is because when you loop through an array and append elements to a 'container' placed out and visible on the UI, it might blink as it renders. So you better 'collect' it first, and place them out to the UI together.
Also you can use other methods than cloning, it's only an option.
Related
I would like to place the next button of a Qualtrics survey in three positions (horizontally aligned: left, middle, right). The position must be constant for the same participant (e.g. for participant 1 always on the left), but should be randomized between participants (e.g. participant 2 on the right, and so on).
I have used the following JS code for individual questions (since I can only add JS for each question but not for the entire survey), but if I apply this to all individual questions the next button will appear in different locations for the same participant:
var Button = document.getElementById("NextButton");
var ButtonContainer = Button.parentNode;
if(Math.random() < 0.333){
ButtonContainer.style.textAlign = "left"
}else {
if (Math.random() < 0.5) {
ButtonContainer.style.textAlign = "center"
} else {
ButtonContainer.style.textAlign = "right"
}
}
Apparently, the only way to add custom code for the entire survey is via CSS (in Look & Feel settings), I'm aware I cannot implement if/else functions in CSS, thus I don't know what to do.
Any hint would be really appreciated! Thanks in advance!
You can run JS on every page in the survey by placing it in the survey header or footer inside a script tag. However, using your script would result in the button being placed in different position on different pages (it would randomize for each page).
Instead, use the survey flow randomizer to set an embedded data variable to "left", "right", or "center". I haven't done it, but you can try piping the embedded variable into your custom CSS to position the button. It that doesn't work you can pipe the embedded data variable into the header/footer JS to position the button.
The very basic approach to move SVG image to another place is
elementToMove.animate({svgTransform: 'translate(100, -30)'}, 1000, "swing", function(){ console.log('Done!'); } );
But this is somehow fake, when I will check this with
elementToMove.getBoundingClientRect()
The result X,Y coordinates will be the same as before (as it would never move).
I need to track position of moved (translated?) elements, but I don't really know how to make it.
The only way I can imagine is to make separate class for moved elements and make some autocalculated position fields whenever move method would be called, but this is terrible idea as I already made a lot of code.
I'm creating a list with handles for sorting. I don't like the aesthetics of having 20 handles visible, so I'm trying to make the handles appear only when the mouse hovers over a list item.
This was my first attempt:
jsFiddle #1
As you can see, hovering over items in the list creates a rather jarring movement and misalignment of list items. To fix this, I've created a blank 16px image that I use to replace the handle when it's not visible. It creates a much nicer user experience than hovering, as you can see here:
jsFiddle #2
$(this).prepend("<img src=http://i.imgur.com/tzGrVLc.png class=\"blank-sprite\" / width=16 height=16 border=0>");
The problem is that during sorting the 16px image often disappears, leaving things out of alignment. (I'd post an image but I don't have the reputation.) It doesn't always happen, but seems to happen more frequently when I'm sorting very quickly.
I'd love to know why this happens and how to fix it. Thanks!
You should set position css property of icon element to absolute. This is to give you the idea:
SEE DEMO
var $icon = $("<span class=\"ui-icon ui-icon-grip-dotted-vertical\" style=\"display:inline-block\" id=\"handle\" /></span>").css({
position:'absolute',
top:$(this).offset().top+5,
left:$(this).offset().left-10
});
$(this).prepend($icon);
I am working on this image hover zoom part using jquery . The codes works fine , as the bigger image is showed on mouseenter and hides on mouseleave. since, the image showed on hover can have dynamic width and height(it depends on the image size..) i want to decrease the image width and height to 75% of the actual width and height.. even that is fine and it works..
now the problem i am facing is, whn mouse enters for second time, the image is reduced again.. third time it gets smaller than the second time... so eachtime mouse enters, image gets smaller and smaller...(which i think is obivous since each time mouseenters it reduces the image by 75%...) i have tried lots of things like creating a global variable, and checkin it.. if (first time) thn (reduce) else (reduce from the original image ).
BUT cannot make it work.. here is my code....
http://jsfiddle.net/ugnNU/11/
hoping for some advice. your help will be appreciated.
Thanks.
I tried to update your code as little as possible. Here is an example of how to do what I think you are trying to do. http://jsfiddle.net/ugnNU/12/
There are many many ways to get there, I chose this one because it came close to what you already had.
I added this:
var childImage = $(this).children("div.tooltip");
if (childImage.attr('saveWidth') == ""){
//we haven't saved it's height yet
childImage.attr('saveWidth', childImage.width());
childImage.attr('saveHeight', childImage.height());
}
var hoverImgWidth = childImage.attr('saveWidth');
var finalHoverImagewidth = hoverImgWidth * 0.75;
var hoverImgHeight = childImage.attr('saveHeight');
var finalHoverImageWidth = hoverImgHeight * 0.75;
Basically it just checks to see if we have already saved the 'tooltip' image height inside an attribute. If we have, it just uses that value. But if not, we save the height or width inside that attribute and then uses it.
I'm also only selecting ("div.tooltip") once and saving it in childImage. The reason for this is that each time you do this $(selector) jQuery has to go find that element. If you do this alot, it can impact performance. So it's good practice to just save your selector in a local variable.
http://jsfiddle.net/ugnNU/13/
It does not use a custom attribute. It just undoes in mouseleave, what you did in mouseenter
each time you call this code
var hoverImgWidth = $(this).children("div.tooltip").width();
var finalHoverImagewidth = hoverImgWidth * 0.75;
The width value of div.tooltip gets multiplied with 0.75.
The next time the code is executed this gets the current width (the lowered value) and lowers that again.
You could set the size back again when you hide it, but my advice would be to calculate the values on document ready and only show and hide the image with the mouseenter and mouseleave events.
So, I have scoured the internet to find help on this...
I have a bar graph where the bars/values are sorted left to right with the largest value on the left. Based on user interaction, the bar graphs/values may change and, for instance, the middle bar may need to move 1 or more spots to the left. This has to be done on the fly, without removing the DOM element because I need to animate the left to right movements... this is for user appeal, something that is very important to the project.
So, I guess my question is, since you can't resort DOM elements and animate them at the same time, how can you track the movement. I've toyed with the idea of creating an initial index of the graph as the page loads and updating the index as changes are made. Logically, I have a hard time with this. Also, if one were to do that, whats the best way to index, using the data attribute? Isn't this only HTML5 and possibly unsupported in older browsers, or does jQuery keep a cache that has nothing to do with HTML5?
I'm fairly new to javascript/jQuery. I would say I've been using it for 2 years but I've ever really only done small jQuery animations and validation. Would really love some input form the community!
Thank you!
You're right, you can't animate elements by sorting.
The knack is to position the bars within the graph space with CSS properties, eg. left or margin-left.
Then you have something that, when changed in the right way, will give an animated effect.
All you need to do is to loop through each bar in turn, calculate its new CSS left/margin-left property and use jQuery's .animate() to cause it to slide into its new position.
Assuming that the bars to be positioned with margin-left and that the height of the bars also needs to be changed, then the general form of the jQuery will be :
$(".bars").each(function(i, bar) {
var $bar = $(bar);
var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
var height = ........;//expression that calculates or fetches the new height property for bar i
$bar.animate({
'margin-left': marginLeft,
'height': height
);
})
There's no need to sort anything or to use the data attribute.