jquery .attr() not working as it should

Question

I have the code bellow for the actions on this page http://afonsogomes.com/jbutad2/contactos.php when you click "Obter direcções"

// GOOGLE MAPS PAGINA CONTACTOS
$(document).ready(function() {
$('#direccoes').hide();
$('.button2').click(function() {
    $('#direccoes').delay(2000).slideToggle(600);
    $('#morada').delay(3000).fadeOut(1000);
    $('#visite').delay(4200).fadeOut(1000);
    $("#map_canvas").delay(5400).animate({'height': '450px'});
    $("div#mapa_semdrag").attr('id','mapa_comdrag');
    setDirections(this.from.value, this.to.value, this.locale.value);
    return false;
});
});

$(function() {

var $sidebar   = $("#mapa_comdrag"),
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 20;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        });
    } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
    });

});

The idea is the map follow you when you scrool down to read the directions ... the function that does that works fine ... but the question is: I want the map to stay still if you don't click on "Obter Direcções". I'm using the .attr() to change the id of the div but that might not be the solution cause it doesn't work.

Any help would be appreciated on how to fix this.

PS: the code i pased here can be found on script.js

Answer 1

I'm not sure if the following will be enough to get it to work, but try combining your two document ready handlers into the same function and also make the following modifications:

$(document).ready(function() {
   // new flag:
   var scrollMap = false;

   $('#direccoes').hide();
   $('.button2').click(function() {
      $('#direccoes').delay(2000).slideToggle(600);
      $('#morada').delay(3000).fadeOut(1000);
      $('#visite').delay(4200).fadeOut(1000);
      $("#map_canvas").delay(5400).animate({'height': '450px'});
      // don't change the id - set it to mapa_comdrag in your html
      // $("div#mapa_semdrag").attr('id','mapa_comdrag');
      // set flag to true:
      scrollMap = true;
      // change following:
      // setDirections(this.from.value, this.to.value, this.locale.value);
      // to be:
      setDirections(this.form.from.value, this.form.to.value, this.form.locale.value);
      return false;
   });

   var $sidebar   = $("#mapa_comdrag"),
       $window    = $(window),
       offset     = $sidebar.offset(),
       topPadding = 20;

   $window.scroll(function() {
      // don't do anything if flag not set:
      if (!scrollMap) return;
      if ($window.scrollTop() > offset.top) {
          $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
          });
      } else {
          $sidebar.stop().animate({
             marginTop: 0
          });
      }
   });

});

And then set the map id to mapa_comdrag in your html in the first place.

With your code as it is now, when your second document ready handler runs there is no element with the id mapa_comdrag which means that this variable:

$sidebar   = $("#mapa_comdrag")

will be an empty jQuery object, which in turn means that the following doesn't work:

offset = $sidebar.offset() // offset doesn't make sense when `$sidebar` is empty

...so within the scroll handler offset and $sidebar don't work.

Also, unrelated to that, within your current button click handler the value of this will be the button that was clicked but you seem to be treating it as if it was the form the button belongs to. So on the following line:

setDirections(this.from.value, this.to.value, this.locale.value);

...all three parameters are undefined. You could fix this is as follows:

setDirections(document.getElementById("from").value,
              document.getElementById("to").value,
              document.getElementById("locale").value);
// OR
setDirections(this.form.from.value, this.form.to.value, this.form.locale.value);
// OR
var parentForm = this.form;
setDirections(parentForm.from.value, parentForm.to.value, parentForm.locale.value);