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>
Related
I want to enable deep-linking to images in a Swiper carousel. The "hashNavigation" component seems to be purpose-built for this but I can't see how to make it work. When I enable it and provide the data-hash attribute in my slides it replaces the entire path with the hash I provided. Obviously, this renders it useless for any swiper not on the home page. How can I get it to append the hash to the path instead of replacing it? Here's my code instantiating it:
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
mousewheel: true,
hashNavigation: {
watchState: true,
replaceState: true,
},
autoplay: {delay: 4444}
},
swiper = new Swiper(vis, swiperOpts);
And a markup sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="preconnect" href="//cdnjs.cloudflare.com">
<link rel="preconnect" href="//unpkg.com">
<link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
</head>
<body class="visio">
<main>
<div class="swiper-container" id="vis">
<ul class="swiper-wrapper">
<li class="swiper-slide" data-hash="235" style="">
<p>slide one</p></li>
<li class="swiper-slide" data-hash="228" style="">
<p>slide two</p></li>
<li class="swiper-slide" data-hash="224" style="">
<p>slide tre</p></li>
<li class="swiper-slide" data-hash="227" style="">
<p>slide for</p></li>
<li class="swiper-slide" data-hash="236" style="">
<p>slide fiv</p></li>
</ul>
</div>
</main>
<script src="//unpkg.com/swiper/js/swiper.min.js"></script>
</body></html>
Here are some examples of the URLs I'm seeing:
base URL: domain.com/visio/sol
slide data-hash value: 224
URL after Swiper modifies: domain.com/#224
I was never able to get this to work properly but I worked around it with the following code:
let initIDX = 0;
if(window.location.hash){
let lmnt = document.querySelector('[data-hash="'+window.location.hash.substring(1)+'"]'),
i = 0;
while((lmnt = lmnt.previousSibling) != null) if(lmnt.nodeType == 1) ++i;
initIDX = i;
}
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
initialSlide: initIDX,
on:{
slideChangeTransitionEnd: function(){
history.replaceState(null, null,
window.location.pathname + '#' + this.slides[this.activeIndex].dataset.hash);
}
}
},
swiper = new Swiper(vis, swiperOpts);
This is working for me.
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>
I'm creating vertical menu for my asp.net mvc 4 web application.
so I referred this Link to integrate to my matter .
so I edited my _HECLayout.cshtml (that contains in “~/Views/Shared/”) file Like this
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src='~/Scripts/jquery-2.0.0.min.js'/></script>
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/css.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('ul.formxd li a').click(
function (e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
e.stopPropagation; // stop the click from bubbling
$(this).closest('ul').find('.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
</script>
<meta charset="utf-8" />
<title>#ViewBag.Title - Higher Education Council</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<div id="header">
<div id="top-area">
<div id="logo-area">
<img src="~/Images/hec-logo.png" />
</div>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<section id="text-view" style="display: inline; width: 100%; text-align: right;" >
<p><i>Higher Education Institutes </i></p>
</section>
</div>
</div>
</header>
#RenderSection("featured", required: false)
<div id="menu_area">
<div class="hec_admin_menu" >
<ul class="formxd">
<li class="welcome"><a class="welcome"><i class="icon-fa-university"></i>Welcome HEC</a></li>
<li ><a class="dashboard" href="#"><i class="icon-dashboard"></i>Dashboard</a></li>
<li ><a class="reports" href="#"><i class="icon-file"></i>Reports</a></li>
<li><a class="administrator" href="#"><i class="icon-user"></i>Administrator</a></li>
<li><a class="search" href="#"><i class="icon-search"></i>Search</a></li>
<li><a class="logout" href="#Url.Action("Login", "HECAccount")"><i class="icon-signout"></i>Logout</a></li>
</ul>
</div>
<div class="hec_admin_body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
It's giving smooth view like the demo which I mentioned HERE , but logout url action not working properly.And all the urls not working properly ,
Any suggestion to overcome with his probblem
<li><a class="logout" href="#Url.Action("Login", "HECAccount")"><i class="icon-signout"></i>Logout</a></li>
I got same error when I trying to insert jquery reference like above , links doesn't working
So I referred This Link
That's an approach to give jquery reference to HTML Page , but in CSHTML when you insert #Scripts.Render("~/bundles/jquery") you don't need add one by one references like you done here ,
So remove <script type="text/javascript" src='~/Scripts/jquery-2.0.0.min.js'/></script>
keep #Scripts.Render("~/bundles/jquery") under the code
If your project doesn't have the "jquery-2.0.0.min.js" file , manually insert into "~/Script" Folder
I'm having problems implementing the One Page Nav and scrollTo jQuery plugins (Seems I need more reputation to post the links, so I hope you know which plugins I'm referring to). I'm a complete beginner to Javascript and I just want the links of my navigation bar to have a scrolling effect as seen here.
I've pasted the entire code of my html page below as I'm not sure where I've gone wrong. For now I've left in the ready functions from both plugins (although I have tried with only one - and also tried attaching it to 'div#nav', '#navbar', etc.).
<html>
<head>
<meta charset="utf-8">
<title>deepeedesigns - Portfolio site of Web Designer Dan Pierce</title>
<link rel="icon" type="image/png" href=""><!--favicon-->
<meta name="description" content=""><!--description that appears under Google listing-->
<meta name="keywords" content="">
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
</head>
<body>
<div id="header">
<div class="container">
<div id="navbar">
<div id="logo"><img src="images/logo.png"></div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--navbar-->
</div><!--container-->
</div><!--header-->
<div id="home">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--home-->
<div id="about">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--about-->
<div id="portfolio">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--portfolio-->
<div id="contact">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--contact-->
$(document).ready(function() {
$('#nav').onePageNav();
});
$(document).ready(function() {
$('#nav').$scrollTo();
});
</body>
</html>
Where is your opening <script> and closing </script> tag for the jQuery?
Update:
Why declare $(document).ready twice?
$(document).ready(function() {
$('#nav').onePageNav();
$('#nav').scrollTo();
});
You do not need to use Jquery to scroll top. You can use it on window object
window.scrollTo(0,0);
But if you want to animate or want to perform scroll on specific element, then you can use jquery
$("html, body").animate({ scrollTop: 0 }, "slow");
In your code, you have to write your javascript code inside <script></script> tag.
There is an spelling mistake of scrollTo instead of $scrollTo
Back To Top Link
HTML
<a class="btn-go-top" href="javascript:window.scrollTo(0,0);">Go to top</a>
CSS
.btn-go-top {
position:fixed;
bottom: 20px;
right: 20px;
}
I'm tying to implement Twitter-Bootstrap Scrollspy on a menu so that when the user scrolls to a section of the page the css class is changed. This proven to be beyond frustrating. I'm already using the affix code from the code which works great.
So from my code below when a user scrolls to the LI element of #ScrollSpyContent I want to change the class of .product_submenu_image to .product_submenu_active.
How can I do this?
(I'm using jsp's in java so their might be some java code in here. I tried to strip out most of it.)
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works