The Issue:
I have a map made with AmCharts. With some help I was able to make it so upon hover I can display info for each state. I want to make it so that when I click on a state, it displays some of that state info below in a div.
My Jumbled Thoughts:
At first I thought this would require managing the 'state', but I am pretty sure that using 'state' would be overkill. With that said, it seems like it should be a simple issue to have a click event display the same value that I am getting upon hover...but it is apparently too hard for me right now (or too late).
Some Code:
$("#chartdiv").click(function() { // line 641
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Then I thought maybe this would work:
map.addListener("click", function(event){ // line 637
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Link to Full Code:
http://codepen.io/anon/pen/PGYQxX?editors=0011
Apologies for my Ignorance and Preemptive Expression of Gratitude:
I am working on getting better at basic JS, but at the same time I'm trying to power through things I have a poorer understanding of.
Any help is greatly appreciated, thanks!
There's a event called clickMapObject which you can listen for. It will give you the map object you clicked on as part of the event object you get as parameter.
As it seems like you don't bother to use jQuery, I changed the DOM manipulation to use it. (better readabilty in my opinion)
map.addListener("clickMapObject", function(event){
$('#tempInfo').html(event.mapObject.infoTitle); // Changes with clicking
});
Here's the new codepen.
Related
I'm a beginner learning to work with vanilla javascript. I have been searching for 2 days, and posting questions in a couple of javascript facebook groups since last night, and I haven't found a solution yet. Maybe I'm not asking the question correctly in my search, but I'm just stuck. If, for some reason, I am bringing up a question that has been answered, I apologize. In my defense, being a beginner sometimes means we are not sure exactly how to search for the answers.
Moving on...
I am trying to figure out how to use 2 eventListeners for the same button to change a css property value. I want function1 to run on mousedown and function2 to run on mouseup. I think my problem is occurring with the (event) parameter. Is there a way to make sure the event parameter in function1 is targeting only the event for mousedown? Then point the event in function2 to use the event for mouseup?
This is what I have so far...
html
<button class="my-btn">My button</button>
<div class="my-class">
some content
</div>
Javascript
let myBtn = document.querySelector('.my-btn');
let myClass = document.querySelector('.my-class');
myBtn.addEventListener('mousedown', function1);
myBtn.addEventListener('mouseup', function2);
function function1(event){
myClass.style.bottom = "-16em";
}
function function2(event){
myClass.style.bottom = "0";
}
Good that you have started to work on Js.
I have created a playground which changes the background color on mouseup and mousedown event. Please visit the below link for the same.
https://jsfiddle.net/kqydbwhL/
Also, I feel like in your code.
myBtn.addEventListener('mousedown', function1);
myBtn.addEventListener('mouseup', function2);
myBtn should be replaced with myClass because you are storing the element into myClass but while listening to the events you are targeting myBtn which is undefined.
Thanks.
I think you updated your code snippet in the problem description.
Here is the new playground url having those changes.
https://jsfiddle.net/6pzhjvfL/17/
After looking at your pen, it seems that position property should be set differently in my-class. Bottom property does not work with static position, which is a default position of all elements.
Maybe you can learn more about bottom property here.
Take a look at this example. I added position:relative to my-class. Try it with position:absolute if that is the result you wanted.
After reviewing the responses here, it was pointed out to me that my code actually works the way I want it to. So I went back to my original project to review. I discovered that I had function2 nested inside `function1' which was not intended. A misplaced curly bracket way down at the bottom of my file, completely out of sight, was the problem. I wasted 2 days looking for an answer to a problem that ended up being a syntax error of my own doing.
Thank you all for your help. I will be careful in the future to keep this from happening again.
I am manually changing some things in a DataSource and setting the property .dirty = true, and it is behaving correctly on refresh, but not putting up the red dirty triangle in my grid. Is there a good way to do this manually other than actually pushing in an element myself?
var item = gridDataSource.get(id);
item.dirty = true;
item.SomeOtherlId = 5;
kendoGrid.refresh();
Like I said, everything is behaving correctly, I am just not getting the red dorito and would prefer not jamming it in with JavaScript if there is a better way. Thank you.
Looking at the kendo js file, it seems that the k-dirty-cell gubbins is applied in the change handler. However, the handler is only attached when the cell is in edit mode (as far as I can make out).
You might consider that the proper way to deal with this would be to put the cell in edit mode and then call trigger on the change event. I couldn't get it to work and frankly it's a massive PITA finding the cell to pass to editCell().
Instead, you could call the handler function directly. A bit of a hack perhaps but that seems to be par for the course with these widgets.
item.SomeOtherlId = 5;
grid._modelChange({ field: "SomeOtherId", model: item });
dojo example
I want to have a page turn effect like the one seen on this page: jFlip demo except I want to automate the page turning, like make it happen every second, 20 times (or however many images I have). I want to be able to trigger this animation to run either on page load, when a button is clicked, etc.
Unfortunately I don't understand jQuery all that well and the plugin's events seem rather complicated to me, probably mostly due to my inexperience with jQuery. Any help on which direction I should go, methods I should try? I am not limiting myself to jQuery or even Javascript, this is just the example I have found that achieves my desired effect.
You can find the updated code here. replace this with old one.
Usage :
var jFlip = new Flip("#g1",300,300,{background:"green",cornersTop:true,scale:"fit"});
// here #g1 is a jquery selector (make sure it returns only one).
// The structure is Flip(JQselector,width,height,options)
then use the jFlip object to flip slides/pages
jFlip.flipMe() // for next slide
jFlip.flipMe(true) // for prev slide
for binding a function to slide change event you can use
$("#g1").bind("flip.jflip",function(event,index,total){
$("#l1").html("Image "+(index+1)+" of "+total);
});
// here the selector is same as the one passed inside jFlip function.
Try this and let me know the feedback.
Here's a link to the to my fiddle with the example: http://jsfiddle.net/stavros917/AaQpZ/
So I have put together this effect and pop-up box that can be used for different things through out an application I'm working on with a team. I want this pop-up to be easily used through out the app, so I'm trying to turn it into a custom plug-in that the other devs I work with can use. I would like to be able to pass the function call some different values so that they are not having to re-create the html every time. Looking to do something along the lines of this when I call it:
$('popMe').popUp({
headLine: 'headline text',
buttonOneTxt: 'some text'
buttonOneImg: 'foo.jpg'
buttonTwoTxt: 'some more text'
buttonTwoImg: 'img.jpg'
});
Any help would be awesome! Still pretty new to making plug-in's so I'm a little stuck in how to approach this. I'm sure there are a lot of downloadable one's out there but I genuinely want to learn how it's done. Thanks again!
You just need to wrap everything in a simple command structure of
jQuery.fn.popUp = function () {
I've thrown it all together in a function you can reuse called popUp();. I didn't fix some erroneous calculation errors and re-run misnomers -- those are up to you. goodluck.
http://jsfiddle.net/AaQpZ/1/
EDIT 1
Updated again to allow for dynamic fields to be populated. Please see the fiddle here, and scroll down the script to see how the a function invokes the HTML and passes it as parameters to the popUp() function.
http://jsfiddle.net/AaQpZ/2/
EDIT 2
Sigh...I forgot to stop propagation and it was having appending issues on the close/enter functions. New code updated to stopPropagation() added...
http://jsfiddle.net/AaQpZ/3/
i'm using the jQueryRotate.js extension to perform a rotation operation on a miniature arrow (to behave like that in os x aqua filesystems), as found here:
http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html
$(document).ready(function()
{
var rot=$('#expand-FT078Z8').rotate({maxAngle:25,minAngle:-55, duration:570,
easing:$.easing.easeInOutExpo,
bind:
[
{"click":function(){rot[0].rotateAnimation(90);}}
]
});
});
although, when I add another "click" function to return the arrow to its original position, as in this fashion:
{"click":function(){rot[0].rotateAnimation(90);}}, {"click":function(){rot[0].rotateAnimation(0);}}
the function breaks. this follows the usage instructions, as you can add more than one event. now, normally, i would save the state in a javascript variable, but that would seem to be outside the scope of this library. anyone know how i might go about making this happen? please let me know. thanks!
I'm the author of this plugin and have to be honest that... I forgot to update a documentation inside a jQueryRotate.js file. Instead of using a rot[0] (very old concept) just please use $(this) - > this should work for most of the cases :)
Hope it helps