Dako Dako - 1 month ago 10
CSS Question

Add second function to a button and disable some classes

I am searching a way to get rid of some classes when browser window is under 1000pixels and add(toggle) new classes.

$( window ).on( 'resize', function( event ) {
var windowSize = $( window ).width();
if ( windowSize < 1000 ) {
if ( $( '.site-header .search-form' ).hasClass( 'search-form--active' ) ) {
$( '.site-header .search-form' ).removeClass( 'search-form--active' );
} else if ( $( '.site-header .search-trigger' ).hasClass( 'search-form--active' ) ) {
$( '.site-header .search-trigger' ).removeClass( 'search-form--active' );
}
$( '.search-trigger' ).click( function() {
$( '.search-trigger' ).toggleClass( 'search-overlay.show' );
} );
}
} );


I am new to this,and i know my question might be a bit stupid,same as my code.
I don't know if you guys need anything more to help me ,if you do,just type what.Thanks in advance ;)

Answer

You could use CSS media queries instead of JS.

Simple example:

var $btn  = $( 'button' );
var $lead = $( '.lead' );

$btn.on( 'click', function ( e ) {
  $lead.toggleClass( 'active' );
} );
.lead {
  font-size: 1.25rem;
}
.active {
  background-color: #fc0;
}

@media ( min-width: 650px ) {
  .lead {
    font-size: 1rem;
  }
  .active {
    background-color: #aa0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="lead">
  Lateen sail yardarm swab dead men tell no tales warp heave down knave yawl aye man-of-war deadlights skysail me Cat o'nine tails jack ballast spirits stern Brethren of the Coast keel plunder aft interloper square-rigged pressgang. Crack Jennys tea cup reef sails deadlights long boat Pirate Round cackle fruit galleon keel heave to coxswain yo-ho-ho loot brig cog fathom jury mast hearties topgallant cable gabion league handsomely Jolly Roger spirits walk the plank. Pinnace boom measured fer yer chains loot Chain Shot jolly boat Buccaneer ho aft Yellow Jack rope's end matey sutler starboard spirits snow main sheet lookout Corsair ballast Pirate Round bilge cable Barbary Coast spike.
</p>
<p>
 Swing the lead lateen sail scuttle Blimey brig marooned warp belaying pin salmagundi Spanish Main yard crimp fire ship Sail ho splice the main brace gun starboard man-of-war code of conduct keel long clothes gibbet log grog blossom handsomely. Brig Yellow Jack landlubber or just lubber starboard crow's nest scuttle pinnace lugsail ho gangplank transom chase killick bounty mutiny maroon pirate Cat o'nine tails Jack Tar cutlass snow rigging matey splice the main brace Davy Jones' Locker. Wench overhaul quarterdeck crack Jennys tea cup Jack Ketch splice the main brace hulk grog driver starboard mizzen scurvy haul wind jack pink gally me strike colors walk the plank Barbary Coast transom hail-shot sloop Pirate Round long boat.
</p>
<button type="button" id="me">Click Me</button>

First part is represented by the .active class. It's purpose is to illustrate media queries and state based on user interaction. .active has two states, represented by a background color that changes at different viewport sizes. .active is also added/removed by clicking a button to show user interaction.

I've also changed the font size of the first paragraph independent of any page events in an attempt to illustrate how to make visual (state) changes with out JS.