$(...).formSelect is not a function - asp.net-core

enter image description hereenter image description hereAm using materializecss plugins for forms. Its working fine in html page but while I used in .Net core MVC view select option dropdown is not working. its shows error in console..enter image description here
'code'
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="~/css/materialize.min.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').formSelect();
$('.datepicker').datepicker();
});
</script>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>

I did a test using Materialize plugins in .NET Core MVC view page, which work well on my side, please refer to it.
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
#section scripts{
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
}
You can create a new view page and include materialize from CDN as I did in above sample, then test if it can work well within your project. Besides, to check if any conflicts with other jquery files (referenced in layout file) cause the issue, please set Layout = null; to use no layout for your view page.

Related

VueJS - Template not rendering anything

I am super new to vue js and I am trying to the switch toggle shown here: https://headlessui.dev/vue/switch
So here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<script src="https://kit.fontawesome.com/7de28896bc.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Styles -->
<link rel="stylesheet" href="http://coinbetix.test/css/app.css">
<!-- Scripts -->
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<!-- Page Content -->
<main>
<div class="py-12 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
<form action="http://mysite.test/deposit" method="post">
<div class="w-1/2 mx-auto">
<input type="hidden" name="_token" value="Izbs4W1YHkxWODGgop8J1cOqpDuH7W1N9VoBzK6z"> <input type="hidden" name="coin" value="ETH">
<label for="coin" class="block text-sm font-medium text-gray-700">Select Crypto</label>
<select class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" name="coin" aria-label="Default select example">
<option value="ETH"> Ethereum</option>
<option value="LTC"> Litecoin</option>
<option value="ADA"> Cardano</option>
</select>
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<button type="submit" class="btn btn-outline-primary w-100">Generate Deposit Address</button>
</div>
</form>
</div>
</main>
</div>
<script src="http://mysite.test/js/app.js" defer></script>
</body>
</html>
<script type="module" src="/js/app.js">
import { ref } from 'vue'
import { Switch } from '#headlessui/vue'
export default {
components: {
Switch,
},
setup() {
const agreed = ref(false)
return {
agreed,
}
},
}
</script>
What is not rendered at all is that part:
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
Any idea why it is not shown at all ?
Just replace your setup method with this code -
setup() {
const enabled = ref(false)
return {
enabled,
}
},
You used enabled in Switch component as v-model so you should replace your agreed variable with enabled.
Or you may use agreed in v-model instead of enabled.

Bootstrap positioning Dropdown next to searchbar

I want to position 2 dropdowns side by side next to a searchbar I have but I can only position them under it. I hope someone can help me. Below is my code
<div>
<div class="input-group">
<div class="icon-addon">
<input type="text" id="search" class="form-control"
placeholder='Type to filter the table...'>
<label style="z-index: 22" for="search" class="fa fa-search" rel="tooltip"
title="search"></label>
</div>
</div>
</div>
</div>
<select class="form-control" style="width: 105px;">
<option>Festpreis</option>
<option>Stundenbasis</option>
</select>
heres the code for it:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="author" content="Vojtěch Matras">
<title>Admin Express Blogs&Magazines</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-2"><input type="text" id="search" class="form-control"
placeholder='Type to filter the table...'></div>
<div class="col-2"> <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </div>
<div class="col-2"> <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </div>
</div>
</div>
</body>
</html>
you can check in fiddle: https://jsfiddle.net/a006rj3n/ resize the browser window to see responsiveness

Semantic UI calendar

A very simple code for the semantic ui calendar but the calendar doesnt appear. Can someone please explain why.
<div>
<br/>
<h2 class="ui header">
<i class="calendar icon"></i>
<div class="content">
Set Lifetime of Form
</div>
</h2>
<select class="ui selection dropdown">
<option value="">Choose Application Form Type</option>
<option value="1">Application Form 1</option>
<option value="0">Application Form 2</option>
</select>
<br/>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
</div>
<script type="text/javascript">
$('#example1').calendar();
</script>
Your code already works. Just need to double check the resources.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
https://jsfiddle.net/vandolphreyes29/xy3guqfv/
Move the jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#example1').calendar();
});
</script>

Navbar not collapsing after clicking toggle button. Bootstrap 3 with django

I'm experiencing something strange, while trying out bootstrap with django. I copied the dashboard-example from the bootstrap-page (dashboard-example) into my django-project to play around a little bit. When I try to use the collapse navbar for smaller screen-sizes, the navbar is appearing, when I click the toggle-button. But if I click the toggle-button again, the navbar is not disappearing. I copied the example from bootstrap one-to-one. Why is the toggle-button not working as expected? Here is the generated html-code:
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboardtest.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
please put bootstrap CDN in that file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

jQuery slider-revolution images not displaying for MVC4 project

