I have a setup like this:
var count = 1;
function displayPoint(marker, index){
$("#message").hide();
var position = $($.goMap.mapId).data(marker).position;
var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);
//console.log(count);
//console.log("li:not(:nth-child("+count+"))")
$("#message")
.fadeIn()
.css({ top:markerOffset.y, left:markerOffset.x })
.children("li:not(:nth-child("+count+"))")
.hide();
}
In the line:
$("#message")
.children("li:not(:nth-child(6))")
.hide();
I am trying to remove everything except the needed child. And this works, But I need something like this:
.children("li:not(:nth-child("+count+"))")
the selector needs to be variable. I have tried both double and single quotes, and it does not seem to work. Putting a constant selector works perfectly. I have even tried consoling out the count variable to see is that is the issue, count variable does what it should.
I can't see anything wrong in here. Any suggestions? Any other selectors perhaps? or some other elegant solution that I can't come up with. Any help is appreciated.
This is my code running [live][1]: When a variable is used, the first one seems to work fine, on second iteration, everything falls apart
This is the full code, it is a little big:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>sideBar and create own infowindow / goMap</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gomap-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var c = 0;
var count = 1;
$("#map").goMap({
address :'San Francisco, CA',
zoom:9,
maptype: 'ROADMAP',
navigationControl: false,
scrollwheel: false,
mapTypeControl: false
});
setTimeout(function() {
// marker points
var markers = [{
address :'San Francisco, CA',
icon: 'img/pixel.png',
},{
address :'Sacramento, CA',
icon: 'img/pixel.png',
},{
address :'Berkeley, CA',
icon: 'img/pixel.png',
},{
address :'Santa Rosa, CA',
icon: 'img/pixel.png',
},{
address :'Palo Alto, CA',
icon: 'img/pixel.png',
},{
address :'San Jose, CA',
icon: 'img/pixel.png',
},{
address :'Fremont, CA',
icon: 'img/pixel.png',
},{
address :'New York City,NY',
icon: 'img/pixel.png',
},{
address :'Philadelphia,PA',
icon: 'img/pixel.png',
},{
address :'Newark,NJ',
icon: 'img/pixel.png',
},{
address :'Trenton,NJ',
icon: 'img/pixel.png',
},{
address :'Washington,DC',
icon: 'img/pixel.png',
},{
address :'Baltimore,MD',
icon: 'img/pixel.png',
}];
//set markers
for (var i = 0; i < 13; i++) {
$.goMap.createMarker(markers[i]);
}
overlay = $.goMap.overlay;
// move through set points ( markers)
setInterval(function() {
if (c>12) c=0;
marker = $.goMap.markers[c];
displayPoint(marker, c);
c = c+1;
},5000);
$("#message").appendTo(overlay.getPanes().floatPane);
$.post('tweetlist.php', function(response) {
$("#message")
.append(response)
.hide();
});
function displayPoint(marker, index){
var position = $($.goMap.mapId).data(marker).position;
var markerOffset = overlay.getProjection().fromLatLngToDivPixel(position);
//console.log(count);
console.log("li:not(:nth-child("+count+"))")
$("#message")
.fadeIn()
.css({ top:markerOffset.y, left:markerOffset.x })
.children("li:not(:nth-child("+count+"))")
.hide();
$.goMap.map.panTo(position);
count = count +1;
}
},500);
});
</script>
<style type="text/css" media="screen">
#map { width:900px; height:500px; }
#message {
position:absolute;
background:#555;
color:#fff;
font-size:12px;
width:300px;
padding: 10px;
}
#twitter_container a{
color:#0066CC;
font-weight:bold;
}
.twitter_status{
height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;
}
.twitter_image{
float:left;
margin-right:14px;
margin-bottom:10px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="map"></div>
<ul id="message"></ul>
<div id="footer"></div>
</div>
</div>
</body>
</html>
I use ajax here to get twitter data:
$.post('tweetlist.php', function(response) {
$("#message")
.append(response)
.hide();
});
And I get back this response:
foreach ($json->results as $tweet )
{
$text = $tweet->text;
$user = $tweet->from_user_name;
$profile_image_url = $tweet->profile_image_url;
echo "<li>";
echo "<img src=".$profile_image_url." class = 'twitter_image' >";
echo "<a href='http://www.twitter.com/".$user."'>".$user."</a>:";
echo "<div class = 'twitter_status'>".$text."</div>";
echo "</li>";
}
[1]: http://servernomics.com/map.html