We Keep Coding

Selected div highlight in Html Page

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;
}

how to trigger an event for an element when some other element is clicked in jQuery?

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 :)

Menu doesn't stay open when trying to click

I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this?
Here is my Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
Here is the full code:
https://jsfiddle.net/lollz4/dh1kLh8L/
P.S. I'm new here so sorry if I'm doing anything wrong.

Add an additional wrapper around your menu and check for the hover state on that element instead:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>

div show in jQuery on button click

Have a left fixed pane in my page & a variable right pane which is composed of several changing divs.
I want on the button click on the left pane. The required right pane div show show & other divs should be hidden.
http://jsfiddle.net/shivang/guvr4/2/
This is what I've achieved so far. But its not working can anyone help me with this.
Html
<div id="container">
<!-- Left Layout div starts -->
<div id="left_layout">
<table>
<b></b>
<br><br>
<tr></tr><br>
<br></br>
<tr><button name="1">1</button></tr>
<br></br>
<tr><button name="2">2</button></tr>
<br></br>
<tr><button name="3">3</button></tr>
<br></br>
<tr><button name="4">4</button></tr>
<br></br>
<tr><button name="5">5</button></tr>
<br></br>
<tr><button name="6">6</button></tr>
<br></br>
<tr><button name="7">7</button></tr>
</table>
</div><!-- Left Layout Div ends -->
<div id="center_layout">
<div id="right_layout">Right Layout</div>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
</div><!-- Center Layout div ends -->
</div><!-- End of Container div -->
CSS
html, body {
background: #FFFFFF;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small for container min-width/height */
}
#container {
background: #FFFFFF;
min-height: 670px;
min-width: 600px;
position: absolute;
top: 50px; /* margins in pixels */
bottom: 50px; /* could also use a percent */
left: 50px;
right: 50px;
}
.pane {
display: none; /* will appear when layout inits */
}
#left_layout{
background: #FFFFFF;
position: absolute;
top: 30px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 20px;
/* right: 10px; */
min-height: 18px;
min-width: 250px;
/* box-shadow: 10px 10px 5px #888888;
border: 1px; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
#center_layout{}
#center_layout div{
display: none;
background: #F8F8F8;
position: absolute;
top: 30px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 287px;
right: 30px;
min-height: 18px;
min-width: 865px;
/* box-shadow: 10px 10px 5px #888888; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
JavaScript
$(document).on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).html();
$(target).show('slow');
});

Try:
$(document).on('click','button', function() {
$('#center_layout div').hide();
var target = '#' + $(this).text();
$(target).show('slow');
});
Updated fiddle here.

Maybe you should try this:
$('button').on('click', function() {
$('#center_layout div').hide();
$('#' + $(this).attr('name')).show('slow');
});
Fiddle: http://jsfiddle.net/guvr4/4/
BTW the id attribute should not be just a numeric value.

If you want to create an event with the buttons only, try this:
$('button').on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).html();
$(target).show('slow');
});
The updated fiddle is here, I hope this is what you are looking for.

I would put the reference ID in a data-show="" attribute on the button,
Here's button HTML
<tr><button name="3" data-show="3">3</button></tr>
Here's the js
$(document).on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).data('show');
$(target).show('slow');
});

make tooltip display on click and add a modal to it

strangely, I find it difficult to bind jquery's onclick event handler to this fiddle. I don't even know what I'm doing wrong. The html is as follows:-
<ul>
<li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
<li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
<li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>
<div style="display: none;">
<div id="data_tooltip_1">
data_tooltip_1: You can hover over and interacte with me
</div>
<div id="data_tooltip_2">
data_tooltip_2: You can hover over and interacte with me
</div>
<div id="data_tooltip_3">
data_tooltip_3: You can hover over and interacte with me
</div>
</div>​
styled this way:-
li {
padding: 20px 0px 0px 20px;
}​
with a jquery like this:-
$(document).ready(function() {
$('.tooltip[id^="tooltip_"]').each
(function(){
$(this).qtip({
content: $('#data_' + $(this).attr('id')),
show: {
},
hide: {
fixed: true,
delay: 180
}
});
});
});​
you check out the fiddle page I created:- http://jsfiddle.net/UyZnb/339/.
Again, how do I implement a jquery modal-like appearance to it so the tooltip becomes the focus?

Working Demo: using mouse over and out: http://jsfiddle.net/swxzp/ or using click http://jsfiddle.net/rjGeS/ ( I have written a small JQuery/ Css / Opacity demo)
Update: Working sample with trigger 1, 2 & 3: http://jsfiddle.net/HeJqg/
How it works:
It has 2 divs i.e. background which is used to make rest page become grey-ish like modal and second div large which will act as a placeholder for the toolTip so thta you can close and open it in any event you want even though the background is grey.
Rest feel free to play around with the code, hope it helps the cause :)
Code
$('.tooltip_display').click(function() {
var $this = $(this);
$("#background").css({
"opacity": "0.3"
}).fadeIn("slow");
$("#large").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show(500)
}).fadeIn("slow");
});
$('.note').on('click', function() {
$('.ttip').hide(500);
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function() {
$(this).fadeOut();
});​
CSS
.ttip {
position: absolute;
width: 350px;
height: 100px;
color: #fff;
padding: 20px;
-webkit-box-shadow: 0 1px 2px #303030;
-moz-box-shadow: 0 1px 2px #303030;
box-shadow: 0 1px 2px #303030;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
background-image:-moz-linear-gradient(top, #F45000, #FF8000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F45000', endColorstr='#FF8000', GradientType=0);
background-color:#000;
display: none
}
.contents {
font-size: 15px;
font-weight:bold
}
.note {
font-size: 13px;
text-align:center;
display:block;
width: 100%
}
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 0px;
z-index: 10;
min-height: 0px;
min-width: 0px;
color: #336699;
}​
HTML
<span class="tooltip_display">Trigger</span>
<div id="large">
<div class="ttip">
<div class="contents">Here goes contents...</div>
<span class="note">(click here to close the box)</span>
</div>
</div>
<div id="background"></div>​
Image of working demo: