Sliding Material Design Card View - javascript

I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><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>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/


You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.

Related

Manipulate the card class with css and Html

I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.

Migrate jquery slick carousel to vue-slick-carousel

I have a page having a carousel implemented using slick-carousel and jquery but I'm building this page in vue. Everything else works while migrating this carousel from jquery to vue except for the image itself which doesn't show up. I've been hacking at this for about three hours with no luck.
Heres the code for the carousel:
Jquery:
<div class=" petmark-slick-slider home-slider" data-slick-setting='{
"autoplay": true,
"autoplaySpeed": 8000,
"slidesToShow": 1,
"dots": true
}'>
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</div>
Vue:
In template
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</VueSlickCarousel>
In script
import VueSlickCarousel from 'vue-slick-carousel'
export default {
name: 'Home',
components: { VueSlickCarousel }
}
Any idea what I did wrong?

I found another question that solved this. Basically just change the code as follows:
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" v-bind:style="{'backgroundImage': 'url(\'image/slider-2.jpg\')'}">
...
...

How can I make image slider responsive on every device?

My html code like this :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="slider.css">
<title>Home</title>
</head>
<body class="header-static ">
<div class="page-container">
<div id="nav-white-left">
<div class="navbar blue-txt">
<nav class="nav-extended navbar-white z-depth-0">
<div class="nav-wrapper" style="color:black;text-align: center;">
Header
</div>
</nav>
</div>
</div>
<section class="sec-homepage" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="color-overlay-section" data-direction="bottom"
data-hex1="000000"
data-hex2="000000"
data-opacity1="0.6"
data-opacity2="0.6">
<div class="white-text center">
<div class="swiper-container swiper-homepage">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style=background-image:url('https://img.techpowerup.org/200129/slider1.png');">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style=background-image:url('https://img.techpowerup.org/200129/slider1.png');>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style=background-image:url('https://img.techpowerup.org/200129/slider2.png');">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style=background-image:url('https://img.techpowerup.org/200129/slider2.png');>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blue-3-colomn" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="" data-direction="bottom"
data-hex1=""
data-hex2=""
data-opacity1="0.6"
data-opacity2="0.6">
<div class="container-cstm blue-txt">
<div class="row bottom-0" style="text-align: center;">
Content
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer white">
<div class="footer-copyright border-top-grey white">
<div class="container grey-text text-darken-1 center">
<div class="container grey-text text-darken-1 center">
Footer
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Demo and full code like this :
https://codepen.io/positivethinking639/pen/WNbBjGX
I check on the mobile version(android and iphone) and tablet too, it's not responsive
How can I make it to be responsive on all device?

There are many double-quotes missing in the above code styles attribute
Added fixes to those
Added additional css to the image tag
Here is the working codepen:
https://codepen.io/chansv/full/gObJEPv
Find the working code here
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="slider.css">
<title>Home</title>
</head>
<body class="header-static ">
<div class="page-container">
<div id="nav-white-left">
<div class="navbar blue-txt">
<nav class="nav-extended navbar-white z-depth-0">
<div class="nav-wrapper" style="color:black;text-align: center;">
Header
</div>
</nav>
</div>
</div>
<section class="sec-homepage" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="color-overlay-section" data-direction="bottom"
data-hex1="000000"
data-hex2="000000"
data-opacity1="0.6"
data-opacity2="0.6">
<div class="white-text center">
<div class="swiper-container swiper-homepage">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style="background-image:url('https://img.techpowerup.org/200129/slider1.png'); background-size: 100% 100%;">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style="background-image:url('https://img.techpowerup.org/200129/slider1.png'); background-size: 100% 100%;">
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style="background-image:url('https://img.techpowerup.org/200129/slider2.png'); background-size: 100% 100%;">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style="background-image:url('https://img.techpowerup.org/200129/slider2.png'); background-size: 100% 100%;">
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blue-3-colomn" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="" data-direction="bottom"
data-hex1=""
data-hex2=""
data-opacity1="0.6"
data-opacity2="0.6">
<div class="container-cstm blue-txt">
<div class="row bottom-0" style="text-align: center;">
Content
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer white">
<div class="footer-copyright border-top-grey white">
<div class="container grey-text text-darken-1 center">
<div class="container grey-text text-darken-1 center">
Footer
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

So for your Javascript you could do something like this:
function sizeSlider(){
var w = window.innerWidth;
document.getElementById('mySlider').style.width = w
}
window.addEventListener("resize", sizeSlider); // set size on load
document.addEventListener('DOMContentLoaded', sizeSlider}); // set size on resize
And lest suppose your slider is named mySlider
<div id="mySlider">...</div>

javascript error on html page on load

