We Keep Coding

how to dynamically highlight marker based on passed data to google map

How to highlight the marker based on the scroll of the div the div is shown below
My Html DOM
<div data-value="data 1"></div>
<div data-value="data 2"></div>
<div data-value="data 3"></div>
<div data-value="data 4"></div>
My javascript
var cutoff = $(window).scrollTop() + 200;
$('div').each(function(){
if($(this).offset().top + $(this).height() > cutoff){
$('div').removeClass('current');
$(this).addClass('current');
console.log($(this).data('value'));
//callGoogleMapHere(data..);
return false; // stops the iteration after the first one on
}
});
here is example of working code: http://jsfiddle.net/pdzTW/212/
As you have noted callGoogleMapHere(data..); in the above code, i want to call google map from there with data passed so that i can Highlight the Marker on map.
here is my map code link(thanks to geocodezip) : http://jsfiddle.net/2gz7h123/64/
Question: i want to highlight the marker dynamically on Google map passing data from this function callGoogleMapHere(data..);
please help me thanks in advance!!!

I appreciate that you are stuck and require help. However this is not a site in which people will simply do you work for you.
It appears that you lack the knowledge of what you are trying to achieve and simply want the work done. I therefore have a compromise which given the research you have conducted you should be able to obtain a plausible solution.
Given a set of divs
<div data-value="0" class="notmap"></div>
<div data-value="1" class="notmap"></div>
<div data-value="2" class="notmap"></div>
<div data-value="3" class="notmap"></div>
<div data-value="4" class="notmap"></div>
we want to be able to call some function when they are hovered over. In your solution the same thing will be applied on the scroll.
using:
$(document).ready(function() {
alert('please scroll output window and check the console');
$(".notmap").hover(function() {
highlightMarker($(this).data('value'));
}, function() {
stopHighlightMarker($(this).data('value'));
});
});
this will call the highlightMarkerfunction on hover and stopHighlightMarker when you stop hovering over the div.
The highlight marker does the following:
function highlightMarker(i) {
if (markers[i].getAnimation() !== null) {
markers[i].setAnimation(null);
} else {
markers[i].setAnimation(google.maps.Animation.BOUNCE);
}
}
Essentially I added an array of markers and it grabs the markers[i] element by passed through, the data-value number. Its a cheap way but hey-ho.
It then simple animates the icon so that it is visible and highlighted by bouncing up and down.
I appreciate that this is not really an answer to your question, but with the information I have provided should be sufficient to get your problem solved.
JSFIDDLE: http://jsfiddle.net/2gz7h123/68/

advanced jquery loop to hide nav

