My problem is about Flexslider plugin. I don't know why slides are out of order. Considering my markup:
<div class="flexslider">
<ul class="slides">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
I have this result:
First li appears as second slide, second li as third slide, and third li as first slide.
This problem appears when I add animation: "slide" option, like this:
$(window).ready(function() {
$('.flexslider').flexslider({animation: "slide"});
});
I'm confused, maybe somewhere in my code some CSS causes this behavior.
This problem is a bug in flexslider version 2.2.2 download package. Even the demo file in the downloaded package does not work fine, really!
After so much investigation I found out the "jquery.flexslider.js" has problem and got a working file from version 2.2.0.
The solution: Get a working package version 2.2.0. If you are interested make a comment to make a working package available to you for download.
It's hard to tell what is going wrong without all of the code, but this may be a solution for you.
$(window).ready(function() {
$('.flexslider').flexslider({animation: "slide", startAt: 0});
});
This is because you put the slides in an unordered list, when you should use ordered list like this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({animation: "slide"});
});
</script>
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
</body>
</html>
EDIT: Try the updated code. Make sure that you load the flexslider.css before JS and you use $(window).load
Related
I am using mmenu as responsive menu on my website. I noticed recently that in Googles search console I have errors due to high CLS (Cumulative Layout Shift). I checked and it's true, when I try to open my page in "slow" mode for a half sec I see the original menu structure, then mmenu loads (after jQuery is ready etc) and the page is showing correctly.
My simplified page structure is:
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
});
});
<html>
<head>
</head>
<body>
<nav id="menu">
<ul>
<li><a>Categories</a>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
<div class="content">This is content</div>
</body>
</html>
What do you think, is it possible to apply any quick fix here which will fix my CLS issue?
Without any experience with mmenu, shouldn't it be sufficient to hide #menu using CSS and only display it once the menu is initialized?
This seems to work for me:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.min.css" />
</head>
<script type="text/javascript" data-no-instant>
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
}).css("display", "");
});
</script>
</head>
<body>
<nav id="menu" style="display: none">
<!-- <nav> content from your example -->
</nav>
open menu
<div class="content">This is content</div>
</body>
</html>
It's hard to answer without seeing the actual code, but to not have to wait for the entire page to be ready you could position your scripts in such a way that you don't need to use the ready call of jQuery.
Try the following:
1 - Load jQuery locally instead from a CDN
2 - Place jQuery script tag before your actual Body html data and place that mmenu call right after the body's html code, that way the content won't be shown before everything has loaded
Another alterantive is to have your body to display a loading animation until jQuery and other cdns have loaded, so you'll be able to fetch everything, run that mmenu call and only then display the content to the user, this method is a little more user-friendly then what I suggested because instead of a blank screen it'll actually show some feedback that the content is being loaded for users with a slower connection.
The way I would handle this is to have a dummy element that has the same size/shape/color of your problem element to act as a placeholder while having the problem element hidden. After jQuery is loaded, I would then remove/hide the dummy element and show the problem one.
To resolve such issue, you would require to change some code structure and ordering of java script and CSS and that would require some efforts/testing.
But you can try by showing a loader/progress bar until "mmenu" is loaded and that might resolve your issue.
I'm having an issue where the JQuery isn't firing on a button click. I've been looking through the Chrome debugger but nothing is coming up. No errors and when the button is clicked nothing happens.
I am using a fresh build of MVC with the initial references for Web API and MVC. The plugin I wish to get working is the Menu Slider here
I have tried to strip out as much as possible, the sidr.js and the sidr.css are the same as taken from the above link.
Can anyone see what I'm doing wrong? I've reordered the scripts to get the jquery-1.9.1.min to load first but still no dice.
Update
I have just rebuilt the below code on another computer, same IIS, Visual Studio etc and it works (with the button) what could be making JQuery not run (I've gone through the references and they match up) as I'm out of ideas.
Layout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
<link href="#Url.Content("~/Content/jquery.sidr.dark.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.sidr.js")"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#slide').sidr();
});
</script>
</head>
<body>
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<button id="slide">Reveal Menu</button>
<div>
#RenderBody()
#RenderSection("scripts", required:false)
</div>
</body>
</html>
I believe that this plugin needs to be instantiated on markup with a list inside. Something like this:
<a id="demo" href="#slide">Reveal Menu</a>
<div id="slide">
<ul>
<li>Menu Item</li>
</ul>
</div>
If you want JQuery to do something on click try this.
https://api.jquery.com/click/
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
Here is a fiddler where Jquery pops an alert on button click.
https://jsfiddle.net/wncdr034/
Maybe you can trigger the slide from within the event function?
As per their documentation they have the below code:
<a id="demo" href="#sidr">Toogle menu</a>
<div id="sidr">
<ul>
<li>Side <a href="http://www.jqueryscript.net/menu/">Menu 1</a></li>
<li class="active">Side Menu 2</li>
<li>Side Menu 3</li>
</ul>
</div>
They have mentioned href to the anchor which is the id of sliding div but here you have button and have initialized .sidr() on that which will not have href attribute! I suspect the plugin may work on the href attribute of the anchor. So my suggestion is why don't you just replace your button with anchor and provide href value with the div id as below:
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<a id="slide" href="#sidr">Reveal Menu</button>
I am creating an unordered list for horizontal tab component. I want each list item filling in one of three boxes with uniform length and height shown on the image. Here is my jsFiddle and javascript. What should I change on CSS to make this happen?
$(function(){
$('#tabs').tabs({
event: "mouseover"
});
});
Here is the jsfiddle.
HTML & CSS: How to create four equal size tabs that fill 100% width?
I tried table display yesterday but did not work yesterday. Yet, it seems to work today so I post it in case someone shares the same problem with me
Nice solution.
One of advices and solutions is also to take look on bootstrap components, and just include the classes correctly:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-pills nav-justified">
<li role="" class="active">Home</li>
<li role="">Profile</li>
<li role="">Messages</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I think this can also be helpful, you can save a lot of time with design :)
I'm having some issues regarging Bootstrap, I'm following a basic tutorial and all works however the CSS file is not loading properly. I've searched around on StackOverflow however none of it worked. My HTML file is in the exact same folder as the css folder is. This is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”></meta>
<title>This is a title, oh-ehm-GHEE</title>
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
</head>
<body>
<div class="”container”">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
It looks like fancy quotes snuck into your code, as seen on these two lines:
<div class="”container”">
<h1>Bootstrap Site</h1>
Note the difference between the inner and outer quotes. The same quotes are in your meta tag, the link for the stylesheet, and your final script tag.
Replace the fancy quotes with standard quotes, and as long as your directory structure is right, it should work.
If your html is the same folder as you css? Then there is no css folder or your html is within the css folder am I right?
Try something like this
<link rel=”stylesheet” href=”bootstrap.css” type=”text/css”/>
Did you download the zip file from http://getbootstrap.com/? Typically the CSS, ICO and JS files are in "assets". So you need to upload those files and reference those files in your HTML. Make sure you have the files uploaded and are referencing correctly.
Also be sure you are referencing the CDN version of jQuery like so:
<script src="//code.jquery.com/jquery.js"></script>
Using the //code.jquery.... will ensure that your JS will always be up to date and if you ever use "https" on your website your JS files will be secured as well.
Hope that helps.
I've seen this question before, but none of the solutions I've seen hence far have worked.
I'm attempting to simply get the image to fade in when hovered over and fade out when not. The following is a snippet of my HTML:
<script type="text/javascript" src="js/tabs.js"></script>
<ul>
<li>
<a href="#jenn">
<img class="img-fade" src="img/team/jenn.jpg" alt="Jenn">Jenn
</a>
</li>
</ul>
I have some CSS that sets .img-fade to opacity: 0.5;.
Then my tabs.js file looks like this:
$(document).ready(function() {
$('.img-fade').mouseenter(function() {
$('.img-fade').fadeTo('fast',1);
});
$('.img-fade').mouseleave(function() {
$('.img-fade').fadeTo('fast',0.5);
});
});
I'm not sure why this isn't working. It seems simplistic enough. Any help would be much appreciated. Thanks!
I tried your code with the following reference to jquery in the header:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
And it worked well! Are you still having issues?