I have a div followed by a fieldset. I have it such you click the div anywhere and it makes the otherwise display:none fieldset appear. However, I'd like it to disappear on second click, as well. Basically the onclick event would toggle between display:none and display:block.
Here's the fiddle I'm working with: http://jsfiddle.net/zk1j23m5/
function showexpando(id) {
document.getElementById(id).style.display = "block";
}
.greyex {
padding: 15px;
padding-left: 30px;
padding-right: 30px;
border: solid black 3px;
border-top: 0px;
border-radius: 0px 0px 7px 7px;
background-color: #DDDDDD;
display: none;
}
.expando {
background-color: #A971A9;
font-weight: bold;
padding: 5px;
text-align: center;
border: 3px solid black;
border-radius: 7px 7px 0px 0px;
border-bottom: 0px;
cursor: pointer;
}
.expando a {
text-decoration: none;
}
<div class="expando" onclick="showexpando('excred');">
<a>▼ lorem ▼</a>
</div>
<fieldset class="greyex" id="excred">ipsum</fieldset>
Additionally, there's some problem with the border. I'd like the expando div to have border-radius: 7px when the fieldset is hidden, but have border-radius:7px 7px 0px 0px; border-bottom: 0px when the fieldset is visible. Lastly, the border doesn't look right when fieldset is visible: there's like a 1px difference in positioning despite the code being congruent.
How can I accomplish these?
edit; I guess I could query the document if fieldset is display:none and fiddle with the CSS accordingly using JS, but it seems unwieldy and I'm sure there's an easier solution.
You should use unobtrusive JavaScript instead.
I'd suggest toggling a class. For instance:
Updated Example
var expand = document.querySelector('.expando');
expand.addEventListener('click', function () {
this.nextElementSibling.classList.toggle('visible');
});
.greyex {
display: none;
}
.greyex.visible {
display: block;
}
References:
.nextElementSibling (IE9+)
.classList (IE10+)
Noticed no one answered your second part.
If you're looking to get the borders to line-up, just change the fieldset to a div.
Here's the fiddle.
Or, alternatively you can set the margin to the fieldset element to:
margin: 0px 2px 0px 2px;
To match the div.
Related
I am making a form and input where, when I click on the input the border of the form changes it's color and what I want to happen is that when I click anywhere else it goes back to it's original color.
-HTML
<form action="">
<input onclick="onClick()" type="email" placeholder="Your E-mail Address">
<button>Get Started</button>
</form>
-CSS
form {
display: flex;
flex-direction: row;
border: 2px solid rgb(226, 226, 226);
border-radius: 30px;
padding: 8px 8px;
width: 78%;
transition: all 300ms ease;
}
.on-click form {
border: 2px solid #6415ff;
}
-JS
function onClick() {
document.body.classList += " on-click"
}
I tried making this one but I can't put it on the whole document
function offClick() {
document.body.classList.remove('on-click')
}
When I click on the input the form changes it's color but I can't wrap my head on how to get it off. Any advice or solutions please
You actually don't need JavaScript to solve this at all, you could use :focus-within pseudo-class, like this:
form {
display: flex;
flex-direction: row;
border: 2px solid rgb(226, 226, 226);
border-radius: 30px;
padding: 8px 8px;
width: 78%;
transition: all 300ms ease;
}
form:focus-within {
border: 2px solid #6415ff;
}
More about :focus-within here.
you should use the CSS selector :focus on your input style like that:
form {
display: flex;
flex-direction: row;
border: 2px solid rgb(226, 226, 226);
border-radius: 30px;
padding: 8px 8px;
width: 78%;
transition: all 300ms ease;
}
form:focus {
border: 2px solid #6415ff;
}
So it basically checks when you clicked on the input and that you're ready to write on it, which means your focus on the input. So the CSS detect that and changes the style.
Hope it helped, if you want more information see this documentation
I have three divs as below:
Here is a JSFiddle.
$(document).on('click', '.top', function (e) {
console.log("Empty space clicked");
});
.top{
width: 208px;
text-transform: uppercase;
text-align: left;
height: 34px;
background-color: #F44336;
border-bottom: 1px solid #ea1c0d;
color: #ffffff;
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.1);
padding: 3px 8px;
cursor: auto;
}
.inner_1{
font-size: 12px;
}
.inner_2{
font-size: 11px;
text-transform: none;
line-height: 12px;
margin-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.inner_1:hover, .inner_2:hover {
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="top">
<div class="inner_1">Top content: This is full width</div>
<div class="inner_2">Bottom</div>
</div>
As you can see from the jsfiddle, when the .top is clicked, it shows a log.
However, I want to make it so that it shows the log ONLY when the empty space is clicked and not when inner_1 or inner_2 div class is clicked (as it shows the log when these two classes are clicked as of now).
What is the best way to achieve this?
Thanks.
Use stopPropagation from jquery. This will stop all child divs from triggering parent onClick
$(document).on('click', '.top > div', function (e) {
e.stopPropagation();
});
Edit:
Code above was building on what OP knows but this way is more efficient for the browser.
$('.top > div').on('click', function (e) {
e.stopPropagation();
});
could you please tell me how to remove margin from drop down as shown in image . I need to display
dropdown down as shown in image .But there is some margin coming from some where .How to make dropdown same as shown in image
here is my code
http://codepen.io/anon/pen/BoNwqa
/* Styles here */
.dropdown_border{
border: 1px solid #e4e5e7;
height: 35px;
text-align:center;
color:blue;
}
.dropdown_padding {
padding: 2em 3.5em 0em 3.5em;
}
.dropdown_image_class {
height: 35px;
width: 35px;
margin-top: -6px;
border: 1px solid #e4e5e7;
float: right;
}
Use the following CSS property:
.dropdown_border {
padding: 5px 0 !important;
}
EDIT
As Praveen suggested, Use this instead:
.col.dropdown_border {
padding: 5px 0;
}
The .col has a padding of 5px. Instead of targetting all the .col, give this:
.col.dropdown_border {
padding: 5px 0;
}
So that it affects only the .dropdown_border class. This way, the .col with the class .dropdown_border has padding both at top and bottom and not on the sides.
Hope this helps.
.col.dropdown_border {
padding: 5px 0;
border-right: 0px;
}
By the way, the dropdown image already got border left and right.
I have a form where i have fieldsets, in 1 fieldset i have a table. This table will be in the fieldset in chrome and IE but not in Firefox. Please have a look:
https://jsfiddle.net/79504g5b/1/
my fieldset has this CSS:
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*----------------------->2*/ position: absolute;
}
I don't know what is the problem.
The element .statusHead1 does not occupy the available width. So, table is added next to it, in the available space.
To move table on it's own line, use clear: both on the table.
table {
clear: both;
}
See Demo.
Optionally, you can also set the float: left to the table.
Demo
I'll recommend you to use clear: both. Using this, you don't have to change your other elements structure/view.
Remove float:left form .statusHead1 class
Check this link https://jsfiddle.net/g0t1rwyw/
.statusHead1{
/*float:left;*/
width: 600px;
font-weight:bold;
border-bottom:1px solid #bfcfdf;
}
I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)