So I doubt this is advanced jquery, but for me it is since I literally just learned it this week. I wrote everything I need actually on here my only problem is, and I know it's because I am new to jquery, but when you click menu, then any one of the nav options, then back, it's not hiding the content or hiding the nav when content is present, even though I wrote it so it should (it works only one time, and since I am new I know this is why, something wrong with my syntax). Any suggestions?
HTML
<script>
$(document).ready(function () {
//$('ul:first').hide();
//$('ul li').hide();
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
/*('h1>').click(function (event) {
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('h1').hide();
$(this).delay(i*600).fadeIn(200);
});
$('nav>ul li:visible').each(function(i) {
$('h1').hide();
});*/
$('a.btnDown').click(function () {
$('body').css('background', 'tomato');
$('nav>ul li:hidden').each(function(i) {
//$('nav>h1').fadeOut(300);
//$('nav>ul').fadeIn(200);
$('h1').hide();
$('nav>ul').delay(i*600).fadeIn(200);
return false;
});
}); //closes a.btnDown
$('nav>li').click(function () {
$('nav>ul li:visible').each(function(i) {
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li').delay(i*600).fadeOut(200);
}); //closes visible i
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
$('a.bck').click(function() {
var $aAside = $('aside');
$aAside.animate({
left: 300})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10})
return false;
}); //closes bck click
}); //closes .ready()
</script>
</head>
<body>
<h1 class="menu"><a class="btnDown" href="#"> Main Menu </a></h1>
<nav class="navBar" >
<li><a class="menuShow" href="#"> Assignment 6 </a></li>
<ul>
<li><a class="contentDown" href="#" > Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<h2 id="round"><a class="bck" href="#"> Back </a></h2>
<aside>
<ul>
<li> Interactive media has been apart of my life since as long as I can remember. I have always been fascinated with any form of media including television, video games, handheld games, or websites. However before attending school to study interactive media, I never noticed the little things that can really affect the experience for a user. One item in particular being diegetic elements. Diegetic elements are objects within a media that only the user knows about. For instance, in a video game a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining. These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. We have also been exposed to 'non-diegetic' elements that act just the opposite of diegetic ones. Non-diegetic elements are items inside interactivity that are supposed to be there. This is a way of implementing a diegetic element into the space of the world you create. For example, a non-diegetic element would be the ammo bar being placed on the gun, instead of a static bar on the side of the screen. Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element. </li>
</ul>
<ul>
<li> One ways people have done this is throwing elements in the world that would be believable to the player that they should be there. Instead of throwing a sidebar with your gun ammo and grenade count, it would make sense if a game is placed in modern-time that we would have technology available to put that information on the gun. One of the biggest examples of great uses of non-diegetic elements in the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red, or your player begins to lose the ability to act normal when they are under fire. Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves. The problem is that you can have too much non-diegetic presence that would confuse the user instead of help them which was originally intended. Resident Evil received a lot of harsh criticism for their lack of diegetic presence to help the player finish the game. It was hard for the user to be able to tell when the character was going to die based on their health system. If you received damage your character will hunch over, but it's unclear how much damage you're taking. The user will often die </li>
</ul>
<ul>
<li> without knowing whether or not you should have died, as opposed to a health bar that would show you. Contrary to too much non-diegetic presence, is too much diegetic elements. In titles such as World of Warcraft, or League of Legends, some are simply overwhelmed by the fact that half of the screen is objects that you are supposed to be aware of but until you learn the game they make as much sense as flying pigs. In conclusion, it is best to find that medium for any interactive media that has non-diegetic or diegetic elements. It is different for each occasion, for a first-person shooter the need for diegetic elements is acute, while in a complex game like World of Warcraft it is necessary. Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>

Browsed through your page a little bit and got: Uncaught ReferenceError: i is not defined
then, i noticed, that you are not declaring i in $('nav>li').click(function () {, don't really understand your logics, since it is not working, but fix it.

You can easily use hide(). Ive updated the code (starred line) and now it works. Just an insert example to show how you'd select it, not optimized code.
$('a.bck').click(function() {
var $aAside = $('aside');
**$('aside>ul>li:visible').hide();**
$aAside.animate({
left: 300
})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10
})
return false;
}); //closes bck click

Rotating through divs (hide/fade in) with jQuery

I'm currently in the process of creating a news carousel. On the left panel i have the three titles of each news item, to the right i have an image associated with that news item, and in the bottom right i have three "navigational blocks" for each item.
In my example, when you click a link on the left, it will display the associated content in the larger right hand panel. This also applies for the navigational blocks in the bottom right. If you click one of those, the associated item will be displayed in the larger panel.
The last thing i need to achieve is an auto rotation of these news items. On load, item one will be displayed with "link 1" highlighted, and "block one" of the navigational blocks highlighted. After say, 10 seconds, "link 2" will become highlighted with the "block 2" highlighted and the associated content in the middle being displayed. So on, so forth.
http://codepen.io/anon/pen/wDiGy - Here's a code pen version of it so far.
Code highlighted below:
<div id="title-container">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
<div id="image-container">
<div class="image1 image" itemID="1">1</div>
<div class="image2 image" itemID="2">2</div>
<div class="image3 image" itemID="3">3</div>
<div id="circular-nav">
<li></li>
<li></li>
<li></li>
</div>
jQuery for selecting each item
$('.image:first').show();
$('.title, .circle-title').click(function(){
$('.image').hide();
var itemID = $(this).attr('itemID');
$('.image[itemID="' + itemID + '"]').fadeIn('fast');
});
I will be changing the HTML to integrate into the CMS i'm using, but the class names won't be changing.
Any assistance would be greatly appreciated.
UPDATE: I've managed to get 99% of the way there by fiddling around with it. I now have one hurdle. I'm using .next() to reach each item. If there are three items and it reaches the end, how do you return to the beginning? (PEN Updated)

