I currently have a div element:
<div class="...">...</div>
When the window is resized to its minimum width and the style hidden-xs is applied, I need to add a few more classes to my div.
After resizing the window, it should look like this:
<div class="... margin-top padding-top">...</div>
Is there a way to conditionally apply these classes in CSS? p.s. Could this possibly be done directly in HTML using AngularJS?
It's not possible to dynamically add or remove classes in CSS.
However, a workaround is to dynamically add or reset styles using @media queries.
For instance, let's assume all the elements you want to target have a class named .target-el.
Here's what you can do:
.target-el.margin-top for both small and large sizes..target-el.padding-top.auto, none, 0 based on the default value for that specific rule..margin-top alongside a marker class .target-el, allowing your default .margin-class to still function correctly in other parts of your code.Take a look at this example:
.target-el {
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
}
.target-el.margin-top {
margin-top: 0;
}
.target-el.padding-top {
padding-top: 0;
}
@media screen and (max-width: 700px) {
.target-el.margin-top {
margin-top: 10px;
}
.target-el.padding-top {
padding-top: 5px;
}
}<div class="target-el padding-top margin-top"></div>In the Bootstrap code snippet, the .hidden-xs class is used as shown below:
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
This code utilizes a media query for screens larger than 767px. Instead of using JavaScript to manipulate the DOM, it is recommended to apply similar media queries directly to your classes like this:
<div class="... margin-top padding-top">...</div>
@media (max-width: 767px) {
.margin-top {
margin-top: 10px;
}
.padding-top {
padding-top: 10px;
}
}
Instead of relying on JavaScript, I suggest utilizing a new set of CSS rules:
<div class="hidden-md margin-top-sm padding-top-sm">...</div>
You can target specific screen sizes using media queries in your CSS:
@media (max-width: 991px) {
.margin-top-sm {
...
}
.margin-padding-sm {
...
}
}
If you want to give it a try using CSS specificity, you could consider either of these options:
#UniqueDiv1.hidden-xs,
#UniqueDiv2 .hidden-xs{
margin-top: 10px;
padding-top: 10px;
}<div id="UniqueDiv1" class="hidden-xs">
</div>
<div id="UniqueDiv2">
<div class="hidden-xs"></div>
</div>Alternatively, you can achieve the same effect with CSS 'specificity', like so:
To apply custom classes based on a specific media query, you have the option to utilize JavaScript. One method is by using window.matchMedia, or incorporating a library such as Enquire.js.
If you prefer not to manually search for the media query defined in the bootstrap framework, another approach is to employ an [attribute*=value] selector to identify all classes containing the "-xs" characters, and then adjust properties accordingly for remaining classes.
div[class*="-xs"].margin_top {
margin-top: 10px;
}
<div class="hidden-xs margin_top">The first div element.</div>
<div class="visible-xs margin_top">The second div element.</div>
I'm trying to change the class of the element #sidePanel from .compact to .expanded dynamically in this code snippet: <div id="sidePanel" class="compact"></div> <div id="topbar"> <div id="buttonContainer"> <div ...
I have created an HTML widget that is inserted into various websites without the use of iframes. However, I am encountering issues where the CSS of some sites is affecting the appearance of my elements, such as text alignment, underlining, and spacing. Is ...
Each item on my list can be highlighted when clicked, using the selectedData class. <div>Remove highlight </div> <ul> <li ng-repeat="data in inputData"> <span title="{{data}}" ng-class="selected ? 'selectedData' : ...
As I develop a website, I have implemented a sticky header that shrinks after scrolling past the window height. I experimented with two versions - one using Vanilla-JS and another with jQuery. Both versions work fine, but the issue arises when the header s ...
There are multiple hidden input fields on the page I'm currently working on: <input a1="2" a2="1" a3="3" name="Value" type="hidden" value="10"> <input a1="4" a2="2" a3="6" name="Value" type="hidden" value="12"> <input a1="6" a2="3" a3 ...
Excuse me for this somewhat odd query about Bootstrap, but I seem to be a bit scattered today... I would like to change the background color of my container-fluid div so that it covers the entire width of the page. However, I want the child row-fluid div t ...
I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...
Having some trouble with my jQuery ajax code while working on it in Firebug. I keep getting a ReferenceError: jQuery(document).ready(function() { jQuery('.my-div').click(function(e){ e.preventDefault(); var href = jQuery(this).attr(& ...
I am looking to include a series of tweets from Twitter in a div on a basic webpage. The challenge is centering this div horizontally on the page. I have tried using: <div style="text-align:center"> and also: <div style="width: 900px; display ...
Can this CSS class be made to work in Internet Explorer 11? .inactive { filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28); } I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issu ...
Is there a way to display DIVs with the same class, initially hidden using CSS, one after another when a button is clicked? If you have any hints or directions on how to achieve this, it would be greatly appreciated. Thank you! $(".add_another").click ...
What is the best approach to dynamically add and store HTML controls for dynamically added elements on an HTML page? Currently, I am developing a widget-based system where users can choose which widgets they want to display. They have the flexibility to s ...
I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...
I'm currently attempting to invoke an angular controller from my JavaScript code. This is my first encounter with Angular and I must admit, I'm feeling a bit overwhelmed! I've been following this example: Unfortunately, when testing it out ...
After doing some research, I found several examples, including using $q from Angular to prevent making repeated server calls to check if a request is complete with data. One of the resources I came across is this link: Recursive $http.get in for loop Alt ...
I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...
My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...
Having an issue with Safari 6.1.5 not displaying a pattern in an SVG rectangle. After simplifying the code, here is the test case: <html> <head> <style> .patterned { fill: url("#myid") none; stroke:blue} ...
Is it possible to filter a complex object with nested properties using the ng-repeat filter? Can we achieve this filtering with the ng-repeat filter provided out of the box? Data { Name: 'John Smith', Manager: { id: 123, Name: &a ...
My form consists of just two fields: <form name="save" ng-submit="sap.saved(save.$valid)" novalidate> <div class="form-group" > <input type="text" name="name" id="name" ng-model="sap.name" /> </div> ...