I'm using a show/hide function to reveal the Gmaps google maps plugin but when the onclick is executed the Gmap is shown but part of the map is missing and is greyed out.
I've looked online at various sites for a solution and only found the option to use "gmap.checkResize()" but not sure how to go about to use this with my code, and if it will even work for my problem...
I've added the code below and am looking for assistance with getting the whole map to show when onclicked.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAL7_5Aste4KkbgvT91y3k9xQo4D0inr193z9lVfCY1TNJb6Lz5RQJyM7R-PR3bMS1i_GvwioUrJMaXw" type="text/javascript"></script>
<script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.1.0-min.js"></script>
</head>
<style>
#map{
position:relative;
float:left;
width:450px;
height:400px;
}
.PlaceHeading{
color: #C6688D;
font-family: Arial;
font-size: 15px;
margin-bottom:-13px;
}
#content{
text-align:center;
}
a{
color: #C6688D;
}
.PlaceAddress{
color: #666666;
font-family: Arial,Georgia,sans-serif;
font-size: 12px;
font-weight: normal;
}
</style>
<script type="text/javascript">
$(function() {
$("#map").gMap({ markers: [{ address: "809 1st Ave. N.E. Calgary, Alberta",
html:'<div id="content"><center>'+
'<h1 class="PlaceHeading">Blue Star Diner</h1>'+ //*Title of location
'<p class="PlaceAddress">809 1st Ave. N.E.<br />'+ //*Street address of location
'Calgary, AB <br />'+ //*City and Province of location
'403-261-9998 <br/>'+ //*Phone number of location
'<a href="http://maps.google.com/maps?saddr=809 1st Ave. N.E.+Calgary,AB+Canada" target="_blank">' //*Enter Address info in url where appropriate to link to Google directions page
+'Get directions</a> <b>|</b> <a href="http://www.bluestardiner.ca/" target="_blank">' + //*Enter place url here
'Visit website </a> </p></center>' +
'</div>',
icon: { image: "mapPage/images/marker1.png",
iconsize: [25, 41],
iconanchor: [9, 34],
infowindowanchor: [9, 2] }
}],
zoom: 13 });
});
</script>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.getElementById("expandMap").src="mapPage/images/minus.jpg";
document.getElementById("mapText").innerHTML="Hide map";
}
else
{
document.getElementById(divId).style.display = 'none';
document.getElementById("expandMap").src="mapPage/images/plus.jpg";
document.getElementById("mapText").innerHTML="View map";
}
}
</script>
<body>
<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><img src="/mapPage/images/plus.jpg" id="expandMap"alt="" style="float:left;" /><p id="mapText">View map</p></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<div id="map"> </div>
</div>
display: none; means that the element is taking up no space on the page which seems to cause the GMap size calculations to not work properly. Using visibility: hidden; instead is one way to fix it. position: absolute; can probably help you out if the element taking up space is an issue.
Related
I have many image icon on my page which have Tooltip on it and show different text in tooltip. I want to show each tooltips when user click on its image icon not on hover. and also when user click on any other place or area of page tooltip also hide or disappear.
<img style="width:26px; height: 23px;" class="customTooltip" data-toggle="tooltip" data-html="true" title="" src="/images/alert.png" data-original-title="Number Typ and Service Type:">
You can do it using bootstrap
<b-button id="tooltip-target-1">
Click Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
No need to reinvent the wheel. You can use third party library like TippyJs:
tippy(".item", {
trigger: 'click',
content: `item info`,
allowHTML: true,
animation: 'fade',
onShow(instance) {
let element = instance.reference;
instance.setContent(element.getAttribute('data-info'));
//console.log(instance);
},
});
img {
margin: 2rem
}
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<img class='item' src="https://picsum.photos/id/4/150/100" data-info="item info 1">
<img class='item' src="https://picsum.photos/id/2/150/100" data-info="item info 2">
My JQuery solution without any other js libs for custom tooltip:
<script>
$(document).ready(function() {
var noHideTooltip = false;
$(document).click(function(e) {
if (!noHideTooltip) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
}
});
$(document).on('click', '.tooltip-box', function(e) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
$(this).addClass('tooltip-box-show');
noHideTooltip = true;
setTimeout(function() { noHideTooltip = false; }, 0);
});
});
</script>
.tooltip-text {display:none; background:#ccc;}
.tooltip-box-show ~ .tooltip-text {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/OOjs_UI_icon_alert_destructive.svg/120px-OOjs_UI_icon_alert_destructive.svg.png" class="tooltip-box"><span class="tooltip-text">Text here..</span
Just add your css tooltip style
I have a simple webpage with "site map" on bottom that won't be implemented for weeks or months and am developing the rest as I go.
So, "Site Map" needs to be a link (I presume) with "href=" (?) where I can add a link later? Upon hover, I need text saying "coming soon" to show up, along with an image on both sides, i.e.
(before hover)
Site Map
(after hover)
Site Map Coming Soon
There should be a little space between the pic and text that pops up.
#my_map:hover:after {
margin-left: 20px;
color: green;
content: "(Coming Soon)";
}
<h1>Before and After Tag Example</h1>
<p id="my_map">Site Map</p>
<p>Go back to Main Menu</p>
<span> <img src="lightening_bolt" alt="bolt" height="20" width="20";> coming soon <img src="lightening_bolt" alt="bolt" height="20" width="20";> </span>
<p style "margin-top: 50px;">Hover over Site Map... </p>
Above isn't allowing for an image, just content= some text, and all the searching I've done to find some code ideas seem to be with other objectives...
You can add an image to the content of an :after pseudo element by using the url() attribute. If you want text as well as an image, you need to string these together without a space. If you want space between the image and the text, just be sure to include the spaces withing your text string. The snippet below shows an image placed before and after the string.
Note: the images take a second or two to load.
var myMap = document.getElementById("my_map2");
var comingSooon = document.getElementById("my_map2");
//
myMap.addEventListener("mouseover", function() {
cs.innerHTML = "<img src='https://picsum.photos/200' height='15' width='40' /> (Coming Soon) <img src='https://picsum.photos/200' height='15' width='40' />";
}, false);
//
myMap.addEventListener("mouseout", function() {
cs.innerHTML = "";
}, false);
#my_map:hover:after {
margin-left: 20px;
font-size: 20px;
color: green;
content: url("https://picsum.photos/20")" (Coming Soon) "url("https://picsum.photos/20");
}
<p id="my_map">Site Map</p>
<p>Site Map 2 <span id="cs"></span></p>
You could also just have the image already there and hide it until the anchor is hovered over:
#map-link {
display: inline-block;
}
#hidden-message {
display: none;
transition: display 1s linear;
}
#map-link:hover+#hidden-message {
display: block;
}
#cmg-soon-img {
margin: 0;
padding: 0;
height: 100px;
width: 100px;
}
<div id="my_map">
<p id="map-link">Site Map</p>
<div id="hidden-message">
<img id="cmg-soon-img" src="https://picsum.photos/20">
<p>
"Coming soon..."
</p>
</div>
</div>
Which would allow you to control the width and height of the image shown.
<!-- Here's what I got (hope answer my own question doesn't close thread...-->
<!DOCTYPE html>
<html>
<head>
<style>
#my_map {
margin-right: 30px;
font-size: 35px;
text-decoration: none;
}
</style>
</head>
<body>
<p>Site Map <span id="cs"></span></p>
<script>
var myMap = document.getElementById("my_map");
var comingSooon = document.getElementById("my_map");
myMap.addEventListener("mouseover", function() {cs.innerHTML = "<img src='https://picsum.photos/20' height='35' width='35' /> (Coming Soon) <img src='https://picsum.photos/20' height='35' width='35' />";}, false);
myMap.addEventListener("mouseout", function() {cs.innerHTML = "";}, false);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
#soon:hover:after {
margin-left: 20px;
color: green;
content: "Soon";
}
</style>
</head>
<body>
<p id="soon" style="font-size: 25px; margin-left:5%;"> Site Map </p>
<p style="margin-bottom: 150px;"></p>
<!-- take out the image and it's broken... it shows what I'm trying to do... -->
<img src="lightening-bolt.jpg" alt="Lightening bolt"
height="42" width="42">
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "inline") {
x.style.display = "none";
} else {
x.style.display = "inline";
}
}
</script>
<p style="display: inline" onmouseover="myFunction()"
onmouseleave="myFunction()">Click Me
</p>
<div id="myDIV">
<span><img src="lightening-bolt.jpg" alt="Lightening bolt"
height="42" width="42"> Text <img src="399-3991460_face-with-stuck-out-tongue-
eye.jpg" alt="Lightening bolt"
height="42" width="42"> </span>
</div>
</body>
</html>
Is it possible to have a single layer visible on the map in this ESRI tutorial LayerList widget ?
Each time you click on a layer, the previous one should deactivate. So you always have only one layer on the map.
Michelle
Updated answer with version 4 of the API.
It is possible to add the functionality at creating the widget using 2 features.
The listItemCreatedFunction function-
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCreatedFunction
According to the api:
Specifies a function that accesses each ListItem. Each list item can be modified according to its modifiable properties. Actions can be added to list items using the actionsSections property of the ListItem.
and the operationalItems property-
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#operationalItems
According to the api:
A collection of ListItems representing operational layers.
var LayerListWidget = new LayerList({
listItemCreatedFunction: (event) => {
var itemView = event.item; // layer-view of selection
itemView.watch("visible", (event) => {
LayerListWidget.operationalItems.forEach((layerView) => {
if (layerView.layer.id != itemView.layer.id) {
layerView.visible = false;
}
});
});
},
view: view,
});
I managed to write a code for you . Check it and let me know :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script language="javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };var busy=false;</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.on("toggle",function(evt){
if(busy) return;
selectedLayerSubIndex = evt.subLayerIndex;
if(selectedLayerSubIndex) return;
selectedLayerIndex = evt.layerIndex;
visibility = evt.visible;
elm = $("#layerListPane input[type=checkbox][data-layer-index="+selectedLayerIndex+"]:not([data-sublayer-index])");
otherCheckedElems = $("#layerListPane input[type=checkbox][data-layer-index!="+selectedLayerIndex+"]:not([data-sublayer-index]):checked");
if(visibility){
busy=true;
otherCheckedElems.each(function () {
$(this).click();
});
busy=false;
}
else{
checkedLength = otherCheckedElems.length
if(checkedLength==0) setTimeout("elm.click();", 100);
}
})
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Here is what i want:
Now in more detail:
I have 2 iframes, one on top of the other. the one above has 4 buttons/images, the one below is where a url/link will be displayed when one of these buttons/images gets clicked. i got this working...
what i want now is to have those buttons change image from inactive (ie. light pink) to active (ie. red) state when they are clicked. also, when i click on another of the 4 buttons it will turn red and the previous active (red) button/image must turn back to its inactive state (light pink). so i want 2 images here: (1) active.png and (2) inactive.png.
ALSO, i want the buttons to change to active.png when i hover over them. this i was able to manage with onmouseover and onmouseout effect. its just the ACTIVE part is what i cant figure out.
do i need javascript or can i do without it in case some user has it disabled?
i was also thinking about maybe using radio buttons and then skinning them with my active.png and inactive.png using css or something, but i dont know how to do this either :P i dont know what is the best and simplest way to go?
------------UPDATE-----------
ok i got something working but im not all the way there yet. it might not even be the way to go, but what i've done is create 4 links and given them all an id (ie.button1, button2..)
then in css i did this for each:
button1 { width: 66px; height: 70px; display: block; background-image:url(images/inactive1.png); }
button1:hover { width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
button1:focus{ width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
but i dont want it to loose focus unless another one of the buttons is clicked. cuz now its loosing focus if i click anywhere on the page :( how can i fix this?
I made these two files that cover all:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.buttons[isselected = "true"] { background-color:#ff7373; }
.buttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
});
$("#button2").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
////Use one of these if you need to reload the iframe
//$('#myiframe').contentWindow.location.reload(true);
//$("#myiframe").attr("src", $("#myiframe").attr("src"));
});
$("#button3").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
});
$("#button4").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
});
});
function ClickedButton1 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
return false;
};
function ClickedButton2 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
return false;
};
function ClickedButton3 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
return false;
};
function ClickedButton4 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
return false;
};
</script>
</head>
<body>
<div>
<div id="button1" class="buttons" isselected="true">button1</div>
<div id="button2" class="buttons" isselected="false">button2</div>
<div id="button3" class="buttons" isselected="false">button3</div>
<div id="button4" class="buttons" isselected="false">button4</div>
<iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>
<iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
</div>
</body>
</html>
And buttons.htm looks like:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/* CSS Here */
.iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.iframebuttons[isselected = "true"] { background-color:#ff7373; }
.iframebuttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#iframebutton1").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton1();
});
$("#iframebutton2").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton2();
});
$("#iframebutton3").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton3();
});
$("#iframebutton4").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton4();
});
});
</script>
</head>
<body>
<input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
<input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
<input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
<input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>
The only way to do this without JS, is to create four static pages as mentioned in the comment to your original post.
Your body markup would look like this:
<ul id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<iframe src="www.url.com">
</iframe>
The list above is your Navigation. You do not need a separate iframe, since you have four static pages. In each static page, the li-element containing the link to the active static page gets a class called "active".
The iframe stores the url, you want to be displayed in there.
In your css file, you can style your navigation like that:
#nav a {background: url('images/inactive.png');}
#nav a:hover,
#nav li.active a{
background: url('images/active1.png');
}
This should work, but a solution using JS would be much more elegant.
http://www.teachhub.com/sevcik-tester-ooyala
Fancybox close event is not removing the dark overlay in Chrome and IE. Firefox works great. I'm using fancybox 2. The commented out items below, I've tried forcing the close event and it's not working. The main window closes, but the dark overlay remains.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.noConflict();
});
</script>
<div style="width: 312px;">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a.videolink").fancybox({
closeClick : true,
helpers : {
overlay : {closeClick: true}
},
'afterClose': function () {
videoPlayer.pause();
//jQuery("#fancybox-wrap").hide();
//jQuery("#fancybox-wrap").empty();
//jQuery("#fancybox-overlay").hide();
//jQuery("#fancybox-overlay").empty();
//jQuery('#fancybox-overlay').unbind();
}
});
});
</script>
<script src='http://player.ooyala.com/v3/apikey'></script>
<p style="font-weight: bold; color: red; font-size: 18px; line-height: 21px; margin-bottom: 10px; margin-left: 10px;">Welcome to TeachHUB.com</p>
<!-- The Video Thumbnail -->
<a class="videolink" href="#videocontainer" title="">
<img src="/sites/default/files/homepage-video-player.jpg" style="float: left; padding: 0px 15px 15px 10px;"/>
</a>
<!-- The Video Object -->
<div id="videocontainer">
<div id='playerwrapper' style='width:480px;height:360px;'></div>
<script>
var videoPlayer = OO.Player.create('playerwrapper','R0ZjB2NTqDw3YRWba9RIpRnF6D9lRYKP', {
// additional params go here
});
videoPlayer.play();
</script>
</div>
After you close fancybox in Chrome, it triggers 1500+ js errors .... it's most likely a loop.
try loading a single instance of jQuery (ideally the latest version) ... so far, I have found 3 different versions (v1.7.2, v1.4.4 and v1.3.1).