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.
Related
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>
I have some div in my page. when i click some link in that page, i want to display the corresponding div in fade in effect. My problem is that the div is already set as display='block', i didn't get fade in effect. Can any one help
Well, you'd need to make sure the div is not set as display: block and instead set as display: none.
Then when you fade in, div will automatically have display: block because divs are block level elements.
I have created a pop out sideBar. In that sideBar I have a accordion which contains divs. Those divs are draggable. The user can drag those divs and position them main page.
The problem that I am experiencing is that when the divs are dragged they are not visible outside the accordion. This can been seen in This video.
I can see that it is to do with the overflow being set to hidden however when I remove this the accordion content is shown when it should be hidden.
overflow: hidden;
JSFiddle to further show my problem.
How could I possibly fix this / what are possible ways to get around it.
Try adding this to your css
.accordion-heading + div.accordion-body {
position: static;
}
Is this what you are looking for? Updated fiddle http://jsfiddle.net/gNAFY/3/
If this solved your problem, it seems that inside bootstrap.css file, at line 5245, "position: relative" rule makes your divs not appearing outside the accordion. So you need to "reset" position to static.
For "el + el" css selector to work in IE8 and earlier, don't forget the <!DOCTYPE>.
I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});
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;
}