Trouble with ng-repeat, getting "MainCtrl is not a function, got undefined" - javascript

Problem
I'm using foundation for Apps to create an Angular app. I'm having trouble with using ng-repeat to get the data I want to be presented from the object into the template home.html. Instead of getting the data, I see an error message in the console, which gives me {{business.name}} as opposed to the actually data.
Error message
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
I've included my Github repo below:
Link:: https://github.com/onlyandrewn/angular
app.js
(function() {
'use strict';
angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}];
});
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
})();
index.html (ng-app="application") lives here
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brandon Sun Business Directory</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink" style="padding: 0;">
<div class="primary condense menu-bar">
<div class="logo">
<img src="http://placehold.it/80x45" class="bdnsun" alt="">
<div class="social">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
</div><!-- /.social -->
</div><!-- /.logo -->
</div>
</div>
<div ui-view class="grid-content">
</div>
</div>
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
</body>
</html>
home.html (ng-controller="MainCtrl) lives here
---
name: home
url: /
---
<div class="grid-container">
<div class="hero">
<p class="sponsor">Sponsored by </p>
<img src="http://placehold.it/200x30" class="sponsors" alt="">
<h1>Business Directory</h1>
<div class="find">
<label for="looking">
<i class="fa fa-search"></i>
</label>
<input type="search" id="looking" placeholder="What are you looking for?">
<input type="submit">
</div><!-- /.find -->
<ul>
<li class="popular">Popular searches:</li>
<li>tk-category <span>|</li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category </li>
</ul>
</div><!-- /.hero -->
<div class="businesses">
<p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
<div class="options">
<div class="cat">
<div class="categories">
<div class="group">
<p class="name">Grade Level</p>
<div class="check">
<input type="radio" name=""><p>Auto</p>
<input type="checkbox" name=""><p>Restaurant</p>
<input type="checkbox" name=""><p>Other</p>
</div><!-- /.check -->
</div><!-- /.group -->
<div class="group">
<p class="name">School Type</p>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div><!-- /.check -->
</div><!-- /.group -->
</div><!-- /.categories -->
</div><!-- /.cat -->
</div><!-- /.options -->
</div><!-- /.businesses -->
<div class="buttons">
<button class="alp">Alphabetically</button>
<button class="exp">Expanded</button>
<button class="con">Condensed</button>
</div><!-- /.buttons -->
<div class="grid-block small-up-3" ng-controller="MainCtrl">
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
</div>
</div>


There is no "MainCtrl" in the Angular app called "application".
You have defined MainCtrl to be a part of MyApp. Was this a copy/paste error?
// Markup
ng-app="application">
...
ng-controller="MainCtrl">
// JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function($scope) {

Related

Javascript works for one of my html pages externally but does not work externally with the other pages (works internally with other pages)

For the html pages where the external javascript does not work, I put the js code in internally in the HTML file and it worked but what's the problem with the pages that can't do it without applying javascript in the HTML pages. The only page it works externally is in contact.html below. After that code is the sample1.html file where it does not work externally but only internally? What can I do to make it work externally? (javascript file is in the same folder)
contact.html
` <!--contact us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">Contact Us</title>
</head>
<body>
<!--header-->
<section class="header3">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Sponsor Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Contact Us</h1>
</div>
</section>
<!--inquiry box inspired from w3schools.com-->
<section class="box">
<div class="row">
<div class="box-col">
<form action="/action_page.php">
<div class="container">
<h1>Have Any Inquires?</h1>
<p>Fill out the form and our team will get back to you as soon as possible</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="inquiry"placeholder="Inquiry" name="name" required>
<p class="rq">*Required Field </p>
<input type="text" id="email2" placeholder="Email address" name="mail" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button1">Submit</button>
</div>
</form>
</div>
<div class="box-col">
<form name="form1" action="/action_page.php" onsubmit="required"()>
<div class="container">
<h1>Get A Estimated Quote</h1>
<p>This is just a estimate and our team will send a email with more detailed information</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="text" placeholder="Name" name="name3" required>
<p class="rq">*Required Field </p>
<input type="text" id="email" placeholder="Email address" name="mail3" required>
<p class="rq">*Required Field </p>
<input type="text" id="classNum" placeholder="How many different classrooms would you need" name="classrooms3" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button">Submit</button>
</div>
</form>
</div>
</div>
</section>
<!--end-->
<!-- offices(portion)-->
<section class="portion">
<h1>Our Offices</h1>
<div class="row">
<div class="portion-col">
<img src="images/city1.jpg">
<h3>Toronto Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city2.jpg">
<h3>Montreal Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city3.jpg">
<h3>Brampton Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>About Us</h1>
<br>
<br>
Learn More
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html>` </strike>
sample1.html page that doesn't work externally
<!--about us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">ClassPass An Interactive Classroom</title>
</head>
<body>
<!--header-->
<section class="header">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks" >
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Support Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Class Pass</h1>
<p>An Interactive Classroom</p>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
<script>
var icon2 = document.getElementById("icon2");
if(localStorage.getItem("theme") == null){
localStorage.setItem("theme", "light");
}
let localData = localStorage.getItem("theme");
if(localData=="light"){
icon2.src== "images/moon.png";
document.body.classList.remove("dark-mode");
}
else if(localData=="dark"){
icon2.src== "iamges/sun.png";
document.body.classList.add("dark-mode");
}
icon2.onclick = function(){
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")){
icon2.src="images/sun.png";
localStorage.setItem("theme","dark");
}
else{
icon2.src="images/moon.png";
localStorage.setItem("theme","light");
}
}
</script>
<!--sideblock-->
<section class="sideblock">
<div class="row">
<div class="side-col">
<h1>Our Mission</h1>
<p>Here at Class Pass we wanted to bring the classroom into the homes of students and teachers. We re-imagined the way students can interact with their classmates and teachers away from school. ClassPass is designed to offer students a wide varity of learning material through artifical intelligence based reccomended resources. At Class Pass we believe the future starts with the classroom. Important features: </p>
<div class="list">
<ul>
<br>
<li>AI Powered Resources</li>
<br>
<li>Interactive Online Community</li>
<br>
<li>Direct Communication To Teachers</li>
</ul>
</div>
</div>
<div class="side-col">
<img src="images/class1.jpg">
</div>
</div>
</section>
<!-- sub moving cards-->
<section class="sub">
<h1>Specififc features</h1>
<div class="row">
<div class="sub-col">
<img src="images/infopic1.png">
<div class="layer">
<h3>AI Powered Resources</h3>
<p>Class Pass uses the power of Artifical Intelligence to curate specialized resources to each student and teacher</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic2.jpg">
<div class="layer">
<h3>Interactive Online Community</h3>
<p>Students can communicate with their classmates and interact with cards work together</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic3.jpg">
<div class="layer">
<h3>Direct Communication To Teachers</h3>
<p>Parents and students can ask their teachers any questions anytime of the day</p>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>Interested In Our Vision?</h1>
<br>
<br>
Support Us
Contact Us
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html> </strike>

