How to show javascript file to all users now devise added rails

How to show javascript file to all users now devise added rails - javascript

Once upon a time my single page rails app showed a nice d3.js graph. This was derived from a database and showed all the users in the app.
Then I applied devise. The intention was for the same d3.js svg (called graph.js in the app) to show up in all users screene
I changed the users table so that it accommodated the devise fields as well as my own.
Now the d3.js won't show and I don't know why.Everything else shows on the page however including other javascript files in the same assets folder does show up. Debugging in the chrome browser shows there are no javascript errors. I'm not sure where to begin with finding out why the javascript doesn't show up
The code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Graph</title>
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_dark.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_light.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_wall.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/d3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bchart.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/d3.v3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/graph.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/user.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="jACMIxlQrneyrGGgGKtYZaK587ab6/W6KKQD7YyU+Es=" name="csrf-token" />
</head>
<body>
<div class="container-full">
<div class="row">
<div class="col-lg-12 text-center v-center">
<h1>big.f</h1>
</div>
</div>
</div>
<p class="navbar-text pull-right">
Logged in as <strong>sebastiz#example.com</strong>.
<a class="navbar-link" href="/users/edit">Edit profile</a> |
<a class="navbar-link" data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a>
<script src="/assets/javascripts/d3.v3.min.js" charset="utf-8"></script>
<script> $(".alert").addClass("in").fadeOut(4500);
/* swap open/close side menu icons */
$('[data-toggle=collapse]').click(function(){
// toggle icon
$(this).find("i").toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
});
//initializeGraph();
</script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<div class="col-md-8">
<div id="chart"><script src="/assets/graph.js?body=1"></script></div>
</div>
</div>
<div class="span4">
<div class="col-md-2">
<div class="well">
<h2>Profile</h2>
<p>
<a class="btn" href="#">View details »</a>
<div class='profile-content'></div>
<div id="FBDiv"></div>
</p>
</div>
<div id="chart_1"><script src="/assets/bchart.js?body=1"></script></div>
</div>
</div>
</div>
</div>

Related

Bootstrap popper won't function for the life of me

I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

target two HTML

