How can I use jQuery's slideDown with display: inline-block, as opposed to the default display: block;
Some of the content inside the div I'm using requires it to be so, and the design partly breaks unless I fix it. However, fixing it after the sliding down has finished will be glitchy.
Any ideas?
You should probably wrap the div with display: inline-block, into another div, with simple display: none, that will be the target of your slideDown function.
I made up a demo for you here http://jsfiddle.net/d3BHL/2/
Let me know if it helps
Related
I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.
Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.
jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}
What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.
I have several divs, that should have the same height, if the screen size is above a certain width.
I thought its a good idea to use a class .sameheight as selector to create a "global working function". Next I would assign another class, to pair the divs, that should have the same height, like so:
.sameheight-01
.sameheight-01
.sameheight-02
.sameheight-02
.sameheight-02
I have several issues, that prevent me from writing my own script, as I have not enough skills in javascript/jQuery:
How can I make it a responsive function, not just set the height once after loading (using window.resize)?
How can I target .sameheight and search for other classes, without writing the same line multiple times (.hasClass(sameheight-01).hasClass(sameheight-02), etc.)?
How can I make this scalable? (Imagen I have twenty groups with ten different media queries)
I have created a JS Fiddle Demo to illustrate my problem.
How far back do you have to support?
Because this could be solved using display:flex;
.row-sameheight {
display: flex;
display: -webkit-flex;
display: -moz-box;
width: 100%;
}
Here's a JS Fiddle
this you could achieve using CSS itself
#media (min-width:500px){
.sameheight {
min-height:100px;
}
}
or
if u want to do through js/jq, refer the modification of fiddle code
http://jsfiddle.net/qj3ntsjs/11/ or
http://jsfiddle.net/qj3ntsjs/17/
So I'd like to have a popup on my page. I would like to style it with flexbox. I'm using scss to style things and I have mixins for flexbox properties.
The issue I came across is that I want to have flexbox properties applied to my popup such as display: flex which has it's browser variants:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
When I try to change css to display: none my browser overrides it with display: -webkit-flex; so I'm still not hiding my element. I thought about using visibility but since jquery uses .show and .hide with display and not visibility it kind of seemed like a wrong tool.
Should I somehow override the jQuery .hide() to change the other display properties as well or maybe create the element each time I want to display it and then delete the html of it after submit?
I have my scss with this overlay-content styling:
.overlay-content {
/* this may or may not be here */
/* visibility: hidden; */
#include flex();
#include flex-direction(column);
#include flex-justify-content(flex-start);
}
And I'd have a code which triggers when I want to display my popup:
$('.overlay-content').css('visibility: visible;');
$('.overlay-bg').css('visibility: visible;');
Is it okay to use the visibility css property or should I always use the display property to change the visibility of the element?
What bothers me is that this way I can't use the cool jquery.hide() options for cool user experience
I've run into the same issue and solution I came up with may not be the most elegant but it does the job.
I simply called .hide() in the initialization code of the component. jQuery adds inline display: none to the element, and subsequent call to .toggle() removes it, so specified in the stylesheet display: flex comes into play.
I am trying to create a webpage with two div sections displayed next to each other horizontally. In one of them I want to append content that will change over time. I noticed that if I use css display:inline-block to align the two div sections and then I use append() to insert a paragraph in the first section, the second one is pushed down to align with the paragraph block. I know I can fix this problem by using float:left instead, but I still don't understand why inline-block behaves that way. I wonder if there is a way to make inline-block work in case I really need to use that instead of float. Here is JsFiddle: Link
<div id="left">left</div>
<div id="right">right</div>
#left, #right{
background-color:#ff0;
width: 100px;height: 100px;
display:inline-block;}
<script>
$("#left").append("<p>Paragraph</p>");
</script>
when using display: inline-block you have to add vertical-align: top if you want the elements to display at the top:
JSFIDDLE
The reason being inline-block elements are set to baseline by default
I currently have a table that has a width of 94%, and the following toggle set to it:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.
Just tried the following CSS too:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it
Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.
Any way to stop this please?
The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.
You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?