I have tried to use the foundation framework with the orbit sliders and when I test it on the browser, the slider performs the transitions, however the animations are not being performed and simply fades from 1 section to another.
Only when I try to resize the window, it works as expected.
After further inspection, apparently when the slider attempts to change using 'horizontal-push' the variable this.outerWIdth for the orbit-slide div is 1 instead of the actual width of the div.
Here is my markup for the features slider which I am using orbit for.
<div id="features-wrap" class="wrapper">
<!-- Insert Features Here -->
<div id="features-gutter" class="row">
<section id="features" class="row">
<div id="welcome">
<div class="eight columns">
<h4>Welcome</h4>
<p>Hello.</p>
</div>
<div class="four columns">
<img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="decorated">
<div class="eight columns">
<h4>Decorated Apparel</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="promotional">
<div class="eight columns">
<h4>Protional Products</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
</section>
</div>
<!-- End Insert Features Here -->
</div>
end of code
Here is also the Javascript I am calling.
var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });
Is there anything I am doing with the code or is it really a bug with the current script for orbit?
Thanks.
found the answer. I in order for the slider to get the right outerWidth I had to go to the div that initializes the sliders and overide the width that is set by the plugin in the css file. For example:
If features controls my orbit slider, then i need to do this:
#features {
width: <set the width here> !important;
<any other styles here>
}
Thanks
Related
So this is what I’m hoping to accomplish.
I currently have a bootstrap grid displaying 1 row and 4 columns.
On desktop devices the 4 columns appears next to each other
On tablets they appear in a 2 x 2 grid and in Mobile devices they appear 4 rows with 1 column.
Is it possible to make it so that when in tablet or mobile to have a carousel that I can slide between the 4 columns? So that when in Tablet there are 2 slides with two of the columns in each slide and when in mobile 4 slides with 1 column in each slide?
Here is my current grid code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="how container">
<div class="title">SUBSCRIBE IN JUST 4 EASY STEPS</div>
<div class="row no-gutters">
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SIGN UP</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SELECT AGE GROUP</span>
</div>
<div class="w-100 d-block d-lg-none"></div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>CHOOSE A SUBSCRIPTION PLAN</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>HAVE FUN</span>
</div>
</div>
<div class="row text-center pt-3">
<div class="col">
<button type="button" class="btn btn-dark btn-lg">GET STARTED</button>
</div>
</div>
</div>
If Bootstrap is the only library you're allowed to use, I would imagine you would have to have duplicate contents and show/hide one of them on different breakpoints for carousels or just regular 4-column content.
If that's not the case, I would highly recommend you to use OwlCarousel! That has everything you're looking for.
HTML
<div class="how container">
<h4 class="title">
SUBSCRIBE IN JUST 4 EASY STEPS
</h4>
<div class="owl-carousel owl-theme">
<div class="item">
<figure class="figure">
<img src="https://loremflickr.com/600/200?random=1"
class="figure-img img-fluid w-100" />
<figcaption class="figure-caption">
SIGN UP
</figcaption>
</figure>
</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</div>
As you can see, basically you just need a wrapper with a class .owl-theme that wraps a collection of .items. Inside each item, you can have any content you want. Here I just demonstrated to have a <figure /> inside of each item.
JavaScript
Make sure you've loaded jQuery first, then the javascript file of OwlCarousel, and then 2 style files: 1 core css and 1 theme. Installation details are documented here.
$(function() {
$('.owl-carousel').owlCarousel({
loop: false,
margin: 0,
nav: false,
responsive:{
0:{
items:1
},
768:{
items:2
},
992:{
items:4
}
}
});
});
See, in the responsive option, this is where you define how many items you want per break point. More info from their documentation site here!
Result
demo: https://jsfiddle.net/davidliang2008/mvn3k08u/22/
I have a jsfiddle here: https://jsfiddle.net/gemcodedigitalmarketing/zn5yLwh3/
What I want is the text in the customText input to be appended to the canvas. Though I am unsure as to why this is not working.
It works when I tried yesterday to append td and tr to a table. But maybe because its a canvas it needs a different way of adding text?
not sure... either way i would apprecaite help.
$('#addText').click(function() {
var value = $('#customText').val();
$('canvas').append('<p>' + value + '</p>');
});
This is my jquery at the bottom of the page
<div class="assets">
<h3>Assets</h3>
<div class="text">
<h4>Text</h4>
<input id="customText" type="text">
<button id="addText" class="btn btn-default">Add Text</button>
<p></p>
</div>
<div class="image">
<h4>Images</h4>
<ul class="list-unstyled">
<!-- List of images here -->
<!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> -->
</ul>
</div>
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>
This is the relevant html.
Hope that gives you guys enough to go on...
In your case canvas is not an element but a class.
This is from your fiddle:
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>
So you have to use it in the selector as:
$('.canvas')
Don't forget the dot.
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
Good day good people, I very much appreciate the depths of knowledge on this site.
Long story:
I have made a couple of very basic websites with html and css but this is my first attempt at a more interactive website with Javascript. The URL is www.audiophilesengineering.com and it has a few glitches that I cannot pinpoint in my code. Specifically, the entire "Contact" page loads the content twice. This seems like the most consistent error so I would like to tackle that first. I am currently a young broke entrepreneur, so I am forced to do most everything myself for my businesses, for now. At the same time I am dissatisfied with my previous boring website and want to make something much more interactive, but some serious glitches have developed.
tldr (short story);
Why does the content of http://audiophilesengineering.com/#!Contact.html display twice?
contact page html code:
<div class="genericSection section-CONTACT">
<!--add here url for this section background image-->
<img class="sectionBackgroundImage" src="pages/backgrounds/background_contact.jpg" />
<!--/section background image-->
<!--add here page number-->
<p class="pageNum textColor01">04/<span class="textColor03">07</span></p>
<!--/add here page number-->
<!--skeleton container-->
<div class="container">
<!--Website logo-->
<div class="row">
<div class="sixteen columns">
<img class="brand" src="images/logo.png" alt="logo" />
</div>
</div>
<!--/Website logo-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">1</div>
<h2 class="textColor01">Contact Us<span class="textColor02"> // Phone or Email</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<div class="addressContainer">
<p><a class="phoneBig textColor01" href="tel:+8134801321">813-480-1321</a></p>
<p>audiophilesengineering#gmail.com</p>
<p class="defaultText textColor01">Audiophiles Engineering<br />Tampa, Florida 33624<br />United States</p>
</div>
</div>
</div>
<!--/Section title H2-->
<!--vertical spacer-->
<div class="verticalSpacerMedium"></div>
<!--/vertical spacer-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">2</div>
<h2 class="textColor01">Visit Us<span class="textColor02"> // By Appointment Only</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<!--full width map-->
<div class="mapContainer">
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=28.04,-82.51&sll=28.040078,-82.510190&hl=en&ie=UTF8&t=p&ll=28.033198,-82.507324&spn=1.939406,8.789063&z=6&output=embed"></iframe>
</div>
</div>
</div>
<!--/Section title H2-->
</div>
<!--/skeleton container-->
</div>
I have a conditional display of panels in my application. The panels are separated by horizontal and vertical splitters. I would like to hide the horizontal splitter bar if I am hiding the panel below it.
Something similar to this -
<div id="myPanels" class="splitter">
<div class="leftPane" style="width:30%">
<div class="horizontalSplitter">
<div id="topPane" style="overflow-y: scroll "></div>
<div id="bottomPane"></div>
</div>
</div>
<div class="rightPane" id="rightPanel">
<div class="splitter" id="splitterRight">
<div class="leftPane" style="width:50%" id="hleftPanel">
</div>
<div class="rightPane" style="width:50%" id="hRightPanel">
</div>
</div>
</div>
$("#myPanels").splitter();
In this case if someone wants to hide the horizontal splitter bar with the #topPanel the code will be:
$("#topPanel").hide();
$("#topPanel").next().hide();