Regarding Bootstrap 5.1.3:
I want to hide elements on a page with bootstrap class ".invisible".
The problem is that bootstrap allocates space for this invisible elements which looks bad on the page.
When I set the elements to visible with class ".visible",the element should be added visible after the component before.
What is to do that bootstrap does not allocate space in page?
Use CSS for that. AndI think Bootstrap has also class "hiden" instead "invisible"
if you set bootstrap class .invisible it is equal to css syle "visibility: hidden". It will invisible but still on page as existing element.
if you set bootstrap class .hiden it is equal to css style "display: none" It will disapear element from your page as you expacting.
you can use bootstrap class or css styling
css styling:
.my-hiden-element {
display: none;
}
bootstrap:
<div class="hiden"><div>
Related
I have a question with swiperjs.
How to hide not active slides with img?
I tried add class with attributes:
overflow: hidden
but if I added this attributes, images don't appear.
But slider is work.
https://codesandbox.io/s/spring-cache-dxw0ei?file=/index.html
Mistakes was in syntax.I add not correct name for class in html.
There is an image on this page http://www.robertsroofing.com/services-view/leak-repair/ specifically the orange water droplet icon above the photo. I want to hide this (display: none) but can't seem to target via css. So i also tried to add some javascript at the bottom of the page but that doesn't work either. Maybe it's not targeting right but I feel I tried everything.
<article id="post-1975" class="post__holder post-1975 services type-services status-publish has-post-thumbnail hentry">
<figure class="featured-thumbnail thumbnail large"><img src="http://www.robertsroofing.com/wp-content/uploads/2014/11/icon-leak-tile.png" alt="Reliable Commercial Roof Leak Repair" style="display: inline;"></figure>
</article>
<script>
$(document).ready(function(){
$('.type-services .thumbnail img').attr('style','display: none');
})
</script>
I do need to specifically target the parent .type-services class as this template is shared with other content. I just need the image hidden when the .type-services class is used.
The element has an inline style of display: inline;. This is why your CSS override is not working. Inline styles always take precedence over CSS rules, regardless of how specific your selector is.
There are 2 ways you can fix this. 1 is in your CSS, just add !important to force override of the style:
article.type-services figure.thumbnail > img { display: none !important; }
or, if you want to stick with the jquery method, fix your selector to target the correct class - you have a typo in 'thumbnail'. Also, you should use the 'css' function, rather than completely overriding the 'style' attribute.
$('.type-services .thumbnail img').css('display', 'none');
or just use the hide method
$('.type-services .thumbnail img').hide();
Let's use this codepen for example: http://codepen.io/desandro/pen/nFrte
What if I wanted to hide the filtering options by toggling an .active class (that would display: block, vs display:none as default styling)?
When I do this on my own, the accordion is behind the isotope masonry layout. I would like the isotope masonry part to bump down.
I've tried:
$container.isotope('reloadItems').isotope('layout');
After I toggle the class.
Thanks.
I have two jquery accordions in my page . One in the east and One in west panel . Is it possible to style them differently ? Editing .ui-accordion related styles changes style of both the accordions .
Is there a way to provide different styles for the two accordions ?
Thanks in advance .
Yes you can with some tricks.
All you have to do is override jQuery, UI and CSS for other accordion, something like this.
Simply add a different ID (or class) to both, then add them to the CSS selector. Alternatively, you can add an ID of a parent element. Ex:
.ui-accordion{...}
.ui-accordion div{...}
.ui-accordion .arrow{...}
becomes
#left-column .ui-accordion{...}
#left-column .ui-accordion div{...}
#left-column .ui-accordion .arrow{...}
#right-column .ui-accordion{...}
#right-column .ui-accordion div{...}
#right-column .ui-accordion .arrow{...}
you can use jQuery eq() method:
$('.ui-accordion:eq(0)').addClass('first') // the first ui.accordion element
or CSS3 nth-child pseudo selector:
.ui-accordion:nth-child(1) { the first ui.accordion element
property: value;
}
Another option is to use two themes, one for each accordion.
When downloading jQueryUi click the "advanced theme settings" in the right sidebar under "Theme". Use the "CSS Scope" and "Theme Folder Name" fields. There are little help icons to explain what to do.
I have never done that so I can't tell you how easy or difficult it is.
Yes it's possible now your define on extra id in your jQuery as like this
HTML
<div id="slider1" class="east">
// some code of your html
</div>
<div id="slider2" class="east">
// some code of your html
</div>
Css
#slider1.east .somecss{
// css style as like your requirement
}
#slider2.east .somecss{
// css style as like your requirement
}
I used jQuery shown here (https://stackoverflow.com/a/6967175/1130782) to get the links on my page to show/hide 3 different divs, as seen here: http://ikstudio.squarespace.com/lightfield/
I needed all of the divs to be hidden initially, so I removed the #showall function and added
jQuery('.targetDiv').hide();
to hide all the divs initially. Doing this broke the javascript gallery I am using inside of .
I am assuming that this is because the page loads with that div hidden and the gallery script can not properly position everything it needs to.
Is there anyway to resolve this?
Thanks
Can you not hide them with CSS?
.targetDiv {
display: none;
}