My navbar won't collapse after loading page on div through js - javascript

I'm having troubles with my navbar because somehow when I get to see the collapse button and click one of the options that appear there when i try to collapse it, it gets stuck and won't get to normal unless I refresh the page.
This is the html that works with the page
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/Style.css">
</head>
<body>
<div class="">
<header>
<nav class="navbar navbar-inverse" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Ans Dashboard
</div>
<div class="collapse navbar-collapse text-center" id="navbar-1">
<ul class="nav navbar-nav">
<li class="" data-target="customer_main"><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></li>
<li class="" data-target="inventorypage"><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></li>
<li class="" data-target=""><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></li>
<li class="" data-target=""><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></li>
</ul>
<div class="navbar-right text-center">
<ul class="nav navbar-nav">
<form method="post" class="nav navbar-nav">
<li><p class="navbar-text"><?php echo "Welcome"?><p></li>
<li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?>
<?php
include("logout.php");
?>
</button></li>
</form>
</ul>
</div>
</div>
</div>
</nav>
</header>
</div>
<!-- end of navbar-->
<div id="content">
<!-- Js page loads here -->
</div>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/mainpage.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
This is the javascript that loads the pages once the navbar area is clicked (mainpage.js)
$(document).ready(function()
{
var trigger = $('#navbar-1 ul li'), container = $('#content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
EDIT: Already solved the problem, it had to with the pages being loaded had some problems with the way they were structured.

I have updated your code, please check the my fiddle link appended below,
$(document).ready(function() {
var trigger = $('#navbar-1 ul li'),
container = $('#content');
trigger.on('click', function() {
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
fiddle
Thanks.

Related

getElementById returns null even though its in HTML

Im trying to find my element in my HTML file, but it returns null even though its there.
I cant find something wrong with my code, neither in the html.
I read the other suggested threads on stackoverflow and have already wrapped it in an onload function, but it still not seem to work.
This is my JS file
window.onload = run();
function run(){
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
This is the HTML file
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>
I believe the issue is not get getElementById returns null
but this line
var archived = localStorage.getItem("arkiv");
Could you please specify if you are really storing the value at localstorage?
Your element is found, check the result before the error (localstorage security error, specific to stackoverflow)
window.onload = run();
function run(){
console.log(document.getElementById("archivedmovies"));
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>
Looks more a problem with your local storage array perhaps? If I code archived by hand the loop is run and object found....
window.onload = run();
function run(){
var archived = 'asddasdasd,asdsdasdas'
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
alert(getUL);
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
}
http://jsfiddle.net/1hwdaL4c/3/

Deactivating Bootstrap Navbar button using AngularJS

Here I have the code for a bootstrap navigation bar:
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?
You can use function in controller to update variable for active button.
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
$scope.updateActive = function(navButton) {
$scope.btnActive = navButton;
};
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is similar solution.
I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.

Making an interactive textbox in bootstrap

I want to make an interactive text-box for ajax search results in my site. I want to call ajax and show the result in a text-box.
HTML code :
<!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">
<title>INIK </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
session_start();
?>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Brand</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">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<?php if ( isset($_SESSION['username']))
{
?>
<li>Logout </li>
<?php
}
?>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="search_user" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="navbar-form navbar-right" id="search_list">
</div>
Now the css for id search_List is :
#search_list
{
/*background: #000000;*/
/*display: block;*/
/*overflow: auto;*/
position: absolute;
right: 22%;
z-index: 99;
}
The ajax which adds elements in it is:
$('#search_user').on('keyup',
function (e) {
e.preventDefault();
var search_text = $('#search_user').val();
// var text = $('#post-text').val();
// alert("hello from keyup" + search_text);
// alert(username);
$.ajax(
{
url:'search.php',
type:'POST',
dataType:"json",
data: { search_text : search_text },
success:function(data)
{
$('#search_list').text("");
$.each(data, function(i, item)
{
$('#search_list').addClass("alert alert-success");
$('#search_list').append(item.user_name + "<br>" );
// var html = '<span class="fa fa-minus delete_modal_button">delete</span> <br>';
// $('#list').append(html);
// alert();
});
},
error : function() { console.log(arguments); }
}
);
});
The z-index looks good but the width of text-box is causing issue. It does not work well on changing the width of device. Please help me to solve this.

Bootstrap navbar won't close

My page, containing a bootstrap navbaar, shows a togglebutton for the menulinks when viewed in smal window. Hiiting this buttons shows the dropdown containing the menuitems but after pressing the togglebutton again it won't close...
Anyone know why?
<html>
<head>
<title>Loket BWL Rapportage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="bwl.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="imgLogo" src="Images/arnhemlogo.png" alt="arnhem" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
testlink 1
</li>
<li>
testlink 2
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<table class="table table-bordered">
<tr>
<td class = "header">Onderwerp</td>
<td class = "header">Gegevens</td>
</tr>
<xsl:apply-templates/>
</table>
<!--<br/>
<div style="font-size:12px"><b>Meta-informatie</b></div>-->
</div>
</body>
<script language="JavaScript" src="https://code.jquery.com/jquery.js" />
<script language="JavaScript" src="../Scripts/bootstrap.js" />
</html>
Changing the .js references to:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
did the trick.

not able to drag and drop a button on canvas

I am trying to make a tool that will allow users to create their own html pages. For this i am allowing users to click on different items like button and drag and drop them on required locations. But for some reason the drag and drop is not working. The code attached is only for the button(the other attributes are still to be implemented). The css files are also attached.
`
<title>HTML5 Editor</title>
<link href="html editor/business-casual/css/bootstrap.css" rel="stylesheet">
<link href="html editor/business-casual/css/business-casual.css" rel="stylesheet">
<script type='text/javascript'>
var i = 1;
var bufferCanvas = new Array();
var ButtonArray = [];
ButtonArray.push({
type : "submit",
name: [],
value:[]
});
console.log(ButtonArray);
<!-- Create Button when user clicks on button-->
function createButton(ev)
{
var canvas=document.getElementById("myCanvas")
var button = document.createElement("input");
div=document.createElement('div');
button.type="submit";
button.style.position='absolute';
button.name="Button"+i;
button.value = "Button"+i;
div.appendChild(button);
div.draggable=true;
div.ondragstart="drag(event)";
div.id="draggable";
div.class="draggable ui-widget-content";
var l=i-1;
ButtonArray[l].name.push(div.id);
ButtonArray[l].value.push(button.value);
canvas.appendChild(div);
i++;
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function allowDrop(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drag(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drop(ev)
{
ev.stopPropagation();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();}
</script>
<style type="text/css">
<!--
.style1 {font-size: 18px}
-->
</style>
</head>
<body>
<div class="brand">HTML5 EDITOR</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-collapse">
<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="../business-casual/index.html">Business Casual</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Create</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12" id="menu">
<ul>
<li>Add
<ul>
<li><a name ="textBox" onClick="createTextBox()">Text</a></li>
<li>Image</li>
<li>Audio</li>
<li>Video</li>
<li>Shapes </li>
<li>Lines</li>
<li><a name="button" onClick="createButton()">Buttons</a><li>
<li>Menus<li>
</li>
</ul>
</li>
</ul>
<ul><li><a name="SaveButton" onClick="saveTextAsFile()">Save</a></li></ul>
</div>
</div>
</div>
</div>
<div class="ui-widget-header" id ="myCanvas" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div><!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>`
you can use this greate example http://www.w3schools.com/html/html5_draganddrop.asp

Categories