div show in jQuery on button click - javascript

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

Related

Enable only one masonry tile open at a time

I have a masonry layout (using the library from here), that when a user clicks a tile, only one tile should be able to expand at a time. If the user clicks another tile, the previously opened tile should close. How can I check for any previously opened tiles, close them, and then open the newly selected tile?
// external js: masonry.pkgd.js
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid);
grid.addEventListener( 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !matchesSelector( event.target, '.grid-item' ) ) {
return;
}
// change size of item via class
event.target.classList.toggle('grid-item--gigante');
// trigger layout
msnry.layout();
});
.grid {
background: #eee;
width: 1200px;
margin: 0 auto;
}
.grid-holder {
background: #fff;
margin: 0 auto;
display: block;
}
.grid-item {
width: 375px;
height: 375px;
margin-bottom: 4%;
float: left;
border: 1px solid #ddd;
margin-right: 10px;
background-color: #eee;
box-shadow: 2px 2px 2px 2px #eee;
}
.grid-item--gigante {
max-width: 600px;
min-width: 100px;
width: 63%;
min-height: 375px;
height: auto;
margin-left: 8px;
background-color: rgba(215, 210, 203, 0.3) !important;
color: #666;
border: 1px solid #ddd;
padding: 0.5% 8% 2.5% 5%;
z-index: 2; /* above other items */
}
.grid-item:hover {
background: #a2c;
border-color: white;
cursor: pointer;
}
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
<div class="grid-holder">
<div class="grid-item">Jim</div>
<div class="grid-item">Joe</div>
<div class="grid-item">John</div>
<div class="grid-item">James</div>
<div class="grid-item">Jack</div>
<div class="grid-item">Joseph</div>
</div>
</div>
You need to keep a reference to previously enlarged grid item.
Whenever the click event occurs, check if current event target is equal to previously enlarged grid item or not. If it is not, remove .grid-item--gigante class from previously enlarged grid item and update the reference to previously enlarged grid item to now point to event.target.
P.S. removed some CSS to make the example code snippet easy to understand.
var grid = document.querySelector('.grid');
var msnry = new Masonry(grid);
var previouslyEnlarged;
grid.addEventListener('click', function(event) {
if ( !matchesSelector( event.target, '.grid-item' ) ) {
return;
}
if (previouslyEnlarged == event.target) {
return;
} else if (previouslyEnlarged) {
previouslyEnlarged.classList.remove('grid-item--gigante');
}
previouslyEnlarged = event.target;
event.target.classList.toggle('grid-item--gigante');
msnry.layout();
});
.grid-holder {
background: #fff;
margin: 0 auto;
display: block;
}
.grid-item {
width: 50px;
height: 50px;
margin-bottom: 4%;
float: left;
border: 1px solid #ddd;
margin-right: 10px;
background-color: #eee;
box-shadow: 2px 2px 2px 2px #eee;
}
.grid-item--gigante {
width: 100px;
height: 100px;
margin-left: 8px;
background-color: rgba(215, 210, 203, 0.3) !important;
color: #666;
border: 1px solid #ddd;
padding: 0.5% 8% 2.5% 5%;
z-index: 2;
}
.grid-item:hover {
background: #a2c;
border-color: white;
cursor: pointer;
}
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
<div class="grid-holder">
<div class="grid-item">Jim</div>
<div class="grid-item">Joe</div>
<div class="grid-item">John</div>
<div class="grid-item">James</div>
<div class="grid-item">Jack</div>
<div class="grid-item">Joseph</div>
</div>
</div>

jQuery - one trigger 2 buttons with different outcome

