I would like to use Jquery to change the class if it exceeds a certain value.
What you want to do
1: Set the designated CSS to reduce the screen to 720px or less.
2:Set the designated CSS even if the screen is 721px or higher horizontally
What do you want to check?
If the screen is reduced, the event will ignite, but if it is enlarged, the event will not ignite, so I would appreciate it if you could let me know.
``
<body>
<div class="tabbody">
<table>
<thead>
<tr>
<th class="w-5" id="tr-no">No.</th>
<th class="w-10">Status</th>
<th class="w-25"> Test code </th>
<th class="w-40" id="tr-agency-name">Branch name</th>
<th class="w-25" id="last-update"> Last update date </th>
<th class="w-10tcenter">Check </th>
<th class="> Query </th>
<th>/th>
</tr>
</thead>
<table>
</div>
</body>$(function(){
vartabbody=$('.tabbody');
tabbody.scrollLeft(function(){
if($(window).scrollLeft(720){
console.log("This is Called")
$('#tr-no').removeClass('w5').addClass('w-7');
$('#tr-agency-name').removeClass('w40').addClass('w38');
$('#last-update') .removeClass('w15').addClass('w15-7');
} else if ($(window).scrollLeft(721)){
console.log("Not Called Here"")
$('#tr-no').removeClass('w7').addClass('w-5');
$('#tr-agency-name').removeClass('w38').addClass('w40');
$('#last-update').removeClass('w15-7').addClass('w15');
}
});
});
The .resize method was used instead of .scrollLeft.
© 2024 OneMinuteCode. All rights reserved.