We Keep Coding

My react web page is not responsive on switching device

How do make my home page responsive? i tried using meta but not working, this is my home.js page which contains what i want to make responsive, needs to add or remove anything?
import React from "react";
import "../css/Home.css";
import { Link } from "react-router-dom"
import logo from '../images/logo2.jpg';
function HomePage(){
return(
<div className="background">
<div className="navbar">
<div className="header"><br />
<img src={logo} alt="logo"/>
<h3>MyChat</h3>
</div>
<nav>
<ul>
<li><input type="text" placeholder="Search News" /></li>
<li><Link to = '/'>HOME</Link></li>
<li><Link to = ''>NEWS</Link></li>
<li><Link to = ''>TIMELINE</Link></li>
<li><Link to = ''>CONTACT</Link></li>
</ul>
</nav>
</div>
<div className = "backform">
<div className="info">
<h2>Make Cool Friends !!!</h2>
<p>Friend Finder is a social network template that can be used to <br />
connect people. The template offers Landing pages, <br />
News Feed, Image/Video Feed, Chat Box, Timeline and lot more. <br /><br />
What are you waiting for? Join Now.
</p>
</div>
<div className="holdback">
<form>
<Link to =''>Login</Link>
<Link to = ''>Register</Link>
</form>
</div>
</div>
</div>
);
}
export default HomePage;
This is my css file for home.js design that contains background, image, navbar, header, text styling and fonts, i tried using meta device display for my css as well but not working.
#font-face {
font-family: 'Pacifico';
src: url('../fonts/Pacifico.ttf');
}
#font-face {
font-family: 'Lobster';
src: url('../fonts/Aladin-Regular.ttf');
}
#font-face {
font-family: 'Neo';
src: url('../fonts/Nunito-SemiBoldItalic.ttf');
}
.background{
background-image: url("../images/home-background1.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 680px;
}
.header{
display: inline-block;
margin: 0 2rem 0 20px;
padding: 0 5rem 10px ;
}
.header h3{
font-size: larger;
font-family: 'Pacifico';
font-stretch: expanded;
color: #764CDF;
margin: 5px 5rem 10px;
padding: 0 5rem;
position: static;
}
.header img{
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: 7rem;
position: absolute;
}
.navbar{
background-color: #5EECFF;
width: 100%;
height: 5rem;
}
.navbar ul{
list-style: none;
float: right;
padding: 0 3rem;
margin: 0;
text-decoration: none;
}
.navbar ul li{
display: inline;
padding: 1rem;
font-size: larger;
font-family: 'Lobster';
}
.navbar ul li input{
border-radius: 10px;
background-color: #F0F0F0;
width: 200px;
height: 20px;
text-indent: 1rem;
transition: width 0.4s ease-in-out;
opacity: 0.5;
font-family: 'Times New Roman', Times, serif;
font-size: small;
}
a:link,
a:hover{
text-decoration: none;
color: white;
}
a:active{
color: #764CDF;
}
a:focus{
color: white;
background-color: #764CDF;
}
.info{
color: white;
padding-left: 15rem;
padding-top: 8rem;
font-family: 'Neo';
}
.backform{
display: inline-flex;
}
.holdback{
margin: 0;
padding-left: 2rem;
margin-left: 5rem;
margin-top: 5rem;
border-radius: 5px;
background-color: #F0F0F0;
width: 500px;
height: 300px;
text-align: left;
display: inline-block;
}

Your CSS must have different styles for each breakpoint you want to make it responsive.
There are two ways to achieve that:
You write it by yourself. As in the comments, there are already several guides for you to learn how to do it. Example
There are some frameworks/libraries out there that people are using it to achieve such thing. It makes our lives easier. You can search and study them and then choose by yourself which one you want to use. To name a few (popular ones), Bootstrap and Tailwind.

How to create a responsive popup subscribe modal

I am trying to create a subscribe popup for the user to click on the subscribe button and to receive notification.
Does anyone know how to make this popup become responsive? Need this for my assignment. The button and the popup container are required to responsive. I have tried width:100% in #media but the width of the button will become too long. The notification part i have done.
How can I fix this? Please provide some solutions. Thank you
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
bottom:100px;
left:500px;
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>

Try this:
.subscribe {
box-sizing: border-box;
position: relative;
}
.sub-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: none;
border-radius: 5px;
z-index: 9;
transform: translate(-50%, 50%);
}