Javascript particle animated background

i am trying to use this :
http://jnicol.github.io/particleground/
to animate my existing webpage's body.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login - CloudMe - Responsive Web Hosting HTML Template</title>
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/morphext.css" />
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="javascript" href="javascript/app.js">
<link rel="stylesheet" href="css/owl.transitions.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="style.css" />
<script src="js/vendor/modernizr.js"></script>
<script type='text/javascript' src='../jquery.particleground.js'></script>
<script type='text/javascript' src='js/demo.js'></script>
</head>
<body class="login-page">
<!-- HEADER -->
<header class="login">
<div class="top">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<div class="logo">
<img src="images/logo.png" alt="" title=""/>
</div>
</div>
<div class="small-12 large-9 medium-9 columns">
<!-- NAVIGATION MENU AREA -->
<nav class="desktop-menu">
<ul class="sf-menu">
<li class="special"> <font size="4"><b>HOME</b>
<ul>
<li><font size="2"><font size="2"><b>FEATURES</li>
<li><font size="2"><b>SELECT A SERVER</li>
<li><font size="2"><b>TESTIMONIALS</li>
</ul>
</li>
<li class="special"><font size="4" class="special"><b>HOSTING</b>
<ul>
<li><font size="2"><b>GAME SERVERS</b></li>
<li><font size="2"><b>WEBSITE HOSTING</b></li>
<li><font size="2"><b>DEDICATED SERVERS</b></li>
</ul>
</li>
<li><font size="4" class="special"><b>SUPPORT</b>
</li>
<li class="current-menu-item"><font size="4" class="special"><b>LOGIN</b></li>
<li><font size="4"class="special"><b>CONTACT</b>
</li>
</ul>
</nav>
<!-- END OF NAVIGATION MENU AREA -->
<!-- MOBILE MENU AREA -->
<nav class="mobile-menu">
<ul>
<li>HOME</li>
<li>HOSTING
<ul>
<li>SHARED HOSTING</li>
<li>CLOUD VPS</li>
<li>DEDICATED SERVERS</li>
</ul>
</li>
<li>DOMAINS</li>
<li>PAGES
<ul>
<li>SUPPORT</li>
<li>LOGIN</li>
<li>TESTIMONIALS</li>
<li>TYPOGRAPHY</li>
</ul>
</li>
<li>BLOG
<ul>
<li>CATEGORY</li>
<li>SINGLE POST</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>
<!-- END OF MOBILE MENU AREA -->
</div>
</div>
</div>
</header>
<!-- END OF HEADER -->
<!-- LOGIN FORM -->
<div class="login-container" div id="particles">
<div class="row">
<div class="small-12 large-7 large-centered medium-7 medium-centered columns">
<div class="login-form">
<form method="post">
Email Address: <input type="text" name="username" size="50" />
Password: <input type="password" name="password" size="20" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="row">
<div class="small-12 columns">
<div class="contacts">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-map-marker"></i>
PORTLAND, OR, USA
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-mobile"></i>
+1 299-670-9615
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-comments"></i>
LIVE CHAT
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-envelope-o"></i>
E-MAIL US
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="footerlinks">
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Hosting Services</h2>
<ul>
<li>Shared Hosting</li>
<li>Managed VPS</li>
<li>Dedicated Services</li>
<li>Become a Reseller</li>
<li>Special Offers</li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Company</h2>
<ul>
<li>About us</li>
<li>Blog</li>
<li>Terms of Service</li>
<li>Acceptable Use Policy</li>
<li>Affiliates</li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Add-on Services</h2>
<ul>
<li>SSL Certificates</li>
<li>Dedicated IPs</li>
<li>Control Panel Licenses</li>
<li>WHMCS License</li>
<li>Migrations / Transfers</li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns">
<h2>CloudMe Newsletter</h2>
<p>Sign up for special offers:</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//audemedia.us7.list-manage.com/subscribe/post?u=b5638e105dac814ad84960d90&id=9345afa0aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<!--SOCIAL LINKS -->
<div class="social">
<div class="row">
<div class="small-12 columns">
<ul class="small-block-grid-1 large-block-grid-5 medium-block-grid-5">
<li class="facebook">FACEBOOK</li>
<li class="twitter">TWITTER</li>
<li class="googleplus">GOOGLE+</li>
<li class="linkedin">LINKEDIN</li>
<li class="pinterest">PINTEREST</li>
</ul>
</div>
</div>
</div>
<!-- END OF SOCIAL LINKS -->
<p class="copyright">© Copyright CloudMe, all rights reserved. </p>
</footer>
<!-- END OF FOOTER -->
<i class="fa fa-angle-up"></i>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/vendor/hoverIntent.js"></script>
<script src="js/vendor/superfish.min.js"></script>
<script src="js/vendor/morphext.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/vendor/jquery.animateNumber.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/masonry.pkgd.min.js"></script>
<script src="js/custom.js"></script>
<script>
var container = document.querySelector('.testimonialsContainer');
var msnry = new Masonry( container, {
// options
itemSelector: '.testimonial-item'
});
</script>
</body>
</html>
This is my current code , as you can see , i have given a div the id of "particles" in order to trigger to particle effect, and it works...
Kind of.
My webpage is now shifted down quite a lot , like this
https://gyazo.com/ca1e33a319111fd779e96ff890ec9b9b
As you can see everything has been pushed down the page by the particle effect. I have worked for hours to try and fix this and would appreciate any help anyone can offer. Thanks , James.

