innerHTML property not working with owl carousel - javascript

I am fetching data from firestore database to create a product card so that I can display the product cards inside a carousel. Owl carousel to be specific. I am using the innerHTML property in javascript to add the product cards programmatically. The Owl carousel seems to not work when I do so but when I create the cards statically in html the carousel works. What could be the problem?
Code:
Html:
<div class="product-area most-popular section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Hot Items</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel popular-slider" id="owlCarousel">
<!--product cards go here-->
</div>
</div>
</div>
</div>
</div>
Javascript:
var view2 = document.getElementById("owlCarousel");
db.collection("products").where("hot" , "==" , true)
.get().then((querySnapshot)=> {
querySnapshot.forEach((doc) => {
var image = doc.data().images[0];
var image2 = doc.data().images[1];
var title = doc.data().title;
var price = doc.data().pricing.toString();
var hot = doc.data().hot;
var discount = doc.data().discount;
var price = doc.data().pricing;
//product card creation
view2.innerHTML += `
<div class="single-product">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="${image}" alt="#">
<img class="hover-img" src="${image2}" alt="#">
<span class="out-of-stock">Hot</span>
</a>
<div class="button-head">
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
<a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
<a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
</div>
<div class="product-action-2">
<a title="Add to cart" href="#">Add to cart</a>
</div>
</div>
</div>
<div class="product-content">
<h3>${title}</h3>
<div class="product-price">
<span>Ksh. ${price}</span>
</div>
</div>
</div>
`
});
});


I just had the same problem.
What you should do is initialize the OWL CAROUSEL after you add the template (inner html);
for example:
view.innerHtml = `<div> content </div`;
$('.owl-carousel').owlCarousel({
//here you can add the props or events
})
This worked for me! hope this could hel you :)

Related

Trigger modal card from menu item not top-level menu - HTML, CSS, JS

I'm new to coding and hope someone can help be understand where I am going wrong. I am having a problem with getting a modal card popup to trigger from a navbar-item. Everything that I have tried so far triggers the modal at the top menu item. Each of the navbar-items on the drop down will have a link to a modal card.
Thank you in advance for your help!!
const item = document.querySelector(".navbar-item");
const modalBg = document.querySelector('.modal-background');
const modal = document.querySelector('.modal');
item.addEventListener('click', () => {
modal.classList.add('is-active');
});
modalBg.addEventListener('click', () => {
modal.classList.remove('is-active');
});
<section>
<nav class="navbar has-shadow" role="navigation" aria-label="dropdown navigation" id="navbar_link_modal">
<div class="navbar-brand">
<a class="navbar-burger" id="burger">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" data-target="#modal">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Explorer
</a>
<a class="navbar-item" href="#framingLumber">
Focus
</a>
<a class="navbar-item">
Flex
</a>
<a class="navbar-item">
F-150
</a>
</a>
</div>
</div>
</div>
</div>
</nav>
</section>
<div class="modal is-active" id="modal">
<div class="modal-background"></div>
<div class="modal-card" id="framingLumber">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>

You are targeting your modal at your top-level menu as data-target="#modal" which is wrong because there is no element with id 'modal'.
You need to do this at your menu item as data-target="#framingLumber" whereframingLumber is id of your modal and href is not needed.
So your code that would look like this:
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">Explorer</a>
<a class="navbar-item" data-target="#framingLumber">Focus</a>
<a class="navbar-item">Flex</a>
<a class="navbar-item">F-150</a>
</div>
</a>
</div>
</div>
</div>

How to edit html file from an another one

