CODEWITHSUNDEEP
jqueryhtmlcss
ark
ark

Reputation: 3805

class attributes are not changing after reaching specific width in jquery

$(window).on('resize', function (event) {  
if ($('body').width() <= 480) {


            $("circle").attr("cx", 115).attr("cy", 80).attr("r", 70).attr("transform", "rotate(-84, 100, 99)");
            $("#skills .row [class*=col-]").toggleClass("col-xs-6 col-xs-12");

        }
}

My code is it should remove the attributes and assign the give value once it reaches width < 480. But this is not happening when i inspect the element and set the screen size as iphone 5s( width:320px). May i know the reason why its not changing? I even changed the body.width() to window.width() but its not working.

Upvotes: 0

Views: 78

Answers (2)

hungerstar
hungerstar

Reputation: 21725

Since you attached your code to a resize event you need a resize event to occur for the code to run. This will not happen when the page loads. You can either remove the resize event handler and you code will run when the page loads and see if the body width matches the breakpoint requirement. Or you can use a named function (function declaration) and pass that to the event handler. Then call the named function to run the code initially and then wait for resize events.

If you only want to call this code one time and you're not worried about the viewport size changing above and below 480px after initial page load, then you can just get rid of the resize handler and run your code.

If you want to observe the viewport width after page load and want to react to it anytime it changes above or below 480px then you'll need to do something like I have below.

var $body   = $( 'body' ),
    $rows   = $( '#skills .row [class*=col-]' ),
    $circle = $( 'circle' ),
    atOrUnderBreakpoint = false;

function onResize( e ) {

  var $width = $body.width();

  if ( $width <= 480 && !atOrUnderBreakpoint ) {

    $circle.attr( {
      cx: 115,
      cy: 80,
      r: 80,
      transform: 'rotate( -84 100 99 )'
    } );
    $rows.toggleClass( 'col-xs-6 col-xs-12' ); // Maybe use addClass() or removeClass() here?

    atOrUnderBreakpoint = true;
    console.log( 1 );

  }

  if ( $width > 480 && atOrUnderBreakpoint ) {

    // Example.
    $circle.attr( {
      cx: 50,
      cy: 50,
      r: 20,
      transform: ''
    } );

    atOrUnderBreakpoint = false;
    console.log( 2 );
  }

}

$( window ).on( 'resize', onResize );
onResize(); // Special case, don't wait for resize event this ONE time, apply right away.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="transparent" stroke="hotpink" stroke-width="2" />
</svg>

Above code in JSFiddle: https://jsfiddle.net/rvmvn1t4/ (slide divider side-to-side to change viewport size).

One issue I see with your code and using the resize event is the use of toggeClass(). resize gets called a lot, and the col-xs- class will constantly be added/removed from the elements. This will cause those elements to resize/flicker. Here's an example using background-color, notice it flashes between the two colors. Something similar will likely happen to your element size.

I would consider switching to addClass() or removeClass(), whichever you would need, along with setting something that will prevent your code from running more than one time after it has been applied at the breakpoint (you know, prevent flicker etc.). I used a flag in my example.

Upvotes: 1

hasan
hasan

Reputation: 3502

you can use jquery resize function 

$('body').resize(function(){      
    console.log('body dimension changed');
    if ($('body').width() <= 480) {
        $("circle").attr("cx", 115).attr("cy", 80).attr("r", 70).attr("transform", "rotate(-84, 100, 99)");
        $("#skills .row [class*=col-]").toggleClass("col-xs-6 col-xs-12");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Upvotes: 0

Related Questions