I am trying to implement a popup contact form on a HTML site, and I'm running into a js conflict. I'm stuck with how to get everything on the site to work, because removing some of the js calls causes certain functionality to stop working. I'm sure for this community of experts, my error is probably evident and simple; nonetheless I could really use some help figuring it out. I've included my code below.
Thanks in advance!
<!DOCTYPE html>
<html lang="en"><!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Basic -->
<title>iMAR Affiliate</title>
<meta content="DSA79" name="author" />
<meta content="responsive, html5 template, one page, landing, startup, business, company, corporate, creative" name="keywords" />
<meta content="iMAR Affiliate" name="description" /><!-- Mobile Specific Metas -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /><!-- Libs CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/owl.carousel.css" rel="stylesheet" /><!-- On Scroll Animations -->
<link href="css/animate.css" rel="stylesheet" /><!-- Template CSS -->
<link href="css/style.css" rel="stylesheet" /><!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet" /><!-- Image Slider -->
<link href="js-image-slider.css" rel="stylesheet" type="text/css" /><!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="html5ModalContact.css">
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$().html5ModalContact({
// Popup Config
method: "post",
action: "process_form.php",
shadow: "#FFFFFF",
opacity: 70,
advanced_close: false,
// Fields Enabled
firstn_on: true,
lastn_on: false,
email_on: true,
subject_on: true,
phone_on: false,
// Field Labels
firstn_label: 'Your First Name',
lastn_label: 'Your Last Name',
email_label: 'Your Email Address',
subject_label: 'Message Subject',
phone_label: 'Your Phone Number',
message_label: 'Message',
submit_label: 'Submit',
close_label: 'Close',
// Other
subject_values: 'General,Technical,Feedback,Comments,Help and Support'
});
});
</script>
</head>
<body><!-- HEADER
============================================= -->
<header id="header">
<div class="navbar navbar-fixed-top">
<div class="container"><!-- Logo & Responsive Menu -->
<div class="navbar-header"><button class="navbar-toggle" data-target="#navigation-menu" data-toggle="collapse" id="nav-toggle" type="button"><span class="sr-only">Toggle navigation</span></button><a class="navbar-brand" href="#top-page-banner"><img alt="logo" role="banner" src="img/iMAR2014Logo.png" /></a></div>
<!-- /.navbar-header --><!-- Navigation -->
<nav class="collapse navbar-collapse" id="navigation-menu" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="selected-nav" href="#intro" id="GoToHome">Home</a></li>
<li>About</li>
<li>Brochure</li>
<li>Benefits</li>
<li>FAQ</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- /.navbar-collapse --></div>
<!-- /.container --></div>
<!-- /.navbar --></header>
<!-- END HEADER --><!-- CONTENT WRAPPER
============================================= -->
<div id="content-wrapper"><!-- ABOUT-1
============================================= -->
<footer id="footer">
<div class="container">
<div class="row"><!-- Footer Navigation -->
<div class="col-sm-6 col-md-4" id="footer_nav">
<ul class="footer-nav clearfix">
<li>Contact</li>
<li>Help</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
<div id="footer_copy">
<p>© iMAR Entertainment Inc. 2007-2014</p>
</div>
</div>
<!-- End Footer Navigation --><
<div class="col-md-4">
<div class="col-sm-12" id="newsletter_form">
<div class="clearfix">
<form action="newsletter.php" class="subscribe-form pull-right" id="subscribe-form" method="post"><input class="subscribe-input" name="email" placeholder="Enter your e-mail address..." type="email" /><button class="subscribe-submit" type="submit">Subscribe</button></form>
</div>
<p class="pull-right" id="newsletter-paragraph">Join our newsletter subscription, be always informed</p>
</div>
</div>
<!-- End Newsletter Form --></div>
<!-- End row --></div>
<!-- End container --></footer>
<!-- END FOOTER --></div>
<!-- END CONTENT WRAPPER --><!-- EXTERNAL SCRIPTS
============================================= --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><script src="js/retina.js" type="text/javascript"></script><script src="js/modernizr.custom.js" type="text/javascript"></script><script src="js/jquery.easing.js" type="text/javascript"></script><script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script><script src="js/jquery.validate.min.js" type="text/javascript"></script><script defer src="js/jquery.flexslider.js" type="text/javascript"></script><script src="js/jquery.accordion.source.js" type="text/javascript"></script><script src="js/owl.carousel.js" type="text/javascript"></script><script src="js/waypoints.min.js" type="text/javascript"></script><script src="js/animations.js" type="text/javascript"></script><script src="js/custom.js" type="text/javascript"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]--><!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. --><!--
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
--></body>
</html>
You are probably loading a jQuery extension before you are loading jQuery.
Change the order of your script tags to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.html5ModalContact.js"></script>
Then the Can't find variable jQuery & TypeError: undefined is not a function (evaluating '$().html5ModalContact') error should be gone.
Related
and greetings. I'm trying to get converse to work in embedded mode, so there is a 'full screen' version that doesn't take up the entire page. I'm having issues, where the converse control box grows outside of the area I've assigned, but there is no scroll bar to view it.
I've tried a lot of things, setting dimensions, width and height, changing dimensions, and it doesn't fix the issue. I was wondering if someone could tell me what I'm doing wrong. The webpage code is listed below.
<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Custom fonts for this template-->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">
<link href="/css/PEC_global.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/9.0.0/dist/converse.css">
<script src="https://cdn.conversejs.org/9.0.0/dist/converse.js" charset="utf-8"></script>
<!--script src="/vendor/converse/dist/converse.js"></script-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
<style>
.converse-container {
height: 80vh;
}
</style>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper" style="height:100vh;">
<!-- Sidebar -->
<?php require($_SERVER["DOCUMENT_ROOT"] . '/navBar.php'); ?>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<div class="row">
<div class="col-9">
<div class="converse-container">
<converse-root></converse-root>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<!-- Bootstrap core JavaScript-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="/js/sb-admin-2.min.js"></script>
<!-- custom JS for PEC -->
<script src="/js/PEC.js"></script>
</body>
<script>
var tabulatorTable = null;
$(document).ready(function() {
converse.initialize({
default_domain: "XXXXXXX",
bosh_service_url: 'XXXXXXXXX',
view_mode: 'embedded',
message_archiving: 'always',
auto_login: true,
auto_reconnect: true,
credentials_url: 'XXXXXX',
clear_cache_on_logout: true,
notify_all_room_messages: true,
play_sounds: true,
allow_contact_removal: false,
//allow_logout: false,
allow_muc_invitations: false,
allow_registration: false,
allow_contact_requests: false,
send_chat_state_notifications: false,
//blacklisted_plugins: ['converse-fullscreen'],
});
});
</script>
I have an already existing site and I want to place a popup window that would let a user enter their name and email if they want to be contacted. There's an option to close the popup if you don't desire to be contacted.
It works well on all other places but when I put it on my remote server it conflicts with the page. Below is the code.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="target" content="Primary School">
<meta name="Classification" content="Nursery School">
<meta name="Description" content="academy prides itself as home to up to date modern facilities and a concise learning system that has been created to maximise the learning experience for your ward.">
<meta name="Keywords" content="Primary School In, Primary School, Nursery School In , Nursery School In , Primary School In , Nursery School In ">
<title> - Primary School, Nursery School, Primary School</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script type="text/javascript" src="verticalscroller.js"></script>
<link href="css/js-image-slider.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/slider_main.css">
<script src="bootstrap/jhoverstatemob.js"></script>
<script src="bootstrap/facslider.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/searchmarch.js"></script>
<script src="bootstrap/auto_cycle.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="flexy-menu.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".flexy-menu").flexymenu({speed: 400,type: "vertical", indicator: true});});</script>
<link href="flexy-menu.css" rel="stylesheet">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<link href="modal.css.css" rel="stylesheet">
<form action="sendresults1.php" method="post" id="form_pp" >
<div id="Modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-header" style="margin-top:120px;">
<div class="modal-body" >
<div class="form-group">
<input class="form-control" placeholder= "YOUR FULL NAME" name="name" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder= "YOUR EMAIL ADDRESS" name="email" type="Phone number"a>
</div>
<button type="submit" class="btn btn-default " style="color:#c13b01" id="btn_send" >SEND</button>
<button type="button" class="btn btn-default" style="color:#c13b01" id="btn_cancel" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(window).load(function(){
$('#Modal').modal('show');
});
</script>
<script>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="jquery.bxslider.css" type="text/css" />
<script src="/js/jquery.min.js"></script>
<script src="jquery.bxslider.js"></script>
<script src="rainbow.min.js"></script>
<script src="scripts.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36499930-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body style="background-color:#EEE;">
<div id="general_container">
<div id="header">
</div>
<div id="menu2">
<?php include("menu.php") ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
<div id="container">
<div id="banner">
<ul class="bxslider">
<li><img style="width:100%" src="images/12106739_1690926401119209_2191482622687128165_n.jpg" /></li>
<li><img style="width:100%" src="images/12088542_1690925387785977_5181459114852166975_n.jpg" /></li>
<li><img style="width:100%" src="images/12115497_1690998707778645_8753366621948913051_n.jpg" /></li>
</ul>
</div>
<div class="banner_caption"><p>Welcome to <br>SANG BLEU ACADEMY</p></div>
<div id="text_area">
<div class="text_area_right">
<div class="text_area_about">
<div class="about_content">
<div class="about_content_img"></div>
<p style="margin-top:-4px;">
Sang Bleu academy prides itself as home to up to date modern facilities and a concise learning system that has been created to maximise the learning experience for your ward. It will be a privilege to me and my team of dedicated staff to guide your ward in their journey of learning and development.</p>
Read More
</div>
<div class="about_login">
<img src="images/admission.jpg" />
<h1 style="font-size:18px; background-color:#FF670F; color:#FFF; font-weight:normal; padding-left:15px;">ADMISSION FORMS</h1>
</div>
</div>
<div class="gallery_content">
<div class="gallery_content_div">
<h1>SCHOOL GATEWAY</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<img src="images/payment.fw.png" style="margin-top:-15px;"/>
</div>
<div class="gallery_content_div">
<h1>HEALTHY & STAYING SAFE</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<P>Your child's safety and well being are our first priority. </P>
</div>
<div class="gallery_content_div" style="margin-right:0px;">
<h1>POSITIVE CONTRIBUTION</h1>
<img src="images/line.jpg" style="margin-top:-35px;"/>
<p>We focus on fun and creativity which gets children thinking for themselves.</p>
</div>
</div>
</div>
<div class="text_area_left">
<?php include("login.php") ?>
</div>
</div>
</div>
</div>
<?php include("footer.php") ?>
</body>
</html>
You are using twice Jquery/Css files in your page, please make sure you are using correct sequence and required js/css.
In your above code your are using extra files please remove
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap-theme.min.css">
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/jquery.min.js"></script>
And check properly all required js/css.
I am writing a jQuery mobile app that contains two HTML pages. When user navigates from index.html page to search.html page, jQuery should load elements into search.html page.
However, things seems to gone wrong. The script doesn't work as expected.
index.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from name
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from dept. list
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
default.js (loaded the last)
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading( "show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading( "hide" );
});
Things seems to be nice when the "search" page div is placed inside index.html (and the code is linked in single page, not two). However it does break when I tried splitting up the files into two files.
Anything I can do to fix this?
Well, solved...
Even though the div is on the same file, when using $(document).on("pageshow",src,function(){...}); to point to src, makes sure that src points to the div ID, not the file itself.
In this case, it's $(document).on("pageshow","#search",function(){...});.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am working on a Web App using Angular, Bootstrap, and templated off of Ace Admin (Responsiveness template). On the PC, in Chrome and FireFox everything works fine. When we shrink the window or use the Responsive Design Review the sidebar navigation changes to a menu button and works appropriately. However when we bring the site up on a table or phone (Chrome or Firefox browswers), the menu button is visible, but doesn't respond. Any ideas? Here is my opening HTML page, the only thing I have left off is the javascript for my app. The rest is here.
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>DISCUS Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="resources/ace/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/font-awesome.min.css">
<!-- page specific plugin styles -->
<link rel="stylesheet" href="resources/ace/assets/css/jquery-ui.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/datepicker.css">
<link rel="stylesheet" href="resources/ace/assets/css/ui.jqgrid.css">
<!-- text fonts -->
<link rel="stylesheet" href="resources/ace/assets/css/ace-fonts.css">
<!-- ace styles -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.min.css" id="main-ace-style">
<!-- ngModal styles -->
<link rel="stylesheet" href="resources/ng-modal/ng-modal.css">
<!-- TEST DRIVE STYLES (Determine to keep or throw away) -->
<link rel="stylesheet" href="resources/ng-grid/ng-grid.css">
<!-- DSC styles -->
<link rel="stylesheet" href="styles/ng-style.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-part2.min.css">
<![endif]-->
<link rel="stylesheet" href="resources/ace/assets/css/ace-skins.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/ace-rtl.min.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-ie.min.css">
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="resources/ace/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="resources/ace/assets/js/html5shiv.min.js"></script>
<script src="resources/ace/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<!--<body class="no-skin">-->
<body class="skin-1" data-ng-controller="MainController">
<ng-include src="'views/navbar.html'"></ng-include>
<div class="main-container" id="main-container">
<div id="sidebar" class="sidebar responsive" data-ng-show="user">
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'fixed')
}
catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div>
<!-- /.sidebar-shortcuts -->
<div ng-include src="'views/sidebar.html'"></div>
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'collapsed')
}
catch (e) {
}
</script>
</div>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div ng-view></div>
<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.page-content -->
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='resources/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="resources/ace/assets/js/ace.min.js"></script>
<script src="resources/ace/assets/js/ace-elements.min.js"></script>
<!-- inline scripts related to this page -->
<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.onpage-help.css"/>
<link rel="stylesheet" href="resources/ace/docs/assets/js/themes/sunburst.css"/>
<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script type="text/javascript" src="resources/ace/assets/js/ace/elements.onpage-help.js"></script>
<script type="text/javascript" src="resources/ace/assets/js/ace/ace.onpage-help.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/rainbow.js"></script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/generic.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/html.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/css.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/javascript.js"></script>
<!--<script type="text/javascript" src="resources/ace/assets/js/jquery.min.js"></script>-->
<script type="text/javascript" src="resources/ace/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="resources/angular/angular.js"></script>
<script type="text/javascript" src="resources/angular/angular-route.js"></script>
<script type="text/javascript" src="resources/angular/xeditable.js"></script>
<script type="text/javascript" src="resources/angular/angular-local-storage.js"> </script>
<script type="text/javascript" src="resources/angular/angular-resource.js"></script>
<script type="text/javascript" src="resources/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="resources/angular/angular-translate.js"></script>
<script type="text/javascript" src="resources/angular/angular-touch.js"></script>
<script type="text/javascript" src="resources/angular/angular-animate.js"></script>
<script type="text/javascript" src="resources/Smart-Table.debug.js"></script>
<script type="text/javascript" src="resources/ui-bootstrap-tpls-0.11.0.min.js"> </script>
<script type="text/javascript" src="resources/ng-modal/ng-modal.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/lodash.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/highlight.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angular-highlightjs.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angularjs-dropdown-multiselect.js"></script>
<script type="text/javascript" src="resources/pdfjs-mod/pdf.js"></script>
<script type="text/javascript" src="resources/directives/angular-pdf.js"></script>
<script type="text/javascript" src="resources/directives/partials-css.js"></script>
<script type="text/javascript" src="resources/ui-layout/ui-layout.js"></script>
<script type="text/javascript" src="resources/ui-grid/ui-grid.js"></script>
<!-- The following are for exporting from ui-grid -->
<script type="text/javascript" src="resources/ui-grid/csv.js"></script>
<script type="text/javascript" src="resources/ui-grid/pdfmake.js"></script>
<script type="text/javascript" src="resources/ui-grid/vfs_fonts.js"></script>
<!-- TEST DRIVE SCRIPTS (Determine to keep or throw away) -->
<script type="text/javascript" src="resources/ng-grid/ng-grid-2.0.11.debug.js"></script>
<!-- DISCUS-NG Angular JavaScript -->
Most mobile browsers wait about 300ms after a tap-and-release before sending the click event.
Using the ngTouch module, which provides an ngClick replacement might solve this for you:
https://code.angularjs.org/1.2.25/docs/api/ngTouch/directive/ngClick
In searching Stack Overflow I found a somewhat related issue and did some trial and error. My issue turned out to be a conflict between Angular and the Ace Admin template. I ended up moving two Ace JavaScript calls to after the Angular calls (ace.min.js and ace-elements.min.js) and suddenly the toggled menu button works on PC and mobile device in both Firefox and Chrome.
I have been attempting to recreate the jQuery Cycle Plugin shown here. I am also using bootstrap 3. If I remove the line <script type="text/javascript" src="static/js/jquery.js"></script> then it works, however, I need this for my responsive nav-bar and really have no idea why it is doing this. Here is the source code: and the live page is here. I have been trying for several hours to get this and have just hit a brick wall.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" />
<link href="static/css/bootstrap-theme.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon"><title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-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 id="nav-home" href="./index.html" class="navbar-brand">Home</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li id="nav-resume"><a id="link" href="resume.html">Resume</a></li>
<li id="nav-projects"><a id="link" href="portfolio.php">Portfolio</a></li>
<li id="nav-contact"><a id="link" href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
</header>
<div id="wrap">
<div class="container">
<!--container is ended in footer tag.--><body>
<div class="slideshow">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
</div>
</div>
<!--
<div id="footer">
<div class="container">
<p1 class="text-muted credit">© 2013 michaelwashburnjr.com</p1>
</div>
</div>
-->
<!-- Includes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
</body>
</html>
[Edit] I am now using <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> instead of <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> and having the same error.
You are including jQuery twice in a way that is destroying the cycle plugin. You have:
<!-- include jQuery library --> // FIRST INCLUDE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> // SECOND INCLUDE
<script type="text/javascript" src="static/js/jquery.js"></script>
You should move all of your scripts to the bottom, and include them thusly:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
That way your second copy of jQuery doesn't destroy the plugins which were registered with the first copy.
The jQuery file you are loading is old, Bootstrap requires a higher version looking at their bower package "jquery": ">= 1.9.0"
https://developers.google.com/speed/libraries/devguide#jquery