I want to select element with sidebar id in downloader.html from an another html document (settings.html).
downloader.html
<body>
<div class="ui visible left vertical thin sidebar menu" id='sidebar'>
<div class='item'>
<img class='ui medium image' src='./../../resources/images/logo_256x256.png'>
</div>
<a class="item" id='dashboard_btn'>
<i class="desktop icon"></i>
Dashboard
</a>
<a class="item" id='statistics_btn'>
<i class="area chart icon"></i>
Statistics
</a>
<a class="item" id='settings_btn'>
<i class="settings icon"></i>
Settings
</a>
</div>
<div class='dimmed pusher'>
<button class="ui icon button" id='sidebar_btn'>
<i class="angle double left icon" id='sidebar_btn_icon'></i>
</button>
<div id='content'>
<!-- All content goes here. -->
</div>
</div>
<script>
$(document).ready(function () {
$('#sidebar_btn').on('click', function () {
$('#sidebar').sidebar('toggle');
$('#sidebar_btn_icon').toggleClass('right');
});
$("#dashboard_btn").on("click", function () {
$("#content").load("./items/dashboard/dashboard.html");
});
$("#statistics_btn").on("click", function () {
$("#content").load("./items/statistics/statistics.html");
});
$("#settings_btn").on("click", function () {
$("#content").load("./items/settings/settings.html");
});
});
</script>
settings.html
<body>
<div class='center'>
<h2 class="ui icon header">
<i class="settings icon"></i>
<div class="content">
Settings
<div class="sub header">Sample text.</div>
</div>
</h2>
<div class='center child'>
<div class="ui toggle checkbox">
<input name="public" type="checkbox">
<label>Dark theme.</label>
</div>
</div>
</div>
<script>
//Select 'sidebar' element from downloader.html using jquery
</script>
Please, do not pay attention to mixed ' with " in html code. It is my fault and it will be fixed before app release.

You can use .load() with hash set within "settings.html"
$("#element").load("downloader.html #sidebar")

Hide parent div class if child div class does not have content when there are multiple parent divs with the same class name

I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.
HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p>A photo credit.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
JavaScript
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});

You were on the right direction. However a couple mistakes in your javascript.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to jsfiddle)
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit:
Bonus:
If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.popper.hide { display: none; }

It's hard to fully gather what you want to do, but if I understand correctly...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.
It is expected to work in the following manner:
.popper:has(> p:empty) { display: none }
I hope this helps... :)

You can check this code.
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" />
</div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p>
<p>A photo credit.</p>
</p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev">
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>

angularjs expand & collapse issue

I am new in angularjs and currently i'm facing this issue.
Problem
when i clicked on any of the node, all the nodes will be expanded or collapsed.
For example : (Before clicking on the node)
After clicking on the node
Code
<div class="item">Data Visualization</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> AGV Mileage Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Board Temperature Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Laser Sensor Output Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Battery Current Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
And if possible, how can i declare the "data visualization" as parent node and
others as child node then perform expand and collapse.
Please enlighten me on this, thanks in advance.

Each item needs to have its own separate collapsed state. For example:
Item 1
<i ng-model="collapsedMileage" ng-click="collapsedMileage = !collapsedMileage">
<strong>AGV Mileage Vs Timestamp</strong>
</i>
<div ng-show="collapsedMileage">
<!-- the rest of your template -->
</div>
Item 2
<i ng-model="collapsedLaser" ng-click="collapsedLaser = !collapsedLaser">
<strong>Laser Sensor Output Vs Timestamp</strong>
</i>
<div ng-show="collapsedLaser ">
<!-- the rest of your template -->
</div>
Item 3
<i ng-model="collapsedBattery" ng-click="collapsedBattery = !collapsedBattery">
<strong>Battery Current Vs Timestamp</strong>
</i>
<div ng-show="collapsedBattery">
<!-- the rest of your template -->
</div>

Bootstrap Modal - window darkens but no modal

