Tips for using markers to show geographical position

I have a world map image and I want to add random location pointers to it. In order to select a point on the map, I have created separate div elements to handle this.

For example:

<div id="div1" class="div-map-icon" style="left: 283px; top: 136px;"></div>

The div-map-icon class looks like this:

.div-map-icon{
  background-image: url(../images/map_icon.png);
  background-repeat: no-repeat;
  height: 26px;
  position: absolute;
  float: left;
  width: 20px;
}

Current Output:

However, when I attempted something similar using http://jsfiddle.net/Fy8vD/, it did not work in IE10.

Any assistance would be greatly appreciated?

javascriptjqueryhtmlcss

Answer №1

If you want to make the animation pulsate work in Internet Explorer, you will need to either utilize the -ms- browser prefix or native CSS3 properties. Here is an example of how to achieve this:

DEMO: http://jsfiddle.net/Fy8vD/852/

CSS

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@keyframes pulsate {
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a JSON string within an Ajax WebMethod and then return it to the aspx page

Wanted to create a JSON string in an Ajax WebMethod, then send it back to the aspx success result, but encountering issues with the json2 string. Any advice on how to fix this problem? Default.aspx.cs [System.Web.Services.WebMethod] public static ...

c#jqueryasp.netajax

Storing form information within the view

What is the best way to transfer data between views in AngularJS? I tried using $rootScope but it's not working as expected. ...

javascriptangularjsangularjs-scopeng-viewroute-provider

Steps to create five equally sized columns for desktop and four for mobile using Bootstrap 4

I successfully implemented 5 equal columns in Bootstrap for my responsive design using container-fluid. However, I encountered an issue when trying to hide one column at lower resolutions, which I also managed to solve. Now, the challenge lies in creating ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to leverage the URL retrieved from a jQuery.get request to perform another call?

Essentially, my goal here is: var mydata = null; jQuery.get(YET_ANOTHER_URL, function(data) { mydata = data; }).then(jQuery.get(parseDataFunction(mydata), function(otherData) {/*manipulate otherData*/})); parseDataFunction(toBeProcessed) { /*proce ...

jqueryajaxasynchronous

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

htmlcssmenu

Showing the Y-axis value when hovering over the turning point of a graph

Creating a graph using javascript and canvas, here is the jsfiddle link available: http://jsfiddle.net/ghan_123/n0r796ae/ Would like to display values on hover bubble (turning points) like: Price 2100 on 1-aug Javascript code: var CanvasChart = functi ...

javascriptjqueryhtmlcanvasgraph

I have a particular scenario in mind and I am looking for the desired outcome using jQuery

I attempted a similar approach to this code snippet but did not achieve the intended result: $('div').contents().filter(function() { return this.nodeType === 3; }).wrap( '<p></p>' ).end().filter( 'br' ).remove(); ...

javascriptjqueryhtml

Scope isolation prevents variables from being accessed in higher levels of the scope chain

In my search for answers, I came across some similar questions on SO: Isolate scope variable is undefined unable to access rootscope var in directive scope However, my question presents a unique scenario. I am facing an issue with a directive that has a ...

javascriptangularjsangularjs-directiveangularjs-scope

Display my additional HTML content on the current page

Is it possible for my addon to open a predefined html page in the current window when it is started? And if so, how can this be achieved? Currently, I am able to open my addon page in a new window using the following command: bridge.boot = function() { ...

javascriptjqueryhtmlfirefoxfirefox-addon

unique HTML elements located inside a text box

I am working on a system that allows users to customize order confirmation emails by replacing placeholders with actual customer data. Currently, we use tags like {customer_name}, but this method can be confusing and prone to errors. My goal is to create ...

htmlcss

Is the layout optimized for mobile devices?

I am attempting to design a mobile-friendly layout using CSS and HTLM5. In my styles, I have included the following code at the end: @media only screen and (max-width: 480px) { body { padding: 5px; background-color:#FFF; back ...

javascripthtmlcss

Initiate automatic video play delay on YouTube

Is there a way to delay the automatic start of a YouTube video, for example, by 20 seconds after the page loads? Here is an example without the delay: http://jsfiddle.net/qbqEA/ Thank you! ...

javascriptyoutubeyoutube-api

Move a div element as you scroll down the page

I currently have a div that appears when a user scrolls down a page. When clicked, it sends you back to the top of the page. Right now, it simply fades in and out, but I would like it to slide in from the right side of the page. Below is my existing code: ...

jquerycsshtmljquery-animate

Display a dropdown menu in Angular when the "@" symbol is typed into an input field

I am trying to achieve the functionality where a dropdown menu is displayed when @ is typed in the input field. The Custom Component myControl: FormControl = new FormControl(); options = [ 'One', 'Two', 'Three&ap ...

javascriptangulartypescriptformsrxjs

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements

Can you elaborate on how a numeric value is passed as an argument to the function within a React Tic Tac Toe tutorial when handling a click event?

I'm a bit confused about how the onClick event works with the handleClick function and passing numbers as arguments. Is this related to closures? Can someone explain how the numbers are passed as arguments when the click event happens? Also, should ...

javascriptreactjs

Building Dynamic Columns within a react.js Environment

Can anyone help me with creating a dynamic column in react.js? I've already managed to do it with static columns, but now I want to make them dynamic. Take a look at my code below and please provide suggestions. import React from 'react'; i ...

javascriptreactjsreact-data-grid

Using AJAX to transform octet-stream into typed array (Float64Array)

I can't seem to figure out where I'm going wrong here. My attempt involves converting a binary stream obtained from an AJAX request into an array of doubles using JavaScript. Here is some of my code: The PHP script on my server returns an octet-s ...

javascriptphpjqueryarraysajax

The Quickest Way to Retrieve Attribute Values in JavaScript

I'm trying to access a specific attribute called "data-price". Any tips on how I can retrieve the value of this attribute using this syntax: Preferred Syntax div[0].id: 48ms // appears to be the quickest method Alternative Syntax - Less Efficient ...

javascriptjqueryperformance

Heroku: Showcasing a unique page during the application's startup process

Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...

htmlcssherokudyno