CSS and Javascript aren't working inside my localhost PHP folder - javascript

Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>

As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.

Related

innerHTML not changing text on browser in Materialize

innerHTML is working on console and it's changing the text in anchor tag but the in display on browser, it is not changing. I gave tag for login an id of "changeIt" and then retrieved the ID by using getElementByID(); function and at last changed the text of that. I did the same in case of tag without any use of Materialize and it was working. Does DOM does not work with materialize CSS framework?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skynet | Live courses from Universites</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function init() {
var name = document.getElementById("changeIt");
console.log("blah");
name.innerHTML = "Alex";
console.log(name);
}
window.onload = init;
</script>
<!-- NAVIGATION BAR -->
<div>
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<i class="material-icons left">account_balance</i>Skynet
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Become a Creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login"><i class="material-icons right">person</i>Login</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Become a creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login" id="changeIt"><i class="material-icons">person</i>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--LOGIN POP-UP CONTENT-->
<div id="login" class="modal">
<div class="modal-content modal-close">
<h4 class="header center-align">Skynet</h4>
<p class="flow-text center-align">Sign in to Skynet with</p>
<div class="center-btn">
<i class="ion-social-google left"></i>Google
</div>
</div>
</div>
</body>
</html>
After running this the value in console is changing -
blah
<a class="modal-trigger" href="#login" id="changeIt">Alex</a>
By using this -
$(document).ready(function() {
$('#change').text("Alex");
});

How To Display jQuery-ui Auto Complete on top of bootstrap side nav?

I am trying to display a jQuery-ui autocomplete textbox on top of my bootstrap side nav bar. The problem I am occurring is that the autocomplete list is displaying behind the nav bar. So my question is what change can I make to move on top?
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="includes/jquery-ui.css" rel="stylesheet">
<div id="sidebar-wrapper">
<form>
<div class="input-group">
<input type="text" class="form-control mr-sm-2" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-success" type="submit">Search</i></button>
</div>
</div>
</form>
<ul class="sidebar-nav">
<img src="images/me.jpg" style="width:100%; clear:both;" />
<li class="sidebar-brand">
Home
</li>
<li>
Project
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<img src="images/hamburger_icon.png" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="includes/jquery-ui.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
var availableTags = [
<?php
$rows = getSkills($conn);
$count=0;
$rowcount=$rows->num_rows;
foreach ($rows as $row) {
$count++;
if ($rowcount>$count){
echo "'{$row['Skill']}',";
}
else
{
echo "'{$row['Skill']}'";
}
}?>];
$("#srch-term").autocomplete({
source: availableTags
});
$("#wrapper").toggleClass("toggled");
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Increase z-index of ui-autocomplete class.

Make div disappear when list from drop down menu is selected

I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>
Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })

Phonegap and Framework7, add external JavaScript files for specific pages

I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.

Ui-router not generating templates having checked all options

I'm trying to use a ui-router in Angular to generate a single page with multiple templates in <ui-view></ui-view> but it is unable to load a single template. It just gives a blank page with no JavaScript errors, even the nav bar does not appear.
I have gone through many questions about this on stack but even applying their solutions did not help:
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
<nav class="navbar">
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<!-- <div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></a>
</div> -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="devices">Search</a></li>
<li><a ui-sref="addDevice">Add</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div ui-view></div>
<section id="service" class="section section-padded">
<!-- Holder for mobile navigation -->
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<script src="app.js"></script>
<script src="service/device.service.js"></script>
<script src="controller/main.controller.js"></script>
<script src="controller/shelf.controller.js"></script>
<script src="controller/device.controller.js"></script>
<script src="controller/newdevice.controller.js"></script>
</body>
</html>
This is the app.js
(function (){
"use strict";
var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);
// app.service('DeviceFactoryService',deviceservice(DeviceFactory));
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home",{
url:"/",
templateUrl:"main.html",
});
}]);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
and here are my templates:
<div id="home" ng-Controller="mainController">
<div class="container" >
<div class="row text-center title">
<!--<h2>Services</h2>
<h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
<div class="jumbotron">
<h1 class="display-3"> Device Farm </h1>
<hr class="my-4">
<p><span class="label label-info">{{count}}</span></p>
</div>
</div>
<div class="row services">
<div class="col-md-4">
<a href="/devices" >
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/phone-blue.png" alt="" class="icon">
</div>
<h3 class="description">My Devices</h3>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/add_device">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/add-blue.png" alt="" class="icon">
</div>
<h3 class="description">Add Device</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a href="">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/search-blue.png" alt="" class="icon">
</div>
<h3 class="description">Search Device</h3>
</div></a>
</div>
</div>
</div>
<div ></div>
</div>
And this is my app.index.js where i m redirecting to index.js
var express=require("express");
var app= express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router=require('./app.routes.js');
var port=8888;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(methodOverride());
app.use((request,response,next)=>{
console.log(request.headers)
next()
});
app.use('/api',router);
app.get('*',function(req,res){
res.sendFile('index.html',{root:__dirname+'/public'});
});
app.listen(port,error);
function error(err){
if(err){
console.log(`Something went wrong`,err);
}
console.log(`Server is running on ${port}`);
}
So I guys i found the reason why my ui-router wasnt working.
Apparently you cant declare app.module('app',['dependency']) even in your controllers or other modules with angular.modular('app',[]) also will override your main app.module and because of this i the control wasnt entering app.config for the ui-router to work.
refer to answer :
Angular routing config function not called
for further understanding .
Thank you guys

Categories