I have the following situation see this fiddle: https://jsfiddle.net/rmt70fjw/
In this example there are 2 buttons where only one of them (register-trigger) triggers a popup to open. The other button login-trigger doesn't do this. This situation together with the HTML is a given, and cannot be changed. Be aware that the popup generator is more complex, than just the click on hide example here.
What I am trying to do is that login-trigger opens as well the popup via the register-trigger button and hides the registration form and shows the login form. And for the register-trigger button the other way around. Currently they arrive in a loop because of the popup trigger.
How do I do this? See fiddle with below jQuery attempt and problem.
jQuery
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is the current attempt
jQuery('.login-trigger, .register-trigger').click(function(e){
if(e.currentTarget == '.register-trigger'){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
} else {
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
jQuery('a.register-trigger').trigger('click');
}
});
You could just add the .register-trigger class to your login button aswell in that case. That will trigger all events of your plugin on the login button click. If you then need some special logic like hiding the register form add some Event handler for your login-trigger
$('.login-trigger').addClass('register-trigger');
// PLUGIN CODE START
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// PLUGIN CODE END
jQuery('.register-trigger').click(function(){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
jQuery('.login-trigger').click(function(e){
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
body { background-color: #ddd; }
p { width: 100%; }
.popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
margin: 0 20%;
width: auto;
height: 66%;
background-color: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.hide { display: none; }
form {
margin: 0.5rem;
display: inline-flex;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
width: 300px;
height: 300px;
text-align: center;
}
#close {
position: absolute;
top: 0;
left: -1.75rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
background-color: white;
padding: 0.5rem;
transition: 0.3s all;
}
.btn-wrapper {
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
}
a {
width: 200px;
margin: 0 1rem;
line-height: 1.4;
text-align: center;
font-size: 1.2rem;
padding: 0.5rem;
background-color: #eee;
color: #333;
border-radius: 0.5rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
transition: 0.3s all;
}
a:hover, #close:hover {
background-color: #fff;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="popup hide">
<form class="login-form">
<p style="padding:1rem 3rem;text-align:center;">This is the login form</p>
</form>
<form class="register-form">
<p style="padding:1rem 3rem;text-align:center;">This is the registration form</p>
</form>
<div id="close">X</div>
</div>
<div class="btn-wrapper">
<a class="register-trigger">Register</a>
<a class="login-trigger">Log In</a>
</div>
</body>
Here is the code of jQuery which will work for you!
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
jQuery('.login-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
jQuery('.register-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
Ok, if i understood correctly, it should work like this. Alert should pop up with both buttons.
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
$('.login-trigger, .register-trigger').click(function(e){
$('.popup').removeClass('hide');
if(e.currentTarget == $('.register-trigger').get(0)){
alert("test");
$('.popup .register-form').removeClass('hide');
$('.popup .login-form').addClass('hide');
}
else
{
$(".register-trigger").trigger('click');
$('.popup .login-form').removeClass('hide');
$('.popup .register-form').addClass('hide');
}
});

js to determine responsive element width

I am new to js and have hit a brick wall with altering how I calculate an element width depending on the screen size. I started with only calculating the width by how many of the list items were set to "plan-visible". It works great on a laptop screen, but doesn't break at css media query widths when the screen is smaller. I then had the brilliant idea (haha) of attempting to this directly in the javascript with an if/else statement, which I have little experience with. The result was that it did absolutely nothing. I researched and researched and it looks (to me) like it should work, but I am obviously missing something. I have included the html, the original js that worked for a static element, and then my failed attempt at making it responsive. Thanks!
html:
<div id="product-table" class="clear">
<div class="plan-visible">
<h3>BALANCE<em>aap</em><img class="image aap" src="http://localhost:1400/images/baap.png"></h3>
<a class="sbutton aap" href="">Go to AAP</a>
<ul>
<li>Point and click your way through the preparation of your organization’s Affirmative Action plan.<br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>trak</em><img class="image trak" src="http://localhost:1400/images/btrak.png"></h3>
<a class="sbutton trak" href="">Learn More</a>
<ul>
<li>Manage your organization’s hiring process from start to finish.<br> <br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>hub</em><img class="image hub" src="http://localhost:1400/images/bhub.png"></h3>
<a class="sbutton hub" href="">Go to HUB</a>
<ul>
<li>Access a centralized compliance information center to view, publish, and share information from your BALANCEworks applications.</li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>pay</em><img class="image pay" src="http://localhost:1400/images/bpay.png"></h3>
<a class="sbutton" href="">Go to PAY</a>
<ul>
<li>Conduct detailed compensation analyses, identify potential pay discrimination, and design a compliant pay structure</li>
</ul>
</div>
</div>
original js:
$(document).ready(function() {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
});
new, broken js:
$(document).ready(function() {
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
$('#product-table').css('446', width);
} else {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
}
});
css:
#product-table {
margin: 100px auto;
text-align: center;
.plan-visible {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
float: left;
position: relative;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px;
border-radius: 5px ; }
.plan-visible:nth-child(1) {width: 180px;}
.plan-visible:nth-child(2) {width: 180px;}
.plan-visible:nth-child(3) {width: 180px;}
.plan-visible:nth-child(4) {width: 180px;}
.plan-hidden {display: none;}
}
/* --------------- */
#product-table h3 {
font-size: 20px;
color: $mainBlue;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: $lightGrey;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* product image settings */
#product-table .plan-visible .image {
display: block;
height: 100px;
width: 100px;
margin: 15px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#product-table .plan-visible .image.aap {
border: 3px solid $aap;
}
#product-table .plan-visible .image.trak {
border: 3px solid $trak;
}
#product-table .plan-visible .image.hub {
border: 3px solid $hub;
}
#product-table .plan-visible .image.pay {
border: 3px solid $pay;
}
/* --------------- */
#product-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#product-table li {
border-top: 1px solid $lightGrey;
padding: 20px 0 10px 0;
}
/* --------------- */
/* product table specific buttons */
.sbutton {
position: relative;
font-family: 'Roboto', Arial, sans-serif;
padding: 8px 20px;
margin: 20px 0 0 0;
display: inline-block;
background-color: $mainBlue;
color: white;
border-radius: 4px;
border: 1px solid $mainBlue;
text-align: center;
text-decoration: none;
font-size: 14px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.sbutton:hover {
background-color: #94ae3c;
color: #fff;
border: 1px solid #94ae3c;
text-decoration: none;
}
.sbutton.aap:hover {
background-color: #6f2784;
border: 1px solid #6f2784;
}
.sbutton.trak:hover {
background-color: #5c89b4;
border: 1px solid #5c89b4;
}
.sbutton.hub:hover {
background-color: #b58f2e;
border: 1px solid #b58f2e;
}
.sbutton.pay:hover {
background-color: #94ae3c;
border: 1px solid #94ae3c;
}

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:

Open a div on click for each tooltip in Jquery

I am trying to get a tooltip for each portion on a location map. Using the code below, I am getting the tool tip for as many portions as I want. But the next step is to give a link in each tooltip and it should open another which has more information.
Please suggest if I can do something in my code. Note: It should not be involve manually adding divs, divs should just be added as my tooltips are added (using variables).
<style>
body {
text-align: center;
font: 13px Arial,Helvetica;
}
/* Relative positioning*/
#wrapper {
position: relative;
margin: 10px auto 20px auto;
border: 1px solid #fafafa;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
/* Hide the original tooltips contents */
.pin {
display: none;
}
/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
position: absolute;
background:url(mapimg.png);
width: 26px;
height: 15px;
}
.tooltip-down {
background-position: 0 -52px;
}
.tooltip {
display: none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
box-shadow: 0 3px 0 rgba(0,0,0,.7);
background: #fff1d3;
background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
background: -o-linear-gradient(top, #fff1d3, #ffdb90);
background: linear-gradient(top, #fff1d3, #ffdb90);
}
.tooltip::after {
content: '';
position: absolute;
top: -10px;
left: 50%;/*
margin-left: -90px;
border-bottom: 10px solid #fff1d3;
border-left: 10px solid transparent;
border-right :10px solid transparent;*/
}
.tooltip-down .tooltip {
bottom: 12px;
top: auto;
}
.tooltip-down .tooltip::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #ffdb90;
}
.tooltip h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
}
.tooltip ul {
margin: 0;
padding: 0;
list-style: none;
}
#pop1, #pop2 {
display:none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff1d3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function(){
// set the wrapper width and height to match the img size
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
//tooltip direction
var tooltipDirection;
for (i=0; i<$(".pin").length; i++)
{
// set tooltip direction type - up or down
if ($(".pin").eq(i).hasClass('pin-down')) {
tooltipDirection = 'tooltip-down';
}
else {
tooltipDirection = 'tooltip-up';
}
// append the tooltip
$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
</div>");
}
// show/hide the tooltip
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
});
</script>
<div id="wrapper">
<img width="920" height="450" src="image.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="280" data-ypos="110">
tooltip 1 <br>
<b>Area:</b> 24 sft<br>
<b>block:</b> 2 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="135">
<b>Area 2</b><br/>
Area: 17 sft<br/>
Population: 382,000,000
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="158">
<b>Area 3</b><br/>
Area: 10<br/>
<b>Population:</b> 731,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="180">
<strong>Area 4</strong><br/>
Area: 30<br/>
Population: 1,022,011,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="206">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="750" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="850" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
</div>
This will add a div after an anchor once the anchor is clicked, if the anchor is clicked again the div will be removed:
$('a').click(function()
{
var currTag = $(this);
if (currTag.next('div').attr('name'))
{
currTag.next('div').remove();
}
else
{
currTag.after("<div name='details'>Here's more information</div>");
}
});

Categories