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.
Related
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>
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">
Hello I am trying to get a hidden navigation to display as a user starts to scroll down the page. The navigation will not display as the user scrolls. I am not exactly sure why it will not work. I am pretty sure it has something to do with the JavaScript or HTML. If not I can post the CSS as well but for now this is what I have..
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="language" content="english">
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/modernizr.js"></script>
<!-- jQuery -->
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- Foundation -->
<link rel="stylesheet" href="css/foundation.css">
<!-- Alert box -->
<script type="text/javascript" src="js/alertbox.js"></script><!--http://www.w3schools.com/js/js_cookies.asp-->
<!-- News ticker -->
<link href="li-scroller.css" rel="stylesheet" type="text/css">
<script src="jquery.li-scroller.1.0.js"></script>
<!-- Site style -->
<link rel="stylesheet" href="css/SiteStyle.css" />
</head>
<!-- Cookie / Body container -->
<body onload="checkCookie()">
<nav id="fixedbar">
<ul id="fixednav">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</nav>
<div class="large-1 columns void"> </div>
<div class="large-10 medium-12 small-12 columns siteContent">
<header>
<div class="large-12 medium-12 small-12 columns">
<div class="large-3 medium-3 small-12 columns">
<img src="img/logo.jpg" class="logo" alt="Main logo."/>
</div>
<div class="large-9 medium-9 small-12 columns userDash">
<div class="large-9 medium-8 small-12 columns userContainer">
<div id="userName">Sign In or Register
</div>
</div>
<div class="large-3 medium-4 small-12 columns cartContainer">
<img src="img/shoppingBag.svg" alt="Shopping bag icon" class="shoppingBagIcon"/><span> 0 </span><span class="shoppingBagText"> Items in your bag</span>
</div>
</div>
<div class="large-9 medium-9 small-12 columns tickerContainer">
<ul id="ticker01"><li><div>*** WELCOME TO NOVANI DESIGNS! **</div></li><li><div>* SIGN UP TODAY AND RECIEVE 25% OFF YOUR ENTIRE PURCHASE! **</div></li>
<li><div>* SPEND OVER $50 AND ENJOY FREE SHIPPING! ***</div></li></ul><script type="text/javaScript" src="js/newsscroll.js"></script>
</div>
<div class="large-12 medium-12 small-12 columns nav">
<div class="large-5 medium-5 small-12 columns">
<nav>
<ul class="mainNav">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</nav>
</div>
<div class="large-5 medium-5 small-12 columns">
<input type="text" style="height:1.5em;"/>
</div>
</div>
</div>
</header>
<footer style="height:100em;">
1
</footer>
</div>
<div class="large-1 columns void"> </div>
<!-- jQuery -->
<script src="js/vendor/jquery.js"></script>
<!-- Foundation -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<!-- News ticker -->
<script>$(function(){$("ul#ticker01").liScroll();$("ul#ticker02").liScroll({travelocity: 0.15});});</script>
<script type="text/javascript">
$(document).ready(function(){
$('#fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 210) {
$('#fixedbar').fadeOut(250);
}
});
});
</script>
</body>
</html>
delete following lines
<nav id="fixedbar">
<ul id="fixednav">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</nav>
I have js fiddle which works fine,
I tried to replicate it on my local system, where slider(menu icon) neither appears nor works. Here is my jsfiddle and source code, can anyone tell me what I missed.
Jsfiddle: https://jsfiddle.net/karimkhan/nzxd5r3r/10/
source code on local system:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Starter Template - Materialize</title>
<!--<link href="font/material-design-icons/Material-Design-Icons.ttf" rel="stylesheet">-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="css/materialize.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
</script>
</head>
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="js/init.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
You have to wait until the DOM has been initialized (document has been fully loaded). Wrap your slider code in something like this:
$(function() {
//code
});
Also, you're using an old version of jQuery in the code you posted which is incompatible with Materialize.js. Please use the latest version of jQuery 1.x (check here: https://developers.google.com/speed/libraries/#jquery)
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>