Use a setInterval to trigger the tile change/image change function for every 10 seconds.
setInterval(function(){
//Code for changing the tile/image
},10000); //Milliseconds
You can put your existing function in a variable and use it for click as well as for interval. Also, since you're passing some information with the click, you can store the ids in an array and increment/reset counter after all the images have been cycled through.
Update:
Working Fiddle!

http://jsfiddle.net/hc4py/ (with only links stylized, not bullets)
setInterval(function () {
var $cur = $('a.active');
var i = $cur.closest('li').index(); //parent 'li' of first active link
$('.image:visible').hide(); //hide visible image
$cur.removeClass('active');
//if active 'a's parent li is the last one
if ($cur.closest('li').is(':last-child')) {
$('.image').eq(0).fadeIn('fast'); //show first image
$cur.closest('ul').find('li:first-child').find('a.title').addClass('active');
}
else {
$('.image').eq(i + 1).fadeIn('fast');//show next image
$cur.closest('li').next().find('a.title').addClass("active");
}
}, 2000);
.title.active{color:red;}

I found a simple solution which just involved an if statement to check the length of the item. Once it ended, it was able to loop around correctly.
setInterval(function () {
if ($('.image:visible').next().length === 0) {
$('.image').hide();
$('.image:first').fadeIn();
} else {
$('.image:visible').hide().next().fadeIn('fast');
}
}, 2000); //Milliseconds

JS - Shouldn't this be written better? One function vs multiples?

I have a tweet stream where new tweets are added at the top and the older ones pushed down. You can click on the entire tweet and a panel slides down to reveal, "reply", "retweet", "favorite" etc. The panel is added to each new tweet added in the stream.
The code below works. Shouldn't this be better written so that only one call is being made? Or, as a new tweet is added. would I just have to add to the code with div#tc4, ul#tb4 etc?
$(document).ready(function () {
$("div#tc1").click(function () {
$("ul#tb1").slideToggle("fast");
});
$("div#tc2").click(function () {
$('ul#tb2').slideToggle("fast");
});
$("div#tc3").click(function () {
$('ul#tb3').slideToggle("fast");
});
});
Added Markup:
<div id="tc1" class="tweetcontainer">
<div class="avatarcontainer">
<div class="avatar"></div>
</div>
<div class="content">
<div class="tweetheader">
<div class="name">
<h1>John Drake</h1>
</div>
<div class="tweethandle">
<h2>#Drakejon</h2>
</div>
<div class="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<ul id="tb1" class="toolbar">
<li><a class="reply" href="#"><span>reply</span></a></li>
<li><a class="retweet" href="#"><span>retweet</span></a></li>
<li><a class="favorite" href="#"><span>favorite</span></a></li>
<li><a class="track" href="#"><span>track</span></a></li>
<li><a class="details" href="#"><span>details</span></a></li>
</ul>

