I have a bootstrap 4 page set up with collapsible accordion table. Each has a fa-plus-circle icon. When a user clicks on this button, that icon change into fa-minus-circle icon after that i clicked minus-circle icon or button definitely not turn into plus-circle icon. Plss help!
<link rel="stylesheet" href="../../assets/css/bs/bootstrap.css">
<link rel="stylesheet" href="../../assets/css/custom/custom.css">
<link rel="stylesheet" href="../../assets/css/bs/bootstrap.min.css">
<link rel="shortcut icon" href="../../assets/img/logo/logoCircle.png" type="image/x-icon">
<link rel="stylesheet" href="../../assets/css/fontawesome/all.css">
<link rel="stylesheet" href="../../assets/css/animate/animate.css">
<script type="text/javascript">
toggleCircle = function(e) {
if ($(e.children).attr("class").includes('down')) {
$(e.children).removeClass("fa-minus-circle");
$(e.children).addClass("fa-plus-circle");
} else {
$(e.children).removeClass("fa-plus-circle");
$(e.children).addClass("fa-minus-circle");
}
}
</script>
<div class="container">
<div class="row">
<div class="accordion col-12" id="accordionExample">
<div class="card">
<div class="card-header bg-light" id="headingOne">
<h2 class="mb-0">
<button class="btn text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" onclick="toggleCircle(this)" >
<span class="fa fa-plus-circle"></span>
How do I recover my account?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span>Were sorry to hear that! If you can't sign in to your Pandayan EGC Account.<br><br>
To reset your password:<br>
1. Go to the login page and you see the forgot your password and click that. Enter your email address click proceed.<br>
2. Once you click the proceed button go to your gmail account and there's an email. <br>
3. After that you create new password and click save changes. <br>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../assets/js/jquery/jquery-3.3.1.js"></script>
<script src="../../assets/js/popper/popper.min.js"></script>
<script src="../../assets/js/bs/bootstrap.min.js"></script>
<script src="../../assets/js/fontawesome/all.js"></script>
<script src="../../assets/js/backstretch/backstretch.js"></script>
<script src="../../assets/js/backstretch/backstretchSettings01.js"></script>
<script src="../../assets/js/bsn/bootstrap-notify.min.js"></script>
<script src="../../assets/js/general/loader.js"></script>
<script src="../../assets/js/general/login.js"></script>
<script src="../../assets/js/general/forgotpassword.js"></script>
<script src="../../assets/js/general/accountregister.js"></script>
Urge to say you don't need any JS at all! Just one line of CSS
.collapsed .fas:before {
content: "\f055"; /* https://fontawesome.com/cheatsheet */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<button class="btn text-dark collapsed" type="button " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<span class="fas fa-minus-circle"></span> How do I recover my account?
</button>
<div id="collapseOne" class="collapse">OU YEAH</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
And, logically, use <span class="fas fa-minus-circle"></span> if you start collapsed.
To explain, Bootstrap already danymically toggles the collapsed button class. So all the above does, is target that class using CSS, find the .fas icon and change it to the needed one.
Related
I am trying to create an application that allows users to select different subscription levels and pay based on the level they chose. I am using Stripe to handle payments, node.js for server logic, and ejs for rendering my html pages. So far, I am able to create customers and a subscription in Stripe using a sign up form that stores the user's info, however, the subscription is set as inactive by default. This means that after the users sign up, they will be redirected to a checkout page where they can input their credit card info, and I am trying to create the checkout form using the stripe elements. I am following this Stripe tutorial and docs directly from Stripe: https://stripe.com/docs/billing/subscriptions/build-subscription?ui=elements#collect-payment
However, the checkout page does not show any indication that the elements is being created as only a subscription button appears with no fields to input the card info. Here is my checkout page:
<% include('partials/header') %>
<body>
<form id="payment-form">
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-element-errors" role="alert"></div>
<button type="submit">Subscribe</button>
</form>
</body>
<!-- Copyright LFD Banner -->
<div class="container-fluid copyright-banner-container">
<p class="white-text">© Lonestar Firearm Defense 2021</p>
<a class="footer-link" href="resources">Resources</a>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script>
let stripe = Stripe('sk_test_123');
let elements = stripe.elements();
let style = {
base: {
// Add your base input styles here. For example:
fontSize: '50px',
color: '#32325d',
},
};
let card = elements.create('card', { style: style });
card.mount('#card-element');
</script>
</body>
</html>
Here is my partial header that includes the Stripe.js script:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lonestar Firearm Defense</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/styles.css">
<!-- Favicon -->
<link rel="icon" href="/images/lonestar.png">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5431d76b85.js" crossorigin="anonymous"></script>
<!-- Stripe.js script -->
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- Contact Banner -->
<div class="container-fluid contact-banner-container">
<div class="row">
<div class="col-md-6">
<i class="fas fa-map-marker-alt"></i>
<p>Dallas</p>
<i class="fas fa-phone-alt"></i>
(888)852-0762
<i class="far fa-envelope"></i>
info#lonestarfirearmdefense.com
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<!-- Nav Logo -->
<div class="container d-flex flex-nowrap">
<a class="navbar-brand" href="/">
<img src="/images/lfd-logo.png" alt="Lonestar Firearm Defense">
</a>
<!-- Nav Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Nav Links -->
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ul-navbar">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
<li>
<a class="nav-link" href="/#membershipPlansContainer">Membership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item">
<% if(user) { %>
<a class="nav-link" href="/user-panel">Hi, <%= user.firstName %></a>
<% } else { %>
<a class="nav-link" href="/register">Signup/Login</a>
<% } %>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
</ul>
</div>
</nav>
It is also weird that neither my navbar nor my footer is being rendered on this page even though they are coded in, so maybe that is an indication that the Stripe elements is working slightly. How can I properly create the checkout form using Stripe Elements?
I've been learning the Bootstrap framework, and today sat down to familiarize myself with the accordion module, but even when I simply copy and paste the code into my page, it does not display properly, and there is no functionality. I am assuming this has to do with a problem with the CDN...includes?...or a missing stylesheet, but I am at a loss as to which one, since I copied and pasted the necessary links directly from the bootstrap site. Maybe I missing something else. But other components work, such as the Card module, just no luck with the accordion Below is the code. Thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing Bootstrap</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/divPract.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="cotainer-fluid">
<div class="row">
<div class="col-lg-12">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I found the necessary cdn with a little more digging. This was what was needed:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
I am trying to combine bootstrap and fullpage.js to have a vertical scrolling website with a horizontal scroll section that is controlled by its own separate navigation. I an trying to implement a page section just like how this website (http://www.lottanieminen.com/) is done. I am trying to implement the horizontal scroll in the 'Portfolio' page. Here is my code:
`
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="author" content=" ">
<!-- Bootstrap CSS -->
<link href="img/mylogo.ico" rel="shortcut icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/fullpage.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<title>Stephanie Daniels</title>
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<img src="img/mylogo.png" alt="mylogo" style="display: inline-block;">
<span style="display: inline-block;"></span>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio" data-toggle="tab">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
</nav>
<section id="home">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="center">
<img src="img/nameheader.png" alt="nameheader" class="img-fluid" size="contain" width="40%" />
<div class="row">
<div class="col-12">
<img src="img/DesktopHomebox.png" alt="desktophomebox" class="img-fluid desktophomebox" size="contain" width="50%" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img src="img/about.png" alt="aboutme" class="img-fluid aboutme" margin="0px" />
</div>
<div class="col-sm-6">
<h1 align="center">ABOUT</h1>
<h2 align="center"> Hi! I’m Stephanie...</h2>
<p align="center" class="big">I am Nigerian and currently a second year student at the University of Kent, studying Digital Arts. I have always been interested in graphics and digitalised work but I decided I was going to turn this interest into profession by combining my ICT skills with my fine art skills. <br><br>I am quite proficient in a range of design software which include
<span class="software">Adobe Illustrator</span> and <span class="software">InDesign</span>. My interest lies more in designing than developing as I am a very visual-oriented person. <br><br>Also, I am very energetic, although I generally enjoy being indoors and working with other people. This is just a brief overview of myself. Feel free to explore the site!</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h1 align="center">PORTFOLIO</h1>
</div>
</div>
</div>
</section>
<section id="contact"> </section>
<footer class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<p> © Stephanie Daniels 2018 </p>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko -lightbox/5.3.0/ekko-lightbox.js">
</script>
<script src="js/fullpage.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
new fullpage('#fullpage', {
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
<script>
$(function() {
$('#mainNav a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
return false;
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav'
});
// Closes responsive menu when a link is clicked
$('.navbar-collapse>ul>li>a').click(function() {
$('.navbar-collapse').collapse('hide');
});
});
</script>
`
I bought a template for a radio portal and the index page code is.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<meta name="google-signin-client_id" content="80957862538-juiu2cgia32rn3lik36fv9a1ihc6fqof.apps.googleusercontent.com">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/player.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Listen Radio </title>
<base href="/">
</head>
<body ng-app="musiclistener">
<span ng-cloak>
<span ng-view ></span>
</span>
<div id='player-container'>
<audio controls id='music-player' src="#"></audio>
<div class='container-fluid'>
<div class='col-sm-1 col-xs-3 text-center' id='play-icon-container'>
<i class='fa fa-play' id='play-btn' ng-click="playtoogle()"></i>
</div>
<div class='col-sm-1 center-block hidden-xs' id='podcast-icon-container'>
<img src="{{ playerthumb }}" id='play-img' class='img-responsive center-block'>
</div>
<div class='col-md-6 col-sm-4 col-xs-6' id='podcast-bar-container'>
<span style='color:#fff;position:relative;top:3px;text-transform:capitalize' ng-if="musicplayingentity">{{ musicplayingentity}}</span>
<div id='podcast-progress'>
<div id='podcast-id-value'></div>
</div>
</div>
<div class='col-md-1 col-sm-2 text-center hidden-xs' id='addons-icon-container'>
<span ng-hide="userLoggedIn">
<a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-plus pull-left'></i></a>
<a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-comment '></i></a>
</span>
<span ng-show ="userLoggedIn">
<i ng-click="makeFavoritePlayer()" ng-hide="playingfav" class='fa fa-plus extrafun'></i>
<i ng-click="removeFavoritePlayer()" ng-show="playingfav" class='fa fa-check extrafun'></i>
<i ng-click="showCommentBoxPlayer()" class='fa fa-comment '></i>
</span>
<i class='fa fa-share pull-right' ng-click="shareboxPlayer()"></i>
</div>
<div class='col-sm-3 col-xs-3 text-center' id='volume-container'>
<div class='col-xs-2'>
<i class='fa fa-volume-up'></i>
</div>
<div class='col-xs-1 col-md-9'>
<div id='volume-progress'>
<div id='volume-id-value'></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="ang/angular.min.js"></script>
<script src="ang/angular-sanitize.min.js"></script>
<script src="ang/angular-route.min.js"></script>
<script src="ang/angular-cookies.min.js"></script>
<script src="ang/angular-facebook-sdk.js"></script>
<script>
window.fbAsyncInit = function()
{
FB.init({ appId : '195962897544265', xfbml : true, version : 'v2.8' });
};
</script>
<script src="ang/app.js"></script>
<script src="ang/controllers.js"></script>
<script src='js/jquery.js'></script>
<script src='js/bootstrap.js'></script>
<script src='js/typed.js'></script>
<script src='js/wow.js'></script>
<script src='js/player.js'></script>
<script>
new WOW().init();
</script>
<script>
$(function(){
$(".typing-text").typed({
strings: ["MUSIC", "SPORTS", "BOOKS", "NEWS", "TALK"],
typeSpeed: 200,
backSpeed: 150,
loop: true
});
});
</script>
If i visit the home page via my browser all the info is visable. But when i right click and view page source all I can see is the index page as layed out in the code above. I cant see any of the menu links, images, or any other info. Can someone please tell me why when I view page source I casnt see all info. The reason I ask it when google spiders my site it cant see my menus or images and so on, which is really bad for seo.
Any Ideas why.
Also if I right click on the home page and click inspect on chrome I can see all info.
Thanks
So I want to have a text field where a calendar pops up and a user can easily pick a date. However, I am getting Uncaught TypeError: $(...).datepicker is not a function error when I try to debug why the calendar is not popping out.
Below is my code, kindly advice. I have searched even on this forum but can not solve it.
<!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">
<title>date</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body id="app-layout" class="fuelux">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Sisimsha Booking Engine</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
<label for="Event Date">Event Date</label>
<input name="date" type="text" class="form-control" id='datepicker' placeholder="Date"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
Back
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</body>
</html>
Kindly, would anyone let me know that which I am doing wrong?
Thank you.
You included three different copies of jQuery.js, including one after the jQuery-ui.js include so when you use $ you'll be getting the third instance with no jQuery-UI.
Your code works if you remove the second and third of those includes, as you can see if you expand and run this snippet:
<!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">
<title>date</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body id="app-layout" class="fuelux">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Sisimsha Booking Engine</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
<label for="Event Date">Event Date</label>
<input name="date" type="text" class="form-control" id='datepicker' placeholder="Date"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
Back
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</body>
</html>
You're loading jQuery not one, but three times. jQuery UI is loaded after the second instance, but before the third, so it's attached to the second instance. However, since the third instance is loaded last, its $ variable, which does not have jQuery UI attached, shadows the others, so you can't use jQuery UI.
The solution is simple: just remove two of the jQuery versions, and your code should work fine!
(You also included Bootstrap twice; you need to be more careful about not including your scripts and stylesheets more than once, since they may interfere with each other in unexpected ways.)
Please use this running code.i hope it's help you.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">