The answer to this question depends on what you mean by 'make it become responsive', and how you want it to respond.
In general, using units such as vw, vh, and % create sizes that are responsive to your window size.
Media queries can be used if you want styling to change at certain dimensions.
Place this at the end of your CSS, and your popup window will align to the left when your window is 600px or less.
#media (max-width: 600px){
.sub-popup{
left: 0px;
}

The left and bottom using px positioning on the popup form were messing up the responsiveness, first fix that came up to my mind was replacing them with margin 0 auto which basically centers it within it's parent container.
If you're using an absolute unit (px), you need to set media queries to match different screen sizes and change the values accordingly.
I'm not trying to say that using px for sizing is bad, it really depends on what are you trying to achieve so getting familiar with the different units really comes in handy.
There are actually quite a few solutions for this including flexbox, bootstrap, media queries, using relative units.
Hopefully these good reads can help you.
W3 CSS Units
What’s The Difference Between PX, EM, REM, %, VW, and VH?
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
margin: 0 auto; // replaced left and bottom positioning with margin 0 auto
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>

Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

I've a problem that I wasn't able to solve for a while now, even looking to other Q/A on SO.
I would like to switch from a button to another one with an ng-show.
When ng-mouseovertriggers, I would like to hide the current button, button-db, and show a second one, button-shout
When ng-mouseleave triggers, I would like to do the opposite, hiding button-shout and showing button-db.
I'm already able to make this work with the following code:
HTML:
<div class="footer">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<span class="shout-value">200</span>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="icon-over" ng-src="./assets/css/img/logo-white-m.png"
style="width: 29px; height: 21px;"></div>
</div>
<div class="half button-action">
<span class="icon-cart" ng-src="./assets/css/img/icon-cart.png"
style="width: 29px; height: 21px;"></span>
</div>
</div>
JS:
$scope.hoverEdit = true;
$scope.hoverIn = function(){
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
};
With the code above I'm able to get the following starter situation:
button-db on the left and button-action on the right
And I would like that, when ng-mouseover triggers, button-db (The Purple Rectangle) gets hidden while button-shout (~Green Rectangle with another image) gets shown and vice-versa (this is actually working), like in the following image:
What I'm trying to achieve -> button-shout on the left at button-db's place
But, instead, I get the following result:
What I get instead, when I go over button-db I get this uknown blank div instead of button-shout
button-shout doesn't get shown and it is not present in the DOM and it does not have height and width even if I managed to build it like I did with the other buttons.
I'm using the following CSS classes:
half gives dimensions to the buttons and sets their position
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
button-db has both :before and :after with a little images and shout-value to handle the int number between them
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-image: url("./assets/css/img/shout-megaphone-white.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: url("./assets/css/img/shout-db-white.svg");
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
button-shout button to get shown when ng-mouseover triggers; It does not need any :before and :after, it only has 1 image and no values
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
button-action cart button, button-shout would look pretty much like it but for the color and the image
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
The functionalities I implemented using both ng-mouseover and ng-mouseleave work perfectly as I want. I don't get why button-shout has no dimensions and does not get shown at button-db's place when doing ng-mouseover.
I already tried using ng-if, adding and removing classes, using z-index and display: none & display: block but I always get this problem.
I noticed that button-shout inherits nothing except for half's placement.
Here is a little Plunker I put up with only two buttons to let you understand how it should work. It works on the Plunker but not in my application.
When mouseover triggers, one button hides and the other one is shown and when mouseleave triggers, the old one is shown back.
1) Have you any idea on why it doesn't get shown properly?
2) How can I fix this?
I hope I've been as much clear as possible, Thanks in advance.

To be honest i'm not really sure of what the problem is so i'll post here a snippet that try to reproduce what you currently have. Feel free to tell us if this snippet reproduces your problem and for answeres to use it as a base for an answer.
Note : in your HTML i removed the ng-mouseleave on 1st element and ng-mouseenter on 2nd because they were conflicting each other and throw duplicate events.
angular.module("app", []).controller("ctrl", ['$scope', function($scope){
$scope.hoverEdit = true;
$scope.hoverIn = function(){
console.log("HOVER IN");
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
console.log("HOVER OUT");
};
}]);
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-color: black;/*url("./assets/css/img/shout-megaphone-white.svg");*/
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: white;/*url("./assets/css/img/shout-db-white.svg");*/
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div class="pod">
<div class="footer" ng-app="app" ng-controller="ctrl">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()">
<button class="shout-value">100</button>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseleave="hoverOut()">
<button class="shout-value">200</button>
</div>
<div class="half button-action">
<button class="shout-value">300</button>
</div>
</div>
</div>
Of course since i don't have the images, i changed them to black and white background. What i can see is that i have a black crap that seems to not be in the right place, however this doesn't seems to be what your problem is.

