Convert the html template into Django - javascript

I am currently learning django, and at the moment I want to convert this page https://colorlib.com/etc/lf/Login_v6/index.html into django. I have tried heaps of times, still can't make everything right. The Button textures, label animations and fonts are completely not working. Let me show you my work structure below.
My problem is about using css and js under static/vendor fold. Seems the way I used got a bit problem, I have also attached my code for invoking the css and js under vendor.
Thanks for any help.
MyFirstDjangoWeb
--project
--setting.py
--urls.py
--wsgi.py
--_init_.py
--project_app
--template
--myHtml.html
--migration
--0001_initial.py
--_init_.py
--__init_.py
--admin.py
--apps.py
--models.py
--test.py
--urls.py
--views.py
--static
--css
--images
--js
--vendor
manage.py
<!DOCTYPE html>
<html lang="en">
<head>
<title>QC-Tool</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="static/images/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/css/util.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<!--===============================================================================================-->
</head>
<body>
<center>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-85 p-b-20">
<form class="login100-form validate-form">
<span class="login100-form-avatar">
<img src="static/images/my_Logo.png" alt="AVATAR">
</span>
<span class="login100-form-title p-b-0">
QC Tool
</span>
<form action="/msggate/" method="post">
<div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter username">
<input class="input100" type="text" name="username">
<span class="focus-input100" data-placeholder="Username"></span>
</div>
<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<form action='actionUrl' method='GET'>
<button class="login100-form-btn">
Login
</button>
</form>
</div>
</form>
<ul class="login-more p-t-190">
<li class="m-b-8">
<span class="txt1">
Forgot
</span>
<a href="#" class="txt2">
Username / Password?
</a>
</li>
<li>
<span class="txt1">
More options?
</span>
<a href="#" class="txt2">
Click here
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
</center>
{% load static %}
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="static/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/bootstrap/js/popper.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/daterangepicker/moment.min.js"></script>
<script src="static/vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="static/js/main.js"></script>
</body>
</html>

Have you defined static STATIC_URL in your setting.py? If not then do this in
setting.py
STATIC_URL = '/static/'
And store your static file in folder name static inside your app directory i.e. project/project_app/static
In your template myHtml.html , use the static template tag to build the URL like this:
<link rel="stylesheet" type="text/css" href="{% static '/vendor/bootstrap/css/bootstrap.min.css' %}">
<script src="{% static '/js/main.js' %}"></script>
Do this in every link and script.

Related

My js files are not responding to new edits

