Dropzone only shows at the end of the form (initially I tried putting it above the summernote) so, the submit button showed only above it. For this reason, I tried putting it outside the form and I'm not sure it works.
I can't include Dropzone in any other div, so, for example, I can't put a border around it.
It looks like it doesn't upload any files (because the following code return only a blank page with "1" written on it - from the upload.php code).
Dropzone doesn't how the RemoveImage link
I used Dropzone because I don't think Summernote can upload other files like pdf, word.
mainpage.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="dropzone.css" rel="stylesheet">
<script src="dropzone.js"></script>
<!-- Summernote css -->
<link href="../plugins/summernote/summernote.css" rel="stylesheet" />
<!-- Select2 -->
<link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<!-- Jquery filer css -->
<link href="../plugins/jquery.filer/css/jquery.filer.css" rel="stylesheet" />
<link href="../plugins/jquery.filer/css/themes/jquery.filer-dragdropbox-theme.css" rel="stylesheet" />
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../plugins/switchery/switchery.min.css">
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="wrapper">
<!-- Start content -->
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="page-title-box">
<h3>Postare raspuns</h3>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="p-6">
<div class="">
<form id="myAwesomeDropzone" class="dropzone" action="upload.php" method="POST" style="border:none" novalidate>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-b-30 m-t-0 header-title"><b>Textul postarii</b></h4>
<textarea class="summernote" name="postdescription" id="postdescription" required></textarea>
</div>
</div>
</div>
<h4 class="m-b-30 m-t-0 header-title"><b>Ataseaza fisiere</b></h4>
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<br>
<input type="submit" name="pos" id="pos" value="Postare" class="btn btn-success btn-block" form="myAwesomeDropzone" />
<br>
<br>
<div class="btn btn-info btn-block">
Inapoi la subiect
</div>
</div>
</div>
<!-- end p-20 -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
<!-- content -->
</div>
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="../plugins/switchery/switchery.min.js"></script>
<script src="../plugins/summernote/summernote.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../plugins/jquery.filer/js/jquery.filer.min.js"></script>
<script src="assets/pages/jquery.blog-add.init.js"></script>
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 240,
minHeight: null,
maxHeight: null,
focus: false,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['view', ['fullscreen', 'codeview', 'help']]
],
popover: {
air: []
}
});
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
url: upload.php,
uploadMultiple: true,
parallelUploads: 20,
maxFiles: 20,
addRemoveLinks: true,
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("#pos").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(data, xhr, formData) {
//Add additional data to the upload
formData.append("postdescription", jQuery("postdescription").val());
});
this.on("success", function(file, responseText) {
console.log('dfd');
});
}
}
});
</script>
<script src="../plugins/switchery/switchery.min.js"></script>
<!--Summernote js-->
<script src="../plugins/summernote/summernote.min.js"></script>
</body>
</html>
upload.php :
<?php
if(!empty($_FILES)){
foreach($_FILES['file']['name'] as $key=>$val){
$file_name = $_FILES['file']['name'][$key];
// get file extension
$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
// get filename without extension
$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
if (!file_exists(getcwd(). '/uploads')) {
mkdir(getcwd(). '/uploads', 0777);
}
$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
}
else
{
echo "1";
}
?>
For question 3:
I tried this to see if upload.php really doesn't get any files, so I tried displaying an alert if the Dropzone Queue doesn't exist. But, when I click the submit button, it takes me to upload.php without displaying any alert.
if (myDropzone.getQueuedFiles().length > 0) {
alert("yes");
}
else
{
alert("error")
}
Related
I am making a sample project of Visa Consultancy Software, I am using Javascript, HTML, CSS and Bootstrap and I want to open new page on clicking the home div but I am getting a error i.e eventlistner is null. Kindly help me making my code correct.
JAVASCRIPT FILE
document.querySelector(".btn").addEventListener('click', (e)=>{
document.querySelector(".forget").innerHTML="";
document.querySelector(".password").innerHTML="";
document.querySelector(".email").innerHTML="";
var mail = document.getElementById("maile").value;
var password = document.getElementById("pasw").value;
if (mail == "" && password== "") {
document.querySelector(".forget").innerHTML="Please enter the email id and password";
}
else if (password == "") {
document.querySelector(".password").innerHTML="Please enter the password.";
}
else if (mail==""){
document.querySelector(".email").innerHTML="Please enter the e-mail id";
}
else if (mail=== "himanshusingla256#gmail.com" && password==="1234")
{
window.open("file:///C:/Users/DITSPC3/Desktop/Visa%20Consultancy/Navigation.html");
}
else
{
document.querySelector(".forget").innerHTML="Incorrect email or password";
}
e.preventDefault();
});
function Sidebar()
{
// Container
var onediv= document.createElement('div');
onediv.className= "container1";
onediv.style.background = "lightgray";
onediv.id = "block";
onediv.style.width="20%";
onediv.style.color="white";
onediv.style.overflow="hidden";
onediv.style.display= "inline-block";
document.body.appendChild(onediv);
// row
var row= document.createElement('div');
row.className= "row";
row.id= "row1";
row.style.overflow="hidden";
document.body.appendChild(onediv).appendChild(row);
// column
var one8 = document.createElement('div');
one8.innerHTML="Home";
one8.className="col1 home";
one8.style.fontSize="35px";
one8.style.overflow="hidden";
one8.style.height="158px";
one8.style.paddingLeft="25px";
one8.id="block1";
document.body.appendChild(onediv).appendChild(one8);
var o1= document.createElement('div');
o1.innerHTML="Appointment";
o1.className="col1 appointment";
o1.href="index.html" ;
o1.style.overflow="hidden";
o1.style.fontSize="35px";
o1.style.height="158px";
o1.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o1);
var o2= document.createElement('div');
o2.innerHTML="Manage Documents";
o2.className="col1 document";
o2.style.height="158px";
onediv.style.overflow="hidden";
o2.style.fontSize="35px";
o2.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o2);
var o3= document.createElement('div');
o3.innerHTML="Courses";
o3.className="col1 course";
o3.style.fontSize="35px";
o3.style.overflow="hidden";
o3.style.height="158px";
o3.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o3);
var o4= document.createElement('div');
o4.innerHTML="Applicant Data";
o4.className="col1 applicant";
o4.style.fontSize="35px";
o4.style.overflow="hidden";
o4.style.height="158px";
o4.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o4);
var o5= document.createElement('div');
o5.innerHTML="Log-Out";
o5.className="col1 out";
o5.style.fontSize="35px";
o5.style.overflow="hidden";
o5.style.height="158px";
o5.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o5);
}
// Sidebar();
document.getElementsByClassName(".home").addEventListener('click', ()=> {
window.open("home.html");
});
Navigation Index File
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation Bar</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="logo" onload="Sidebar()">
<div class="container" style="max-width: 100%;">
<div class="row" >
<div class="col">
<h5> E-mail= Himanshusingla256#gmail.com</h5>
</div>
<div class="col">
<h5> Contact= 7589832256</h5>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Login Index File
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<title> Singla Visa Consultancy</title>
</head>
<body class="log">
<div class="container2">
<div class="row">
<h1> Visa Consultancy Software </h1>
</div>
<div class="row1">
<form >
<!-- <div class="form-group"> -->
<label for="exampleInputEmail1" style="color: white;">E-mail:</label>
<input type="text" class="form-control" placeholder="E-mail" id="maile">
<label for="email" class="email" style="color: red;"></label>
<!-- </div> -->
<br>
<!-- <div class="form-group"> -->
<label for="exampleInputPassword1" style="color: white;">Password:</label>
<input type="password" class="form-control" placeholder="password" id="pasw" >
<!-- <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->
<label for="passw" class="password" style="color: red;"></label>
<!-- </div> -->
<br>
<div class="row">
<div style="color: seashell;margin-left: 5% ;">Forget Password?
<br>
<label for="forget" class="forget" style="color: red;"></label>
</div>
</div>
<button type="submit" class="btn btn-success" style="background: transparent;">Login</button>
<br>
<br>
<h6 style="color: white; text-align: right;">Not registered? Create an account</h6>
</form>
</div>
</div>
</body>
<!-- <script src="bootstrap.min.js" type="text/javascript.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="app.js"></script>
</html>[enter image description here][1]
The method document.getElementsByClassName(".home") returns an HTML Collection which don't have an addEventListener method on it, you will need to iterate over each item in the collection and bind it yourself. Also, you don't use the . in the name of the class, so it would be something lke this:
const allElements = document.getElementsByClassName("home"); // <-- No dot in the name
allElements.forEach(home => home.addEventListener('click', () => {
// Do what you want here
window.open("home.html");
})
);
Alternatively, if you know that you will only get one element with that class name or you are only interested in the first element, you can use the querySelector method instead, like so:
document.querySelector(".home").addEventListener('click', () => {
// Do what you want here
window.open("home.html");
});
I got an error when trying to create daterangepicker, I did exactly as instructed on https://www.daterangepicker.com, but it didn't work. What this erro? How to fix this erro? I have just started learning js recently, please can you give me a detailed guide. Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link href="static/html/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="static/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet">
<link href="static/html/css/animate.css" rel="stylesheet">
<link href="static/html/css/style.css" rel="stylesheet">
<link href="static/html/css/colors/default.css" id="theme" rel="stylesheet">
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(function() {
$('input[name="date_times"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'MM/DD/YYYY HH:mm'
}
});
});
</script>
<script>
function submitDate() {
document.getElementById("frm1").submit();
}
</script>
<style>
div.set_height {
height: 100px;
}
</style>
</head>
<body class="fix-header">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7 white-box set_height">
<h3 class="box-title">Historical Table</h3>
<p class="text-muted"> Data will be saved every 30 minutes</p>
</div>
<div class="col-sm-5 white-box set_height">
<form id="frm1" method=POST action="{{ url_for('get_history') }}">
<h3 class="box-title"> Filter :
<input type="text" placeholder="M/D/Y H:m - M/D/Y H:m" name="date_times"/>
<button type="submit" onclick="submitDate()" style=background-color:#e7e7e7;color:blue;>Submit</button>
</h3>
</form>
<p class="text-muted">Select date and time</p>
</div>
</div>
</div>
<footer class="footer text-center"> © Dashboard Pepple Counting </footer>
<script src="static/plugins/bower_components/jquery/dist/jquery.min.js"></script>
<script src="static/html/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="static/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.js"></script>
<script src="static/html/js/jquery.slimscroll.js"></script>
<script src="static/html/js/waves.js"></script>
<script src="static/html/js/custom.min.js"></script>
</body>
</html>
I have a modal using custombox that works using a button :
<html>
<head>
<link href="assets/plugins/custombox/dist/custombox.min.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="accordion-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="panel-group panel-group-joined" id="accordion-test">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne" class="collapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<!-- Modal-Effect -->
<script src="assets/plugins/custombox/dist/custombox.min.js"></script>
<script src="assets/plugins/custombox/dist/legacy.min.js"></script>
<!-- App js -->
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
</body>
</html>
I am trying to initiate this modal inside jquery, inside a datatables button with no luck.
This is the part of the code in my function :
buttons: [
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
Custombox.open({
target: '#accordion-modal',
effect: 'fadein'
});
e.preventDefault();
}
}
]
The code above works to open other simple modals but not this one. This has to do I guess with the
data-toggle="modal" data-target="#accordion-modal"
that is contained in the button. From what I understand the data-target is replaced by "target" in js, but the data-toggle is not triggered anywhere. How do I trigger it properly? I attempted to initiate it with $('#accordion-modal').modal('show') but I am not sure where exactly I should put this. If I put it in the beginning it just flashes for a second
Looks like I only needed :
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
$('#accordion-modal').modal('show');
e.preventDefault();
}
}
Jquery is not working. when, have not add it js in other page. Here, I present small example. I have 2 pages(index.html and about.html). Slideshow banner add in index page. but, banner is not available in about page. So, if, I have not add banner js(owl.carousel.min.js) in about page. So, Other jquery(back to top function) is not work in about page.
Here, I know, I can add slideshow jquery function in index page & remove from custom.js file. So, It is working fine. but, I don't want. because, this is small example. Our site is big(lots of page & js).
what can i do?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>HomePage</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<div class="owl-carousel">
<div class="item"> <img src="image/image1.jpg" alt="" /></div>
<div class="item"> <img src="image/image2.jpg" alt="" /></div>
</div>
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
custom.js
$(document).ready(function(){
//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
});
//
});
Include the owl.carousel.min.js file in the about page as well.
--About Page--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
Edit the custom js with the following
$(document).ready(function () {
//====== Slideshow ======//
if($('.owl-carousel').length > 0){
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
}
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function () {
jQuery('html, body').animate({
scrollTop: 0
}, 'slow');
});
});
keeping the owl slider script inside the condition will solve your issue.
App = Em.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.resource('login');
this.resource('posts');
this.resource('index');
});
App.PostsRoute = Ember.Route.extend({
});
App.LoginController = Ember.Controller.extend({
reset: function(){
this.setProperties({
username : "",
password : ""
});
},
loggedIn: localStorage.loggedIn,
loggedInChanged: function(){
localStorage.loggedIn = this.get('loggedIn');
}.observes('loggedIn'),
login : function(){
var self = this, data = this.getProperties('username', 'password');
console.log(data);
console.log(JSON.stringify({"args" : data }));
$.ajax({
type: "POST",
url : "/auth/login",
data: JSON.stringify({"args" : data }),
complete: function(data, textStatus, jqXHR){
if(data.status != 200){
$('#alert').fadeIn();
setTimeout(function(){
$('#alert').fadeOut();
}, 5000);
}
else{
self.set('loggedIn',true);
var attemptedTransition = self.get('attemptedTransition');
if(attemptedTransition){
attemptedTransition.retry();
self.set('attemptedTransition',null);
}
else{
self.transitionToRoute('posts');
}
console.log("yay!");
}
},
dataType: "application/json",
contentType : "application/json"
});
}
});
/////////HTML////
<!DOCTYPE html>
<html class="login">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet">
--><link rel="stylesheet" href="css/normalize.css">
<link href="css/bootstrap_cosmo.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-tagmanager.css">
<link rel="stylesheet" type="text/css"
href="css/typeahead.js-bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/json2.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.4.js"></script>
<script src="js/libs/jquery.color-2.1.2.min.js"></script>
<script src="js/libs/bootstrap.js"></script>
<script src="js/libs/bootstrap-tagmanager.js"></script>
<script src="js/libs/ember-1.0.0-rc.6.1.js"></script>
<script src="js/libs/Router.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="login">
<div class="login">
<div id="curves" >
<canvas id="canvas" width="1500" height="1500"/>
</div>
<div class="navbar">
<div class="navbar-inner ">
<a class="brand " href="#"><img class="logo"
src="/static/images/logo.png"></a>
</div>
</div>
{{#linkTo 'posts'}}<button>Test</button>{{/linkTo}}
<div class="container-fluid login">
<div class="row">
<div class="span3" id="leftCol">
<form id="login-form" class="login-form" {{action login on="submit"}}>
<label class="control-label" for="inputUsername">Username</label>
{{input id="inputUsername" value=username type="text" placeholder="Username" class="form-control"}}
<label class="control-label" for="inputPassword">Password</label>
{{input value=password type="password" placeholder="Password" class="form-control"}}
<div class="checkbox">
<label>
{{input type="checkbox"}} Remember Me
</label>
</div>
{{input class="btn btn-primary" type="submit" value="Sign in"}}
</form>
<h3>Or</h3>
<div class="tm-tag tm-tag-success">
<button type="submit" class="btn btn-primary" onClick="parent.location='register.html'">Register!</button>
</div>
</div>
<div class="span9">
<div id="alert" class="alert hidden">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Incorrect Login info.</h4>
</div>
<div class="info-box tm-tag">
</div>
</div>
</div>
</div>
</div>
<script src="js/login.js"></script>
</script>
<script type="text/x-handlebars" data-template-name="posts">
<h2>test</h2>
</script>
My transitions are giving me DOM Exceptions. Whether explicitly calling transitionTo or calling using linkTo. I can't spot any errors with the code. Everything compiles and I get no javascript errors until I click the button or submit the form(with success).
I'm not sure if the login script inside the handlebars template is kosher.
I figured it out. I was including a script tag inside my handlebars template. Apparently that's not allowed.