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/

WinJS.UI.ListView not working in snapped view

I am using a WinJS.UI.ListView in a JavaScript project for Windows-8 Metro interface.
This is the HTML code:
<div id="myMain">
<div id="myListTemplate" data-win-control="WinJS.Binding.Template">
<div class="myListViewItem">
<p data-win-bind="innerText: description"></p>
</div>
</div>
<div id="myListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: myTemplate, layout: {type: WinJS.UI.ListLayout} }">
</div>
</div>
And part of the JavaScript:
ready: function (element, options) {
// Set up the ListView.
var myLView = myListView.winControl;
WinJS.UI.setOptions(favoritesLView, {
itemDataSource: dataSource,
oniteminvoked: this.onItemInvoked.bind(this),
selectionMode: WinJS.UI.SelectionMode.none
});
},
Where dataSource is where the list information is stored. It is a list obtained from:
var myList = new WinJS.Binding.List(myJSONarray);
The code is working in landscape and portrait view, but doesn't work when in snapped view. The list view appears empty despite myList has all the elements.
Is this a bug in Windows 8? Anybody know of a workaround to solve it?
I have found this link with the same problem but its solution doesn't work for me:
http://social.msdn.microsoft.com/Forums/pl-PL/winappswithhtml5/thread/ce8c722d-526b-4226-9e40-642ddb37422b

One reason that the ListView will not be displayed is if the element or any parent elements' display is set to "none". When the element becomes visible again, you will need to call listView.forceLayout(). See the explanation below from MSDN, http://msdn.microsoft.com/en-us/library/windows/apps/hh758352.aspx
When you set the style.display property of a ListView or its parent
elements to "none", the app discards layout information about those
elements. When you change the value of the display property back to a
style that makes everything visible again, the app will layout all the
elements, but the ListView won't receive information about the current
layout and will have an invalid layout. You can fix the issue by
calling this function when you make the ListView visible again.

Javascript show/hide - I don't want it to hide the entire element

This is probably a fairly easy question, but I'm new to JavaScript and jquery....
I have a website with a basic show/hide toggle. The show/hide function I'm using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?
Here's a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg

There are many different implementation possibilities:
You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).
Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/.

You'd need to either:
Put in a span/etc. after the first n words, and only hide that part, or
Change the viewable region, or
Replace or toggle the span/etc. with the "collapsed" view.
The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.
I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.

You can do some plugin authoring,I did a sample demo here ,based on your screenshot
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
here is javascript/jquery code
jQuery.fn.myToggle = function(selector, count) {
var methods = {
toggle: function(selector, count) {
if ($(selector).is(':visible')) {
var span = $('<span>');
span.text($(selector).text().substr(0, count) + "...");
span.insertAfter($(selector));
$(selector).hide();
}
else {
$(selector).show();
$(selector).next('span').hide();
}
}
};
$(this).each(function() {
methods.toggle($(this).next(selector), count);
$(this).click(function(evt) {
methods.toggle($(this).next(selector), count);
});
});
};
$(function() {
$('.toggle').myToggle('.content', 3);
});

Here is a solution using css properties only instead of mangling the dom.
http://jsfiddle.net/AYre3/4/
Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.

Is there way to scroll to anchor rather than jump with javascript (something like smooth scroll)

I have a large document with numbered anchor tags as shown below. And a textbox to punch the numbers in to go to anchor which uses window.location.hash
I am also using arrow keys to go next or previous anchors. I want to scroll to the anchor so to give some sense of direction.
<a name="1">
some text
<a name="2">
some text
<a name="3">
here is my function
function updatePageNumber()
{
var pagenumber;
pagenumber = document.getElementById('pageNumber').value;
window.location.hash = pagenumber;
}
Jumping to anchor is very ugly and people loose sense of direction in the text. So is there a way to scroll to anchor with JavaScript. I know there are lots of jQuery examples, but I don't know jQuery and couldn't find JavaScript.
Most important reason is I want to see my page number on the address bar!

Add jQuery library.
Use the following script to do a smooth scroll to the target element you want.
jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);
target is the id of the target element and 1000 is the duration of the animation.

Use this code and enjoy
$(document).ready(function(){
$("#btop").hide(); // replace only #btop with your <div id=" ">
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop()>100){
$('#btop').fadeIn(); // replace only #btop with your <div id=" ">
}
else{
$('#btop').fadeOut(); // replace only #btop with your <div id=" ">
}
});
$('#btop a').click(function(){ // replace only #btop with your <div id=" ">
$('body,html').animate({
scrollTop:0
},200); // to speed up scroll replace 200 to 300 or 500
return false;
});
});
});

There is no built-in smooth scrolling in JavaScript so you would have to implement it yourself -- but why re-invent the wheel if you already have it in jQuery and you probably won't have to add more than two or three lines of code? Just download jQuery and the ScrollTo plugin, add them to your <head> section in a <script> tag and then use this to scroll to an element with a given ID:
$.scrollTo("#my-element-id");
This will scroll to the element whose ID is my-element-id so you have to use the id=... attribute in the anchors and not the name=... attribute.
If you wish to add this behaviour automatically to all your anchors within a given div (or to the entire page), you can use the LocalScroll plugin which makes the entire this as simple as:
$.localScroll();

javascript slide slick_accessible_slideshow

i have three div's in an HTML page. the page look like this
HTML Page:
leftArrow(>) div rightArrow(<)
i need to move the div from left to right and right to left. using javascript and DHTMl
or JQuery.
Is it Possible to Move in that direction ?

Yes it's possible, i've done it in the past without using jQuery.
I have a the following markup:
<div id="HorThumbs" style="overflow:hidden;width:500px">
<div id="HorScroller" style="width:1000px">
//Data to be shown
</div>
</div>
var scrollStep=1;
var timerLeft,timerRight="";
function scrollDivLeft(id){
clearTimeout(timerRight);
document.getElementById(id).scrollLeft-=scrollStep;
timerRight=setTimeout("scrollDivLeft('"+id+"')",1);
}
function scrollRight(id){
clearTimeout(timerLeft);
document.getElementById(id).scrollLeft+=scrollStep;
timerLeft=setTimeout("scrollRight('"+id+"')",1);
}
Then add a MouseOver event to your left and right arrows, passing in 'HorThumbs' as the Id to either scrollDivLeft or scrollDivRight function.

Take a look at the jQuery cycle plugin. It will scroll left/right and allows prev/next buttons.