I have the following button:
http://jsfiddle.net/TU6vQ/
and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so?
The spinner is here.
Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click.
This is the simple button I have:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
If you make the button relatively positioned, you can absolutely position the spinner inside of the button:
http://jsfiddle.net/TU6vQ/8/
HTML:
<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
<img src="http://www.gifstache.com/images/ajax_loader.gif" class='spinner'/>
Invite your friends
</button>
CSS:
.spinner {
position: absolute;
right: 5px;
top: 6px;
width: 25px;
height: 25px;
display: none;
}
JS:
$('button#inviteYourFriends').click(function() {$('.spinner').show();});
Put spinner inside of button, give it absolute positioning, and relative on the button. The button is a block level element, you don't need an additional div around it all.
I updated the jsfiddle here:
<div style='position:relative'>
<img src='http://www.gifstache.com/images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
</div>
The button tag can support img tags like almost any other element, and so all you need to do is put the image inside it; as simple as it sounds.
<button id="inviteYourFriends" class="arvo-bold button blue" >
<img src="http://www.gifstache.com/images/ajax_loader.gif" height=10> Invite your friends
</button>
On your button click just prepend your button contents with the image. Voila.
You can do this.
http://jsfiddle.net/YQNn4/
HTML
<img class="progress" src="http://www.gifstache.com/images/ajax_loader.gif" height="20px" width="20px" alt="">
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
JS
$(document).ready(function(){
$('.progress').hide();
$('#inviteYourFriends').click(function(){
$('.progress').show();
});
});
i would add the image inside the button element, then position and size it using css.
here is the jfiddle: http://jsfiddle.net/TU6vQ/9/
here's the code:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
<img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
</button>
CSS:
.button {
line-height: 52px;
font-size: 16px;
width: 270px;
height: 50px;
text-shadow: -1px -1px 1px rgba(175,175,175,.42);
text-transform: uppercase;
text-decoration: none;
text-align: center;
line-height: 38px;
color: #fefefe;
font-size: 14px;
display: block;
height: 38px;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}
.button.blue {
background: rgb(169,191,200);
background: -moz-linear-gradient(top, rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
background: -webkit-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -o-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -ms-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: linear-gradient(to bottom, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}
.spinner
{
margin-top:8px;
margin-left:5px;
height:20px;
width:20px;
position:absolute;
}
Related
I am trying to add an anchor tag with specific attributes to an empty div in order to create a twitter button that will tweet out some custom text. The twitter button works if I add the anchor tag manually to the html. However, I cannot figure out how to add the anchor tag using JavaScript. I have tried creating a function that I would like to run when the page loads.
I am still in the early stages of learning so please excuse any obvious mistakes. I would greatly appreciate any help. I am using vanilla JavaScript (have not learnt jQuery yet).
Link to the CodePen is below:
Twitter Button: Codepen
HTML:
<div class="custom-tweet-button">
<!--I am trying to add the anchor tag below to the existing div when the generateTweetButton FUNCTION RUNS (i.e. when the page is loaded).
<a href="https://twitter.com/intent/tweet?text=This is some custom text"
target="_blank" alt ="Tweet this pen">
<i class="btn-icon"></i>
<span class="btn-text">Tweet</span>
</a>
-->
</div>
CSS:
.custom-tweet-button {
width: 200px;
margin: 1em auto 2em;
}
.custom-tweet-button a {
position: relative;
display: inline-block;
height: 16px;
padding: 2px;
border: 1px solid #ccc;
font-size: 11px;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-weight: bold;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left
bottom,from(#FFF),to(#DEDEDE));
background-image: -moz-linear-gradient(top,#FFF,#DEDEDE);
background-image: -o-linear-gradient(top,#FFF,#DEDEDE);
background-image: -ms-linear-gradient(top,#FFF,#DEDEDE);
border: #CCC solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
}
.custom-tweet-button a:hover {
border-color: #BBB;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left
bottom,from(#F8F8F8),to(#D9D9D9));
background-image: -moz-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -o-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -ms-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: linear-gradient(top,#F8F8F8,#D9D9D9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.custom-tweet-button a .btn-icon {
position: absolute;
width: 16px;
height: 13px;
top: 50%;
left: 3px;
margin-top: -6px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no-
repeat;
background-size: 13px;
}
.custom-tweet-button a .btn-text {
display: inline-block;
padding: 2px 3px 0 20px;
}
JAVASCRIPT:
var customText = "This is some custom text";
function generateTweetButton(text) {
var tweetButton = document.getElementsByClassName("custom-tweet-button"); //grab the existing div
var anchor = document.createElement('a'); // create anchor element
anchor.setAttribute("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text)); //set the href url to include custom text
anchor.setAttribute("target", "_blank"); //add the target attribute
anchor.setAttribute("alt", "Tweet this pen"); //add the alt attribute
var iTag = document.createElement('i'); //create <i> tag
iTag.setAttribute("class", "btn-icon"); //give class "btn-icon" to <i> tag
var span = document.createElement("span"); // create span tag
span.setAttribute("class", "btn-text"); //give class "btn-text" to span tag
span.textContent = "Tweet"; //add "Tweet" text to span tag
anchor.appendChild(iTag); //append iTag to the anchor tag
anchor.appendChild(span); //append span tag to the anchor tag
tweetButton.appendChild(anchor); //append anchor tag to tweetButton
return tweetButton; // return the element
}
window.onload = generateTweetButton(customText); //run the function when the page loads
I think this is what you are wanting to do. The problem is that: document.getElementsByClassName returns an array of objects that have the same class name. You either need to loop through it or specify which object you want to change.
var customText = "This is some custom text";
function generateTweetButton(text) {
var tweetButton = document.getElementsByClassName("custom-tweet-button")[0]; //grab the existing div
var anchor = document.createElement('a'); // create anchor element
anchor.setAttribute("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text)); //set the href url to include custom text
anchor.setAttribute("target", "_blank"); //add the target attribute
anchor.setAttribute("alt", "Tweet this pen"); //add the alt attribute
var iTag = document.createElement('i'); //create <i> tag
iTag.setAttribute("class", "btn-icon"); //give class "btn-icon" to <i> tag
var span = document.createElement("span"); // create span tag
span.setAttribute("class", "btn-text"); //give class "btn-text" to span tag
span.textContent = "Tweet"; //add "Tweet" text to span tag
anchor.appendChild(iTag); //append iTag to the anchor tag
anchor.appendChild(span); //append span tag to the anchor tag
tweetButton.appendChild(anchor); //append anchor tag to tweetButton
return tweetButton; // return the element
}
window.onload = generateTweetButton(customText);
.custom-tweet-button {
width: 200px;
margin: 1em auto 2em;
}
.custom-tweet-button a {
position: relative;
display: inline-block;
height: 16px;
padding: 2px;
border: 1px solid #ccc;
font-size: 11px;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-weight: bold;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DEDEDE));
background-image: -moz-linear-gradient(top, #FFF, #DEDEDE);
background-image: -o-linear-gradient(top, #FFF, #DEDEDE);
background-image: -ms-linear-gradient(top, #FFF, #DEDEDE);
border: #CCC solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
}
.custom-tweet-button a:hover {
border-color: #BBB;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#D9D9D9));
background-image: -moz-linear-gradient(top, #F8F8F8, #D9D9D9);
background-image: -o-linear-gradient(top, #F8F8F8, #D9D9D9);
background-image: -ms-linear-gradient(top, #F8F8F8, #D9D9D9);
background-image: linear-gradient(top, #F8F8F8, #D9D9D9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.custom-tweet-button a .btn-icon {
position: absolute;
width: 16px;
height: 13px;
top: 50%;
left: 3px;
margin-top: -6px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no- repeat;
background-size: 13px;
}
.custom-tweet-button a .btn-text {
display: inline-block;
padding: 2px 3px 0 20px;
}
<div class="custom-tweet-button">
<!--I am trying to add the anchor tag below to the existing div when the generateTweetButton FUNCTION RUNS (i.e. when the page is loaded).
<a href="https://twitter.com/intent/tweet?text=This is some custom text"
target="_blank" alt ="Tweet this pen">
<i class="btn-icon"></i>
<span class="btn-text">Tweet</span>
</a>
-->
</div>
I've just creted my first website in HTML5 and javascript and all the links work offline (double and triplechecked it), but when I uploaded it onto the host server, none of the links work. Could anyone give me any suggestions? Here's and example of my link buttons:
<div>
<center>
<button style="margin-top:10px;margin-bottom:10px;height:25px;width:100px;font-size:14px">Books</button>
</center>
</div>
You put an anchor tag inside a button. I assumed that you want to redirect the user if they click on the button. You can do something like this:
Example 1:
<button type="button">Click on me</button>
Example 2: (Recommended)
<button type="button" onclick="location.href='page.html'">Click on me</button>
I hope this will help you!
Or else you can also add anchor tag with css that makes it look like a button
Click on me
.btn:active {
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.btn{
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
JSFiddle
I am trying to make a disable enable button style using jquery.
This is my DEMO page from Codepen
In my demo you can see there is a blue color submit button . When you write something in input filed then button is active.
I want to add when this button disable color is red. If the button not desable then button color change to blue.
I have create .enableOnInput and .red Css style for button.
.enableOnInput {
width: 200px;
height: 25px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: bold 10px/25px "Lucida Grande";
border: 1px solid rgba(0,153,224,1);
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-image: rgba(66,66,66,1);
background-image: -webkit-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: -moz-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: -o-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: -ms-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: linear-gradient(top, #3db5ed 0%,#0099e0 100%);
}
.red {
width: 20px;
height: 25px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: bold 10px/25px "Lucida Grande";
border: 1px solid rgba(0,153,224,1);
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-image: rgba(66,66,66,1);
background-image: -webkit-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: -moz-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: -o-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: -ms-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: linear-gradient(top, #ff0000 0%,#c20202 100%);
}
This is my jquery for disable enable:
$(function(){
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') { //Check to see if there is any text entered
//If there is no text within the input ten disable the button
$('.enableOnInput').attr('disabled', 'true');
$(".aa").show();
$(".bb").hide();
} else {
//If there is text in the input, then enable the button
$('.enableOnInput').attr('disabled', false);
$(".aa").hide();
$(".bb").show();
}
});
});
Add this css rule:
input:disabled
{
background-color: red;
/*other style properties*/
}
Simply use addClass/removeClass methods:
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') { //Check to see if there is any text entered
//If there is no text within the input ten disable the button
$('.enableOnInput').prop('disabled', true).addClass('red');
$(".aa").show();
$(".bb").hide();
} else {
//If there is text in the input, then enable the button
$('.enableOnInput').prop('disabled', false).removeClass('red');
$(".aa").hide();
$(".bb").show();
}
}).keyup();
I also added trigged for keyup event to check initial state and set proper class.
UPD. Or as #Terry suggests in comments it's even better to change CSS selector to from .red to .enableOnInput:disabled and go with just $('.enableOnInput').prop('disabled', true). Just note that this way it will not work in IE8 and below.
Demo: http://codepen.io/anon/pen/CELut?editors=001
Add Class red to your button
<input type='submit' name='submit' id='submitBtn' class='enableOnInput red' disabled='disabled' />
add css rule
.red{
background-color:red;
}
and your js
$(function(){
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') { //Check to see if there is any text entered
//If there is no text within the input ten disable the button
$('.enableOnInput').attr('disabled', 'true');
$(".aa").show();
$(".bb").hide();
$('#submitBtn').addClass('red');
} else {
//If there is text in the input, then enable the button
$('.enableOnInput').attr('disabled', false);
$(".aa").hide();
$(".bb").show();
$('#submitBtn').removeClass('red');
}
});
});
Updated Link
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:
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>");
}
});