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.
Related
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,
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.
I was testing out the DHTMLXscheduler module on my application. I followed all the steps which explained setting up the module on http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:how_to_start but couldnt get it to work.
I have implemented the js and css in my header file and implemented all the necessary code. After running my application, I end up with an empty screen without any errors in my console.
Did someone ever experienced the same like this?
The code i used to initialize is exactly the same as shown on their webpage which is:
<script type="text/javascript">
scheduler.init('scheduler',null,"week");
</script>
<div id="content">
<div id="scheduler" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
I have also tried calling the init method after the html content which resulted in the same result.
The problem is solved. I had to increase the height of the inner div #content.
I am attempting to bind four properties to a fairly straight-forward HTML structure. Everything is peaches in FF11, Chrome18 and IE9 until I load the page in IE7/IE8 (by changing the Browser and Coument Modes in IE9's version of developer tools).
Simple HTML structure - just outputs four rows of bound data. A label and the bound data.
<div id="loyaltyProgramSummary" class="content-block clearfix" data-bind="with: CustomerPoints">
<div class="form-row">
<div>PricingGroup:</div>
<div><span data-bind="text:PricingGroupName"></div>
</div>
<div class="form-row">
<div>LifetimePointsToDate:</div>
<div><span data-bind="text:LifetimePoints"></div>
</div>
<div class="form-row">
<div>PointsUsed:</div>
<div><span data-bind="text:RedeemedPoints"></div>
</div>
<div class="form-row">
<div>AvailablePoints:</div>
<div><span data-bind="text:AvailablePoints"></div>
</div>
</div>
The first row, "PricingGroupName" is a ko.computed field and is the one that ends up getting dropped. When I look at the rendered HTML in the IE9 dev tools it has been omitted completely.
<div id="loyaltyProgramSummary" class="content-block clearfix" data-bind="with:CustomerPoints" __ko__1335910690335="ko3">
<div class="form-row" __ko__1335910690335="ko4">
<div>LifetimePointsToDate:</div>
<div><span data-bind="text:LifetimePoints" __ko__1335910690335="ko5">1000</div>
</div>
<div class="form-row" __ko__1335910690335="ko8">
<div>PointsUsed:</div>
<div><span data-bind="text:RedeemedPoints" __ko__1335910690335="ko6">1550</div>
</div>
<div class="form-row" __ko__1335910690335="ko9">
<div>AvailablePoints:</div>
<div><span data-bind="text:AvailablePoints" __ko__1335910690335="ko7">8450</div>
</div>
</div>
I thought it might have had something to do with the computed column but the "Available Points" is also a computed field and it functions perfectly.
I have created a "fiddle" illustrating the issuewhich can be found here...
Any help would be GREATLY appreciated!
Thank You,
Gary
Don't use empty self-closing tags, change to . http://jsfiddle.net/UXA4Q/13/