I am trying to set up a page with a slider control on the homepage. I designed the pages offline and they are working successfully with all the images working as expected but when I uploaded them to my MVC4 page the javascript arrow just keeps spinning and portions of the image are displaying but the ease in out functionality doesn't seem to be working.
Can someone have a look at my code and see if they can see where I am going wrong:
_Layout.cshtml
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
<title>MetaAwareness</title>
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-foundation.min.css")" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-style.css")" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-color.css")" title="color6" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/opensans_stylesheet.css")"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="container region1wrap">
<div class="row top_header">
<div class="eight columns">
<div class="login">
<i class="icon-signin"></i>Login
</div>
<div class="login user-control"> You are not logged in!</div>
</div>
<div class="four columns">
<div class="row collapse topheader-search">
<div class="eight mobile-three columns">
<input type="text" placeholder="Enter search terms" />
</div>
<div class="four mobile-one columns">
<i class="icon-search"></i>Search
</div>
</div>
</div>
</div>
</div>
<div class="container region2wrap">
<div class="row">
<div class="three columns">
<div id="logo">
<img src= "#Url.Content("~/Images/logo.png")" alt="MetaAwareness" title="MetaAwareness" />
</div>
</div>
<div class="nine columns">
<nav class="top-bar">
<ul>
<li class="name"><h1> Please select your page</h1></li>
<li class="toggle-topbar"></li>
</ul>
<nav>
<ul class="right">
<li><a class="active" href="#Url.Action("Index")"><i class="icon-home"></i>Home</a></li>
<li><i class="icon-laptop"></i>Media</li>
<li><i class="icon-tasks"></i>Courses</li>
<li><i class="icon-user"></i>Profile</li>
<li><i class="icon-comments"></i>Contact</li>
</ul>
</nav>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<!--Start of the footer section -->
<footer>
<div class="container region10wrap">
<div class="row footer_bottom">
<div class="six columns">
<p class="copyright">Copyright © 2013 MetaAwareness. All rights reserved.</p>
</div>
<div class="six columns">
<ul class="link-list">
<li>Home</li>
<li>Media</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="Login" class="reveal-modal login-modal">
<h2>Login</h2>
<p>Please login using your credentials recived by email when you register.</p>
<form>
<label>Username</label>
<input type="text" placeholder="" />
<label>Password</label>
<input type="text" placeholder="" />
<p class="right">I forgot my password | Resend activation e-mail</p>
<input type="submit" class="medium button" value="Login!" />
</form>
<a class="close-reveal-modal"><i class="icon-remove"></i></a>
</div>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript"src= "#Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"src= "#Url.Content("~/Scripts/meta-app.js")"></script>
</footer>
</body>
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="container region3wrap">
<div class="mainslider-container responsive">
<div class="mainslider">
<ul>
<li data-transition="slotfade-horizontal" data-slotamount="10" data-thumb= "#Url.Content("~/Images/thumb0.jpg")"> <img src= "#Url.Content("~/Images/thumb0.jpg")"/>
<div class="caption lft"
data-x="80" data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "#Url.Content("~/Images/pic_slider_2_1.png")" />
</div>
<div class="caption lfl"
data-x="40"
data-y="13"
data-speed="900"
data-start="1300"
data-easing="easeOutBack"> <img src= "#Url.Content("~/Images/girl.png")" />
</div>
<div class="caption lft big_white"
data-x="505"
data-y="100"
data-speed="400"
data-start="1700"
data-easing="easeOutExpo">High Value, Comprehensive
</div>
<div class="caption lft big_cyan"
data-x="505"
data-y="144"
data-speed="400"
data-start="1900"
data-easing="easeOutExpo">E-learning Solutions
</div>
<div class="caption lft blue"
data-x="505"
data-y="186"
data-speed="400"
data-start="2100"
data-easing="easeOutBack">Inventore veritatis et quasi architecto <br />
beatae dicta sed ut perspiciatis unde omnis<br />
iste natus laudantium.
</div>
</li>
<li data-transition="boxfade" data-slotamount="7" data-thumb= "#Url.Content("~/Images/thumb5.jpg")"> <img src= "#Url.Content("~/Images/thumb5.jpg")" />
<div class="caption sfb"
data-x="0"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutSine"> <img src= "#Url.Content("~/Images/course-banner2.png")" />
</div>
<div class="caption lfb small_white"
data-x="40"
data-y="90"
data-speed="600"
data-start="1800"
data-easing="easeOutExpo">Kickstart Your
</div>
<div class="caption lfb medium_white"
data-x="40"
data-y="130"
data-speed="600"
data-start="2200"
data-easing="easeOutExpo">E-learning Experience
</div>
<div class="caption lfb large_white"
data-x="40"
data-y="185"
data-speed="600"
data-start="2600"
data-easing="easeOutExpo">TODAY...
</div>
</li>
<li data-transition="curtain-3" data-slotamount="7" data-thumb="#Url.Content("~/Images/thumb2.jpg")"> <img src= "#Url.Content("~/Images/thumb2.jpg")" />
<div class="caption lfl"
data-x="35"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "#Url.Content("~/Images/course-banner4.png")" />
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="70"
data-speed="300"
data-start="1400"
data-easing="easeOutExpo">THE QUICKEST
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="120"
data-speed="300"
data-start="1600"
data-easing="easeOutExpo">PATH TO
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="170"
data-speed="300"
data-start="1800"
data-easing="easeOutExpo">E-LEARNING
</div>
<div class="caption lfb big_white"
data-x="660"
data-y="230"
data-speed="300"
data-start="2000"
data-easing="easeOutExpo">SEE MORE
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
I had forgotten to call the JqueryUI bundle and it was causing problems with IE although working with the rest of the top browsers