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>
Related
I have linear gradient text. What I'm trying to achieve is to have text-underline with same colors like text:
What I have already tried:
Default text-decoration: underline gives me non gradiented line which is way to big, and I can't actually customize it at all.
::after pseudoclass gives me underline but it's under whole text block
box shadow is affected by line-height, and I can't get this line closer to text.
body {
background: black;
}
h1 {
font-size: 120px;
display: inline;
line-height: 130px;
position: relative;
text-decoration: underline;
background: linear-gradient(330deg, #ff6553 0, #ff1979 50%, #ffa400 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1::after {
position: absolute;
display: inline;
content: "";
width: 100%;
height: 2px;
background: white;
bottom: 0;
left: 0;
}
<div class="text">
<h1>some text with <br> colorful gradient</h1>
</div>
Here's my code fiddle:
https://jsfiddle.net/3z0qrs6k/
Multiple gradient can do it:
body {
background: black;
}
h1 span {
font-size: 120px;
line-height: 130px;
color:transparent;
--g:linear-gradient(330deg, #ff6553, #ff1979, #ffa400);
background:
var(--g),
var(--g) bottom 2px left 0/100% 2px no-repeat; /* adjust the bottom value to control the offset */
background-clip: text,padding-box;
-webkit-background-clip: text,padding-box;
}
<h1><span>some text with <br> colorful gradient</span></h1>
Got an issue and no ideas for solving this.
I have some link in my HTML, to which I apply :hover and :focus+:active CSS styles (here's example):
https://codepen.io/Auditive/pen/WVrRKJ
When I'm clicking such link by mousewheel (for opening in other tab) - the :focus & :active CSS styles remain.
I'm looking for ways to remove :focus & :active styles from clicked link.
For example, maybe smth like:
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link.addEventListener("click", function() {
link.blur();
});
}
Thanks in advance.
First of all, getElementsByTagName returns an HTML Collection which doesn't have an addEventListener property. You need to use a specific HTML node like link[0] (you could use a more specific query like giving the link an id and use getElementById).
Most importantly, the middle click doesn't fire a click event, but it does fire a mouseup event so you can use the which property of the event to find out if the mouseup comes from the middle click button.
Note: In order to make a snippet in this answer I used a self executing function to call the RemoveFocus function.
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap');
body {
background: #282828;
}
p {
font-family: 'Raleway', sans-serif;
text-align: center;
font-size: 30px;
font-weight: 300;
color: #8f8;
}
.block {
width: 400px;
height: 50px;
border: 1px solid #787878;
border-radius: 5px;
margin: 0 auto;
text-align: center;
padding-top: 1%;
margin-top: 2.5%;
box-shadow: 0px 0px 4px 0px #fff8;
}
a, a:link, a:visited {
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 300;
color: #fff;
text-decoration: none;
}
a:hover, a:link:hover, a:visited:hover {
font-weight: 300;
background-image: linear-gradient(to right, #fff 42.5%, #4285f4, #ea4336, #fbbc04, #4285f4, #34a853, #ea4336);
text-shadow: 0px 0px 1px #fff4;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*https://loading.io/spinners/comets/lg.comet-spinner.gif*/
a:focus, a:link:focus, a:visited:focus,
a:active, a:link:active, a:visited:active {
color: transparent;
background-image: url(https://loading.io/spinners/comets/lg.comet-spinner.gif);
background-size: 20%;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-clip: border-box;
text-shadow: none;
}
<body>
<p />Click on link with mousewheel
<div class="block">
<a href="https://google.com" />Link 2 Google
</div>
<script>
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link[0].addEventListener("mouseup", function(e) {
if( e.which == 2 ) {
this.blur();
}
});
}
(function() {
RemoveFocus();
})();
</script>
</body>
First you need get first element of array
var link = document.getElementsByTagName("a")[0];
and then handle two events:
link.addEventListener("click", clickHandle);
link.addEventListener("auxclick", clickHandle);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p />Click on link with mousewheel
<div class="block">
<a href="https://www.google.ru/" />Link 2 Google
</div>
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap');
body {
background: #282828;
}
p {
font-family: 'Raleway', sans-serif;
text-align: center;
font-size: 30px;
font-weight: 300;
color: #8f8;
}
.block {
width: 400px;
height: 50px;
border: 1px solid #787878;
border-radius: 5px;
margin: 0 auto;
text-align: center;
padding-top: 1%;
margin-top: 2.5%;
box-shadow: 0px 0px 4px 0px #fff8;
}
a,
a:link,
a:visited {
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 300;
color: #fff;
text-decoration: none;
}
a:hover,
a:link:hover,
a:visited:hover {
font-weight: 300;
background-image: linear-gradient(to right, #fff 42.5%, #4285f4, #ea4336, #fbbc04, #4285f4, #34a853, #ea4336);
text-shadow: 0px 0px 1px #fff4;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*https://loading.io/spinners/comets/lg.comet-spinner.gif*/
a:focus,
a:link:focus,
a:visited:focus,
a:active,
a:link:active,
a:visited:active {
color: transparent;
background-image: url(https://loading.io/spinners/comets/lg.comet-spinner.gif);
background-size: 20%;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-clip: border-box;
text-shadow: none;
font-weight: bold;
}
</style>
<script>
var link = document.getElementsByTagName("a")[0];
function clickHandle(event) {
//event.preventDefault();
link.blur();
return;
}
link.addEventListener("click", clickHandle);
link.addEventListener("auxclick", clickHandle);
</script>
</body>
</html>
didn't tested the code, but i think this will work:
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link.addEventListener("click", function(e) {
if( e.which == 2 ) {
e.preventDefault();
link.blur();
}
});
}
add addEventListener "wheel" or "mousewheel" and do what you do for example for your question the use
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link.addEventListener("wheel", function() {
link.blur();
});
}
then put code what you want
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
Is it possible to add a class to a button that already has a class whenever the value of the button changes?
Example:
Button Value: Europe West --> Add Class EuWest to the current button class.
So it will show <button class="buttonclass EuWest" value="Europe West">Europe West</button>
Whenever the value changes to North America then for example, the class EuWest would remove and change to NorthAmerica.
I want to do this because later on when searching Server Specific API's, I believe this is needed for something.
Underneath the current code I have.
$(document).ready(function(){
var regionDropDown = $('.region_dropdown_section'),
regionButton = regionDropDown.find('button'),
regionList = regionDropDown.find('.region_dropdown_content').children();
$(regionList).on('click', function(e){
var region = e.target;
regionButton.text(region.text).val(region.text);
});
});
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
vertical-align: baseline;
outline: none;
}
body {
background: url(../images/background/body_background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.logo {
width: 500px;
height: 225px;
margin: auto;
display: block;
margin-top: 50px;
margin-bottom: 50px;
}
.SearchSummoners {
margin: auto;
width: 35%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid;
-moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
-webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
border-image-slice: 1;
}
/* Dropdown Button */
.dropbtn {
background-color: #19A5D4;
color: white;
padding: 4px;
font-size: 12px;
border: none;
cursor: pointer;
height: 40px;
width: 100%;
}
/* Dropdown Content (Hidden by Default) */
.region_dropdown_content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
max-width: 335px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.region_dropdown_section {
overflow: hidden;
width: 20%;
}
/* Links inside the dropdown */
.region_dropdown_content a {
color: black;
text-decoration: none;
display: inline-block;
width: 45%;
margin: 0;
vertical-align: top;
padding: 10px 0px 10px 10px;
}
/* Change color of dropdown links on hover */
.region_dropdown_content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.region_dropdown_section:hover .region_dropdown_content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.region_dropdown_section:hover .dropbtn {
background-color: #1491BA;
}
.Searchbox_Summoners {
margin: auto;
display: block;
width: 65%;
}
#SearchBox {
margin-right: 0;
margin-left: 0;
width: 80%;
background-color: white;
height: 40px;
float: left;
}
.region_dropdown_section {
position: inherit;
display: inline-block;
max-width: 100% !important;
overflow: hidden;
}
#SearchInput{
width: 92%;
line-height: 40px;
background: white;
border: 0;
outline: 0;
margin: 0;
padding: 0;
margin-left: 20px;
font-size: 24px;
}
/* Region Sprites */
.BR, .EUNE, .EUW, .JP, .KR, .LAN, .LAS, .NA, .OCEANIA, .RUS, .TURKEY{
background: url(../images/icons/regions/regions.png) no-repeat;
display: inline-block;
overflow: hidden;
vertical-align: middle;
padding-right: 15px;
}
.BR{
background-position: -2px -2px ;
width: 26px;
height: 28px;
}
.EUNE{
background-position: -2px -35px ;
width: 26px;
height: 28px;
}
.EUW{
background-position: -2px -70px ;
width: 26px;
height: 28px;
}
.JP{
background-position: -2px -105px ;
width: 26px;
height: 28px;
}
.KR{
background-position: -2px -140px ;
width: 26px;
height: 28px;
}
.LAN{
background-position: -2px -175px ;
width: 26px;
height: 28px;
}
.LAS{
background-position: -2px -210px ;
width: 26px;
height: 28px;
}
.NA{
background-position: -2px -245px ;
width: 26px;
height: 28px;
}
.OCEANIA{
background-position: -2px -280px ;
width: 26px;
height: 28px;
}
.RUS{
background-position: -2px -315px ;
width: 26px;
height: 28px;
}
.TURKEY{
background-position: -2px -350px ;
width: 26px;
height: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>
<?php include 'header.php'; ?>
<div class="logo">
<img src="images/logo.png">
</div>
<div class="SearchSummoners">
<div id="SearchBox">
<form method="POST" autocomplete="off">
<input id="SearchInput" value="Enter Summoners Name" onfocus="if(this.value == 'Enter Summoners Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter Summoners Name'; }" type="text" name="SummonerName"></input>
</form>
</div>
<div class="region_dropdown_section">
<button class="dropbtn">Select Region</button>
<div class="region_dropdown_content">
<span class="NA"></span>North America
<span class="EUW"></span>Europe West
<span class="EUNE"></span>Europe NE
<span class="LAN"></span>LAN
<span class="LAS"></span>LAS
<span class="OCEANIA"></span>Oceania
<span class="BR"></span>Brazil
<span class="KR"></span>Korea
<span class="JP"></span>Japan
<span class="TURKEY"></span>Turkey
<span class="RUS"></span>Russia
</div>
</div>
</div>
<?php include 'footer.php'; ?>
To make this script work, you would need to change a few things. I would add a data field to the <a href> tags when they are clicked, the jQuery knows what to do. Then I would implement ajax so the page does not reload (otherwise you will need to do some PHP on this page to persist the setting when it reloads). See if this is what you are trying to do:
Demo: https://jsfiddle.net/rtasdses/
Form:
<form method="POST" autocomplete="off">
<div class="SearchSummoners">
<div id="SearchBox">
<input id="SearchInput" placeholder="Enter the Summoner Name" name="SummonerName" />
</div>
<div class="region_dropdown_section">
<button class="dropbtn">Select Region</button>
<div class="region_dropdown_content">
<span class="NA"></span>North America
<span class="EUW"></span>Europe West
<span class="EUNE"></span>Europe NE
<span class="LAN"></span>LAN
<span class="LAS"></span>LAS
<span class="OCEANIA"></span>Oceania
<span class="BR"></span>Brazil
<span class="KR"></span>Korea
<span class="JP"></span>Japan
<span class="TURKEY"></span>Turkey
<span class="RUS"></span>Russia
</div>
</div>
</div>
</form>
<div id="section2"></div>
jQuery:
$(document).ready(function(){
// Set the current class
var currClass = false;
// On click
$('.region_dropdown_content > a').click(function(e){
// Stop (just incase)
e.preventDefault();
// Assign current class
var addClass = $(this).data('addclass');
// Extract the text from the a tag
var thisTxt = $(this).text();
// If not empty, remove it
if(currClass) {
$('.dropbtn').removeClass(currClass);
$('.SearchSummoners').removeClass(currClass);
}
// Now assign the current class to save
currClass = addClass;
// Add the extracted <a> text into the button tag to change name
$('.dropbtn').addClass(addClass).text(thisTxt);
// Add the class to the button
$('.SearchSummoners').addClass(addClass);
// this will send your request to whatever page
// that will run your search
$.ajax({
// Url of the page that searches
url:'/url/to/ajax/dispatcher.php',
// This will submit to the above page using post
data: {
"search": addClass,
"term": $("#SearchInput").val()
},
type: 'post',
// This will place the response (html possibly) into a container
success: function(response) {
// Put html back into placeholder
$('#section2').html(response);
}
});
});
});
CSS (I added just this part to the bottom to demonstrate):
.selected {
background-color: orange;
}
.blue {
background-color: red;
}
.pink {
background-color: pink;
}
.green {
background-color: green;
}
All you need to do is add something in your dropdown list such as data-class="EuWest" so JS can pick that up and append to your button.
$(function() {
$('.dropbtn').on('click', function() {
// Open the dropdown
$('.region_dropdown_content').show();
});
$('.region_dropdown_content a').on('click', function() {
// Add current location class to the button
$('.dropbtn').attr('class', 'dropbtn ' + $(this).find('span').data('class') );
// Close the dropdown
$('.region_dropdown_content').hide();
});
});
.region_dropdown_content {
display: none;
}
.region_dropdown_content a {
display: block;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region_dropdown_section">
<button class="dropbtn">Select Region</button>
<div class="region_dropdown_content">
<span class="NA" data-class="NorthUS"></span>North America
<span class="EUW" data-class="EuWest"></span>Europe West
<span class="EUNE" data-class="EuNE"></span>Europe NE
</div>
</div>
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>");
}
});