I have a div that is initially hidden by display: none in the css.
<div id="myDiv" class="animate__animated">Div content Here</div>
I this have a function:
function togglefunc() {
$('#myDiv').toggle().toggleClass('animate__slideInRight animate__slideInLeft');
}
What I want to do is to toggle display: none and block but also toggle classes:
animate__slideInRight and animate__slideInLeft
So...
If it's hidden and the function is called, it shows up with the effect animate__slideInRight (animate.css class)
otherwise
If it's visible and the function is called, it will hide with the effect animate__slideInLeft (animate.css class)
My function shows fine with the effect animate__slideInRight but when I click again if quickly hides with no effect.
How can I fix this?
It does not work because the jquery toggle is done inmediatelly and not after the hide animation triggered by the attribute change is done.
I would instead use just jQuery for this slide effect:
function togglefunc() {
$("#myDiv").animate({width: "toggle"}, 350);
}
#myDiv {
overflow: hidden;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="togglefunc()">Toggle</button><br><br>
<div id="myDiv" class="animate__animated">Div content Here</div>
Sadly, you can't animate an element going from display: none to display: block. You can however use visibility: hidden and visibility: visible.
Related
I want to hide everything on my page except a single div. Tried visibility: hidden; but the other divs still take up space.
Any help?
display: none; should do the trick.
if you want to get a div to show when you click a button, you could do
function showHidden(){
document.getElementById("hidden").style.display = "block";
}
#hidden{display: none;}
<div> click the button to show another div </div>
<button onclick="showHidden()">button</button>
<div id="hidden">hidden div</div>
hopefully that helped.
Instead of visibility: hidden;, try display: none;. This way the blocks don't take up space.
Find more information here
On my website I have a slideToggle div that contains some images, very big. When this div opens, I need the images to slideIn one by one when entering the viewport.
With my code, the div opens, but then the images slide in all at the same time (as if they were a single block).
But if I remove "display: none;" from my slideToggle div and I leave it open as a starting point, the script works perfectly.
I was wondering if "display: none;" somehow ignores the div's position to the viewport.
This is the slideToggle script I am using (if it helps): https://jsfiddle.net/5efuhytm/
Instead of
display: none;
Use
visibility: hidden;
This is because display: none will remove the entire dom element from the document. Whereas visibility: hidden will just hide the dom element. In this case, if you don't want to change the viewport hide go with the visibility property.
Refer this for more details, https://stackoverflow.com/a/133064/7544289
Hope this helps!
Change the CSS remove display:none in #show-images:
/*Panel that slides open*/
#show-images
{
color: #FFF;
padding: 0;
width: 150px;
}
And add this code (because what you want to hide is just Image.)
#show-images img
{
display: none;
}
Change the JS adding #show-images img
$(function()
{
$("a#toggle").click(function()
{
$("#show-images img").slideToggle(800);
$("#toggle").toggleClass("fade");
return false;
});
});
I have a div which has a class name myClass and id name myId. The div has following style.
.myClass {
height: 74%;
margin-top: -1px;
position: relative;
overflow-y: auto;
width: 100%;
overflow-x: hidden;
visibility: hidden;
}
When i try to change visibility from hidden to visible doing this
$('#myId').css({ 'visibility': 'visible' });
I am using id in JQuery instead of class because same class is applied to others elements too. My div is still not visible. What am I doing wrong?
Yes you can do this by the following ways
$('#myId').css('display','block');
$('#myId').css('display','inline');
$('#myId').show();
Why do not you try :
$('#myId').css('display', 'block');
or Try:
<style>
.visible { display:block !important;}
</style>
$('#myId').addClass('visible');
Replace your visibility: hidden; to display: none;
then update jQuery
$('#myId').css('display','block');
in css the visibility property effects to content inside the tag while display property effects to total tag, that means if you apply display:none; it will remove entire tag but visibility:hidden hide the content inside that tag.
Since :visible is a jQuery selector you can use opacity instead of visibility to hide the content inside the tag.
$('#myId').css('opacity','1');
$('#myId').css('opacity','0');
if you need to hide the entire tag, better go with display none
just go simple, there is an api available in jquery for hiding and showing up DOM elements. Try as follows
$('#myId').hide(); // for hiding the element
$('#myId').show(); // to show up the element
I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.
This is my HTML code. I also use Ajax to call the content.
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="ModalLabel"></h3>
</div>
<div class="modal-body">
</div>
</div>
This worked for me, none of the above worked.
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
Since your content must be dynamic you can set the css properties of the modal dynamically on show event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
So you can add inline styles dynamically using jquery css method:
For newer versions of bootstrap use show.bs.modal
$('#modal').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
For older versions of bootstrap use show
$('#modal').on('show', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
or use a css rule to override:
.autoModal.modal .modal-body{
max-height: 100%;
}
and add this class autoModal to your target modals.
Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo
Newer version of bootstrap see the available event names.
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal This event is fired when the modal has loaded content using the remote option.
Older version of bootstrap modal events supported.
Show - This event fires immediately when the show instance method is called.
shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide - This event is fired immediately when the hide instance method has been called.
hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
I couldn't get PSL's answer working for me so I found all I have to do is set the div holding the modal content with style="display: table;". The modal content itself says how big it wants to be and the modal accommodates it.
There are many ways to do this if you want to write css then add following
.modal-dialog{
display: table
}
In case if you want to add inline
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
Don't add display:table; to modal-content class. it done your job but disposition your modal for large size see following screenshots.
first image is if you add style to modal-dialog
if you add style to modal-content. it looks dispositioned.
for bootstrap 3 use like
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
Simple Css work for me
.modal-dialog {
max-width : 100% ;
}
I simply override the css:
.modal-dialog {
max-width: 1000px;
}
set width:fit-content on the modal div.
You can do that if you use jquery dialog plugin from gijgo.com and set the width to auto.
$("#dialog").dialog({
uiLibrary: 'bootstrap',
width: 'auto'
});
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
<script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Wikipedia">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
</div>
</body>
</html>
You can also allow the users to control the size if you set resizable to true. You can see a demo about this at http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable
A simple CSS solution that will vertically and horizontally center the modal:
.modal.show {
display: flex !important;
justify-content: center;
}
.modal-dialog {
align-self: center;
}
For Bootstrap 2 Auto adjust model height dynamically
//Auto adjust modal height on open
$('#modal').on('shown',function(){
var offset = 0;
$(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
});
I had the same problem with bootstrap 3 and the modal-body div's height not wanting to be greater than 442px. This was all the css needed to fix it in my case:
.modal-body {
overflow-y: auto;
}
Mine Solution was just to add below style.
<div class="modal-body" style="clear: both;overflow: hidden;">
As of Bootstrap 4 - it has a style of:
#media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
so if you are looking to resize the modal width to some-width larger, I would suggest using this in your css for example:
.modal-dialog { max-width: 87vw; }
Note that setting width: 87vw; will not override bootstrap's max-width: 500px;.
My search led me here so might as well add my two cents worth of idea. If you are using Monkey friendly Twitter Bootstrap modal then you can do something like this:
var dialog = new BootstrapDialog({
id: 'myDialog',
title: 'Title',
closable: false,
// whatever you like configuration here...
});
dialog.realize();
if (isContentAYoutubeVideo()) {
dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
}
dialog.open();
Hope this helps.
If you only want your modal box to resize when the content overflow, otherwise keep original size.
Use
<div class="modal-dialog" style="display:grid;">
instead of
<div class="modal-dialog" style="display:table;">
I wonder if someone can help me find a solution to an effect hover to an image in my blog.
The idea was when I hover an image, you see a div with the image information, link project name, date,...
What i have done is, assign two classes do the div information, class show and class hide, and at the beginning it apears with a class hide.
Then with jQuery/JavaScript when the img:hover it remove the class hide and add a class show.
the problem is, when i do hover to a image, appears the information of all images.
I am wonder if some can help me to make just appear the information of the image that the mouse are hover.
My HTML:
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
Read More
</div>
</div>
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
Read More
</div>
</div>
My CSS:
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}
/* HOVER EFFECT */
.hide {
display: none;
}
.show {
display: block;
}
My JavaScript:
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});
And by the way, if some one can tell me, how to hide the information again when the image is not hover, I appreciate to.
What about something simpler:
$("div.content > img").hover(function() {
$(this).next(".information").show(); //hover in
}, function() {
$(this).next(".information").hide(); //hover out
});
This way, using jquery .show and .hide you don't need to use the css which you created for the hover effect, since these jquery's functions already take care of the attributes.
If you don't need to support IE7 and lower, you can do this with just CSS using the adjacent sibling combinator selector, no JavaScript required:
img + div.information {
display: none;
}
img:hover + div.information {
display: block;
}
That says: "Hide div.information when it's immediately after an img" but "Show div.information when it's immediately after a hovered img". The latter rule being both later in the CSS and (I think) more specific, it wins when the image is hovered and not when it isn't.
Live example - Works in modern browsers, including IE8 and higher.
the problem is, when i do hover to a image, appears the information of all images.
I believe this is because you're referencing the generic information class, not the id of a single div. Instead, use the adjacent sibling reference to get only the information for the image you're hovering. You could use the :nth-child() selector.
$("#content:nth-child(1)")
Also, you shouldn't have multiple divs with the same id.
$(this).parent().find('.information').addClass("mostrar")
.removeClass("hide");
This will grab the parent of the individual img which is being hovered, search within the parent and find the .information specific to that img.
Try this:
$('img').hover(function(){
$(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');
}, function(){
$(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});
Try this
$('img').hover(function() {
$('.information').addClass("hide")
$(this).next().addClass("mostrar").removeClass("hide");
}, function(){
$('.information').addClass("hide").removeClass("mostrar")
});