I have a mustache.js template that contains an <a> which targets myModal like so:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
Here is the modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
When the result is clicked it darkens the screen but no modal is displayed. I am led to believe that the modal is conflicting with something in the javascript because i cannot get a modal to work anywhere on the site directory.
here are my links to javascript:
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
I also have a few inline script tags running JS
I need to get the modal to display upon clicking the <a> in the moustache.js template.
FYI here is the full HTML page starting at the <body> tag:
<body>
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro-header" style="background-image: url('img/slidedeck/ex1.jpg')">
<div style="background: rgba(0,0,0, 0.5);">
<div class="container">
<div class="row">
<div class="site-heading">
<h1>NETWORK</h1>
<hr class="small">
<h2 class="subheading">The most valuable part of EPG is the people.</h2>
</div>
</div>
</div>
</div>
</header>
<div class="search-navbar">
<input type="search" name="search" id="search" placeholder=""/>
</div>
<div class="container">
<div id="profile-results" class="row">
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Entrepreneurship for the Public Good 2015</p>
</div>
</div>
</div>
</footer>
</div>
Then I have a bunch of inline JavaScript and the closing </body>:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
<script id="modal-template" type="text/template">
<div id="myModal">
<div class="contianer">
<div class="row">
<div class="col-sm-6">
<img width="300px" src="{{img_url}}" alt="Profile of {{first_name}} {{last_name}}" class=" img-circle img-responsive">
</div>
<div class="col-sm-6">
<h1>{{first_name}} {{last_name}}</h1>
<h2>{{major}}</h2>
<h3>{{cohort}}</h3>
<h4>{{home_town}}</h4>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<h1>About {{first_name}}</h1>
</div>
<div class="col-xs-6">
<h3>Status:{{status}}</h3>
</div>
</div>
<div class = "row">
<p>{{bio}}</p>
</div>
</div>
LinkedIn →
</div>
</script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
<script type="text/javascript">
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('/profiles.json', function(data){
var result =""
$.each(data.profiles, function(key, val){
var fullName = val.first_name + " " + val.last_name
var cohortNum = val.cohort.toString()
var cohortName = "cohort " + cohortNum
if ((val.first_name.search(myExp) != -1) ||
(val.last_name.search(myExp) != -1) ||
(val.major.search(myExp) != -1) ||
(fullName.search(myExp) != -1)||
(cohortNum.search(myExp) != -1)||
(cohortName.search(myExp) != -1)
){
var template = $('#profile-preview-template').html();
result += Mustache.render(template, val);
}
});
$('#profile-results').html(result);
});
});
</script>
</body>
And also FYI here is the custom.js file:
$(function(){
//Variables
var slideqty = $('#featured .item').length; //get the number of slides in the carousel deck
var wheight = $(window).height(); //get the height of the window
var randSlide = Math.floor(Math.random()*slideqty); //pick a random number from 0-slideqty
//makeIndicators
//Automatically make indicators on the carousel for each slide in the deck
for (var i=0; i < slideqty; i++) {
var insertText = '<li data-target="#featured" data-slide-to="' + i + '"';
if (i === 0) {
insertText += ' class="active" ';
}
insertText += '></li>';
$('#featured ol').append(insertText);
}
$('.carousel').carousel({
pause: false
}); // end of makeIndicator
//fullHeight
// set all elements with class "fullheight" to a height equal to height of viewport on load
$('.fullheight').css('height', wheight);
//resize the "fullheight" elements on screen resize
$(window).resize(function() {
wheight = $(window).height(); //get the height of the window
$('.fullheight').css('height', wheight); //set to window tallness
});
//adjust the interval of the carousel
$('.carousel').carousel({
interval: 10000 //changes the speed in miliseconds
})
//make images darker
$('.item img').each(function() {
$(this).wrap('<div class="tint"></div>'); //wraps the carousel images with a div of class "tint"
});
//animate the contents of the search bar
var txt = "Search by name, major, or cohort.";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('#search').attr('placeholder', '|');
(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function () {
char++;
var type = txt.substring(0, char);
$('#search').attr('placeholder', type + '|');
typeIt();
if (char == txtLen) {
$('#search').attr('placeholder', $('#search').attr('placeholder').slice(0, -1)) // remove the '|'
clearTimeout(timeOut);
}
}, humanize);
}()
);
//shuffle takes an array and shuffles it
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
//load 20 random profiles
function loadRand(){
$.getJSON('/profiles.json', function(data){
rand = ""
randProfiles = shuffle(data.profiles);
for (var i = 0; i < 20; i++) {
var template = $('#profile-preview-template').html();
rand += Mustache.render(template, randProfiles[i]);
}
$('#profile-results').html(rand);
});
};
loadRand(); //load random profiles on refresh
//if search is empty load 20 random profiles
$('#search').keyup(function() {
var searchField = $('#search').val();
if (searchField == ''){
loadRand();
}
});
}); //end of main function

Change id of your div from item1 to "myModal" as you are using data-target="#myModal" in your code.

Categories