When i click Test 1,Test 2 or Test 3, clicked div will highlight from other two divs. I want to do is, when div get highlight, other areas of the page must dark ( opacity reduce) Then clicked div only highlight from full page.
Anyone help me to get this done please..
Working sample here
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
});
});
.container {
width: 400px;
margin: 0 auto;
}
.section {
height: 50px;
margin: 10px;
background-color: red;
color: white;
box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
border: 1px solid rgba(0, 0, 0, 0);
opacity: .3;
}
.section2 {
height: 50px;
background-color: green;
color: white;
margin: 10px;
opacity: 1 !important;
box-shadow: 3px 3px 15px #666;
border: 1px solid #7d7d7d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>This is header of the sample </header>
<br/>
<div class="div-list">
<div class="section">
<h2>Test 1</h2>
</div>
<div class="section">
<h2>Test 2</h2>
</div>
<div class="section">
<h2>Test 3</h2>
</div>
</div>
<br/>
<footer>
<h3>This is footer of the sample </h3>
</footer>
</div>
When one of your elements is clicked you can just set black background on he whole container or page with the correct opacity.
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
$(".container").css({"background-color": "rgba(0,0,0,0.7)"});
});
});
Updated JsFiddle: https://jsfiddle.net/g1jqyk8x/5/
UPDATE If you want to get the highlight to disappear you have to write a function that checks if you have clicked on the body but outside of your items.
$("body").click(function(e) {
if (e.target.class == "div-list" || $(e.target).parents(".div-list").size())
{
//This triggers if you click on them
}
else
{
//This triggers if you click outside of them
$(".container").css({"background-color": "rgba(0,0,0,0)"});
$('.section2').removeClass('section2');
}
});
JsFiddle: https://jsfiddle.net/g1jqyk8x/6/
I've updated your fiddle. Please check it out.
What you need to is to add a condition that checks '.section' class if has a class '.section2'.
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
if ( $('.section').hasClass('section2') ) {
$('body').addClass('darkBg');
$('.section2').removeClass('section2');
$(this).addClass('section2');
console.log('aaa');
} else {
$('body').removeClass('darkBg');
}
});
});
If you only want to decrease the opacity of the other items, you could just select all of those, that have no .section2 class and add a .darken class instead.
$(function() {
$( '.section' ).click(function() {
$( '.section2' ).removeClass( 'section2 darken' );
$( this ).addClass( 'section2' );
$( '.section:not( .section2 )' ).addClass( 'darken' );
});
});
.container {
width: 400px;
margin: 0 auto;
}
.section {
height: 50px;
margin: 10px;
background-color: red;
color: white;
box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
border: 1px solid rgba(0, 0, 0, 0);
opacity: .3;
transition: opacity .5s, background-color .25s;
}
.section2 {
height: 50px;
background-color: green;
color: white;
margin: 10px;
opacity: 1 !important;
box-shadow: 3px 3px 15px #666;
border: 1px solid #7d7d7d;
}
.darken {
opacity: 0.1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>This is header of the sample </header>
<br/>
<div class="div-list">
<div class="section">
<h2>Test 1</h2>
</div>
<div class="section">
<h2>Test 2</h2>
</div>
<div class="section">
<h2>Test 3</h2>
</div>
</div>
<br/>
<footer>
<h3>This is footer of the sample </h3>
</footer>
</div>
Manipulate opacity and Z index of html tag and z-index (higher) of said element that you highlight.
And here is the only code I edited compared to yours:
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
$("html").css({"z-index" : "200", "opacity": "0.7","background": "black"});
});
});
.section2 {
height: 50px;
background-color: green;
color: white;
margin:10px;
opacity: 1 !important;
box-shadow: 3px 3px 15px #666;
border: 1px solid #7d7d7d;
z-index: 201;
}
Related
here is my code: https://jsfiddle.net/2vvLe0ko/2/
I want to hide div with class droppointercontainer when the user clicks any other region except click me! div. and show the droppointercontainer div when the user clicks the click me! div.
how to do that with jQuery?
html:
<body>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
</body>
css:
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
javascript:
$("#click1").on("click", function(){
$(this).children("#droppointercontainer1").fadeIn(200);
});
$("#click2").on("click", function(){
$(this).children("#droppointercontainer2").fadeIn(200);
});
You need to call a function that does the job for all clicks...
Edited and added a working proof link.
$("#click1").on("click", function(){
showMe(this);
});
$("#click2").on("click", function(){
showMe(this);
});
$(document).on('click', function(__e){
if(!$(__e.target).hasClass('click')){
$('.droppointercontainer').fadeOut(200);
}
});
function showMe(__obj){
$('.droppointercontainer').each(function(__idx, __el){
if($(__el)[0] !== $(__obj).children('.droppointercontainer:first')[0]){
if($(__el).css('opacity') > 0){
$(__el).fadeOut(200);
}
}
});
$(__obj).children('.droppointercontainer:first').fadeIn(200);
}
Proof
https://jsfiddle.net/2vvLe0ko/7/
Something like this should work
$(document).click(function(e) {
if (!$(e.target).is("#click1") && !$(e.target).is("#click2")) {
if ($('#click1').is(':visible') || $('#click2').is(':visible')) {
$(".droppointercontainer").hide();
}
}
You need to toggle them. For that you can use a variable for each:
var drop1,drop2=false;
$("#click1").on("click", function(){
drop1 ? $(this).children("#droppointercontainer1").fadeOut(200) :
$(this).children("#droppointercontainer1").fadeIn(200);
$("#droppointercontainer2").fadeOut(200);
drop1 = !drop1;
drop2=false;
});
$("#click2").on("click", function(){
drop2 ? $(this).children("#droppointercontainer2").fadeOut(200) :
$(this).children("#droppointercontainer2").fadeIn(200);
$("#droppointercontainer1").fadeOut(200);
drop1=false;
drop2 = !drop2;
});
Is this what you looking for?
$(document).click(function(event) {
$(".droppointercontainer").hide();
if($(event.target).is(".click")) {
$(event.target).find(".droppointercontainer").show();
}
})
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>
To keep things simple, I'd go for a transparent overlay. When you click the overlay, the dropdown disappears. See fiddle here: https://jsfiddle.net/d6yv60od/
$(".click").on("click", function(){
$('body').append('<div class="overlay"></div>');
$(this).children(".droppointercontainer").fadeIn();
});
$('body').on('click', '.overlay', function() {
$(this).remove();
$(".droppointercontainer").fadeOut();
});
One advantage of this solution is that, in its simplicity, the dropdown remains open when you click on an iten. Unless you tell him to close of course, but this is another story :)
I am trying to make a transition where a div set to "display:none" fades in and moves to the center of the page from either the left/right/top/bottom.
How can I get it to simultaneously fade in and animate({left: })?
My current code first fades it in and then animates it.
$("#button" ).click(function(){
$("#text").fadeIn(1000, function(){
$("#text" ).animate({ "left": "+=50%" }, "slow" )
})
})
Current JSFiddle
Use the notation like in my snippet below to animate both parameters at the same time. Note: I used opacity for the fading animation. (And use position: absolute for the animated element)
$(document).ready(function() {
$("#button").click(function() {
$("#text").animate({
left: '+=50%',
opacity: '1'
}, 1000);
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
font-size: 2vw;
position: absolute;
display: inline-block;
top: 60px;
opacity: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>
position of the div with id text should be absolute. Here is your code
$(document).ready(function() {
$("#button").click(function() {
$("#text").fadeIn(1000, function() {
$("#text").animate({
"left": "+=50%"
}, "slow")
})
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
fontsize: 2vw;
position: absolute;
display: inline-block;
top: 60px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>
I am trying to create a lightbox to show some custom data.
There are two problems I am facing which I do not know how to handle.
1. First problem is I don't want the page to scroll(vertically) when lightbox is visible.
2. Second problem is I want the lightbox to scroll if the content is bigger than the viewport of the browser.
But I am not sure how to approach this. I tried overflow-x:scroll; overflow-y:scroll; but it shows the scrollbar but doesn't scroll.
Following is the code I currently have :
Html:
<div class="lightbox">
<section class="image-app">
<div class="app-bar">
<div class="app-close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
<div class="container_fluid">
<div class="row">
<div class="col-md-8">
<div class="app-image">
</div>
</div>
<div class="col-md-4">
<div class="side-bar">
</div>
</div>
</div>
</div>
</section>
</div>
CSS:
.lightbox {
display: none;
position: fixed;
background: rgba( 0, 0, 0, 0.7 );
bottom: 0;
right: 0;
top: 0;
left: 0;
z-index: 1000;
}
.image-app {
display: none;
position: relative;
background: #fafafa;
top: 3%;
left: 3%;
width: 94%;
min-height: 94%;
overflow-x:scroll;
overflow-y:scroll;
border: #8e8e8e;
z-index: 1001;
padding: 10px;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
}
.app-close {
padding: 10px 10px;
text-align: right;
font-size: 150%;
cursor: pointer;
}
.app-image {
text-align: center;
background: #ffffff;
}
.side-bar {
position: relative;
height: 100%;
width: 100%;
}
Javascript :
$ ( '.item' ).click( function ( event ) {
event.preventDefault ( );
event.stopPropagation ( );
$( '.lightbox' ).show ( );
$( '.image-app' ).slideToggle ( "fast" );
} );
if ($('.lightbox').css('display') != 'none') {
$('body').on({'mousewheel': function(e) {
e.preventDefault();
e.stopPropagation();
}
})
}
var div = $(".lightbox").height();
var win = $(window).height();
if (div > win ) {
$(".lightbox").css("overflow-x","scroll");
}
I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here
How to close all panel in the accordion when one of the panel opened? My panel Accordion is still open. The expectation is when i click the one of panel, other panel is automatically closed.
This is my HTML, CSS and JS
$(".acitemx h3").click(function() {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function() {
$(this).parent().toggleClass('current');
});
});
$('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block');
/* accordion editing */
.accx {
background: #FFF none repeat scroll 0% 0%;
padding: 15px;
display: none;
}
.acitemx {
margin-bottom: 10px;
box-shadow: 0px 0px 2px 0px rgb(189, 189, 189);
}
.acitemx h3 {
cursor: pointer;
background: #00ADEF none repeat scroll 0% 0% !important;
color: #FFF !important;
font-family: "roboto", sans-serif;
font-weight: bold;
padding: 8px 40px 8px 15px !important;
position: relative;
border-radius: 3px 3px 3px 3px;
}
/* end accordion editing */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
</div>
This the JSFiddle link http://jsfiddle.net/bupd32rq/3/
Thanks for your help :)
You can use the slideUp() function after finding other siblings accx element.
$(this).parent().siblings().find('.accx').slideUp();
Not related to answer:
$('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block'); Here addClass need not have . and there is no logic adding another class of same name as they already have the CSS properties set.
JSfiddle demo
Code snippet
$(".acitemx h3").click(function() {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function() {
$(this).parent().toggleClass('current');
});
$(this).parent().siblings().find('.accx').slideUp(); // Added code
});
$('.acitemx').eq(0).find('.accx').css('display', 'block');
/* accordion editing */
.accx {
background: #FFF none repeat scroll 0% 0%;
padding: 15px;
display: none;
}
.acitemx {
margin-bottom: 10px;
box-shadow: 0px 0px 2px 0px rgb(189, 189, 189);
}
.acitemx h3 {
cursor: pointer;
background: #00ADEF none repeat scroll 0% 0% !important;
color: #FFF !important;
font-family: "roboto", sans-serif;
font-weight: bold;
padding: 8px 40px 8px 15px !important;
position: relative;
border-radius: 3px 3px 3px 3px;
}
/* end accordion editing */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
</div>