I have a modal that, when opened, makes everything disappear via display-none except for itself. Or, at least, that's what I want it to do, but it doesn't. I don't know much about child selectors, but I think this should work since .fixed#myNav is a direct child of .fixed#all-body. Does anybody know what could be wrong?
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed#all-body >:not(.fixed#myNav),
.fixed#all-body >:not(.fixed#myNav) * {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
<!-- Other menu content-->
</div>
<!-- Other page content-->
</body>
function toggleMobileMenu() {
var element = document.getElementById("myNav");
element.classList.toggle("fixed");
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
More context, if anybody's wondering: When the button to open the modal is clicked, the .fixed class is added to both #all-body and #myNav, and I want their respective display values to switch. However, since #myNav is a child of #all-body, this doesn't work. I'm hoping to use the code above to basically say "everything except for #myNav is at display: none."
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed #myNav{
display:block;
}
.fixed#all-body >:not(#myNav) {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
menu
</div>
<p>page content</p>
</body>
.fixed class is set for body only.
Added display:block for nav when .fixed is parent.
Content should be wrapped in a tag for this to work.
I found it easier to follow what was going on if there was just one class, showMenu, introduced rather than trying to use fixed twice.
What this snippet does is toggle showMenu on the body. It also ensures the 'other content' on the page is wrapped in an element so that it too can respond when the showMenu class is added to body.
Then it does what you were basically doing, set all child elements of body to display none when the showMenu class is set and then it sets the menu to block so it alone shows.
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("showMenu");
}
#myNav {
display: none;
}
/* stop showing every element below body (but not body itself) */
.showMenu>:not(#myNav) {
display: none;
}
/* override the above setting for just the menu */
.showMenu #myNav {
display: block;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button> Other menu content
</div>
<div>
Other page content
</div>
I couldn't see how to do it without making sure the other content is in its own element - if it isn't it will stay visible which I believe you don't want.
Related
I have a text field that I am trying to attach focus styling to and when focused, I want the box the expand and then include an "Add" button below the text area.
Both elements are on different levels (due to the existing structure of the code base). But I can't figure out how to hide/display the button when focusing on the text area. Here's an example of what I'm working with:
<form class='container'>
<div class='form-item'>
<div class='input-container>
<textarea id='addComment'></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'></button>
</span>
</form>
And here is the CSS/SCSS I've got
#addCommentBtn {
display: none;
}
#addComment {
transition: all 0.5s ease;
margin: 0.5em;
width: 95%;
}
#addComment:focus {
height: 10em;
margin-bottom: 2em;
}
#addComment:focus + #addCommentBtn {
display: block;
}
The expansion of the textarea on focus works as intended, but getting the button the change from display:none to display:block won't seem to work (I've tried a few different variations as well such as visibility).
If it comes down to it, I may have to adjust the Vue components, but this is last resort as it would require more tweaks/confirmation from project lead as the components are used in numerous areas and changes would affect those other areas as well.
ALSO: I would prefer not to use JQuery as well.
This should fix the problem. Flex will automatically adjust the height of container based on content.
function toggleButton(showFlag) {
document.getElementById('addCommentBtn').style.display = showFlag ? "inline" : "none";
}
.container {
display: flex;
flex-direction: column;
}
#addCommentBtn {
display: none;
}
<form class='container'>
<div class='form-item'>
<div class='input-container'>
<textarea id='addComment' onfocus="toggleButton(true)" onfocusout="toggleButton(false)"></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'>Add</button>
</span>
</form>
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
In my SASS file I have some styling for a slick carousel and a loading spinner.
When the class slick-initialized appears is it possible to set display:none on the spinner.
For example - from:
slick.slick-initialized {
display: block;
}
To something like:
slick.slick-initialized {
display: block;
&.spinner { display none };
}
where I have:
<div class="row">
<div class="spinner"></div>
<slick init-onload=true data="qNew" dots=true arrows=false>
<div class=“tile" ng-repeat="question in questionsNew">
<span ng-bind-html="question.question"></span>
</div>
</slick>
</div>
If .spinner element is placed immediately after to .slick element
You can write SCSS
SCSS
slick.slick-initialized {
display: block;
+ .spinner { display none };
}
HTML
<div class="row">
<slick init-onload=true data="qNew" dots=true arrows=false>
<div class=“tile" ng-repeat="question in questionsNew">
<span ng-bind-html="question.question"></span>
</div>
</slick>
<div class="spinner"></div>
</div>
Place ..spinner element after slick element and use above scss
I have the following fiddle - here I am trying to align the 'click' and <h3> in the same line
I am facing 2 issues here -
when the h3 content is too long it is pushing 'click' -
and on click when it shows the content it is moving sideways. Any ideas on how to acheive this - new to CSS.
Tried giving display:inline to <h3> but that did not help in this scenario.
http://jsfiddle.net/92spd439/
$('#ttt a#iimarrow').css({
cursor: "pointer"
}).on('click', function() {
$(this).next('ul').toggle();
});
ul {
display: none;
}
#ttt {
float: right;
}
a#iimarrow {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3><a> tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
<span id="ttt">
<a id="iimarrow">click</a>
<ul>
<li>12</li>
<li>13</li>
</ul>
</span>
The problem here is actually the h3 element which defaults to a display: block;. So if you just remove a#iimarrow{display:inline-block;} (since a tags default to display: inline; as #mikelt21 pointed out) and add the CSS below, then your problem will be fixed.
h3 {
display: inline;
}
JSFiddle
I believe something like this might be what you are looking for.
What I did was add float:left to the first <a>.
As following:
<h3>
<a style="float:left"> tdhfkjshdfhsdfsdflkshdlflskfjl</a>
</h3>
You could achieve this by placing the right-floated <a> element ahead of the <h3> in the HTML:
$('#ttt a#iimarrow').css({
cursor: "pointer"
}).on('click', function() {
$(this).next('ul').toggle();
});
ul {
display: none;
}
#ttt {
float: right;
}
a#iimarrow {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="ttt"><a id="iimarrow">click</a>
<ul>
<li>12</li>
<li>13</li>
</ul>
</div>
<h3><a>tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
Note that a <span> cannot contain the block-level <ul> element, so I've used a <div> in place of that, otherwise the only change is rearranging so the <div> (#ttt) comes ahead of the <h3>.
In short.
I have something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style>
.vertical_panel > .fields > .item {
display: block;
background-color: #344;
}
.horizontal_panel > .fields > .item {
display: inline;
background-color: #FAE;
}
.item {
width: 100px;
height: 50px;
margin: 2px;
}
.fields {
margin: 0px;
padding: 0px;
}
#specialSpan {
display: table;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="horizontal_panel" id = "specialSpan" style="width: 300px; height: auto;">
<fieldset class="fields">
<span class="vertical_panel item" style="width: 300px; height: auto;">
<fieldset class="fields">
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</span>
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</div>
</body>
</html>
It's an approximation to my code structure. There are more elements inside the fields. So, I have a javascript function which toggles class of panels.
The problem is: I have correct selectors, correct values of style are set(display), but Internet Explorer 8 does not apply it correctly. The items does not change their direction if I call that function. Under “does not change direction” I mean that items does no rendered as display: block or display: inline.
There is a key part: if I open debug tools and enter display: inline for instance manually for panels, almost everything looks fine. But if I have correct view before manual style changes and I have changed the style, I can't change view back to normal in ordinary way — with call of function.
The function is something like:
function SetPanelOrientation(panel) {
// this attribute doesn't exit in example but actually exist in project's code
// and always correct
var isVertical = panel.getAttribute("IsVertical");
if (isVertical == '0') {
$(panel)
.removeClass('vertical_panel')
.addClass('horizontal_panel');
} else {
$(panel)
.removeClass('horizontal_panel')
.addClass('vertical_panel');
}
};
I can see in debugger tools that class changed, but view doesn't change. I've tried many combinations with block and inline-block but have not found working combination.
Due to the doctype you are using, you are in quirks mode, and IE will perform as if it were 1998 all over again. New web pages should not be using that doctype since 1999.
The only way around this is to set the element's CSS properties to how you want them to be versus how other browsers are correctly displaying them.
There was nothing in doctype, nor in property values. Set styles with jquery instead of css file helps.