Buttons on any page inherited from Master firing. Not sure whats stopping it

Here is My Master Page Code. None of the buttons on any page inherited from this master is firing. I have no idea what could be stopping it. It's been killing my brains for 3 days. Help, Please? Tried creating new onClick methods etc. Buttons just wont fire. Something somewhere is stopping the button Fire and I;m not sure what it is
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.Master.cs" Inherits="ABSA.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABSA Property | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plottage Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="js2/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css2/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Different Multiple Form Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css3/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css3/font-awesome.css" rel="stylesheet"/>
<!-- //font-awesome icons -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"/>
<!-- //web font -->
</head>
<body>
<form id="form1" runat="server">
<!-- header -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="header-top-left">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+270000000</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>property#absa.co.za</li>
</ul>
</div>
<div class="header-top-left1">
<ul class="social-icons">
<li></li>
<li></li>
</ul>
</div>
<div class="header-top-right">
<div class="search">
<input class="search_box" type="checkbox" id="search_box"/>
<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
<div class="search_form">
<form action="#" method="post">
<input type="text" name="Search" placeholder="Search..."/>
<input type="submit" value=" "/>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<h1><a class="navbar-brand" href="Home.aspx">ABSA<span>Real Estate</span></a></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Absa Help Us Sell</li>
<li>Absa Properties</li>
<li>FAQ's</li>
<li><a id="modal_trigger" href="#modal" class="hvr-bounce-to-bottom modal_close2">Login</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<section id="SigninModal" class="popupBody" >
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close"><i class="fa fa-times "></i></span></p>
<h2>SIGN IN</h2>
<form id="signin" action="#" method="post">
<input type="text" name="Email" placeholder="Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" runat="server"/>
<input type="checkbox" id="brand" value="" runat="server"/>
<label for="brand" runat="server"><span></span> Remember me ?</label>
<asp:Button ID="btnLogin" type="submit" runat="server" Text="SIGN IN"/>
<div class="signin-agileits-bottom">
<p>Forgot Password ?</p>
<p><a class="modal_close" id="modal_trigger2" href="#modal2" runat="server">Register </a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //main -->
</section>
<section class="popupBody">
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal2" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close2"><i class="fa fa-times "></i></span></p>
<h3>REGISTER</h3>
<form id="register">
<input type="text" name="FirstName" placeholder="First Name" required="" runat="server"/>
<input type="text" name="LastName" placeholder="Last Name" required="" runat="server"/>
<input type="text" name="Contact" placeholder="Contact Number" required="" runat="server"/>
<input type="email" name="Email" placeholder="Your Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" />
<input type="checkbox" id="brand1" value="" runat="server"/>
<label for="brand1"><span></span>I accept the terms of use</label>
<asp:Button ID="btnRegister" runat="server" Text="REGISTER" OnClick="btnRegister_Click"/>
</form>
</div>
</div>
</div>
<!-- //main -->
</section>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$("#modal_trigger2").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close2" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#modal_trigger2").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
<!-- //header -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-2 footer-grid" style="font-size:12px">
<ul>
<li>Contact Us</li>
<li>Security Estates</li>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Site Map</li>
<li>Property for Sale By Suburb</li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/7.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 1
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/6.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 2
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/8.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 3
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid-instagram">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/10.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/6.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/7.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grid">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Johannesburg, South Africa</p>
<p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> property#absa.co.za</p>
<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+27000000</p>
</div>
</div>
<div class="clearfix"> </div>
<div class="footer-copy">
<p>© 2016 ABSA Ltd. All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</form>
</body>
</html>
I've Deleted Validation from the scripts but still nothing

