We Keep Coding

amCharts - amMap Home Button Method

I am creating an amMap through amCharts http://docs.amcharts.com/3/javascriptmaps/AmMap and it comes with its own home button which you can click and reverts to the map default.
I would like to do this externally through my own button, but can't quite find the methods that amCharts uses to achieve this.
A few methods I've used are:
chart.zoomTo(), chart.zoomToLongLat(), chart.zoomToXY() using the correct values of when the chart is initialized. This works fine when the chart is not resized ever, but when the chart is resized (not re-initialized), those values become undependable, yet the home button is still able to bring me back to the default zoom.
What method does this home button use? Or I can use to replicate what the home button does?

You need to call zoomToLongLat and pass in your map object's initialZoomLevel, initialZoomLongitude and initialZoomLatitude. From the demo on AmChart's knowledge base for its custom external home button:
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
You can resize the frame on the codepen demo to see that it resets itself correctly each time.

Yes.. it very simple,
I did it this way:
map.addListener("rendered", function(event) {
var map = event.chart;
map.initialZoomLevel = map.zoomLevel();
map.initialZoomLatitude = map.zoomLatitude();
map.initialZoomLongitude = map.zoomLongitude();
});
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
<div onclick="centerMap();" class="icon-home"></div>

get the style of the marker I clicked on in mapbox

I'm trying to get the style of the icon which I clicked on, in order to get its translate values.
I'm doing this because I want to create a div that will have the same location on the map as the icon who got clicked on.
this is my website so far:
http://www.david-halfon.com/radio/index.html
Basically, each time someone presses the yellow circle, a div should appear around it.
this is the code for events that happen when an icon is being clicked:
locale.on('click', function(e) {
$("#music").attr("src", prop.Url);
$(".player").show();
play();
sendWithAjax(prop.Country, prop.City);
$("h1").html(prop.Station);
$("h2").html(prop.Country);
$("h3").html(prop.City);
//console.log($(this).css("transform"));
//console.log($(this).attr("style"));
console.log($(this));
setTimeout(function(){ $("h4").html(globalVar);}, 500);
$(".plusB").show();
$(".shareB").show();
map1.setView(locale.getLatLng(), 4);
playNow = prop.Station;
playNowCountry = prop.Country
playNowCity = prop.City;
});
The comments are what I have tried to do so far but it does'nt seems to work.
When I'm trying to consloe.log(this) I get 'undefined'.
Thank you!!

The reason why you don't get the expected $(this).css(...) informations is that this is not a regular DOM object, as it clearly appears using Firebug:
The <img> you want to get style from is contained in the _icon member of this object, so you can use e.g.:
console.log($(this._icon).css('transform'));
console.log($(this._icon).attr('style'));
// and so on
This way (tested using Firebug on your website), it works fine.
BTW, I couldn't figure out why the click event targets this object rather than the <img>...
BTW again, this website is a great idea: cool!

Adding a close icon inside input with close action

im having troubles trying to work something out and would be great if someone could lend me a hand in the following:
demo: http://jsfiddle.net/44zAy/3/ (UPDATED: added multiple ones which then gets confused, any help on this would be great. also added click function to close when clicking on the icon)
when you click inside the input it extends, and when click out goes back to normal which is what i want however what im trying to add is:
a) add the font awesome icon inside the input once its extended
b) ability to click on the x icon to close the input back to the normal size, the same in how it does when you click out of the input currently
the code so far (basic example) is as follows:
JS
var inputWdith = '200px';
var inputWdithReturn = '68px';
jQuery('.resize-close').hide();
jQuery('.resize-input').focus(function(){
jQuery(this).animate({
width: inputWdith
},400);
jQuery('.resize-close').show();
});
jQuery('.resize-input').blur(function(){
jQuery(this).animate({
width: inputWdithReturn
},500);
jQuery('.resize-close').hide();
});
HTML
<input type="text" class="resize-input">
<a class="resize-close"><i class="icon-remove"></i></a>
How the input is currently is using an absolute position on my development as it extends out over other inputs
Thanks in advance!

You could simply add a negative margin to the .resize-close class:
.resize-close {
margin-left: -24px
}
...and then update the blur handler to be a click handler instead:
jQuery('.resize-close').click(function(){
jQuery('.resize-input').animate({
width: inputWdithReturn
},500);
jQuery('.resize-close').hide();
});
http://jsfiddle.net/44zAy/5/

Displaying a popup with a fixed message for URLs with target="_blank"

We already have a CSS that adds a "new window" icon, indicating that the link will open a new window:
a[target $="_blank"] {
padding-right: 15px;
background: transparent url(http://opi.mt.gov/Images/SiteWide/Icon_External_Link.png) no-repeat center right;
}
Our lawyers want a popup message that states some legal mumbo-jumbo for every external link. Unfortunately, we have an extensive web site with possibly 10,000 external links! It will be prohibitive to find and touch each link to add a class tag, etc.
Is there any way to modify the above code so that the message appears on hover, much like an 'Alt' or 'title' type?
Thanks in advance!

If you are using jQuery, you could add a global function to attach a click event to all your external links based on the proper selector.
for example:
$('a[target="_blank"]').click(function( event ) {
event.preventDefault();
var yesno = confirm("Legal! Sure you want to go to an external source?");
if (yesno) window.open($(this).attr('href'));
});
I'm sure you could do the same with some type of hover message. Just depends on how you would want to render that. I just used an confirm dialog in my example.

Maybe you can use :after css statement, see http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

You can do it with JavaScript too, depending on what kind of action you want to do, if you are running on a touch device, you might want to to a confirm dialog. JSFiddle for here.
var myLinks = document.querySelectorAll('a[target $="_blank"]');
for (var i = 0, length = myLinks.length; i < length; i++) {
// You can listen for whatever you want, different for touch
// so you might want to do it on click and do a confirm dialog
myLinks[i].addEventListener('mouseover', handleLegal, false);
}
function handleLegal (e) {
// Do what you want here.
alert('Hi');
}

html background ad

I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?

Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});

In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.