I have a simple bootstrap grid defined: jsFiddle
The problem is in bootstrap, we define grid like
<div class="row">
<div class="col-md-4">
...
But in flexslider2 we need to wrap into li, e.g.
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
But I want to retain to the use of bootstrap grid as it is responsive and position more easy to control. So, it is possible to remain my grid but to apply flexslide onto it?
I.e. in the flddle, I want 4 & 5 to be hidden at the beginning.
I don't know if this is what you are after, but actually FlexSlider has a "selector" option that allows you to wrap your slides into any element you want:
jsFiddle
$('.flexslider').flexslider({
selector: ".slides > div.col-md-4"
});
Anyway, maybe Bootstrap styles will interfere with Flexslider (because Flexslider sets the width of the slides when it loads), so not sure if this is a good idea. Probably it's easier to define specific styles for the slides.
I don't see the problem you are encountering, but i have updated your jsfiddle.
You should place the whole flexslider into the column:
<div class="row">
<div class="col-md-4">
<div class="flexslider">
<ul class="slides">
<li>
<img ... />
</li>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
</ul>
</div>
</div>
</div>
Related
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
I am developing a mobile app using jquery mobile. I am looking to implement a "tips" section. A tip will be visible on the screen, and with a side swipe, I would like to view another tip.
I was under the impression JQM would have a simple carousel type widget... that can be loaded with html content. That does not seem to be the case.
P.S. I am not looking for an image slider specifically, I want to slide and randomize a carousel that can be loaded with html elements (text).
Anyone have some ideas on what plays well with jquery mobile for mobile apps? (Cordova)
I've used Flex-slider and served me quite well.
Working Demo
Product link
Initialization:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
});
Markup
<!-- slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="slides/1.jpg" alt="slide">
<p class="flex-caption">Awesomeness</p>
</li>
<li>
<img src="slides/2.jpg" alt="slide">
<p class="flex-caption"> «Fantastic »</p>
</li>
<li>
<img src="slides/3.jpg" alt="slide">
<p class="flex-caption"> « Wow »</p>
</li>
</ul>
</div>
</div>
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.
I have made on the basis of the script BxSlider slider on its website.
Structure slider is as such:
<ul class="slider-cont">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">caption1.</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">caption3</div>
</li>
</ul>
Caption is over the image and is the way to the left of the slider. My question is whether it is possible using CSS3 or JS to do the same animation to make the text more quickly, "rolling off" and "rode" than the picture? I tried using the tool in the bxslider. OnSlideBefore or OnSlideAfter but I managed to get this effect.
I'm having trouble and I am not sure on how to tackle this problem.
I have a Spry Tabbed Panels Widget with content. I know that the 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly, but I would like to add one more level (the container class below the main div), like this:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="content">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
As far as I understand, in order to get this to work properly, I would have to modify the widget core. Can anyone point me in the right direction or help me modify the widget core?
Many thanks in advance!!
<div id="TabbedPanels1" class="TabbedPanels">
would work as
<div id="TabbedPanels1" class="TabbedPanels content">
so there is no need for another div layer...