jquery resize function doesn't work

Question

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.

When < 800px the function should transform my span into a select option tags.
when > 800 should return like before.

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>

Jai · Accepted Answer · 2015-02-09 12:30:00Z

2

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

edited Feb 9, 2015 at 12:30

answered Feb 9, 2015 at 12:17

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

skobaljic Over a year ago

That's true, but that is not the main issue. Spans are replaced with DIVs and some break tags? Look here

DDfrontenderLover Over a year ago

var windowsize = $window.width(); I got a variable already in place!!

skobaljic Over a year ago

(it is on wrong place mate, should be inside wrapContent() function)

DDfrontenderLover Over a year ago

oh I see thanks, but why on resize doesn't go back with the default html?

DDfrontenderLover Over a year ago

@Jai why am I loosing the click on resize?

|

Collectives™ on Stack Overflow

jquery resize function doesn't work

1 Answer 1

Updated Fiddle

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related