My website is in bootstrap and jquery 2.3.3 whenever i reload my html code. some extra closing brackets are coming at the end of the code.Please check attached screenshot of webpage and also is here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>iRobot India | Roomba Braava</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/navtab_scroll.min.js" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/my_js.js"></script>
<script>
$(function() {
$('.carousel').each(function() {
$(this).carousel({
interval: false
});
});
});​
</script>
<body data-target=".navbar">
<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header-nav">
<div class="navbar-header ">
<nav class="navbar navbar-default container" id="fixednav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="text-left">
<a href="index.html">
<img src="images/logo_small.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left text-center">
<li class="nav-item menuactive on" style="border:none;">
<a href="shop.html" class="menu">
<span>Shop</span>
</a>
</li>
<li class="nav-item">
<a href="Vaccummcleaning.html" class="menu">
<span>Home Robots</span>
</a>
</li>
<li class="nav-item">
<a href="Companyprofile.html" class="menu">
<span>About iRobot</span>
</a>
</li>
<li class="nav-item">
<a href="FAQ.html" class="menu">
<span>Support</span>
</a>
</li>
<li class="nav-item">
<a href="contact-us.html" class="menu">
<span style="border:none !important;">Contact Us</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="float-nav col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:22px;"></div>
<ul class=" ">
<li>Vacuuming
</li>
<li>Mopping
</li>
<li style="border:none !important;">Accessories
</li>
<li style="border:none !important;" class="gray-panel">
<div>
<p>Shopping Cart
<a href="#vaccum.html">
<img src="images/cart_icon.png">
</a>(0)</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 banner-top-whitespace"></div>
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-lg-offset-2 col-sm-12 col-xs-12 bannerimage text-center top-border bottom-border" style="padding: 0;">
<p class="text-center"><span>Free Shipping</span> on all irobot ordres
</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:50px;"></div>
<div class="row col-lg-10 col-lg-offset-1 col-md-10 col-lg-offset-1 col-sm-12 col-xs-12 text-center product-detail-wrapper">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe">
<div class="video-iframe" id="popupdivframe">
<div class="frameheader text-left">
<div class="heading-dark-green"><strong>iRobot <sup>®</sup> Roomba 980 <sup>®</sup></strong>
</div>
<div class="heading-green-sm"> <strong>Vaccum cleaning Robot</strong>
</div>
<i onclick="div_hide()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="frameimage carousel slide" align="center" id="carousel-ex">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
<li data-target="#carousel-ex" data-slide-to="3"></li>
<li data-target="#carousel-ex" data-slide-to="4"></li>
<li data-target="#carousel-ex" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/more images/980/R980_CarpetTransition_lowres.png" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/more images/980/R980_NavigatingFurniture_crop_lowres.png" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/more images/980/R980_UnderBed_lowres.png" alt="image" class="img-responsive">
</div>
</div>
</div>
<a class="popupframe-footer" href="#carousel-ex" data-slide="prev"><Previous</a> <a class="popupframe-footer" href="#carousel-ex" data-slide="next">Next></a>
<br />
<br />
<br />
<br />
</div>
</div>
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe2">
<div class="video-iframe" id="popupzoomframe">
<div class="frameheader text-left">
<i onclick="div_hide2()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="framezoomimage carousel slide" align="center" id="carousel-ex1">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
<li data-target="#carousel-ex" data-slide-to="3"></li>
<li data-target="#carousel-ex" data-slide-to="4"></li>
<li data-target="#carousel-ex" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/irobot-roomba-880-vacuum-cleaning-robot-for-pets-and-allergies.jpg" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/pG01-21837072dt2.jpg" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/pG01-21837072d1.jpg" alt="image" class="img-responsive">
</div>
</div>
</div>
<div class="popupframe-footer">
spin <i class="fa fa-caret-square-o-left" aria-hidden="true"></i>
<i class="fa fa-caret-square-o-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe3">
<div class="video-iframe" id="popupdivframe">
<div class="frameheader text-left">
<div class="heading-dark-green"><strong>iRobot <sup>®</sup> Roomba 980 <sup>®</sup></strong>
</div>
<div class="heading-green-sm"><strong> Vaccum cleaning Robot</strong>
</div>
<i onclick="div_hide3()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="frametext text-left">
<strong>What's In The Box:</strong>
<br />
<br />
<ul>
<li>1 iRobot Roomba 980</li>
<li>1 Rechargeable Battery</li>
<li>1 Home Base Charging Station</li>
<li>1 Line Cord</li>
<li>2 Dual Mode Virtual Wall Barriers (batteries included)</li>
<li>1 Extra AeroForce® High-Efficiency Filter</li>
<li>1 Extra Side Brush</li>
<li>1-Year Manufacturer's Limited Warranty On Robot, 6-Month Manufacturer's Limited Warranty On Battery</li>
</ul>
<br />
<br />
<strong>Specifications: </strong>
<br />
<br />
<span class="para-text-xs">Package Dimensions: 43.3 x 14.7 x 54.7 cm<br />
Package Weight: 6.9 Kgs<br />
Robot Dimensions: 35 cm in diameter, 9.2 cm in height <br />
Robot Weight: 3.94 Kgs
<br /><br />
* Tested in iRobot's Home Test Lab on hard floors. Run times may vary<br />
** Compared to Roomba 600 and 700 series AeroVac™ systems</span>
<br />
<br />
<strong> The iRobot limited warranty shall not apply to failures or problems which are caused by products or equipment not <br /><br />
authorized by iRobot Corporation.</strong>
<br />
<br />
</div>
</div>
</div>
<img src="images/pIRBT1-21837072v38011.png" class="img-responsive" />
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/camera-icon-43654.png" class="img-responsive" id="popup" onclick="div_show()">
<div class="image-caption image-caption-xs">MORE IMAGES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/box.png" class="img-responsive" id="popup" onclick="div_show3()">
<div class="image-caption image-caption-xs">WHAT'S IN THE BOX</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<a class="text-center">
<button class="btn btn-block btn-watch">Add To Watchlist</button>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<a class="text-center">
<img src="images/mail.png" class="img-responsive" /><span class="image-caption image-caption-xs">EMAIL TO A FREIND</span>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<a class="text-center">
<img src="images/print.png" class="img-responsive" /><span class="image-caption image-caption-xs">PRINTABLE VIEW</span>
</a>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 text-left content-small">
<p class="heading-black">iRobot<sup>®</sup> Roomba<sup>®</sup> 980</p>
<p class="heading-black-small">Vacuum Cleaning Robot</p>
<p class="para-text-xs text-left">The new Roomba 980 gives you cleaner floors, throughout your entire home, all at the push of a button. Roomba 980 seamlessly navigates an entire level of your home, keeping track of its location and recharging as needed until the job is done.
The AeroForce® Cleaning System with Carpet Boost automatically increases power on carpets where it's needed most. And with the iRobot HOME App, you can clean and schedule on the go.</p>
<p class="text-left heading-green-xs">Read Full Product Specifications
</p>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<p class="text-left heading-black-xs"><span class="para-text-xs">Price:</span> ₹ 64900.00</p>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8 text-left">
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6 social-button">
<a class="text-left buttonhover">
<img src="images/like.png" class="img-responsive" />
</a>
<a class="text-right share buttonhover">
<img src="images/share.png" class="img-responsive" />
</a>
<p class="heading-black-xs views">1,443,00 People like this</p>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-left pinit">
<a class="text-left">
<img src="images/pintit.png" class="img-responsive" />
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2 text-left">
<p class="heading-black-xs">QTY:
<input type="text" style="width: 23px;color: #000;text-align: center;" id="eaBar-quantity" name="eaBar-quantity" maxlength="2" size="1" value="1">
</p>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-left float-button" style="">
<p align="center">
<a href="#">
<img src="images/addToCart_sm.png" class="img-responsive" />
</a>
<!--<span>-OR-</span><br/>
<img src="images/checkout-logo-small.png" /></p>-->
<p class="heading-black-xs"><span class="blue-text-xs">In-Stock, usually ships in 7 - 10 full bus. days <span><a class="heading-green-xs-bold" href="#">(Details)</a></span></span>
<br>
<span class="heading-black-xs-bold">AVAIBILITY:</span>
<br />
<span class="heading-black-xs-bold">Sales Tax:</span>Sales tax will be added at checkout.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 product-detail-right-panel">
<a href="http://irobot.netmahiti.in/owneroverview.aspx?id=cHJvc3JzMDAwMDAwMDA1" target="_blank">
<div class="product-vedio"></div>
</a>
<a href="FAQ.html" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>FAQ</p>
</div>
</a>
<a href="wi-fi-information.html" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>Wi-Fi Information
</p>
</div>
</a>
<a href="http://irobot.netmahiti.in/owneroverview.aspx?id=cHJvc3JzMDAwMDAwMDA1" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>900 Series Owner's Center</p>
</div>
</a>
</div>
</div>
<hr />
<div class=" col-lg-10 col-lg-offset-1 col-md-10 col-lg-offset-1 col-sm-12 col-xs-12 pro-detail" style=" font-family:Arial, Helvetica, sans-serif !important;">
<br />
<br />
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<p class="heading-black-small"><b>TOP SELLING ACCESSORIES</b>
</p>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<p>
<img src="images/pIRBT1-17181539v380.png" class="img-responsive">
</p>
</div>
<div class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-7 col-sm-offset-1 col-xs-12">
<br />
<p class="heading-black-small-bold">3 Replacement AeroForce<sup>®</sup> High-Efficiency Filters For Roomba<sup>®</sup> 800 and 900 Series</p>
<p class="heading-black-xs">Price:<span class="heading-green-xs"><b>₹ 1490.00</b></span>
</p>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<p class="heading-black-xs">QTY:
<input type="text" style="width: 23px;color: #000;text-align: center;" id="eaBar-quantity" name="eaBar-quantity" maxlength="2" size="1" value="1">
</p>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-sm-12">
<p>
<a href="#">
<img src="images/addToCart_smm.png" class="img-responsive" />
</a>
</p>
</div>
</div>
</div>
<-- compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>>>>>>>
enter image description here

Delete extra >>>>> from html closing tag at the end.

It is not a javascript error it is a typo error Remove last line </html>>>>>>> by </html>

There's </html>>>>>>> at the end instead of </html> that's why you see the extra >>>>>>

Bootstrap 3 Collapse on hover

I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>

You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";

Categories