Scroll to hidden input

Question

I have an image map that contains strings of places. When the user clicks on certain areas, a string (depending on wherever was clicked) will be sent to a function that needs to scroll to a hidden input who's id equals that string.

<input type="hidden" id="Nashville, TN">
<div class="speaking-date">...</div>

there are multiple divs that contain no id's and I can't give them id's so I created hidden inputs above each id with the desired string. So if the user clicks on Nashville, TN on the image map, I want it to scroll to the hidden input with the id Nashville, TN.

 function FindPlace(place){
 var $j = jQuery.noConflict();
 $j('html, body').animate({
                scrollTop: $j("#"+place).offset().top    
                }, 2000);
}

variable place being wherever they clicked.

scrollTop: $j("#"+place).offset().top I get the error "Cannot read property 'top' of undefined". I tried using: scrollTop: $j( "input[id="+place+"]" ).offset().top but I get the error "Syntax error, unrecognized expression: input[id=Nashville, TN]". I'm doing this on Wordpress which is why I'm using noConflict. Any help or tips would be appreciated.

That's not a valid ID for an HTML element. Check this: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Alfonso Presa, Aug 26 '15 at 19:15

score 1 · Accepted Answer · answered Aug 26 '15 at 19:32

In my perception, you have some problems...

1- your id is invalid.

2- hidden inputs don't have a position definied, so you can't scroll to them...

try create a temporary input text using .before(), scroll to this, and remove him after...

Like This...

HTML

<input type="hidden" id="Nashville">
<div class="speaking-date">...</div>

JS

$("#Nashville").before("<div id='divTemp'>test</div>");
$('html, body').animate({
                scrollTop: $("#divTemp").offset().top    
                }, 2000);
$("#divTemp").remove();

Scroll to hidden input

1 Answers1