First, you have to put some more info...It impossible to know what is really happening only by see some jquery and dependencies..
Second, (in chrome) right click on the element, click on "inspect", go to "Event Listeners" and click on "click".
You will see which are the event listeners of the buttons, and you will be able to investigate what is going on.

Add method="post" attribute to the first form tag and try again;
I mean;
<form id="form1" runat="server" method="post">

Ionic checkbox linked to image in showcase

I have a ionic checkbox, which I want to combine with a image, so when the user clicks on either the image or checkbox, it gets checked or unchecked.
Image is attached, the grey area would represent the image. Example image
the markup i have so far is:
<div class="col" style="padding-right:0px;">
<div class="list card">
<div class="item item-image">
<img src="img/xxx.png" style="width:100%; height:150px;">
</div>
<li class="item item-checkbox">
Lorem ipsum
<label class="checkbox">
<input type="checkbox" ng-model="xxxx['xxxx']">
</label>
</li>
</div>
</div>
Any ideas?

You could add an ng-click directive to images "switching" the variable used as model for <input> as shown below:
var app = angular.module('myApp', ['ionic'])
.controller('myController', function($scope) {
});
<html lang="en" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link rel="stylesheet" href="http://code.ionicframework.com/1.1.0/css/ionic.css">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="myController">
<ion-view title="view">
<ion-content>
<div class="row">
<div class="col-50" style="padding-right:0px;">
<div class="card">
<div class="item item-image" ng-click="value1 = !value1">
<img src="img/xxx.png" style="width:100%; height:150px;">
</div>
<li class="item item-checkbox">
Lorem ipsum 1
<label class="checkbox">
<input type="checkbox" ng-model="value1">
</label>
</li>
</div>
</div>
<div class="col-50" style="padding-right:0px;">
<div class="card">
<div class="item item-image" ng-click="value2 = !value2">
<img src="img/xxx.png" style="width:100%; height:150px;">
</div>
<li class="item item-checkbox">
Lorem ipsum 2
<label class="checkbox">
<input type="checkbox" ng-model="value2">
</label>
</li>
</div>
</div>
</div>
<hr/>
<pre>value1 = {{value1|json}}</pre>
<pre>value2 = {{value2|json}}</pre>
</ion-content>
</ion-view>
</body>
</html>

