I've got 3 categories acting as buttons for a toggle function. The categories are
displayed inline-block and have a width of 30% each.
When you click on one of them a paragraph appears underneath, however that causes the other two categories to be displayed underneath that paragraph. I need them to stay in one line though.
Here's the fiddle so you can see what I mean. When you click on 'Test1' the 'Test2' is moved underneath the paragraph but I need it to stay where it is.
Any suggestions how to achieve this?
Edit
I've got the html structure like this as it makes the layout work for mobile devices where the categories are stacked.
I've changed your HTML structure, see this fiddle
HTML:
<div class="Categories">
<p id="Category1">Test1</p>
<p id="Category2">Test2</p>
</div>
CSS:
.Categories p {
width:33%;
display:inline-block;
}
JS :
$('#Category1').click(function(){
$('.moreCategory1').toggle();
});
$('#Category2').click(function(){
$('.moreCategory2').toggle();
});
This problem is easily solved by using a flex container. Not only it solves your problem, it is also easy to change for mobile in responsive web design and it is semantically correct.
HTML:
<div class="categories">
<p id="Category1">Test1</p>
<p id="Category2">Test2</p>
<p id="Category3">Test3</p>
</div>
<div id="more1" class="moreCategory">
<p>Content 1</p>
</div>
<div id="more2" class="moreCategory">
<p>Content 2</p>
</div>
<div id="more3" class="moreCategory">
<p>Content 3</p>
</div>
CSS:
.categories {
display: flex;
width: 100%; /*Not necessary. Make sure its large enough to be clear*/
flex-direction: row;
}
.categories p {
width: 30%;
margin: 2px;
padding: 3px;
text-align: center;
background-color: #000;
color: #fff;
}
.moreCategory {
display: none;
}
For Mobile:
#media (min-width: 600px) {
.categories {
flex-direction: column;
}
.categories p {
width: 100%;
}
}
JQuery:
$('#Category1').click(function() {
if ($('#more1').is(":hidden")) $('#more1').toggle();
if (!$('#more2').is(":hidden")) $('#more2').toggle();
if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category2').click(function() {
if (!$('#more1').is(":hidden")) $('#more1').toggle();
if ($('#more2').is(":hidden")) $('#more2').toggle();
if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category3').click(function() {
if ($('#more1').is(":hidden")) $('#more1').toggle();
if (!$('#more2').is(":hidden")) $('#more2').toggle();
if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
This should solve your problem. JS Fiddle.
EDIT :
If you really want the heading tabs together, but also applicable for mobile you can hide the selecting controller from my for, i.e., the topmost main div.
Hide the header tags for large screens and the same css applies. For mobiles, hide the control div and show the headers and moreContent divs without any JQuery controls. A simple if statement should do the trick(check for screen size or user agent).
Related
I have two divs. Inside each div, there are two divs:
<div class="hide">
<div>
Variable size
</div>
<div>
Text1 (also variable size)
</div>
</div>
<div class="hide">
<div>
Different variable size
</div>
<div>
Text2 (also variable size)
</div>
</div>
If the screen is too small, I want the texts to disappear:
To do it, I used
.hide {
display: flex;
height: 100px;
flex-wrap: wrap;
overflow: hidden;
}
However, if the 1st text is too big, but the second is not, I have something like that:
And I'd like them to be hidden simultaneously.
Is there a way (no jQuery) to do it? Preferably with CSS or SASS, but JS (I use Angular) would also be acceptable.
Use display flex like this
.hide { height: 100px; display: flex; flex-wrap: wrap; overflow: hidden; }
currently I am trying to create a navigation bar that switches itself to a hamburger menu if the screen size is too small (responsive / mobile).
https://jsfiddle.net/g7tfnry1/31/
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggle();
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
#media(max-width: 300px) {
#items {
display: none;
}
#btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
So if you lower the screen size to mobile the css works fine. If you show the items by clicking the button the css works fine too. But after that if you want to get back to a big screen size the menu disappears completely because the items are still hidden or the items don't get aligned in a flex box next to each other.
My question is, do I have to create a resize event $(window).resize() or am I missing something in my css?
When using .toggle (show/hide) you override the CSS rules as it change the display type inline, which has a higher specificity than external rules, unless !important is used in the CSS.
Instead toggle a class .toggleClass, combined with an extra CSS rule #items.show
Updated fiddle
Stack snippet
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggleClass('show');
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
/* temp. changed to 500 so it works better in the snippet/Chrome when resize */
#media(max-width: 500px) {
#items {
display: none;
}
#btn {
display: block;
}
}
#items.show {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/st8q8z5g/5/
Partial CSS:
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, Tahoma;
font-size: 11px;
}
b.title {
color: #FFFFFF;
clear: both;
display:inline-block;
padding: 0 0 5px 0;
font-size: 12px;
text-transform: capitalize;
}
b.message {
color: #EDEDED;
clear: both;
display:block;
}
I am running into two issues:
Why does the text alert get cut off if the screen is less than 820px?
(Would like the DIV to expand to show the alert automatically without
setting a height)
When pressing the "Pause" button the "Play" button is displayed but
it loses the CSS for the WIDTH and MARGIN. (The "Play" button does
not stretch and does not have the margin like the "Pause" button) [FIXED]
How can I fix the above issues.
I guess you can do a workaround where you can manually set the height of the blue container divs.
You can change the html like this:
HTML
<div class="blue-container" style="position: relative; overflow: hidden; width: 98%; padding: 1%; background: #0070C6;">
<div style="overflow: hidden; clear: both; text-align: left; position: absolute; right: 2%; top: 8%; z-index: 9999999; color: #FFF;">
<span id="msgCurr">1</span>/<span id="msgOf"></span>
</div>
<div class="light-blue-container" style="position: relative; overflow: hidden; width: 100%; margin: 0 auto; background: #009DF5;">
<div class="section group brClear">
<div class="col span_short vertAlignT span_pad_all">
Previous
Play
Pause
Next
</div>
<div class="col span_long vertAlignT span_pad_all alertHolder">
<div class="msgAlert">
<b class="title">The title alert goes here #1</b>
<b class="message">The alert message will go here 1...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #2</b>
<b class="message">The alert message will go here 2...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #3</b>
<b class="message">The alert message will go here 3...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #4</b>
<b class="message">The alert message will go here 4...</b>
</div>
</div>
</div>
</div>
</div>
And in the css, what you can do is, using a media query, keep it like this:
CSS
#media only screen and (max-width: 820px) {
.light-blue-container{
height:100%
}
.blue-container{
height:21em
}
...
Here is fiddle:
JS fiddle : https://jsfiddle.net/st8q8z5g/9/
As you are keeping the msgAlert div position to absolute, it fixes the fade problems, but when you change the screen size, it would need to act as if its position is relative but should also have the fade smoothness, which i think might be difficult to achieve. So instead of that, just change the containers height and set it manually when the screen size is less than 820px. But if you are unwilling to compromise the dynamic height, you can achieve it using jquery or javascript. But I think for now this should solve your problem.
Why does the text alert get cut off if the screen is less than 820px? (Would like the DIV to expand to show the alert automatically without setting a height)
The .msgAlert has position: absolute and the absolutely positioned elements do not take any height in the viewport. Removing position: absolute from there works:
.msgAlert {
/* position: absolute; */
display: none;
clear: both;
overflow: hidden;
}
When pressing the "Pause" button the "Play" button is displayed but it loses the CSS for the WIDTH and MARGIN. (The "Play" button does not stretch and does not have the margin like the "Pause" button)
The #playAlert has display: inline set very hard, even though if you change, it doesn't. It has to be block.
You can fix it using:
$('#playAlert').css("display", "block").hide();
If I remove position: absolute the message jumps as it fades out and then in...
Give a min-height for the container so that it doesn't jump. :)
The "Play" button isn't the same width if I use your fiddle :/
I left this for you to figure out intentionally. But you made to answer this. Here's the solution:
$('#playAlert').css("display", "inline-block").hide();
Working Fiddle: https://jsfiddle.net/e34pzhu3/
I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.
Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}
When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.
I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});
I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>