I'm updating a web application that I built. Changes that I make to my HTML and CSS display on the DOM. However, when I try to make changes in my JS files, they don't show on the DOM. I tested this using a console.log and it still didn't show in the chrome dev console. I'm using import/export rather than script tags to connect my js files. If needed, I'm happy to upload my code. Thank you in advance.
Here's the HTML. I used Webpack to bundle the code. It's connected via the 'bundle.js' script.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#300&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Franklin:wght#300&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>remoteUp</title>
<link rel="icon" type="image/ico" href="/dist/img/favicon/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<img src="/remotetechjobs/dist/img/logo.png">
<div class="header_text">
<h1 class="header_name">remoteUp</h1>
<h2 class="header_subname">work in tech from anywhere</h2>
</div>
<form class="search">
<input class="search__field" placeholder="Search thousands of jobs ..." />
</form>
<div class="likes">
<h2 class="likes_heading"><i>Liked Jobs</i></h2>
<div class="likes__field">
<svg class="likes__icon"><use href="img/icons.svg#icon-heart"></use></svg>
</div>
<div class="likes__panel"><ul class="likes__list"></ul></div>
</div>
</header>
<div class="results">
<br />
<ul class="results__list"></ul>
<div class="results__pages"></div>
</div>
<div class="job"></div>
</div>
<footer>
<div class="copyright">Copyright 2020 © Dylan Yudis <br> Powered by Github Jobs</div>
<div class="icon-bar">
<i class="fa fa-github"></i> <i class="fa fa-linkedin"></i>
<i class="fa fa-google"></i>
</div>
</footer>
<script nomodule="" src="https://unpkg.com/ionicons#5.1.2/dist/ionicons/ionicons.js"></script>
<script src="js/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.10"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- Auto typing in search bar -->
<script>
const options = {
strings:
[
'^750software engineer',
'^1000junior dev',
'^1000QA',
'^1000C#',
'^1000data engineer',
'^1000react native',
'^1000frontend dev'
],
typeSpeed: 60,
backSpeed: 60,
loop: true,
};
const typed = new Typed('.search__field', options);
/* document.querySelector(".search__field").addEventListener("click", function() {
typed[0].stop(true);
});*/
</script>
</body>
</html>`

How to modify App.js to show HTML Template

I've just started using React and started a new project by integrating a demo html admin template all over internet.
I tried to do similar but ended up showing the default react page. One thing I observed is that the page shows the login page with inputs button on load but as soon as the full page is loaded the default React page is displayed. I however feel there's something wrong I'm doing in App.js file.
Below is my index.html code in public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="description" content="">
<meta name="keywords" content="some">
<meta name="author" content="example">
<link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/assets/images/favicon.png">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/toastr.css">
<link rel="stylesheet" type="text/css" href="/bypasser/assets/vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/sweetalert.css">
<style>
.swal-button { border-radius: 1.5rem !important; }
</style>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/forms/toggle/switchery.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/tables/datatable/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/unslider.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/weather-icons/climacons.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/meteocons/style.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/charts/morris.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" />
<!-- END VENDOR CSS-->
<!-- BEGIN STACK CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/app.min.css">
<!-- END STACK CSS-->
<!-- BEGIN Page Level CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/menu/menu-types/vertical-menu-modern.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/users.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/timeline.min.css">
<!-- END Page Level CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/plugins/forms/switch.min.css">
<!-- BEGIN Custom CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/style.css">
<!-- END Custom CSS-->
<!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>MS - Finance | Login Page</title>
</head>
<body class="blank-page">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div id="login-section" class="card border-grey border-lighten-3 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<!-- <div class="p-1"><i class="ft-layers"> StackMantle</i> -->
<img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
<!-- </div> -->
</div>
<!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
</div>
<div class="card-content">
<div class="card-body">
<form class="form-horizontal form-simple">
<fieldset class="form-group position-relative has-icon-left mb-0">
<input required type="text" autofocus class="round form-control" id="login-username" placeholder="Username / Email-ID / Contact Number" required>
<div class="form-control-position">
<i class="ft-user"></i>
</div>
</fieldset>
<fieldset class="form-group position-relative has-icon-left">
<input required type="password" class="round form-control" id="login-password" placeholder="Login Password" required>
<div class="form-control-position">
<i class="fa fa-key"></i>
</div>
</fieldset>
<div class="form-group row">
<!-- <div class="col-xs-6 col-sm-6 col-md-6 col-12 text-center text-md-left">
<fieldset>
<input type="checkbox" id="remember-me" class="chk-remember">
<label for="remember-me"> Remember Me</label>
</fieldset>
</div> -->
<div style="margin-top: -15px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
<a id="swap-forgot" href="javascript:" class="card-link">Forgot Password?</a>
</div>
</div>
<button type="submit" id="login-button" class="round btn btn-outline-primary btn-block"><i class="ft-unlock"></i> Unlock My Panel</button>
</form>
</div>
<div class="card-footer">
<div class="text-center">
<a href="/" class="btn btn-md btn-outline-secondary round">
<i class="ft-eye"></i> Let's have a look
</a>
</div>
</div>
</div>
</div>
<div id="pass-section" class="card border-grey border-lighten-3 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<!-- <div class="p-1"><i class="ft-layers"> </i> -->
<img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
<!-- </div> -->
</div>
<!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
</div>
<div class="card-content">
<div class="card-body">
<form class="form-horizontal form-simple">
<fieldset class="form-group position-relative has-icon-left">
<input type="email" class="round form-control" id="reset-email" placeholder="Registered Email-ID" required>
<div class="form-control-position">
<i class="ft-mail"></i>
</div>
</fieldset>
<div style="margin-top: 10px; margin-bottom: 20px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
<a id="swap-login" href="javascript:" class="card-link">I know My Password!</a>
</div>
<button type="submit" id="reset-button" class="round btn btn-outline-primary btn-block"><i class="ft-rotate-ccw"></i> Recover Password</button>
</form>
</div>
<div class="card-footer">
<div class="text-center">
<a href="/" class="btn btn-md btn-outline-secondary round">
<i class="ft-eye"></i> Let's have a Look at Blog
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- BEGIN VENDOR JS-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/vendors.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/toastr.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/forms/icheck/icheck.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/sweetalert.min.js" type="text/javascript"></script>
<!-- BEGIN VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/datatables.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.flash.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/jszip.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/pdfmake.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/vfs_fonts.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.html5.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.print.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/js/scripts/tables/datatables/datatable-advanced.min.js" type="text/javascript"></script>
<!-- BEGIN PAGE VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/unslider-min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/timeline/horizontal-timeline.js" type="text/javascript"></script>
<!-- END PAGE VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/bootstrap-checkbox.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/switchery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<!-- BEGIN PAGE LEVEL JS-->
<script src="%PUBLIC_URL%/assets/js/scripts/forms/switch.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL JS -->
<!-- BEGIN STACK JS-->
<script src="%PUBLIC_URL%/assets/js/core/app-menu.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/js/core/app.min.js" type="text/javascript"></script>
<!-- END STACK JS-->
<script src="%PUBLIC_URL%/assets/custom/login.js" type="text/javascript"></script>
</body>
</html>
Below is my code of App.js in src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Below is my code of index.js in src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
What should I modify to make it work?
The app component is being rendered on this line in your index.js file:
ReactDOM.render(<App />, document.getElementById('root'));
try commenting or removing the above line and see if it helps.
better yet, modify the App() component to your desired content and not directly modify the html file on your public folder.
You are rendering the App in the node with id root. While the page is loading, you see the login form but as soon as the javascript is loaded the content inside root is replaced with the react content. I am not sure what you are trying to achieve with this.
I am not entirely certain if i understood your problem correctly, but as far as i can see you have not imported the public/index.html file at all.
Your index.js file imports the App.js and the result is simply the contents of the App.js file.
If this indeed is the question you are asking, you can require the HTML file into a variable, stringify it (for example using this stringify package) and the use the dangerouslySetInnerHTML prop in div to show the strigified content.

How to do start time and end time 24 hours time format and validation?

i am using sql server 2014.datatype for start time and end time is time(7).When saving start time as 14:00 from frontend, sql is taking as 14:00:00.While retrieving data from sql its showing 02:00PM.time picker is not working for me.I need a timepicker for these two fields and validation also. 1. Start time should not be greater than End time 2.End time should not be lesser than start time
I need to show the time in 24hours format
How to do start time and end time capture in field using bootstrap or jquery is also fine ?
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<head>
<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="icon" type="image/png" href="<?php echo base_url('assets/img/download.png');?>">
<title>Create Contract</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('/assets/demo/sam.css');?>" media="all"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<script src="<?php echo base_url('assets/demo/sam.js');?>"></script>
</head>

Problems with IE - Webpage does not load well

I have my website completely finished and running well in Google Chrome, Firefox, and other browsers except in Internet Explorer.
the menu is not seen, it is broken. The margins are not applied, the text is totally without form, it is as if no bookstore is being loaded. The website is created with bootstrap 3.6 Jquery is used to handle most of the effects of the page.
Do you know if IE does not support jquery, bootstrap or any other library? All libraries on my site are loaded locally.
The content of the page is loaded by means of php, since all the content is in database. It works well in other browsers but not in IE. The idea is that it works well in everyone.
I use this css files in my head
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Nivamedia | Webdesign, Online Marketing, Mobile Apps</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/et-line-font.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'> -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800" rel="stylesheet" type='text/css'>
</head>
This is my navigation menu
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121888387-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-121888387-1');
</script>
<!-- preloader section -->
<div class="preloader">
<div class="sk-spinner sk-spinner-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
<!-- navigation section -->
<section class="navbar navbar-fixed-top custom-navbar bg-trans" role="navigation" id="navbar_menu">
<div class="container" id="navbar_container">
<div class="navbar-header" id="mobile_version_collapse-in" style="background-color: white !important;">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggle_button">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="nav-brand" href="index.php"><img src="images/nivaLogo2.png" alt="logo" title="Nivamedia" id="main_logo"></a>
</div>
<div class="collapse navbar-collapse" id="menu_collapse">
<ul class="nav navbar-nav navbar-right" id="list_options">
<li class="list_options_Li"></li>
<li class="list_options_Li" id="first_li_main">Leistungen</li>
<li class="list_options_Li" id="second_li_main">Referenzen</li>
<li class="list_options_Li" id="third_li_main">Agentur</li>
<li class="list_options_Li" id="fourth_li_main">Kontakt</li>
</ul>
</div>
</div>
</section>
and I have this js libraries at the end of the body:
<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/sweetalert.js"></script>
All other pages of the website has the same problem.
I'm not sure if this answer works for you but there seems to be a problem with your bootstrap.css file: https://nivamedia.ch/css/bootstrap.min.css (v3.3.5)
replace this line:
<link rel="stylesheet" href="css/bootstrap.min.css">
with an updated version of bootstrap (3.3.7)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Here is a screenshot of what I get in IE:
Also, I should make you aware that the files you are hosting are either corrupt or not encoded using UTF-8. Check the sites header is using UTF-8 if they are it's likely the bootstrap.css is corrupt, try downloading a new file and reuploading it.
Here is your bootstrap.css: https://nivamedia.ch/css/bootstrap.min.css
There is a lot of ��������������������� within.

Unable to execute controller function using angular.js

My controller function is not called at all using Angular.js.I am explaining my code below.
admin.html:
<head ng-app="adminModule">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">
<div class="login-sec">
<div class="login-sec">
<div class="login">
<div class="login-form">
<span><img src="images/logo.png" alt="" /></span>
<h5><strong>Identify</strong> Yourself</h5>
<center ng-hide="lStatus">{{loginStatus}}</center>
<form action="#" method="post">
<fieldset><input type="text" placeholder="Username" class="logininputdiv" /><i class="fa fa-user"></i></fieldset>
<fieldset><input type="password" placeholder="Password" class="logininputdiv" /><i class="fa fa-unlock-alt"></i></fieldset>
<label><input type="checkbox" />Remember me</label><button type="button" class="blue" ng-click="adminLogin();">LOG IN</button>
</form>
</div>
<span>Copyright © 2015 Odia Doctor</span>
</div>
</div><!-- Log in Sec -->
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/adminlogincontroller.js" type="text/javascript"></script>
</body>
</html>
adminlogincontroller.js:
var app = angular.module('adminModule',[]);
app.controller('admincontroller',['$scope','$http',function($scope,$http){
console.log('hello controller');
$scope.lStatus=false;
}])
I need here when page will be load this controller function will called.But nothing is happening like this.Please help me to resolve this issue.
It looks like you define your ng-app on <head> instead of <html>.
<head ng-app="adminModule">
So it result that your controller is not in the scope of angular :)
</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">
You should so declare it on <html>
<html ng-app="adminModule">
<head>
...
</head>
<body ng-controller="...">
</body>
</html>

Categories