I have a small application with two pages. After the login page, the first page is a table of contents with a list of videos from which the user can select a youtube video of their choice. When the user selects a video from the sidebar menu they are taken to the page where the video plays and I have included it in the code below. This app uses the xAPI Youtube Video Tracking - ADL on Github and it basically does as advertised sending any number of kinds of statements like launch, suspend, resume and completed. The issue though, is that it doesn't always send "launch" statements. For example, if I preview a video and decide that it is one that I want, I'll code it in. Then if I log in as John Doe and play it the first statement is "resume." Is this because I've previewed the video on my own and youtube somehow remembers this? Is there something with my code below that is causing this? If I code a youtube video in without previewing it, it seems to send a launch statement as one would expect it to. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Video</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/myStyles.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/init.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--optional logo-->
<div class="navbar-header">
<img src="images/justSyniverse.png" width="169" height="43">
</div>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper" class="list-group">
<a href="tableOfContents.html" class="list-group-item active">
<i class="icon-dashboard"></i> Table of Contents
</a>
<!--************** Ansible *************-->
<!--***** Parent button ******-->
<a href="#ansible" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Ansible
<span class="badge bg_danger"></span>
</a>
<div id="ansible" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=What Is Ansible%3F&emCode=xMHVvHZ-Zn4" class="list-group-item">
<i class="icon-caret-right"></i> What is Ansible?
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=Getting Started&emCode=In9XI-3ByQ8" class="list-group-item">
<i class="icon-caret-right"></i> Getting Started
</a>
<a href="playVideoPage.html?Title=Concepts Explained&emCode=2jXHxkLBOHg" class="list-group-item">
<i class="icon-caret-right"></i> Concepts Explained
</a>
</div>
<!--************** end Ansible ************-->
<!--************** Chef *************-->
<!--***** Parent button ******-->
<a href="#chef" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Chef
<span class="badge bg_danger"></span>
</a>
<div id="chef" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=Overview of Chef&emCode=yh9osPQA_-k" class="list-group-item">
<i class="icon-caret-right"></i> Overview of Chef
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=Install Chef&emCode=r3mN2M9n51Y" class="list-group-item">
<i class="icon-caret-right"></i> Install Chef
</a>
<a href="playVideoPage.html?Title=Setup a node %26 write to a cookbook&emCode=71Cq4bCxgDk" class="list-group-item">
<i class="icon-caret-right"></i> Setup a node & write to a cookbook
</a>
<a href="playVideoPage.html?Title=Client Run %26 expanding the cookbook&emCode=H3Ggublb378" class="list-group-item">
<i class="icon-caret-right"></i> Client Run & expanding the cookbook
</a>
</div>
<!--************** end Chef ************-->
<!--************** Docker ************-->
<!--***** Parent button ******-->
<a href="#docker" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Docker
<span class="badge bg_danger"></span>
</a>
<div id="docker" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=What Is Docker%3F&emCode=t9YuqwGYUUg" class="list-group-item">
<i class="icon-caret-right"></i> What is Docker?
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=Run a %27hello world%27 container&emCode=JBODRMslzAU" class="list-group-item">
<i class="icon-caret-right"></i> Run a 'Hello World' container
<span class="badge bg_danger"></span>
</a>
</div>
<!--************** end Docker ************-->
<!--Logout-->
<a href="#" id="logout" class="list-group-item">
<i class="icon-caret-right"></i> Logout
</a>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 id="myMainTitle">Video Plays here</h1>
<p>Lorem ipsum... </p>
<!--<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>-->
<!--Toggle Menu-->
<div id="player"></div>
<script type="text/javascript" src="lib/xapiwrapper.min.js"></script>
<script type="text/javascript" src="src/xapi-youtube-statements.js"></script>
<script type="text/javascript" src="src/videoprofile.js"></script>
<script>
<!--This pulls the variables from the url query string-->
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
<!--This creates a var from the youtube embed code-->
var video = urlParams["emCode"];
<!--This creates a variable of the actual youtube title-->
var videoTitle = urlParams["Title"];
$("#myMainTitle").text(videoTitle);
<!--We have to pull the global variables from localStorage-->
var name = localStorage.getItem('name');
var email = localStorage.getItem('email');
//var mEmail = email;
// var personName = name;
// "global" variables read by ADL.XAPIYoutubeStatements
ADL.XAPIYoutubeStatements.changeConfig({
"actor": {"mbox":"mailto:" + email, "name":name},
"videoActivity": {"id":"https://www.youtube.com/watch?v=" + video, "definition":{"name": {"en-US":videoTitle}} }
});
function initYT() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video,
playerVars: { 'autoplay': 0 },
events: {
'onReady': ADL.XAPIYoutubeStatements.onPlayerReady,
'onStateChange': ADL.XAPIYoutubeStatements.onStateChange
}
});
}
initYT();
// Auth for the LRS
var conf = {
"endpoint" : "https://lrs.adlnet.gov/xapi/",
"auth" : "Basic " + toBase64("xapi-tools:xapi-tools"),
};
ADL.XAPIWrapper.changeConfig(conf);
/*
* Custom Callbacks
*/
ADL.XAPIYoutubeStatements.onPlayerReadyCallback = function(stmt) {
console.log("on ready callback");
}
// Dispatch Youtube statements with XAPIWrapper
ADL.XAPIYoutubeStatements.onStateChangeCallback = function(event, stmt) {
console.log(stmt);
if (stmt) {
stmt['timestamp'] = (new Date()).toISOString();
ADL.XAPIWrapper.sendStatement(stmt, function(){});
} else {
console.warn("no statement found in callback for event: " + event);
}
}
</script>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/init.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Related
I'm using the carousel component provided here: https://mdbootstrap.com/docs/jquery/javascript/carousel/
I want my pictures to be centered and in original size but instead, they're being stretched to fit the whole screen:
This is the code (I used the same random image for demonstration):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<style>
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
</style>
</head>
<body>
<!-- Start your project here-->
<!--Card-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Card-->
<!-- Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>
The actual images which are used in the code are too big... and they've used the w-100 class on <img> which is why
you see the images shrunk (in case of mdBootstrap's default images)
you see the images stretched (in case of your images)
I removed the file to show how a smaller image without being stretched will look... check the snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://www.akberiqbal.com/JumboMob.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have this sample page that I can't get the down down to work.
I have loaded jQuery, then Bootstrap, then popper (put popper before breaks things)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap try out</title>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="input-group text dropright " >
<input class="form-control" readonly type="text" placeholder="<category map>"> <!-- form-control links field with the span -->
<div class="input-group-append" dropdown>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</body>
</html>
This renders the button - but the drop down doesn't open.
What I have missed here ?
PS: corrected page - putting the dropdown inside class "" like this it still doesn't render the list - something else is not right.
<div class="container">
<div class="input-group text dropright " >
<input class="form-control" readonly type="text" placeholder="<category map>"> <!-- form-control links field with the span -->
<div class="input-group-append dropdown" >
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
really weird - so went to a demo site w3 schools - and there demo worked
so I cust and paste the header from that to my page and commented out my 4 lines doing same stuff
see replacement here - when i commented out my original sources and replaced those with the the same as the w3c schools and reloaded the page - it works
<!-- these 4 lines do work -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<%-- these 4 lines dont work
<link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
--%>
i'm not sure what nature of screwedness is going on and its too late to go figure. However with the new sources the pages start to work - very weird
I'm working in Laravel 5.5 which is bundled with Bootstrap and I have my main JS file running appropriately (i.e. laravel mix compiling with all the all the js files loaded with it appropriately). However, bootstrap 3.3.7's carousel is not working at all. The transitions (slide actions) don't work and the buttons dont work at all. here's my code below
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('./animations');
window.Vue = require('vue');
// *
// * Next, we will create a fresh Vue application instance and attach it to
// * the page. Then, you may begin adding components to this application
// * or customize the JavaScript scaffolding to fit your unique needs.
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '.content'
});
<script type="text/javascript" src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/main.css') }}" rel="stylesheet"> . .. ...
<div class="container-fluid content">
<div class="carousel slide" id="features">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#features" data-slide-to="0" class="active"></li>
<li data-target="#features" data-slide-to="1"></li>
<li data-target="#features" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/niceview.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Lorem Ipsum</h4>
<p class="carousel-text">Some Lorem ipsum.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/rear.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/view.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#features" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#features" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
That's my js file which compiles successfully by mix and my html file. And right now I don't get any errors in the console so I have no clue as to what is wrong.
Please help :(
Bootstrap carousal in the blade file.
add this to your filename.blade.php
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="{{ asset('public/images/1.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/2.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/3.jpg')}}" alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
add this css file like this
<link href="{{ asset('public/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
and add js like this
<script type="text/javascript" src="{{ asset('public/js/jQuery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('public/js/bootstrap.min.js') }}"></script>
using this following step carousal is work.
i hope this will help you to solve your problem
I have already asked this question already(closed due to inactivity) and I have been trying many different methods to solve it but it still doesn't work. I even try removing all those related to vue inside laravel by following many different kind of website where they all told me to remove the vue dependency. (here is one of the link that I followed, https://mattstauffer.com/blog/removing-all-vue-dependencies-from-laravel/) I even replaced the app.js with a new one created from scratch since in the past I didn't do anything to it
Can somebody please help me, I am stuck in this problem for quite a long time already and I really don't know what to do. All I want is to solve this error "[Vue warn]: Error compiling template:" since it is affecting the navbar in my webpage
I am using laravel framework 5.5.7 and I didn't even update my laravel to get until this vue. And also I don't even recall installing vue into my laravel.
This is the error they given me:
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li>Driver License Class Edit</li>
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Evaluation</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
For the life of me, I can't get google event tracking to work. I'm trying to track clicks on certain images in my site. I've waited a number of days, I've tried using firebug and google chrome debugger with no luck. I would be really, really indebted if someone could tell me what I'm doing wrong. My code is below. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hug Addicts | A variety of hug t-shirts.</title>
<!-- js -->
<script type="text/javascript">
var subMenus = new Array();
subMenus[0] = "shirt1";
subMenus[1] = "shirt2";
subMenus[2] = "shirt3";
subMenus[3] = "shirt4";
subMenus[4] = "shirt5";
subMenus[5] = "shirt6";
subMenus[6] = "shirt7";
subMenus[7] = "shirt8";
subMenus[8] = "shirt9";
subMenus[9] = "shirt10";
function revealshirt(id)
{
for (var i = 0; i < subMenus.length; i++)
{
document.getElementById(subMenus[i]).style.background = "transparent";
}
document.getElementById(id).style.background = "#e0e0e0";
}
</script>
<!-- end js -->
<!-- Style Sheet -->
<link href="_css/reset.css" media="screen" type="text/css" rel="stylesheet" />
<link href="_css/layout.css" media="screen" type="text/css" rel="stylesheet" />
<!-- End Style Sheet -->
<meta name="verify-v1" content="G4CQZIfIEXbhZZcpfWDJnAJe+R4lTGtVhzYsKhcRzS4=" />
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47147009-1', 'hugaddict.com');
ga('send', 'pageview');
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-47147009-1']);
_gaq.push(['_trackPageview']);
</script>
<!-- Google Analytics -->
</head>
<body id="homeid">
<div id="wrapper">
<div id="container">
<div id="container_inner">
<div id="header">
<h1>Header</h1>
<div id="navigation">
<ul id="nav">
<li id="prints">
Tees
</li>
<li id="about">
About
</li>
<li id="contact">
Contact
</li>
</ul>
</div>
</div><!-- header -->
<div id="main">
<div id="notice">Hello, my name is . . . and I am an addict.</div>
<div id="mac_nav">
<ul>
<li id="shirt1">
Link
</li>
<li id="shirt2">
Link
</li>
<li id="shirt3">
Link
</li>
<li id="shirt4">
Link
</li>
<li id="shirt5">
Link
</li>
</div>
<div id="content">
<iframe src="shirts/dealing_huggie.html" width="520px" height="600px" name="shirts" scrolling="no"></iframe>
</div>
<div id="pc_nav">
<ul>
<li id="shirt6">
Link
</li>
<li id="shirt7">
Link
</li>
<li id="shirt8">
Link
</li>
<li id="shirt9">
Link
</li>
<li id="shirt10">
Link
</li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
You are using the relatively new universal analytics tracking code (analytics.js) but the event tracking code is for the older analytics version (ga.js). Either use the older version of analytics code or use the proper event tracking code for universal analytics:
instead of:
onClick="_gaq.push(['_trackEvent', 'Click', 'FemaleHugAddicted']);"
Use (you can use spaces for the category / action / label fields):
onclick="ga('send', 'event', 'Click', 'Female Hug Addicted', 'optional label name');"
You can read more here:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events