I am trying to target two html in one javascript and I have no idea if that is even possible
I tried giving ids and classes to the html tag but it doesnt work. i have an image that I want it to be clickable do direct users to another html and gave it and id and tried targeting it in js but it still doesnt work. i have tried the a href tag but its not what i want.
$(function(){
$("#close1").on("click",closepage);
})
function closepage() {
// console.log(checkUi);
$("#space-3").css("display","block");
$(".chat__main").css("opacity", "0");
$("#chat-content").css("opacity","0");
}
I want to close the second and third HTML which is .chat__main and #chat-content
To be clearer, I would like to target different IDs from three different HTML. Everything is in the same folder, linked with the same javascript
this is the third HTML for an example. main.js is the js im working with. I want to close this HTML when users clicked on the "close" button.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
</head>
<body class="chat">
<div class="chat__sidebar">
<h3>People</h3>
<div id="users"></div>
</div>
<div class="chat__main">
<div class="topChat">
<img src="img/cross.png" id="close1">
<h3 id="chatTitle">HybriD Chat</h3>
</div>
<ol id="messages" class="chat__messages"></ol>
<div class="chat__footer">
<form id="message-form">
<input name="message" type="text" placeholder="Message" autocomplete="off"/>
<button id="submit-btn"><img src="img/send.png" alt="Send" height="50" width="50"></button>
</form>
</div>
</div>
<script id="message-template" type="text/template">
<li class="message">
<div class="message__title">
<h4>{{from}}</h4>
<span>{{createdAt}}</span>
</div>
<div class="message__body">
<p>{{text}}</p>
</div>
</li>
</script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/libs/moment.js"></script>
<script type="text/javascript" src="js/libs/mustache.js"></script>
</body>
</html>
This is the second HTML. This is the two HTML that I want to target to close. Am I targeting the wrong IDs?
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<meta name="description" content="Basic Example — Networked-Aframe">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link rel="stylesheet" type="text/css" href="css/vendor/common.css">
<link rel="stylesheet" type="text/css" href="css/vendor/load.css">
<link rel="stylesheet" href="css/vendor/hamburgers.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="js/vendor/aframe-master.js"></script>
<script src="js/vendor/aframe-mouse-cursor-component.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/socket_io.js"></script>
<script src="easyrtc/easyrtc.js"></script>
<script src="js/vendor/network-aframe.js"></script>
<script src="js/vendor/aframe-particle.js"></script>
<script src="js/vendor/TweenMax.min.js"></script>
</head>
<body class="centered-form" id="loginpage">
<div id="chat-wrapper">
<div id="chat-content">
<svg id="home-logo2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.74 321.88"><defs><style>.cls-1{fill:#ececec;}.cls-2{fill:#07f;}.cls-3{fill:#ffce2e;}</style></defs><title>Asset 2</title></svg>
<!-- <input type="image" id="close1" src="img/cross.png">-->
<img src="img/cross.png" id="close1">
<div id="login" class="centered-form__form">
<form action="/chat.html">
<div class="form-field"><h3>Join Chat</h3></div>
<div class="form-field">
<input type="text" name="name" placeholder="Display Name">
</div>
<div class="form-field">
<input type="text" name="room" placeholder="Room Name">
</div>
<div class="form-field">
<button>Join</button>
</div>
</form>
</div>
</div>
</div>
<script src="js/vendor/AVideoPlayer.js"></script>
<script src="js/vendor/jquery.Wload.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/chat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
for the main HTML, it is very complicated. The first page the users see will be a login page. After they have logged in, they will be directed to an image called "#space-3" which i want to direct the users there.
this is the main HTML for my website:
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<meta name="description" content="Basic Example — Networked-Aframe">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link rel="stylesheet" type="text/css" href="css/vendor/common.css">
<link rel="stylesheet" type="text/css" href="css/vendor/load.css">
<link rel="stylesheet" href="css/vendor/hamburgers.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="js/vendor/aframe-master.js"></script>
<script src="js/vendor/aframe-mouse-cursor-component.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/socket_io.js"></script>
<script src="easyrtc/easyrtc.js"></script>
<script src="js/vendor/network-aframe.js"></script>
<script src="js/vendor/aframe-particle.js"></script>
<script src="js/vendor/TweenMax.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
</head>
<body>
<div id="error">
<img id="disconnect-icon" src="img/disconnect.svg" alt="">
<p class="error-msg">
Disconnected from the server.
</p>
<p class="error-msg">
Please refresh the page.
</p>
</div>
<div id="home-wrapper">
<div id="home-content">
<svg id="home-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.74 321.88"><defs><style>.cls-1{fill:#ececec;}.cls-2{fill:#07f;}.cls-3{fill:#ffce2e;}</style></defs><title>Asset 2</title></svg>
<div id="home-step-one">
<div id="visitor-button" class="home-buttons">Visitor</div>
<div id="admin-button" class="home-buttons">Admin</div>
</div>
<div id="home-step-two">
<form id="admin-form">
<input type="password" id="pin" placeholder="Password">
<input type="text" id="room-name" placeholder="Room Name">
<div id="enter-button">Enter Lobby</div>
<div id="create-button">Create</div>
<div id="join-button">Join</div>
<div id="create-private">
<img id="create-private-icon" src="img/create.svg" alt="">
<span>Create Private</span>
</div>
<div id="join-private">Join Private</div>
</form>
<input type="image" src="img/back.svg" id="back">
</div>
<p id="copyright">©2019 Suntec Singapore. All Rights Reserved. </p>
</div>
</div>
<button class="hamburger hamburger--arrow" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="levels-wrapper">
<ul id="levels-inner">
<li id="level3">Level 3</li>
<li id="level4">Level 4</li>
<li id="level6">Level 6</li>
<img src="img/logo-white.svg" alt="" id="nav-logo">
</ul>
</div>
<a id="chat" href="login.html"><input type="image" id="chat" src="img/chat.svg"></a>
<input type="image" id="nav" src="img/navigate.svg">
<!-- <input type="image" id="chat" src="img/chat.svg">-->
<input type="image" id="to-banq" src="img/banquet.svg">
<span id="banq-text" class="nav-text">Banquet</span>
<input type="image" id="to-buffet" src="img/buffet.svg">
<span id="buffet-text" class="nav-text">Buffet</span>
<input type="image" id="to-ex" src="img/exhibition.svg">
<span id="ex-text" class="nav-text">Exhibition</span>
<input type="image" id="to-conf" src="img/conference.svg">
<span id="conf-text" class="nav-text">Conference</span>
<input type="image" id="to-concert" src="img/concert.svg">
<span id="concert-text" class="nav-text">Concert</span>
<input type="image" id="to-event" src="img/event.svg">
<span id="event-text" class="nav-text">Event</span>
<input type="image" id="to-space" src="img/space.svg">
<span id="space-text" class="nav-text">Space Only</span>
<input type="image" id="to-classroom" src="img/classroom.svg">
<span id="classroom-text" class="nav-text">Classroom</span>
<input type="image" id="video-control" src="img/video.svg">
<input type="image" id="play-vid" src="img/play.svg">
<input type="image" id="mute-vid" src="img/mute.svg">
<input type="image" id="replay-vid" src="img/reset.svg">
<a-scene networked-scene="room: lobby; debug: true;">
<a-assets>
<img id="buffet-3" crossorigin="anonymous" src="img/level3buffet.JPG">
<img id="space-3" crossorigin="anonymous" src="img/level3space.jpg">
<img id="classroom-3" crossorigin="anonymous" src="img/level3classroom.jpg">
<img id="cluster" crossorigin="anonymous" src="img/Hall 406CX Cluster2.jpg">
<img id="banquet" crossorigin="anonymous" src="img/Hall 405BXE 406CXD banquet.jpg">
<img id="exhibition" crossorigin="anonymous" src="img/hall 40123 exhibtion.jpg">
<img id="concert-2" crossorigin="anonymous" src="img/level6concert.jpg">
<img id="banquet-2" crossorigin="anonymous" src="img/level6banq.JPG">
<img id="event" crossorigin="anonymous" src="img/level6event.jpg">
<img src="img/landmark.png" id="platform" crossorigin="anonymous">
<!-- This is where you can change the client's logo -->
<img src="img/SuntecLvl4Logo.png" id="logo2" crossorigin="anonymous">
<img src="img/SuntecLvl4Logo.png" id="logo3" crossorigin="anonymous">
<!-- Videos on the projector screens -->
<video id="video-src" src="img/3x4border.mp4" playsinline webkit-playsinline></video>
<video src="img/2x3.mp4" id="video-src2" playsinline webkit-playsinline></video>
</a-assets>
<a-node></a-node>
<a-video class="clientVideos" id="video-screen" src="#video-src" rotation="0 -90 0" position="100 15.935 17" width="40" height="30"></a-video>
<a-video class="clientVideos" id="video-screen2" src="#video-src2" rotation="0 -90 0" position="100 1.935 6.500" width="60" height="15"></a-video>
<a-sky id="sky" src="#space-3" rotation="0 180 0"></a-sky>
<a-circle id="logo" src="#platform" radius="1" rotation="-90 0 0" position="9.54196 -171.79611 -1.47969" material="" geometry="radius: 27.1"></a-circle>
<a-plane class="clientPictures" id="ex-logo" src="#logo2" position="-20.5 5.9757 -0.41456" rotation="0 90 0" material="side: double; color: #FFFFFF; transparent: true; opacity: 1.5" height="4" width="9" geometry="" visible=""></a-plane>
<a-plane class="clientPictures" id="classroom-logo" src="#logo3" position="59.7606 4.21649 6.21335" rotation="0 -75.05747116213784 0" material="side: double; color: #FFFFFF; transparent: true; opacity: 1.5" height="4" width="9" geometry="" visible="" scale="2.7 2.7 2.7"></a-plane>
<a-entity light="distance:1;type:ambient" id="lightit"></a-entity>
</a-scene>
<script src="js/vendor/AVideoPlayer.js"></script>
<script src="js/vendor/jquery.Wload.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/chat.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>
Please ignore the home-logo as it is just a logo with animation

You can link single JavaScript file in different HTML file and target them as long it is valid selector.
If you want target multiple selector you can do something like this.
$('.chat__main , #chat-content').css("opacity", "0");
And of course, don't forgot to include
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Dropdown of bootstrap does not work

This my html file. I am adding this file to ng-view. But the drop down does not seem to work.
<button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown" type="button">Admin
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
</ul>
</button>
These are the necessary css and js files needed for my application. I have a single page application so I am adding above html code to this using ng-view
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="/javascripts/vendor/angular-route.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/commons/constants.js"></script>
<!-- Directives scripts -->
<script src="/javascripts/directives/passwordpattern.js"></script>
<script src="/javascripts/directives/passwordstrength.js"></script>
<!-- Scripts for authentication-->
<script src="/javascripts/services/AuthService.js"></script>
<script src="/javascripts/controllers/AuthController.js"></script>
<!-- Scripts for Trucks -->
<script src="/javascripts/services/TruckService.js"></script>
<script src="/javascripts/controllers/TrucksController.js"></script>
<!-- Scripts for customers -->
<script src="/javascripts/services/CustomerService.js"></script>
<script src="/javascripts/controllers/customersController.js"></script>
<!-- Scripts for Admin -->
<script src="/javascripts/controllers/AdminController.js"></script>
<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>-->
<!-- Stylesheets -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/>
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>-->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

As reported from "Libor Zahrádka" you need to include the bootstrap javascript library:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="/javascripts/vendor/angular-route.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/commons/constants.js"></script>
<!-- Directives scripts -->
<script src="/javascripts/directives/passwordpattern.js"></script>
<script src="/javascripts/directives/passwordstrength.js"></script>
<!-- Scripts for authentication-->
<script src="/javascripts/services/AuthService.js"></script>
<script src="/javascripts/controllers/AuthController.js"></script>
<!-- Scripts for Trucks -->
<script src="/javascripts/services/TruckService.js"></script>
<script src="/javascripts/controllers/TrucksController.js"></script>
<!-- Scripts for customers -->
<script src="/javascripts/services/CustomerService.js"></script>
<script src="/javascripts/controllers/customersController.js"></script>
<!-- Scripts for Admin -->
<script src="/javascripts/controllers/AdminController.js"></script>
<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>-->
<!-- Stylesheets -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/>
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>-->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown"
type="button">Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
</ul>
</div>

Use it this way:
<div class="dropdown">
<button style="background-color: transparent; border: none" class=dropdown-toggle" data-toggle="dropdown" type="button" >Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
</ul>
</div>

AngularJs Ui route not working?

Hi I was advised to use ui-router due to having problems with nested views.
I'm trying to create a form like this to go in the middle of my page.
the form
However it doesn't work and it's made my website not being able to load properly. I cannot view anything from the header down. The logo and the header works...but No body and no footer. Form pages are in partials/form.html etc. The body and footer loaded fine before I edited the code to include the forms.
Here's my plunker my app
here's index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
</div>
<body ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Form</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted">Demo Page</h3>
<br>
<div ui-view=""></div>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"> </script>-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"> </script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"> </script>
<script src="js/script.js"></script>
<!--<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>-->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thanks

Adding a lightbox using Bootstrap

I'm trying to add a lightbox using bootstrap, but when I click on the link to the lightbox nothing happends.
My HTML code is as follows:
<head>
<link href="css/bootstrap-lightbox.css" rel="stylesheet" type="text/css"/>
<link href ="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href ="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>Bootstrap RC1</title>
<div class="container">
<div class="row">
<div class="col-lg-12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="images/beautiful-image.jpg">
<div class="lightbox-caption"><p>This is my background image</p></div>
</div>
</div>
<a data-toggle="lightbox" href='#demolightbox'><p>Open lightbox</p></a>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

I think you have used two jquery files in your code,
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you should use one at a time, and put this script above of rest of all the embeded scripts
Also two bootstrap files added to this code, only one is required. So remove one of below file from the code
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

I think all you need to do is put the ajax.googleapis.com... above all the other scripts, and it'll work!

Try This
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="img_fjords.jpg"/>
<div class="lightbox-caption">
<p>This is my background image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#demolightbox" class="span2 thumbnail">
<p>Open lightbox</p>
<img src="img_fjords.jpg"/>
</a>
</div>
</div>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

How to show javascript file to all users now devise added rails - javascript

Related

Bootstrap popper won't function for the life of me

target two HTML

Dropdown of bootstrap does not work

AngularJs Ui route not working?

Adding a lightbox using Bootstrap

Categories

Resources