All,
I am trying to set up a website menu using this Jqueryscript.net template.
The instructions accompanying the template tell me to activate the script with
$(function() {
$('#menu').cookcodesmenu();
});
Later, there are customization options to link to my logo:
$('#menu').cookcodesmenu({
display: 1920, // From where mobile menu apears and desktop menu gone
brand: 'LOGO', // Supports HTML
label: 'MENU', // <a href='https://www.jqueryscript.net/menu/'>Menu</a> Label: // Supports HTML
});
I can't figure out how to follow these instructions. I have tried things like
script>
$(function() {
$('#menu').cookcodesmenu({
logo: '<a href="/images/BodyLogo.jpg"</a>'
});
});
</script>
with no luck.
Frankly, I would much prefer to simply activate the menu while omitting the logo and coding in my site logo via html. But if that's not an option, I'd like to know not only how to call it from within this menu code, but also give directions within the script for the size of the logo. (as you would in html, width="25%," etc.)
Thanks in advance for any suggestions.
Added later:
Per your request, here's the html, but I don't think that's the problem, as I'll explain in a second.
<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="UTF-8">
<title>(website)/title>
<!--Menu-->
<link rel="stylesheet" href="Styles.css">
<link href="Menu/CSS/MenuStyles.css" media="screen" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="Menu/CSS/Menu.css">
<script src="Menu/JS/modernizr.min.js"></script>
<script src="Menu/JS/jquery-1.12.4.min.js"></script>
<script src="Menu/JS/jquery.cookcodesmenu.js"></script>
<!--Menu-->
<!--Floatbox-->
<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
<script type="text/javascript" src="floatbox/floatbox.js"></script>
<!--Floatbox-->
<div id="logo"><img src="images/BodyLogo.jpg" width="25%" height="auto"
alt="Logo"></div>
</head>
<body>
<script>
$(function() {
$('#menu').cookcodesmenu({
//brand: 'jQueryScript'//
});
});
</script>
<ul id="menu">
<li>Parent 1
<ul>
<li>
item 3
</li>
<li>
Parent 3
<ul>
<li>
item 8
</li>
<li>
item 9
</li>
<li>
item 10
</li>
</ul>
</li>
<li>
item 4
</li>
</ul>
</li>
<li>
item 1
</li>
<li>Parent 2
<ul>
<li>
item 5
</li>
<li>
item 6
</li>
<li>
item 7
</li>
</ul>
</li>
</ul>
</body>
Maybe I'm wrong, but I don't think that's the source of the problem. I think the problem lies with a piece of associated jquery I found:
(function ($, document, window) {
var
// default settings object.
defaults = {
display: 1920, // From where mobile menu apears and desktop menu gone
//brand: '<a href="#"</a>', // Supports HTML//
label: 'MENU', // Menu Label: // Supports HTML
duplicate: true,
duration: 200,
easingOpen: 'swing',
//fontFamily: 'Open Sans',//
easingClose: 'swing',
closedSymbol: "➕", //Supports HTML
openedSymbol: "➖", //Supports HTML
prependTo: 'body',
appendTo: '',
parentTag: 'a',
closeOnClick: true,
allowParentLinks: true,
nestedParentLinks: true,
showChildren: false,
removeIds: true,
removeClasses: false,
removeStyles: false,
animations: 'jquery',
init: function () {},
beforeOpen: function () {},
beforeClose: function () {},
afterOpen: function () {},
afterClose: function () {}
},
Origninally, I'd put a blank .html in the brand spot, but it was still taking up space in the html, shoving my logo out of position. As you see, I've tried to turn off "brand." Now, where the brand label is supposed to go, it says "undefined," and my own logo is still shoved down below that. Hardly what I want.
It baffles me that a person writing a menu template would take it upon himself to dictate where the site logo must go, but that appears to be what he's done. Is there any way to work with this thing, or should I just try some other menu?
Seems your anchor tag is not visible as logo because there is nothing
in side anchor tag.please try the below code push something in the
anchor tag.
<img src="yourpath/image.png">
Please use something like this and try it.
$(function() {
$('#menu').cookcodesmenu({
brand: '<img src="yourpath/image.png">'
});
});
I think you use the wrong key, according to the documentation you have to use brand not logo to define your logo :
<script>
$(function() {
$('#menu').cookcodesmenu({
brand: ''
});
});
</script>
Related
I am having a problem with splide video extension, when I am trying to use it with youtube it doesn't load the video, just shows a black screen once I click play.
I've copied the exact example from the docs and put random puppy pictures as img but it doesn't work.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.9/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.4/dist/css/splide-extension-video.min.css">
<title>Splide Video</title>
</head>
<body>
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="https://cf.ltkcdn.net/dogs/images/orig/235430-2000x1332-australian-shepherd-puppy.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
<img src="https://www.rd.com/wp-content/uploads/2021/03/GettyImages-1133605325-scaled-e1617227898456.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.9/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.4/dist/js/splide-extension-video.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const splide = new Splide('.splide');
splide.mount(window.splide.Extensions);
});
</script>
</body>
</html>
The youtube video won't load, but the Vimeo video works fine.
How can I fix it?
Edit:
When serving this file (Liveserver / Codepen / Webstorm Live view) and not just as static HTML it seem to be working fine. I am not sure what's the reason for that.
Weird but I found that passing the argument video: { loop: true, } makes it run.. without that it wouldn't
Below is a working example... (codepen here: https://codepen.io/alxfmi/pen/poddQMB)
document.addEventListener("DOMContentLoaded", function() {
new Splide('.splide', {
heightRatio: 0.5625,
cover: true,
updateOnMove: true,
pagination: false,
padding: {
left: 0,
right: '22.5%'
},
arrows: true,
width: '100%',
wheel: true,
gap: '1rem',
video: {
loop: true,
},
}).mount(window.splide.Extensions);
});
<link href="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.12/dist/css/splide.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.8/dist/css/splide-extension-video.min.css" rel="stylesheet" />
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="https://img.youtube.com/vi/cdz__ojQOuU/hqdefault.jpg">
</li>
<li class="splide__slide">
<img src="https://img.youtube.com/vi/3GNQL3alB-Y/hqdefault.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.12/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.8/dist/js/splide-extension-video.min.js"></script>
I am currently developing a dynamic menu using jQuery.mmenu plugin.
The definition (nav + ul) of my menu is static and written into the index.html
The submenu is an external html page that I open in the jQuery(document).ready part, and added with append function.
My problem is located on the form:
Good version / bad version
On the left, you can see a standard and static implementation,
With my solution, CSS seems to don't apply.
My code:
index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/core/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../dist/core/js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
var $menu = $("#menu").mmenu({
"extensions": [
"pageshadow"
],
"counters": true,
"navbar": {
"title": "Ressource List"
},
"navbars": [
{
"position": "top",
"content": [
"searchfield"
]
},
{
"position": "top",
"content": [
"prev",
"title",
"close"
]
}
],
"sectionIndexer": true
});
var api = $("#menu").data( "mmenu" );
api.bind( "init", function() {
$.ajax({
// options to retrieve the submenu
url:"include/menu.html",
type : 'GET',
dataType : 'html'
}).success(function(data) {
var $ul = $menu.find( "#panel" );
$ul.append(data);
$("body").addClass("body");
});
});
api.init( $("#panel") );
});
</script>
</head>
<body>
<!-- The page -->
<div class="page">
<div class="header">
Index
</div>
</div>
<!-- The menu -->
<nav id="menu">
<ul id="panel">
</nav>
</nav>
</body>
</html>
menu.html
<ul>
<li>Home</li>
<li><span>Room</span>
<ul>
<li>Room11</li>
<li>Room12</li>
</ul>
</li>
<li><span>Room2</span>
<ul>
<li>Room21</li>
<li>Room22</li>
</ul>
</li>
<li>Update data</li>
</ul>
To simplify the problem, I've used the basic example included in the package: http://mmenu.frebsite.nl/download.html
Could you please help me ?
Not sure if this is affecting anything but...
Your ul tag is missing a closing tag.
Also... in your success callback you have the code:
var $ul = $menu.find( "#panel" );
$ul.append(data);
If you are trying to get the first list in the panel. It should be:
var $ul = $menu.find( "#panel>ul" );
$ul.append(data);
jQuery.mmenu plugin appears to rearrange the markup.
Works for 1 level:
var $menu = $('nav#menu').mmenu();
var api = $('nav#menu').data('mmenu');
$('#btnAdd').click(function () {
var $ul = $menu.find('#test>ul');
$ul.append('<li>Home12</li>\
<li>About us</li>\
<li>Contact</li>');
});
<button id="btnAdd">Add</button>
<nav id="menu">
<ul id="test"></ul>
</nav>
This only works for one level. If I try to add a nested list item it doesn't appear to work.
Doesn't work for nested levels:
$ul.append('<li>Home12</li>\
<li><a id="about2" href="#about">About us</a><ul><li>About us</li></ul></li>\
<li>Contact</li>');
This github thread may help...
At the bottom of the thread the user FrDH provides an example that may help you.
Link: https://github.com/FrDH/jQuery.mmenu/issues/57
I am trying to make use of the iconbar property of mmenu (here: http://mmenu.frebsite.nl/documentation/extensions/iconbar.html)
However it is not working properly. I get the menu open as expected once I run the code. Yet when I close the menu, it is first closed completely, then the container slides slightly to right. I think that is some sort of an invisible iconbar pushing the content to the right.
(it shouldn't push anything even if it was visible since I use the menu in front of the application, floating.)
I would appreciate any ideas about the cause & how to fix it.
Here is what I get: http://jsfiddle.net/ozgen92/eqbaf88q/
What should have been happened: http://mmenu.frebsite.nl/examples.html
(toggle "iconbar" option at the bottom, extensions section)
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"><!--symbols-->
<!-- JS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mmenu -->
<!-- CSS -->
<link href="Libs/jQuery.mmenu-5.3.4/dist/css/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />
<link href="Libs/jQuery.mmenu-5.3.4/dist/css/extensions/jquery.mmenu.iconbar.css" type="text/css" rel="stylesheet" />
<!-- JS -->
<script src="Libs/jQuery.mmenu-5.3.4/dist/js/jquery.mmenu.min.all.js" type="text/javascript"></script>
<!-- JQuery -->
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#menu").mmenu({
"extensions": [
"effect-zoom-panels",
"iconbar",
"theme-dark"
],
"offCanvas":{
"zposition": "front"
},
"searchfield": {
"placeholder": "Search",
"noResults": "No results found.",
"add": true
},
"navbar": {
"title": "Main Search"
},
"navbars": [
{
"position": "top"
}
],
"sectionIndexer": true
}, {/* configuration */});
var API = $("#menu").data( "mmenu" );
API.open();
});
</script>
</head>
<body>
<div><!--Wrapper-->
<!--MMENU-->
<div><nav id="menu">
<ul>
<li><i class="fa fa-home"></i>Menu1
<input type="radio" class="Toggle" checked />
</li>
<li>Menu2
<input type="radio" class="Toggle" checked />
</li>
<li>Menu3
<input type="radio" class="Toggle" checked />
</li>
</ul>
</nav></div>
<div class="container">
<h3>Container Example</h3>
<p>Yes I am a container</p>
</div>
</div><!--wrapper end-->
</body>
</html>
Here is the final image that was suppose to happen: (taken from mmenu, examples section)
The issue:
For some reasons and because I don't really know how this plugin works, it actually creates a parent div to your container with the .mm-slideout (the one we are interested in), with the property transform set as none.
But when you click to hide the menu, this transform property change to translate3d(60px, 0, 0); which basically translate your container to 60px from the left (what you was talking about).
The solution:
To avoid this effect you don't and because like I said I don't how to configure this, the simplest way would be to just avoid this translate with:
.mm-slideout {
transform: none !important;
}
http://jsfiddle.net/RedBreast/eqbaf88q/5/
The !important actually is because it will act as an override, give this a priority.
There is probably a way to avoid this class/div to act like this with a plugin property, but like I said I don't know it and this is the quickest and simplest way to do this even if in term of optimization, I would be better to remove the class.
Hope this is helpful'.
First of all, I apologize because this is my first time trying to code a website (or anything), so this might be a stupid question.
I have a web page where I would like to update only a single div when a link in the navigation bar is clicked.
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<b>1</b>
</li>
<li>
<b>2</b>
</li>
<li>
<b>3</b>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>
</body>
</html>
I know, it's a lot of useless stuff, but you get the point. What I'm trying to do is as you click on 1, 2, 3, etc., only the content of the div "mainwrap" changes, as does the URL (so the page does not refresh, but the URL changes from www.website/1.html to website/2.html, etc. and the content of the one div changes). I have different HTML files for 1, 2, and 3, each with different "main" divs, which ideally will be inserted into the "mainwrap."
I've tried following along with tutorials like https://css-tricks.com/rethinking-dynamic-page-replacing-content/ and other stackoverflow posts like how to do partial page update with jquery. That second one seems like what I want to do, but when I try to implement it, it still doesn't work. Is there a simple fix that I am just missing because I don't know much about coding? (Also, I'm using Dreamweaver. I don't know if that makes a difference.)
Thanks!
You are right how to do partial page update with jquery is exactly what you need. I assume you are new to jquery stuff so here is the complete markup http://jsfiddle.net/yrbvnayy/ that will get your job done!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<b>1</b>
</li>
<li>
<b>2</b>
</li>
<li>
<b>3</b>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>
<script type="text/javascript">
$("#mainnav li a").click(function(e) {
// prevent from going to the page
e.preventDefault();
// get the href
var href = $(this).attr("href");
$("#main").load(href, function() {
// do something after content has been loaded
});
});
</script>
</body>
</html>
I am using the same reference for jquery ajax to explain the answer. How to do partial page update with jQuery?
In your case I will apply the above usage as
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
//either use e.preventDefault() to stop the default event or return false
var loc=$(this).attr('href');
$('#mainwrap').load(loc);
//This should load the html content to your div
})
});
</script>
EDIT
An alternative if you just want the div of the HTML pages you are pointing.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
// either use e.preventDefault() to stop the default event or return false
e.preventDefault();
var loc = $(this).attr('href');
$.ajax({
url: loc,
type: 'GET', // can be GET or POST depending on your requirement
success: function(data, textstatus, xhr)
{
var div = $(data).find('#main');
$('#mainwrap').html(div);
},
error: function(xhr, status, error)
{
alert('Error - ' + xhr.responseText);
}
});
// This should load the html content to your div
})
});
</script>
Fore more ajax related documentation you can go through http://api.jquery.com/jquery.ajax/
The example you cite is using php, which can do what you want.
Okay what I have is a wordpress website: http://reformpackagingmachine.com
I have a slider problem and I'm getting this error :
"TypeError: jQuery(...).easyResponsiveTabs is not a function"
activate: function(event) { // Callback function if tab is switched
on firebug -which I think is another problem than bxSlider-
I wasn't the one that made the website, but the prev. developer ran away and I have to fix this.
I knew that errors like this might because of the paths of jQuery or jQuery ui files but I've checked it.
When I tried to validate at http://validator.w3.org it was giving errors about some <link> elements , because they were in the footer.php file. So I moved them to the header.php and it validated.
So my sliders(both horizontal and vertical)are not working, and I don't really get why I'm having this error. I mean what it has to do with sliders??
So here is my head markup,
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all">
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css">
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script>
This is the markup for slider:
<div class="the-main-slider-container">
<ul class="bxslider">
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg">
</li>
</ul>
<div id="bx-pager">
<div class="pager-wrapper">
<div class="pager-container">
<a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a>
<a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a>
<a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a>
<a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a>
<a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a>
</div>
</div>
</div>
</div>
This is the script for bxslider:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
jQuery('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
mode: 'fade'
});
});
jQuery(function ($) {
$(document).ready(function(){
$('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
});
jQuery(document).ready(function() {
jQuery(".various").fancybox({
maxWidth : 450,
maxHeight : 400,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
And this is the script for easyResponsiveTabs:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
I know it looks confusing but I'm sure you can see better if you go to the link and check it. You will see it looks pretty bad now and it's online!
And if I missed any necessary info on this description, please tell me so that I can add it.
So I'm completely open to all kinds of useful information. Thanks a lot in advance!
Edit #1 I've tried using noConflict like this:
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function () {
j('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
but it didn't work and I've got the same error...
After trying lots of different things, I've managed to solve my own problem. I've put the JavaScript files for bxSlider, easyResponsiveTabs and the scripts calling them to footer.php. But I've left the jQuery & jQuery UI files at the header.php along with the css files for the sliders.
Now everything is working well and the markup passed the validation test! If you're having same kind of error;
Check your jQuery and other JavaScript file paths.
Check if you're using an old version of jQuery or uncompatible
versions of jQuery & jQuery UI.
Don't work with really stupid developers that may put your link
files to footer.php...
Check if you have different instances and versions of jquery.min.js
(For my situation) Put your bxSlider js files to footer.php but
leave the css files in header.php (for validation, just this way it
worked well)
Also you can write here, I can try to help you.