Check if mouseover trigger the function or not. Mouseover should change value on ng-show value from false to true in your html.

I may be mis-reading, but why are any functions needed here? If you are just trying to toggle a class, how about this? it will not require any controller functions.
https://plnkr.co/edit/HMACVKTlLzbkfWhy4v1S?p=preview
<div class="half"
ng-init="hover = false"
ng-class="hover ? 'button-shout' : 'button-db'"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
<div class="icon-over">300</div>

Fading in an object when hovering over another one

I'd like to slide down a tooltip element when hovering on another element.
I tried using jQuery, but i'm experiencing that nothing will be faded in if I hover on countbox1. countbox1 is a timer made with javascript.
I don't think the script is wrong. I think it doesn't detect jQuery for some reason.
I also tried to download jQuery and put this in the "src:" directly.
$(document).ready(function(){
$("#countbox1").onmouseover(function(){
$("#tooltip").fadeIn();
});
$("#countbox1").onmouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
<div id="countbox1"></div>
<hr style="width: 500px;">
</div>

If all you want is the tooltip to enter the screen on hover of something else, I'd suggest using CSS transition.
If you nest the <p id="tooltip"> within the #countbox1 and put a :hover-event on that, you can get exactly the thing you want.
HTML
<div id=home>
<div id="countbox1">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
</div>
<hr style="width: 500px;">
</div>
CSS
#home {
height: 50%;
background: red;
}
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
height: 50px;
background: #f4f4f4;
}
#countbox1:hover #tooltip {
opacity: 1;
}
#tooltip {
width: 500px;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
height: 30px;
background: #0000ff;
position: absolute;
left: 50%;
margin-left: -250px;
top: -15px;
opacity: 0;
transition: all 1s;
}
Here's a working demo. Hover over the grey area for the tooltip to enter the view.
Here's a working demo where the tooltip enters the screen from the top.

You might be using deprecated methods.
Replace your code for the one below, and try again:
$(document).on('ready',function(){
$("#countbox1").on('mouseover',function(){
$("#tooltip").stop(true).fadeIn();
});
$("#countbox1").on('mouseout',function(){
$("#tooltip").stop(true).fadeOut();
});
});

You should use mouseover instead of onmouseover:
$(document).ready(function(){
$("#home").mouseover(function(){
$("#tooltip").fadeIn();
});
$("#home").mouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id=home>
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div>
<hr style="width: 500px;">
</div>
</body>
Check it out also on this JSFiddle.

IJavaScript not working/linking properly [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I recently started learning HTML,CSS and Javascript and i am still getting the hang of it.
I want the hidden menu to be shown (menu) when the div class (mainLeft) is clicked. but, my javascript query to hide/show it doesn't work.
HTML Code
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<script type="text/javascript" src="C:\Users\mbashir\Documents\HTML\satmap.js"></script>
<title>SATMAP Home</title>
</head>
<body>
<div id="main">
<h1> XYZ</h1>
</div>
<div id="mainLeft">
<h1> Current Stats </h1>
</div>
<div id="SME">
<h4> my Explorer </h4>
</div>
<div id="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div id="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
<div class="menu">
<div class="icon-close">
<h4> Disappear </h4>
</div>
<ul>
<li>Gain Table</li>
<li> Remember Me</li>
</ul>
</div>
</body>
CSS Code
body {
background-color: white;
}
h1{
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
h4{
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
#main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
#SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
background-color:#13b5ea;
}
#DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
background-color:#13b5ea;
}
#ProdMonitor {
display: table;
background-color:#13b5ea;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
}
#mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
cursor: pointer;
}
.menu {
background-color:#13b5ea;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
Javascript Code
var main = function(){
$('#mainLeft').click(function(){
$('.menu').animate({
left:'0px'
},200);
$('body').animate({
left: '285px'
}, 200);
});
};
$(document).ready(main);

Have you verified that your javascript is firing at all? Such as adding console.log('test') or alert('test')? If it is firing, then you can move on to look at other things.
I think your problem might be because you're animating a left value that doesn't mean anything yet because the elements haven't been given a CSS position value that uses it. Try giving the #mainLeft element a position: absolute and see what happens.

You have said the JS file is in the same folder as the page, so you would link it like:
<script src="satmap.js"></script>
Also noted, is in the HTML provided, you did not have JQuery Library included, and since the coding you were using is dependent on JQuery, that would be a problem! :)
You can download the JQuery library from JQuery.com, or link to the CDN host like:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>