CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DDfrontenderLover
DDfrontenderLover

Reputation: 480

jquery resize function doesn't work

not sure what I'm missing, I'm sure it was working before:-( but I can't see the issue.

I need need my function wrapContent to be resizable.

http://jsfiddle.net/1ze02dr2/

var $window = $(window);
var windowsize = $window.width();
var body = $('html, body');

function wrapContent() {
    if (windowsize < 800) {
        $('.pick-country > span').replaceWith(function () {
            return $('<option/>').text($(this).text()).attr('value', $(this).data('id'));
        });
        var select = $('.pick-country > option').wrapAll('<select class="country-list"></select>');

    }


}
wrapContent();
$(window).resize(wrapContent);


$('select.country-list').on("change", function () {
    if ($(this).val()) {
        body.animate({
            scrollTop: $('#' + $(this).val()).offset().top - 63
        }, 'slow');
    }
});

$('.hotspot').on("click", function (e) {
    e.preventDefault();
    body.animate({
        scrollTop: $('#' + $(this).data('id')).offset().top - 63
    }, 'slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pick-country">
    <div class="country">PICK A COUNTRY</div>
<span data-id="London" class="London hotspot">London</span>

<span data-id="CapeTown" class="CapeTown hotspot">Cape Town</span>

<span data-id="Beijing" class="Beijing hotspot">Beijing</span>

<span data-id="Tokyo" class="Tokyo hotspot">Tokyo</span>

<span data-id="HongKong" class="HongKong hotspot">Hong Kong</span>

<span data-id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span>

<span data-id="Singapore" class="Singapore hotspot">Singapore</span>

<span data-id="Mumbai" class="Mumbai hotspot">Mumbai</span>

<span data-id="Shanghai" class="Shanghai hotspot">Shanghai</span>

<span data-id="Sydney" class="Sydney hotspot">Sydney</span>

<span data-id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span>

<span data-id="SanPaulo" class="SanPaulo hotspot">São Paulo</span>

<span data-id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span>

<span data-id="Dallas" class="Dallas hotspot">Dallas</span>

<span data-id="NewYork" class="NewYork hotspot">New York</span>

<span data-id="Dubai" class="Dubai hotspot">Dubai</span>

</div>
<div id="London">London</div>
<br>
<br>
<br>
<div id="CapeTown">Cape Town</div>
<br>
<br>
<br>
<div id="Beijing">Beijing</div>
<br>
<br>
<br>
<div id="Tokyo">Tokyo</div>
<br>
<br>
<br>
<div id="HongKong">Hong Kong</div>
<br>
<br>
<br>
<div id="KualaLumpur">Kuala Lumpur</div>
<br>
<br>
<br>
<div id="Singapore">Singapore</div>
<br>
<br>
<br>
<div id="Mumbai">Mumbai</div>
<br>
<br>
<br>
<div id="Shanghai">Shanghai</div>
<br>
<br>
<br>
<div id="Sydney">Sydney</div>
<br>
<br>
<br>
<div id="StPetersburg">St. Petersburg</div>
<br>
<br>
<br>
<div id="SanPaulo">São Paulo</div>
<br>
<br>
<br>
<div id="SanFrancisco">San Francisco</div>
<br>
<br>
<br>
<div id="Dallas">Dallas</div>
<br>
<br>
<br>
<div id="NewYork">New York</div>
<br>
<br>
<br>
<div id="Dubai">Dubai</div>

Upvotes: 0

Views: 133

Answers (1)

Jai
Jai

Reputation: 74738

change this:

if (windowsize < 800) {

to this:

if ($window.width() < 800) {

The issue seems to me is your var windowsize is outside of function at doc ready. so it never gets updated value when window resize happens.

i guess you require this:

var $window = $(window);
var windowsize = $window.width();
var body = $('html, body');
var spans = $('.pick-country').html(); //<----cache it here

function wrapContent() {
  if ($window.width() < 800) {
    $('.pick-country > span').replaceWith(function() {
      return $('<option/>').text($(this).text()).attr('value', $(this).data('id'));
    });
    var select = $('.pick-country > option').wrapAll('<select class="country-list"></select>');

  } else {
    $('.pick-country').html(spans); // replace the old content here
  }
}

Updated Fiddle

Upvotes: 2

Related Questions