I'm just starting to learn the code, going through the courses.
I've made the react app, and have a basic HTML template to show up before the bundled.js is loading (for slow connection)
<link href="https://fonts.googleapis.com/css?family=Public+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="..." crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="..." crossorigin="anonymous"></script>
<div id="app">
<header class="header-bar bg-primary mb-3">
<div class="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 class="my-0 mr-md-auto font-weight-normal"><a class="text-white" href="/">ComplexApp</a></h4>
</div>
</header>
<div class="py-5 my-5 text-center">
<div class="dots-loading">
<div></div>
</div>
</div>
<footer class="border-top text-center small text-muted py-3">
<p>
<a class="mx-1" href="/">Home</a>
<!-- -->|
<!-- -->
<a class="mx-1" href="/about-us">About Us</a>
<!-- -->|<a class="mx-1" href="/terms">Terms</a>
</p>
<p class="m-0">
Copyright © 2020
<!-- -->
ComplexApp. All rights reserved.
</p>
</footer>
</div>
In Chrome, it loads nicely:
But for some reason in Firefox, the page is blank until the js is fully loaded.
Network tab shows that CSS and fonts are loading all the time in parallel with js
What might be the problem? is it some Firefox-specific stuff? Can it be fixed somehow?
Related
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 have a website where i have added AOS animation.
<div class="row-div">
<div class="inner-row-div" data-aos="fade-up" data-aos-duration="1200" data-aos-easing="ease-in-out">
<div class="teams" style="background-image: url('assets/images/sample.jpg');">
</div>
<div class="img-div">
Sample Text<br>Sample Text
</div>
</div>
<div class="inner-row-div" data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in-out">
<div class="teams" style="background-image:url('assets/images/sample.jpg');">
</div>
<div class="img-div">
sample<br>sample
</div>
</div>
and in the script tag :
<script>
AOS.init();
</script>
whenever i minimize the browser window it started working, but if i refresh my site it never work, i also have used latest CDN and js
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
I created a responsive Ui in bootstrap but my layout isn't responsive at all.
I can live with the desktop version, but it looks terrible on mobile and tablet.
How can i fix this?
and what exactly is the reason my layout behaves like that on smaller devices?
you can find a live version here:
uncovered-muscle.surge.sh
Or take a look here for the code if you don't like clicking links
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark indigo">
<a class="navbar-brand" href="#">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">exchange
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How To</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item avatar">
<a class="nav-link p-0" href="#">
<img src="#" class="rounded-circle z-depth-0"
alt="avatar image" height="35">
</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar -->
<div class="container">
<div class="jumbotron card card-image" style="background-color:black;opacity: 0.8;">
<div class="text-white text-center py-5 px-4">
<div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title" style="color:black;">Contract Balance</h5>
<p class="card-text">
<input class="form-control form-control-lg" type="text" placeholder="AGI" id="contractBalanceAgi"><br>
<input class="form-control form-control-lg" type="text" placeholder="SNET" id ="contractBalanceSnet"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="background-color:black;opacity:0.8;" >
<h1 style="text-align:center;color:white;">Invest</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1 AGI</h2>
<br>
<h3>0.00000</h3>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount of AGI</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI available</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your purchase</p>
<!-- Button -->
Approve
<br>
<br>
Mint
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.6;">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text" style="color:white;">Note: 10% entry fees, 10% exit fees, 2% referral fees, 2% dev fees.The sell fee will
only be distributed if you actually sell your tokens. The number of tokens you will receive for your AGI does not include the fees, it's an estimate.</p>
</div>
</div><!-- end of card -->
<br>
<div class="container">
<div class="row">
<div class="col" >
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i> Your Holdings</h5>
<h3 class="card-title pt-2"><strong><h2 class="card-text"><img src="images/agi.png" class="rounded" style="width:15%">1.1 AGI</h2></strong></h3>
<h3 class="card-title pt-2"><strong>AGI VaLue</strong></h3>
<p>AGI</p>
<div class="row" >
<div class="col-sm-6" >AGI</div>
<div class="col-sm-6" >$ 0.13</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
<div class="col">.col</div>
<div class="col">
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
<h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
<div class="row">
<div class="col-sm-6">
<h3>Option 1</h3>
<p>SNET</p>
<button type="button" class="btn btn-primary" id="reinvest">REINVEST</button>
</div>
<div class="col-sm-6">
<h3>Option 2</h3>
<p>AGI</p>
<button type="button" class="btn btn-primary" id="withdraw">WITHDRAW</button>
</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.8;text-align:center;">
<div class="card-body">
<h5 class="card-title">Masternode</h5>
<p class="card-text" style="color:white;" id="masternode">http://snetsaving.com</p>
</div>
</div><!-- end of card -->
<br>
<div class="container" style="background-color:black;opacity:0.8;">
<h1 style="text-align:center; color:white;">Exchange</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1.1 AGI</h2>
<br>
<h3>0.00000 USD</h3>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount to exchange</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>SNET available</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your exchange</p>
<!-- Button -->
<br>
<br>
Exchange
<br>
<br>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
SNETSAVING.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
</html>
I'm using bootstrap for the layout
This is because you're missing the meta tag viewport within your document. I highly recommend you check out the Bootstrap Starter Template, if you haven't already. Adding the following just below <meta charset="utf-8"> should do the trick:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
For more information on the viewport tag you can, for example, check out the article on Using the viewport meta tag to control layout on mobile browsers from MDN web docs. Basically, it ensures that the actual device width will be used for any media queries that e.g. Bootstrap uses for laying out columns. Otherwise, a larger virtual width will be used to ensure compatibility with older sites.
I have a testimonial Slider that did slide beautifully a week ago and seems to have stopped working without my changing anything. The control-indicators are also not functioning. The carousel is stuck on the first item.
I've checked a million examples and validated the HTML and am going insane. Note that one carousel is inside another rather static carousel. When I separate them, the testimonials disappear. Any help would be appreciated.
Here's the HTML, the CSS is merely formatting and positioning and I have not altered the bootstrap.js
<!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>Wylie For Weight Loss</title>
<!-- Custom stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom stylesheet -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- ====== Header Section ====== -->
<header>
<!-- ====== Menu Section ====== -->
<div id="main-nav1" class="navbar navbar-default navbar-fixed-top navbar-fixed-carousel nav-bar-scroll" role="navigation">
<div class="navbar-collapse collapse navbar-right">
<ul id="ulnav" class="nav navbar-nav target-changer">
<li>For MedSpas</li>
<li><span style="color: #FFB718;">For WeightLoss Clinics</span></li>
</ul>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo-dark.png" class="img-responsive" id="nav-img"></a>
<!-- end .navbar-header -->
</div>
<div class="navbar-collapse collapse navbar-right">
<ul id="ulnav" class="nav navbar-nav">
<li>Home</li>
<li>The System</li>
<li>Pricing</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
<!-- end .navbar-collapse -->
</div>
<!-- end .container -->
</div>
<!-- end #main-nav -->
<!-- ====== End Menu Section ====== -->
</header>
<!-- ====== End Header Section ====== -->
<div id="top">
<div id="myCarousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background: url('images/5.jpg') 50% 0 no-repeat fixed;">
<div class="center-container">
<div class="container" style="text-align:center;">
<div class="slider-content">
<h2 class="fadeInUp animated delayTwo" style="margin-bottom:0px;">Wylie Business System</h2>
<p class="fadeInUp animated delayThree">The only business management system your weight loss clinic will need.</p>
<form class="form-inline" action="weightloss_form-to-email.php" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input name="name" type="text" id="name" class="sm-form-control required" placeholder="Your name">
</div>
<div class="col-md-6">
<input name="email" type="text" id="email" class="required email sm-form-control" placeholder="Your email address">
</div>
<div style="text-align:center;">
<input type="submit" name="Send" value="Get a Demo" class="button button-orange" style="margin:0px; font-weight:bold;">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- end .top> .container -->
<div id="testimonialSlider" class="carousel slide" data-ride="carousel" style="margin-top: 0px;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that
directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p>
<div class="testi-meta">
JASON SCHNEIDER
<span>Weight Loss Couture, St. Louis, Missouri</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I love how your POS has made our lives at our multiple locations easier to manage. It is user friendly for those that are not as technically inclined (like me). We love that we can do most record keeping and transactions in one place.
Prior to using your POS, we had to use many different types of software and applications. Now everything is more streamlined. As easy as it is to use, there are still some instances where I need a bit of advice on how to navigate or
improve upon our day to day record keeping, and you have demonstrated exemplary service by always responding to any 'emergencies' I may have in a friendly, quick and efficient manner!</p>
<div class="testi-meta">
JENNIVINE LEE
<span>Lumina Skin, San Francisco, CA</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>We purchased WyliePOS for our weight loss clinic here in Wyoming. The system has been a huge help in the operation of the business. Not only has it dramatically simplified things at the point of sale, the ‘back-end’ functionality has
made it easy to track inventories and financials (used to use QuickBooks). Also, ‘Wylie’ has added some very helpful custom features to the system, most notably a patient reporting tool, which tracks patient progress and enables automated
reporting to referring physicians.</p>
<div class="testi-meta">
SCOTT POPP
<span>Owner - Popp Chiropractic and Rehabilitation</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>Wylie’s Point of Sale system has been great for our business! They made sure we got up and going as quickly as possible and continue to have stellar after-service support. We also like that on an on-going basis they optimize the product
(recently added the ability to manage employee discounting)</p>
<div class="testi-meta">
TAMARA HAWK MPT
<span>Director of Therapies, Cardiac Rehab – Wyoming Medical Center</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I am glad that I connected with Wylie Systems, I think what I like most is their availability to help solve any concerns immediately– they have never let us down. In addition they have provided a constant stream of improvements to an
already great product. The POS is great – it really helps me keep track of and analyse sales without being tied to the office. Going back to the traditional cash register – or even the most modern version – would be a nightmare!</p>
<div class="testi-meta">
JOHN LESTER
<span>Point de Depart, Gatineau, Quebec</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>Wylie Systems Inc. has done several projects for Karrys to help us at the point of sale. The quality of their work and customer support following completion has been excellent.</p>
<div class="testi-meta">
PETER KERR
<span>VP Sales at Karrys Bros. Limited</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that
directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
<li data-target="#testimonialSlider" data-slide-to="1"></li>
<li data-target="#testimonialSlider" data-slide-to="2"></li>
<li data-target="#testimonialSlider" data-slide-to="3"></li>
<li data-target="#testimonialSlider" data-slide-to="4"></li>
<li data-target="#testimonialSlider" data-slide-to="5"></li>
<li data-target="#testimonialSlider" data-slide-to="6"></li>
</ol>
</div>
</div>
</div>
<!-- ====== End Footer ====== -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap 3.2.0 js -->
<script src="js/bootstrap.js"></script>
<!-- jQuery Parallax plugin -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- jQuery One Page Nav Plugin -->
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.viewportchecker.js"></script>
<!-- Custom JS -->
<script src="js/site.min.js"></script>
</body>
</html>
Try to put this:
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 3000
});
});
replaced local copies of boostrap.css and bootstrap.js source with:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
and
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm new to Stack, html and mobirise and (insert anything).
So, I bought a template in Mobirise, built a website Skystreem, but have 1 problem, animation in blocks doesn't work in Chrome or any webkit browsers, works in Edge and Safari. (especially that part "section class="counters1").
So, I tried to explore it and found this: For example,
1) if I add 2 blocks and then counter animation block - it doesnt count, just shows numbers.
2) if I add all the same, but counter block is first - it does animate in chrome.
I tried to check source code, but it is exactly the same and using the same assets, just sections' places (header2-h and counters1-d) are switched places.
Also there you can find the code itself:
<!DOCTYPE html>
<html>
<head>
<!-- Hi -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/logo.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
<link rel="stylesheet" href="assets/web/assets/icons/icons.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/animate.css/animate.min.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link href="assets/fonts/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/skystreem/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="mbr-section article content1 cid-qA7BcRsr7c" id="content1-g" data-rv-view="229">
<div class="container">
<div class="media-container-row">
<div class="mbr-text col-12 col-md-12">
<h2 class="mbr-fonts-style block-title align-center display-2">Siz əldə edirsiniz</h2>
</div>
</div>
</div>
</section>
<section class="header2 cid-qA7BfwvgVH" id="header2-h" data-rv-view="233">
<div class="container">
<div class="media-container-row">
<div class="media-content">
<h1 class="mbr-section-title mbr-white pb-3 mbr-fonts-style display-1">Bu nədir?</h1>
<div class="mbr-section-text mbr-white pb-3 ">
<p class="mbr-text mbr-fonts-style display-5"><strong>SkyStreem </strong>– Azərbaycanda çalışan şirkətlər üçün unikal marketinq xidmətidir.<br><br>Təsəvvür edin, müştəri məkanınızda WiFi şəbəkənizə qoşulur və Siz onun Facebook/Instagram profili, onun adı, yaşı, ad günü və bütün digər
dəyərli ictimai məlumatlarını icazəsi ilə avtomatik əldə edirsiniz!
<br><br>Bizimlə bu <strong>artıq mümkündür</strong>!</p>
</div>
</div>
<div class="mbr-figure" style="width: 100%;">
<img src="assets/images/pic3-6881x5681.jpg" alt="SkyStreem" title="" media-simple="true">
</div>
</div>
</div>
</section>
<section class="counters1 counters cid-qA7ADWZ6ht" id="counters1-d" data-rv-view="230">
<div class="mbr-overlay" style="opacity: 0.7; background-color: rgb(4, 54, 124);">
</div>
<div class="container mbr-white">
<div class="container pt-4 mt-2">
<div class="media-container-row">
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
166
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Clients
</h4>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
210
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Projects
</h4>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-text">
<h3 class="count pt-3 pb-3 mbr-semibold mbr-fonts-style display-1">
357
</h3>
<h4 class="mbr-content-title mbr-semibold pb-3 mbr-fonts-style display-5">
Testimonials
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/popper/popper.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/smooth-scroll.js"></script>
<script src="assets/viewport-checker/jquery.viewportchecker.js"></script>
<script src="assets/theme/js/script.js"></script>
<div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbri-down mbr-iconfont"></i></a></div>
<input name="animation" type="hidden">
</body>
</html>
I will be very grateful to anyone who helps even a little bit.
Thank y'all in advance!
Yes, in last versions Mobirise often has this problem in different themes. I solved this issue with moving the script. Maybe you would also find an answer somewhere here: http://benalman.com/projects/jquery-throttle-debounce-plugin/