Search code examples
jqueryhtmlcsslayoutautoresize

Automatic detection browser resize with change active element

I need to active element with resize browser. I have following code segment,

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="card page-builder-card">
        <div class="header">
            <ul class="mobile-device-view">
                <li>
                    <a href=""><i class="fa fa-mobile" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a href=""><i class="fa fa-tablet" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a href=""><i class="fa fa-laptop" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a class="active" href=""><i class="fa fa-desktop" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
        <div class="body">
            <div class="page-ui-content">

            </div>
        </div>
    </div>
</div>

Here, if the web content is in "Desktop" view then desktop icon will be active such like the above code segment. It screenshot is below,

enter image description here

Same way if I resize this content width range is between Laptop window then "Laptop" icon will be active. I won't change this icon by on-click or on-event. Any CSS or jQuery code will be accept to solve this problem.

Solution

  • Are you familiar with CSS Media Queries? They seem to be perfectly suited for what you describe.

    Media Queries allow you to trigger a CSS rule at specific screen or device dimensions. So, for instance, if you wanted one of the <a> tags to get the active styling only when the screen was between certain widths, you could use:

    @media only screen and (max-width: 480px){
    li#mobile > a{
        ...
        /* whatever rules are used for "active" styling
        ...
    }
}