When I resize my window, Flexslider does not resize. You can see my working code here.
I am following FlexSlider's example, and have reduced all possible variables.
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
</ul>
</div>
$(document).ready(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
Turns out it's an issue with version 2.6.4 of FlexSlider. In the meantime, I just used version 2.6.3
Related
I am using jquery SmartWizard control and want to show the toolbar vertically with the content for each tab to the right.However hen I run the below code, I get the error 'Element not found .nav'. What am I doing wrong? Any help is appreciated. Is it possible to make smartwizard show vertically with tab content to the side.
#model ApplicationViewModel
<div id="smartwizard">
<h3>Application</h3>
<div class="row">
<div class="col-3">
<ul class="nav flex-column nav-pills">
<li>
<a class="nav-link" href="#step-1">
Personal Information
</a>
</li>
<li>
<a class="nav-link" href="#step-2">
Education
</a>
</li>
<li>
<a class="nav-link" href="#step-3">
Professional Experience
</a>
</li>
<li>
<a class="nav-link" href="#step-4">
Business and Finanical Information
</a>
</li>
</ul>
</div>
<div class="col-9">
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel">
<partial name="_PersonalInfo" model="Model" />
</div>
<div id="step-2" class="tab-pane" role="tabpanel">
Education
</div>
<div id="step-3" class="tab-pane" role="tabpanel">
Professional Experience
</div>
<div id="step-4" class="tab-pane" role="tabpanel">
Business and Finanical Information
</div>
</div>
</div>
</div>
</div>
#section scripts{
<script>
$(document).ready(function () {
// SmartWizard initialize
$('#smartwizard').smartWizard({
toolbarSettings: {
toolbarButtonPosition: 'right', // left, right, center
showNextButton: true, // show/hide a Next button
showPreviousButton: false, // show/hide a Previous button
toolbarExtraButtons: [$('<button></button>').text('Save')
.addClass('btn btn-info')
] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
}
});
});
</script>
}
I am using materialize css 1.0.0-rc.2. I am having issues in dropdown. Same dropdown is linked to navbar and sidenav but only one of them working and next thing is it should come below the navbar or link when hovered or clicked.What should I do please help?
I think it won't work for same dropdown structure in both Navbar and Sidebar. Making two dropdown structure can solve your problem.
<nav>
<div class="nav-wrapper">
Logo
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<ul id="dropdown1" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul class="sidenav" id="mobile-demo">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger2" href="#" data-target="dropdown2">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
<script>
$(document).ready(function () {
$(".dropdown-trigger").dropdown({
hover: true
});
$(".dropdown-trigger2").dropdown();
$('.sidenav').sidenav();
});
</script>
Hi I'm usually using flexslider. Now i need a thumnail slider. But thumbnail should be vertical, it should have arrows and while clicking on it have to scroll upwards and downwards..Is that possible with flex slider? Can you guys help me?
Here is my code...
<section class="gallery-details-wrap row-fluid">
<div id="slider" class="gallery-details-slider flexslider">
<ul class="slides">
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="gallery-details-carousel flexslider">
<ul class="slides">
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</section>
my script...
$(window).load(function(){
$('.gallery-details-carousel').flexslider({
animation: "slide",
controlNav: false,
directionlNav: true,
animationLoop: false,
slideshow: false,
itemWidth: 111,
itemMargin: 5,
maxItems: 5,
asNavFor: '.gallery-details-slider',
});
$('.gallery-details-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: ".gallery-details-carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
I have here my sidenav but it keeps indenting and indenting everytime i put an icon before my link. Please help me..
<ul id="mobile-demo" class="side-nav">
<li>
<div class="userView">
<img class="background" src="http://materializecss.com/images/office.jpg">
<img class="circle" src="http://materializecss.com/images/yuna.jpg">
<span class="white-text name">Nelson Maranan</span>
<span class="white-text email">nmaranan11#gmail.com</span>
</div>
</li>
<li><i class="material-icons">home</i>Home</li>
<li><i class="material-icons">list</i>Browse</li>
<li><i class="material-icons">message</i>Messages <span class="badge">3</span></li>
<li><i class="material-icons">notifications</i>Notifications <span class="badge">10</span></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Here's my screenshot to show the problem:
But when I remove icons it displays just fine. How can I fix this issue?
I faced this issue too.
Just add this rule in your stylesheet:
.side-nav li{
clear: both;
}
What is the code to produce the following:
I'm using visual studio 2013 with web essential installed...
I need a ul with 3 li with an and img inside...
<ul class="gallery">
<li>
<a href="../upload/files/image-1" class="fb" rel="gallery">
<img src="../upload/files/item-1" alt="Foto" />
</a>
</li>
<li>
<a href="../upload/files/image-2" class="fb" rel="gallery">
<img src="../upload/files/item-2" alt="Foto" />
</a>
</li>
<li>
<a href="../upload/files/image-3" class="fb" rel="gallery">
<img src="../upload/files/item-3" alt="Foto" />
</a>
</li>
thanks ...
Try the following:
ul.gallery>li*3>a[href=../upload/files/image-$][class=fb][rel=gallery]>img[src=../upload/files/item-$][alt=Foto]