I'm utilizing the Owl Carousel library for a slider on a partner's page. It's working pretty well except for setting the frequency and speed of the transitions.
I've followed the documentation and have the script, but it doesn't seem to be working properly. Below is the HTML and JS that I'm using. I've also linked to the page here: http://www.circuitclinicaltesting.com/our-partners.php
Like I said, all I'm trying to do is change the speed and frequency of the slides but it doesn't seem to work.
HTML
<div class="owlcarousel">
<section class="partner_slider slider_section header_height">
<ul id="main-slider" class="owl-carousel main_slider">
<div class="display-table">
<div class="table-cell">1
<div class="container">
<div class="col-md-1"></div>
<div class="slider_content">
<h2 class="text-left txt_white">PARTNER PERSPECTIVE</h2>
<h3>"Circuit Clinical provides us with the opportunity to shift the current paradigm when it comes to clinical research. They have been able to integrate research within our practice without the upfront cost."</h3>
<h2 class="txt_white">Dr. Raul Vazquez, MD</h2>
<p>Urban Family Practice</p>
</div>
</div>
</div>
</div>
<div class="display-table">
<div class="table-cell">
<div class="container">
<div class="col-md-1"></div>
<div class="slider_content">
<h2 class="text-left txt_white">PARTNER PERSPECTIVE</h2>
<h3>“Until now, I haven't had the opportunity to participate in clinical research because we didn’t have the infrastructure in place to do so. Circuit Clinical has provided the tools and infrastructure while also bringing the trials to us so we can begin enrollment immediately.”</h3>
<h2 class="txt_white">Dr. Dennis B. Chugh, MD</h2>
<p>Northtowns Cardiology</p>
</div>
</div>
</div>
</div>
</ul>
</section>
</div>
</div>
JS
<script>
$(document).ready(function() {
$("#main-slider").owlCarousel({
slideSpeed : 10000,
autoPlay : true,
autoplaySpeed:10000
});
});
</script>
I managed to figure it out. It was looking for autoplayTimeout. Adding the following to the script settings solved the issue!
autoplayTimeout: 10000,
smartSpeed: 1000,
Related
So I have about 20 projects to show on my website and since I don't want to create 20 HTML files for each of them, I use this script to link people to the specific projects they click on. And so the link is like: http://mywebsite.com/projects.html?option="project1"
The problem I notice is that it usually displays the first project for about 1 second or longer before it shows the project I click on, I don't know what's the cause, I don't know if it's a glitch. Is there a way to fix it?
The script and my html:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
<a href="projects.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item">
<h3>Sleep infographic</h3>
<span class="category">Motion graphics</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="images/thumb_item07.gif" />
</div>
<div id="view">view</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
</a>
HMTL of the project page:
<div class="container">
<div class="boxes" id="haivinh">
<div class="sidebar full-width">
<div class="desktop-6 tablet-12 columns">
<!--
.sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates
-->
<div class="box-info">
<h4 class="border-top">
Metro train ad</h3>
<p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p>
</div>
<!-- // .box-info -->
</div>
<!-- // .desktop-6 -->
</div>
</div>
My guess would be that you default to showing project 1. You can tell this because your showDiv() function starts with a .hide(). As your function is not run until document.ready, you may see the initial setup for a short period before the function is run.
To fix this, make sure everything is hidden before running your js.
Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.
iview slider automatically decreases the .iview-caption div height after every slide and thats why my content cut last line. Please anybody Solve this problem.
Here is Code:-
<div id="iview">
<div data-iview:thumbnail="slider/img/photo1.jpg" data-iview:image="slider/img/photo2.jpg">
<div class="iview-caption" data-x="130" data-y="50" data-transition="expandRight">
Can’t decide if you hate your job or your boss more?
</div>
<div class="iview-caption caption1" data-x="0" data-y="40" data-transition="fade" data-speed="2000">
<span>Thinking of changing jobs? <strong>Register here</strong> for exciting new job opportunities with Staffing.</span></div>
</div>
<div data-iview:thumbnail="slider/img/photo2.jpg" data-iview:image="slider/img/photo1.jpg">
<div class="iview-caption" data-x="130" data-y="50" data-transition="expandRight" >
Research shows that 78% of resumes are misleading.
</div>
<div class="iview-caption caption1" data-x="0" data-y="40" data-transition="fade" data-speed="2000">
<span>Want to find the other 22%? We’ve already done that for you.</span>
</div>
</div>
</div>
</div>
According to the code samples, this SHOULD be fairly easy...
<div class="row" data-equalizer>
<div class="large-3 medium-3 columns">
<div class="panel coupon sticky" data-equalizer-watch>
<h4>Save 50% on sneakers today</h4>
<h5>Only at Reebok, Inc.</h5>
<h6>Expires on June 12, 2014</h6>
View Coupon
</div>
</div>
<div class="large-3 medium-3 columns">
<div class="panel coupon sticky" data-equalizer-watch>
<h4>Save 50% on sneakers today</h4>
<h5>Only at Reebok, Inc.</h5>
<h6>Expires on June 12, 2014</h6>
View Coupon
<p>Just some extra data to add some height.</p>
</div>
</div>
Then, I've got the required javascripts connected and am not getting any errors in the console.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
So, I'm not really sure what's going on here and I can't seem to find any solutions online...
Thanks in advance for the help!
I believe the issue is that you are using more JavaScript than you need. Have you tried it without foundation.equalizer.js and foundation.topbar.js?
Here is a codepen I created using your HTML and it looks to be working fine. If you click on the gear next to CSS and JS you will see that I am just using the foundation.min.css (5.3.0), jquery (latest), and foundation.min.js (5.3.0).
If you have any questions please let me know.
Can someone help me write the proper GA setup for the following HTML code?
I"m trying to track the downloads of the media kit and the capabilities (both PDF's)
I'm running analytics.js and it's pretty connfusing to me unfortunately.
Here is the code.
<div class="row">
<div class="twelve columns">
<div class="tabs-content-container">
<div class="eight columns">
<img src="img/brochure.jpg" alt="blog" style="padding-bottom: 10px;">
</div>
<div class="four columns">
<h3>Download Company Overview</h3>
<p>Thank you for taking the time to learn more about our company. The additional information in these brochures will tell you more about our history, products and references.</p>
<p>Our printable company overview brochure is now available for download. Both documents require <a target="_blank" href="http://get.adobe.com/reader/"> Adobe Reader</a>. Click the links below to download our company’s Capabilities and Media Kit.</p>
<a target="_blank" href="Capabilities.pdf">Download Capabilities →</a>
</div>
</div>
</div>
</div>
</section>
<!-- end section-tabs -->
<section class="msg-container diff-msg" style="margin-bottom:0;">
<div class="msg-inner-container">
<a target="_blank" href="MediaKit.pdf" class="download">Download Media Kit</a>
</div>
</section>
the issue is that I'm used to the ga.js style of event tracking in which I would have done something like this: Download Media Kit. That however doesn't work with analytics.js and the documentation doesn't really make sense to me.
Thank you
I figured it out.
onClick="ga('send', {'hitType': 'event', 'eventCategory': 'download', 'eventAction': clickedDownload', eventLabel': 'Capabilities' });"
thanks to everyone who tried to help.