jQuery:Ajax Don't work loaded scripts

I have this code :
//--Async load page
$("body").on("click", "a:not([data-noajax])", function(){
href = $(this).attr("href");
pageLoad(href + " .page-wrapper", ".page-wrapper", href);
//$('#header').load(href+' #header');
//$('#footer').load(href+' #footer');
return false;
});
function pageLoad(from, where, href)
{
href = typeof href === 'undefined' ? "" : href;
loading();
//$(where).empty();
$(where).load(from, function(data){
loading(false);
$("html, body").animate({ scrollTop: $(".page-header h1").offset().top }, "slow");
title = $(".page-header h1").text();
parent.location.hash = href;
window.history.pushState($(document).html(), title, href);
document.title = title;
$(document).ready(function() {
$('.page-header h1').text(title);
})
});
}
//--
working, but....scripts which will load another page don't work ((
example : go on the http://amour05.ru , click on some post title, and after try reload page;
first we don't see comments widget, and after reload we see it.
p.s. sorry for my english ((
RIGHT SOURCE CODE :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device_width, initial_scale=1.0" />
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/style.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css" />
<script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body>
<div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input type="search" name="search_text" value="" class="search-query" placeholder="Поиск">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"
data-yashareTitle="кто знает расписание пересдач ..." data-yashareDescription ="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>" ></div>
</div>
</div>
<script type="text/javascript">
VK.init({apiId: 4092141, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "100%", attach: "*", mini: "auto"}, 1560 );
VK.Observer.subscribe("widgets.comments.new_comment", commentAdd);
VK.Observer.subscribe("widgets.comments.delete_comment", commentDel);
function commentAdd(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_add',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
function commentDel(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_del',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
</script>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">34</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">10</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter23555398 = new Ya.Metrika({id:23555398,
webvisor:true,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div>
</body>
</html>
GENERATED SOURCE :
<html data-savefrom-tab-data="{"module":"lm","tooltip":"Найдено ссылок: 0"}" lang="ru"><head>
<meta charset="utf-8">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device_width, initial_scale=1.0">
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/theme/style/style.css">
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css">
<script src="http://mc.yandex.ru/metrika/watch.js" async="" type="text/javascript"></script><script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body data-savefrom-link-count="20" style="background-image: url("/theme/style/loveimgs/4.jpg");">
<div title="Загрузка" style="max-width: 500px;" id="loading" class="i hide"><img src="/theme/style/imgs/busy.gif" alt="загрузка"> идет загрузка</div><div class="page-wrapper"><div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input name="search_text" value="" class="search-query" placeholder="Поиск" type="search">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yasharel10n="ru" data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetitle="кто знает расписание пересдач ..." data-yasharedescription="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>"></div>
</div>
</div>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">26</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">8</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div></div>
</body></html>

Categories

Resources