I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>
Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>
I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.
My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help
I have different divs, I want to click on a div and expand its content, and if I click again it should hide that content, that is working fine, but I have different divs, and I want only one div expanded at the same time, how should I reach this?
This it's not good, do you see at this time I can have several divs expanded, how can I make sure that this won't happen?:
This is what I want to reach:
JQuery function, how can I collapse any other expanded div when I click in a new one?:
$(".contact_item .head").click(function () {
if ($(this).parent('div').hasClass('expanded')) {
$(this).next('div').slideUp();
$(this).parent('div').removeClass('expanded');
} else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
Html code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"> </div>
<div class="col-lg-9 col-md-9 col-sm-9 white">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style>
<div class="title">Contact us</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One Embarcadero Center Suite 500, San Fransisco, 94111, CA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(415) 639-3001
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(727) 578-2800
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(0207) 101-9395
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
123 Fake st , Springfield, 12345, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
555
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
4449 Easton Way 2nd Floor, Columbus, 43219, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(614)526-8754
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One International Plaza Suite 550, Philadelphia, 19113, PA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(215) 279-5845
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
950 Echo Lane Suite 200, Houston, 77024, TX
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(832) 586-0301
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(253)271-9692
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
UPDATE: This is the CSS
.contact_item {
width: 100%;
border: 1px solid #f1e7e0;
background-color: #fcf6f5;
margin: 3px 0px;
float: left;
&.expanded {
.head .name {
color: #f60;
}
.head .name span {
border-color: #f60;
color: #f60;
&.plus {
display: none;
}
&.minus {
display: block;
}
}
}
.head {
.name {
font-family: "Tahoma";
color: rgb(100, 100, 100);
font-size: 11.1px;
text-transform: uppercase;
padding: 7px 15px;
cursor: pointer;
position: relative;
span {
position: absolute;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #706f6f;
text-align: center;
right: 15px;
top: 7px;
font-size: 18px;
line-height: 17px;
&.minus {
display: none;
}
}
}
}
}
I've changed a little bit my JQuery function and now it allows just one div expanded, but I have to click twice to expand a div, the first time it closes any other expanded div but doesn't open the one that I clicked on, and the second time then is opened:
$(".contact_item .head").click(function () {
if ($(".contact_item .head").parent('div').hasClass('expanded')) {
$(".contact_item .head").next('div').slideUp();
$(".contact_item .head").parent('div').removeClass('expanded');
} else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
I tried to implement your requirement:
https://jsfiddle.net/pje7Lznf/
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"> </div>
<div class="col-lg-9 col-md-9 col-sm-9 white">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style>
<div class="title">Contact us</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One Embarcadero Center Suite 500, San Fransisco, 94111, CA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(415) 639-3001
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(727) 578-2800
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(0207) 101-9395
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
123 Fake st , Springfield, 12345, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
555
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
4449 Easton Way 2nd Floor, Columbus, 43219, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(614)526-8754
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One International Plaza Suite 550, Philadelphia, 19113, PA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(215) 279-5845
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
950 Echo Lane Suite 200, Houston, 77024, TX
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(832) 586-0301
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(253)271-9692
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
$(".contact_item .head").click(function () {
if ($(this).parent('div').hasClass('expanded')) {
$(this).next('div').slideUp();
$(this).parent('div').removeClass('expanded');
$(".info").each(function(i , obj){
console.log($(obj))
$(obj).removeClass('expanded');
$(obj).slideUp();
})
} else {
$(".info").each(function(i , obj){
console.log($(obj))
$(obj).removeClass('expanded');
$(obj).slideUp();
})
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
.contact_item{
background-color: #bdc3c7;
color: white;
margin-bottom: 10px
}
I put together a fiddle with a simple CSS-based solution that allows the jQuery code to be boiled down to something like this:
$('.contact_item').on('click', '.head', function () {
var clicked = $(this).closest('.contact_item');
$('.contact_item.expanded').add(clicked).toggleClass('expanded');
});
The solution does away with animations, but it's how I've been handling a lot of these types of situations and it is super clean comparatively. It should be a fairly simple exercise from here to add the animations back in if necessary, but consider this solution as a nice alternative:
Fiddle w/ solution
Those were nice suggestions but didn't work completely, finally this is what I did with my function and now it works:
$(".contact_item .head").click(function () {
var flag = $(this).parent('div').hasClass('expanded');
if ($(".contact_item .head").parent('div').hasClass('expanded')) {
$(".contact_item .head").next('div').slideUp();
$(".contact_item .head").parent('div').removeClass('expanded');
if (flag==false) {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
}
else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
I am trying to expand menu What We Do Let's Meet.
The problem:div is below the navigation bar and acts like a large menu with 100% width. I made it working on codepen somehow but found solution to be naive. How can i have robust menu design where i can automatically get onclick toggle over every li element inside the ul with div class as target.
Secondary, i can't manage to change the background-color li element on click.
$( ".sub-menu1" ).click(function() {
$( ".sub-menu-list" ).toggle();
$( ".sub-menu-list1" ).hide();
});
$( ".sub-menu2" ).click(function() {
$( ".sub-menu-list1" ).toggle();
$( ".sub-menu-list" ).hide();
});
header.header {
color: #111;
background: rgba(255,255,255,1);
width: 100%;
displaY: flex;
justify-content: space-between;
font-weight:600;
}
header .header-item {
align-self: center;
}
header .header-items {
display:inline-block;
padding:0 3rem 0 0;
}
header li.header-items:last-child {
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header-item">
<li class='header-items'>Hi!</li>
<li class='header-items'><a class="sub-menu1" href="#" > What We Do</a></li>
<li class='header-items'><a class="sub-menu2" href="#">Let's Meet</a></li>
</nav>
</header>
<section class="sub-menu-list" onfocusout="closed()">
<div str-row>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>1</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>2</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>3</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>4</p>
</a>
</div>
</div>
<form class="ci_form" action='' method='post'>
<div str-row>
<div str-xs="12" str-sm="4" str-sm-offset="2">
<input type="text" placeholder="Enter Name" name="fname">
</div>
<div str-xs="12" str-sm="4">
<input type="tel" placeholder="Contact Number" name="phone">
</div>
</div>
<section str-row>
<div str-sm="4" str-sm-offset="2" str-xs="12">
</div>
<div str-sm="4" str-xs="12">
<select id="fieldselector">
<option value="0">Select Reason to Contact</option>
</select>
</div>
</section>
<div str-row>
<div str-xs="12" str-sm="8" str-sm-offset="2">
<button class="button submission">Get Quote</button>
</div>
</div>
</form>
</section>
<section class="sub-menu-list1">
<div str-row>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>1</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>2</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>3</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>4</p>
</a>
</div>
</div>
</section>
The code snippet is not looking accurate but can help to some extent. Codepen demo looks far better. link given above.
I have Implemented richtext editor like this.
Problem 1. If i remove images and put simple div, it does not works. The function for
formatting is called, no error comes. But there is no output also. I tried this for div and span.
Problem 2. In IE 10, to format element I have to select previous element. Though it works well in firefox.
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
var txtEditor;
var viewHtml = 1;
function initDoc() {
txtEditor = $('#textBox')[0];
}
$(window).load(initDoc);
function formatDoc(sCmd, sValue) {
//if (validateMode()) { document.execCommand(sCmd, false, sValue);
$(txtEditor).focus(); }
document.execCommand(sCmd, false, sValue); $(txtEditor).focus();
}
function validateMode() {
if (viewHtml==1) { return true; }
alert("Uncheck \"Show HTML\".");
$(txtEditor).focus();
return false;
}
</script>
<style type="text/css">
#textBox {
margin-left: 10px;
width: 650px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox , #sourceText {
padding: 0;
margin: 0;
max-width: 650px;
min-height: 200px;
}
#editMode label {
cursor: pointer;
}
.attributesStyle {
margin-left: 0px;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.link {
width: 16px;
height: 17px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.marginLeft10 {
margin-left: 10px;
}
.clearBoth {
clear: both;
}
a:hover {
cursor: pointer;
}
</style>
<body >
<form >
<input type="hidden" name="myDoc">
<div style="margin-bottom:10px;">
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('formatBlock', '<h1>');">
<div id="h1" class="attributesStyle">
<img class="link" title="H1" src="~/Images/Heading1.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h2>');">
<div id="h2" class="attributesStyle">
<img class="link" title="H2" src="~/Images/Heading2.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h3>');">
<div id="h3" class="attributesStyle">
<img class="link" title="H3" src="~/Images/Heading3.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h4>');">
<div id="h4" class="attributesStyle">
<img class="link" title="H4" src="~/Images/Heading4.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h5>');">
<div id="h5" class="attributesStyle">
<img class="link" title="H5" src="~/Images/Heading5.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h6>');">
<div id="h6" class="attributesStyle">
<img class="link" title="H6" src="~/Images/Heading6.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<p>');">
<div id="divParagraph" class="attributesStyle">
<img class="link" title="Paragraph" src="~/Images/paragraph.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<pre>');">
<div id="divParagraph" class="attributesStyle">
Pre
</div>
</a>
<a onclick="formatDoc('formatblock', '<blockquote>');">
<div class="attributesStyle">
<img class="link" title="Quote" src="~/Content/themes/base/images /quote_1.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('bold');">
<div id="bolds" class="attributesStyle" title="Bold">
<img class="link" title="Bold" src="~/Images/text_bold.png" />
</div>
</a>
<a onclick="formatDoc('italic');">
<div id="italic" class="attributesStyle" title="Italic">
<img class="link" title="Italic" src="~/Images/text_italic.png" />
</div>
</a>
<a onclick="formatDoc('underline');">
<div class="attributesStyle" title="Underline">
<img class="link" title="Underline" src="~/Images/text_underline.png" />
</div>
</a>
<a onclick="formatDoc('insertorderedlist');">
<div class="attributesStyle">
<img class="link" title="Order List" src="~/Content/themes/base/images/list_numbered_32.png" />
</div>
</a>
<a onclick="formatDoc('insertunorderedlist');">
<div class="attributesStyle">
<img class="link" title="Bullets List" src="~/Content/themes/base/images/text_list_bullets.png" />
</div>
</a>
<a onclick="formatDoc('undo');">
<div class="attributesStyle" title="undo">
<img class="link" src="~/Content/themes/base/images/rotateLeft.png" />
</div>
</a>
<a onclick="formatDoc('redo');">
<div class="attributesStyle" title="redo">
<img class="link" src="~/Content/themes/base/images/rotateRight.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('justifyleft');">
<div class="attributesStyle" title="Justify left">
<img id="justifyleft" class="link" title="Justify Left" src="~/Content/themes/base/images/text_align_left.png" />
</div>
</a>
<a onclick="formatDoc('justifycenter');">
<div class="attributesStyle" title="Justify Center">
<img id="justifycenter" class="link" title="Justify Center" src="~/Content/themes/base/images/text_align_center.png" />
</div>
</a>
<a onclick="formatDoc('justifyright');">
<div class="attributesStyle" title="Justify Right">
<img id="justifyright" class="link" title="Justify Right" src="~/Content/themes/base/images/text_align_right.png" />
</div>
</a>
</div>
<a id="divToggleHtml" >
<div class="attributesStyle" title="Toggle Html">
Toggle HTML
</div>
</a>
<div class="floatLeft marginLeft10">
<a onclick="javascript: var sLnk = prompt('Write the URL here', 'http:\/\/'); if (sLnk && sLnk != '' && sLnk != 'http://') { formatDoc('CreateLink', sLnk); }">
<div class="attributesStyle" title="Add Link">
<img class="link" src="~/Content/themes/base/images/link.png" />
</div>
</a>
<a onclick="formatDoc('InsertImage', true);">
<div class="attributesStyle" title="Add Image">
<img class="link" src="~/Content/themes/base/images/image.png" />
</div>
</a>
<a onclick="formatDoc('Unlink');">
<div class="attributesStyle" title="Unlink">
<img class="link" src="~/Content/themes/base/images/brokenLink.png" />
</div>
</a>
</div>
<div class="clearBoth">
</div>
</div>
<div id="textBox" contenteditable="true"><i>Amit Sinha</i></div>
<p style="display:none;" id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" style="display:none;" /></p>
</form>
</body>
i can provide a solution to the first problem.
didn't work for me either as long as i had text in there. problem seemed to be some kind of "select text instead of respond to the click"
add these css-settings for your button-divs:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
this should make your controls respond to clicking.
unfortunately, i can't test your 2nd problem as i'm working on linux ;)