I am trying to click a link with angularjs but it is not responding to click events when clicked. On clicking the anchor link nothing happens. This is the snippet of the angularjs script tag
<script data-require="angular.js#1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script type="text/javascript">
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
alert('clicked me');
}
})</script>
I am applying the click this way but it is not responding to click events
<div ng-app="module" ng-controller="controller" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<br>
<a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>
Why is click event not happening using angularjs
Above cord works without any issue. Probably you can compare and see
Demo
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
alert('clicked me');
}
})
<script data-require="angular.js#1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="module" ng-controller="controller" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<br>
<a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>
I've just created a jsbin. It works
https://jsbin.com/hifujod/edit?html,js,console,output
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="module" ng-controller="controller" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<br>
<a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
javascript
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
alert('clicked me');
}
})
It's working fine.Check your css because may be css override the element.
angular.module("mainApp",[])
.controller("ctrl",function($scope){
$scope.func =function(){
console.log('Hi!');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<div ng-app="mainApp" ng-controller="ctrl" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<a ng-click="func()" href="#">Take me there</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>
Modify the line below as mentioned here and give a try
<a ng-click="func()" href="">Take me there</a>
Related
I am encountering a problem with html/javascript that I couldn't find a solution for on the web for the last ~7 hours eventhough similar questions were asked! All offered solutions that I tried didn't help me.
My problem is the following error: Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick
I get this error when pressing a button that should trigger the function. The function is called onclick and the onclick attribute is attached to a div object.
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
If anybody could help me with that it would be very appreciated.
PS: This is my first HTML/CSS/JS project and I don't really know what I'm doing. Also, I am using Framework7 for the project, idk if that is important.
you may forgot script tag . try this anyway..
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
i hope this solved your problem, i changed the div tag into a clickable button tag so the 'onclick' function can execute....goodluck
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<!-- replaced div tags with button tags -->
<button class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</button>
<br /><br /><br /><br />
</div>
Hello everyone I have list of items in one of the screens. Once user clicks on the item I want to hide that item show the other div container and trigger the function. Here is working example of what I have so far:
function appToggle() {
var codeVal = $(this).data(code);
console.log(codeVal);
}
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>
As you can see in example above if user clicks on any item in the list new container will show and list will go off the screen. I would like once they click to trigger appToggle() function that will get code value for the current element. Is there a way to trigger this function automatically without setting function as inline element? If anyone know the way to achieve this please let me know.
Did you try doing that function as an onclick listener? e.g.
$('a.list-group-item').click(function() {
var codeVal = $(this).children('span').data('code');
console.log(codeVal);
});
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>
Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome.
Here is my html code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My Bootstrap Page</h1>
<p>Resize the page to understand Responsiveness</p>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<p>If you want to use Paypal</p>
<i class="fa fa-cc-paypal" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Mastercard</p>
<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Visa</p>
<i class="fa fa-cc-visa" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Google Wallet</p>
<i class="fa fa-google-wallet" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use American Express</p>
<i class="fa fa-cc-amex" style="font-size:36px"></i>
</div>
</div>
</div>
</body>
</html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?
Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript
You forgot to add the below css
.show > .dropdown-menu {
display: block;
}
How to disable a bootstrap div which uses button class. Button to be disabled using javascript based on some conditions
This is my code for button which is to be disabled using js:
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info col-sm-3">
<i class="glyphicon glyphicon-send" ></i>
<br>
Send
</a>
</div>
The div can be hidden in this way---
$('.zz').css('display', 'none');
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3">
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
</div>
</body>
</html>
If you want to hide the div with onclick event you can do it in this way--
$('.zz').click(function(){
$('.zz').css('display', 'none');
});
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
</div>
</body>
</html>
NOW IN THIS WAY YOU CAN DISABLE IT
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
<script type="text/javascript">
$('.zz').click(function(){
$(".zz *").attr("disabled", "disabled").off('click');
});
</script>
</div>
</body>
</html>
As you are just beginning with js and xml.
This example can be helpful
Now if you want to disable the button based on some value do it like this--
NOTE
this just a rough way to give you some idea.
In this example you have two value hi and bye which are coming from your xml and getting displayed on the HTML page. So based on that value you are disabling the div.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz2" id="btn-disable2">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
bye
</a>
</div>
<div class="btn-group btn-group-justified zz1" id="btn-disable1">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
hi
</a>
</div>
<script type="text/javascript">
var node = document.getElementById('btn-disable2');
textContent = node.textContent;
alert($.trim(textContent));
if ($.trim(textContent) == 'bye') {
$(".zz2 *").attr("disabled", "disabled").off('click');
}
var node1 = document.getElementById('btn-disable1');
textContent1 = node1.textContent;
alert($.trim(textContent1));
if ($.trim(textContent1) == 'bye') {
$(".zz1 *").attr("disabled", "disabled").off('click');
}
</script>
</body>
</html>
Try this :
document.getElementsByClassName("btn")[0].style.pointerEvents = "none";
var timestampArray = document.getElementsByClassName("btn");
for(var i = (timestampArray.length - 1); i >= 0; i--)
{
timestampArray[i].style.pointerEvents = "none";
}
Working fiddle
I am a newbie to web design, and have been learning through forums like these, and have so far not found an answer to a really annoying error I am having. I am using Google Chrome Canary 47.0.2506.0 to render, Notepad++ to edit, and cannot get the Google Plus follow button to appear. I copied the code exactly from the Google Developers page, and have tried everything: I made sure JavaScript was enabled, it was, I even reinstalled chrome. My code is this:
Header:
<head>
<title>iBot Brainiacs</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
page content:
<main class="mdl-layout__content">
<div class="page-content">
</br>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/107623689080156420982" data-rel="author"></div>
</br>
(note these are excerpts)
Does anyone have a solution, or a different way to do this?
Thanks
UPDATE: enitre code:
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.red-light_green.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!DOCTYPE html>
<html>
<head><title>iBot Brainiacs</title><link rel="stylesheet" type="text/css" href="stylesheet.css"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"><script src="https://apis.google.com/js/platform.js" async defer></script></head>
<!-- Uses a header that contracts as the page scrolls down. -->
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">iBot Brainiacs</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<a href="mailto:ibotbrainiacs#gmail.com" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">mail</i>
</a>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp" />
</div>
</div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="about.html"><i class="material-icons">subject</i></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">collections</i></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">event</i></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">chat_bubble</i></a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Social Media</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
</br>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/107623689080156420982" data-rel="author"></div>
</br>
<div class="demo-card-wide mdl-card mdl-shadow--16dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</br>
</div>
<div class="mdl-card__supporting-text">
Thank you for visting our website! I hope you enjoy your stay while learning about FLL
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#Starting"class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</br>
</div>
</div>
</br>
</br>
</br>
</br>
</br>
<div id="Starting">
<div class="demo-card1-wide mdl-card mdl-shadow--16dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Getting Started</h2>
</div>
<div class="mdl-card__supporting-text">
Thank you for visting our website! I hope you enjoy your stay while learning about FLL
</div>
<!--about section-->
<a href="about.html"class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">subject</i>
</a>
<!--images-->
</br>
<p align=center>ABOUT</p>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">collections</i>
</a>
<!--events-->
</br>
<p align=center>IMAGES</p>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">event</i>
</a>
<!--blog-->
</br>
<p align=center>EVENT</p>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">chat_bubble</i>
</a>
</br>b
<p align=center>BLOG</p>
<!--return to top-->
</br>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">keyboard_arrow_up</i>
</a>
</br>
<p align=center>RETURN TO TOP</p>
</br>
</div>
</br>
</div>
</div>
</div>
</main>
</div>
<script>
var $userAgent = '';
if(/MSIE/i['test'](navigator['userAgent'])==true||/rv/i['test'](navigator['userAgent'])==true||/Edge/i['test'](navigator['userAgent'])==true){
$userAgent='ie';
} else {
$userAgent='other';
}
if($userAgent==='ie'){
alert("Oh, it looks like you are using Internet Explorer. Just a heads up: This website may not work on the browser. Consider using another one.")
}
</script>
</html>
Looking at the code for your entire page, unless there is a mistake, you have no <body> element containing the main body of the document.
When isolated on it's own as a div, you are implementing the google+ tag correctly.
Lastly, just in case your code was just a copy-and-paste mistake with the missing <body> element, if you are not previewing your code from an actual webserver, and just accessing your HTML file via "file:///" rather than "http://" (i.e. you are not accessing your html file via an actualy webserver like Apache, etc.), then the browser could be blocking the google+ service because of security issues. For instance, I've seen this issue before when trying to implement a Facebook share button, but attempting to preview the HTML file from the computer's hard-drive rather than through a webserver service of some type (even if it's accessing the webserver on localhost).
For instance, while the layout of your page does looks a bit broken, the google plus element is working when viewed on a webservice like codePen here: http://codepen.io/anon/pen/xwwQeM