using media queries in jquery to remove and add an ID attribute in a div
Question
I have a div thats using bootstrap media queries. when it reaches the class "visible-md" i want to remove the ID from a div that can be seen on a "visible-lg" screen and when i exit the visible-md screen the id must be added back to the visible-lg screen
this is my code:
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}}
HTML
<div >
<div id="Account" class="visible-lg desktopAcc"></div>
</div>
<div class="visible-sm visible-md">
<button class="btn" type="button" id="BtnUser" onclick="Toggle()">
<span class="fa fa-user fa-lg" aria-hidden="true" onclick="Toggle()"></span></button>
<div id="PopupContainer">
<div class="AccNumber"></div> // this is where i want the "#Account" ID to come when the screen gets small,and when it gets bigger it must be removed
</div>
This is what i tried
function test1() {
var x = window.matchMedia("(max-width: 1199px)")
if (x) {
$("#Account").remove();
$(".AccNumber").attr("id", "Account");
}
else if (x >= window.matchMedia("(min-width: 1200px)")){ // here i am trying to say if it gets bigger it must go to how it originaly was but it doesnt do anything
$(".AccNumber").remove("id", "Account");
$(".desktopAcc").attr("id", "Account");
}
}
test1();
I have tried the above but it doesnt work.It adds the ID to the small screen but never removes it and adds it back to the original div when the screen gets bigger. WHat am i doing wrong?
PS : i know a class should have been used in this situation,but this code is old and i can not change it to a class because its used into many places in javascript.
2 answers
solution1
0 2019-08-26 15:39:39
function toggleID(){
var wid = $(window).width();
if(wid > 768 && wid < 1200){
}
else if(wid >= 1200){
}
}
$(window).resize(function(){
toggleID();
});
solution2
0 2019-08-26 18:09:59
One of many solutions is the CSS method, combined with some Javascript. Below you'll find the css for a dummy <div id="MediaQuery"></div>
<style>
html, body {width:100%; margin:0;}
#MediaQuery {width:0px; height:0px; }
@media (min-width: 768px) { #MediaQuery { width: 7px; } }
@media (min-width: 992px) { #MediaQuery { width: 9px; } }
@media (min-width:1200px) { #MediaQuery { width:12px; } }
</style>
In the html, a dummy div is required with height 0px, see the css above. If resizing the browser view, the width of this dummy will change according the @media breakpoints you defined in this css. Place this dummy div as a child of body, for example:
<body>
<div id="MediaQuery"></div>
… your website goes here …
</body>
The first part of the Javascript is a custom function fnMediaQuery where you can put all your stuff you want to do between the media breakpoints. The second part will execute function fnMediaQuery once on page load. The third part is the timer against bouncing during resizing. Each time the function has been executed there is a short delay before the next execution of fnMediaQuery .
<script>
// what to do on each view width
function fnMediaQuery() {
var MinWidth = document.getElementById("MediaQuery").offsetWidth;
if ( MinWidth == "0" ) {
console.log('0px - 767px');
} else if (MinWidth == "7") {
console.log('768px - 991px');
} else if (MinWidth == "9") {
console.log('992px - 1199px');
} else if (MinWidth == "12") {
console.log('1200px up');
}
}
// execute function 'fnMediaQuery' once on page load.
(function () {
fnMediaQuery();
})();
// execute function 'fnMediaQuery' / short delay against bouncing effect.
var TimerMediaQuery;
window.onresize = function() {
clearTimeout(TimerMediaQuery);
TimerMediaQuery = setTimeout(fnMediaQuery, 200); // msec
}
</script>
Suc6. Have fun.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.