I highly recommend separating your javascript from your detailed page function. The best way to do this is to put the retweeting panel inside the tweet container, then you don't even need to give it an id at all or encode in the javascript information about your html structure and ids. You can then just do:
$('.tweetcontainer').on('click', function(event) {
if ($(event.target).is(':descendantof(.toolbar)')) {
//ignore all clicks within the toolbar itself
return;
}
$(this).find('.toolbar').slideToggle();
});​
It's that easy! See it in action in a jsFiddle.
Now you can add as many tweet containers as you want to your page--and your javascript doesn't have to change one bit. Other solutions that require knowledge of specific ids linking to specific ids are suboptimal.
Note the descendantof pseudo-selector is custom (see the fiddle to find out how it works). Also, since you didn't provide any css, I had to choose some--it was quick so don't expect much. (Aww heck I just saw you updated your question to provide a jsFiddle with css giving a far prettier result--but I won't change mine now.) I did have to add a class to the actual tweet itself, but there is probably a better way to style it.
And if you want a click on the displayed toolbar itself (outside of a link) to allow collapsing the toolbar, change the code above to :descendantof(a).
If you don't want to change your page layout, another way to it is to encode the information about the linkage between html parts in the html itself using a data attribute. Change your tweetcontainer div to add a data attribute with a jQuery style selector in it that will properly locate the target:
<div class="tweetcontainer" data-target="#tb1">
You don't really have to remove the id if you use it elsewhere, but I wanted you to see that you don't need it any more. Then on document.ready:
$('.tweetcontainer').click(function () {
$($(this).data('target')).slideToggle('fast');
});
Here is another jsFiddle demonstrating this alternate technique (though it less elegant, in my opinion).
Last, I would like to mention that it seems possible you have a little bit of "div-itis". (We have all been there.) The toolbar anchor elements have unnecessary spans inside of them. The tweet name h1 element is inside a div, but could just be an h1 with class="name" instead.
In general, if there is only a single item inside a div and you can change your stylesheet to eliminate the div, then the div isn't needed. There are an awful lot of nested divs in your html, and I encourage you to remove as many of them as you can. Apply style to the other block elements you use and at least some, if not many, won't be needed.

I'd suggest (though currently untested):
$('div[id^="tc"]').click(function(){
var num = parseInt(this.id.replace(/\D+/g,''),10);
$('#tb' + num).slideToggle("fast");
});
Though given that you don't need the num to be a number (it'd be fine as a string), you could safely omit the parseInt().

Yes, you can write this code much more compactly like this:
$(document).ready(function() {
for (var i = 1; i < 3; i++) {
$("div#tc" + i).click(function() { $("ul#tb" + i).slideToggle("fast"); } );
}
});

Hide what ever exceeds 720px and display the hidden area onClick?

I am trying to make a bunch of <li>'s which are placed next to each-other and they look like boxes; to display 10 every time. The rest to be hidden and to be displayed onClick.
So it should look something like this:
The <li>'s has to be placed in the same <ul> and have no or the same class. So basically the HTML should look something like this:
<ul id="bxs" class="tab1">
<li id="item-1">1</li>
<li id="item-2">2</li>
<li id="item-3">3</li>
<li id="item-4">4</li>
<li id="item-5">5</li>
<li id="item-6">6</li>
<li id="item-7">7</li>
<li id="item-8">8</li>
<li id="item-9">9</li>
<li id="item-10">10</li>
<li id="item-11">11</li>
<li id="item-12">12</li>
<li id="item-13">13</li>
<li id="item-14">14</li>
<li id="item-15">15</li>
<li id="item-16">16</li>
<li id="item-17">17</li>
<li id="item-18">18</li>
<li id="item-19">19</li>
<li id="item-20">20</li>
</ul>
and... this is my question. How can I make them act like this: http://jsfiddle.net/mnCck/6/show/ so if you click on the button, the other 10 appear etc. (On the example, I used 2 ul's and I hide the one and display the other onClick)
Why I need to do this?
Basically, this is a little bookmark page for a client. The boxes will be the bookmarks and they will be created one by one dynamically like this: http://jsfiddle.net/WNZdr/show/ So if you notice, every time you create a box, it gets an ID and it ends up to be like the html I pasted above. I want only 10 of the boxes to be visible and when the client reach that limit then the boxes will be hidden and they will look like they are in another tab so they can be accessed using the nav buttons.
I am not new with javascript or css, it's just I cant think of a way of doing this. I was thinking to place a div ontop of which hides everything out of the range of 720px and then when the nav button is clicked, hide the li's, push them with css at right:720px and display them again. That will look and feel that they are in tabs?
Sorry if the title is somehow confusing, I don't know how to describe all this in a title.

NOTE: Question was not tagged with javascript or jquery, but your example used jquery so I assumed the solution could as well.
You can use overflow: hidden and then adjust the scrollTop.
http://jsfiddle.net/WNZdr/1/
$("#prev").click(function() {
page--;
if (page < 0) page = 0;
$("#bxs").scrollTop(page * 70);
});
$("#next").click(function() {
page++;
$("#bxs").scrollTop(page * 70);
// adjust in case next was clicked and there are no more
page = $("#bxs").scrollTop() / 70;
});
This will need slight tweeking to get the heights/offsets just right, but gives the basic idea.