I have a quiz page that asks a question and the user is to check 3 appropriate checkboxes as his or her answer (out of a list of 6 checkboxes). Then the user is to check his/her answers by hovering over the answer button ('#check-answer-btn')
If the user hovers over the $('#check-answer-btn') with less than 3 checkboxes checked, I want a certain alert $('.alert-box2') to fadeIn.
So my question is, can I have two conditionals within one hover function? I'm posting the code I have tried to no avail. Can someone help me find a solution? Thanks.
$('#check-answer-btn').hover(function(e){
var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
if (checkboxes < 3) {
$('.alert-box2').fadeIn(200);
}, $('.alert-box2').stop().fadeOut(200);
else if (checkboxes >= 3) {
$('#checkbox-fadebox').fadeIn(200);
}, $('#checkbox-fadebox').stop().fadeOut(200);
);
I thought the HTML might be too much but here it is:
<p style="width:675px; margin:15px 0 20px 0;">Please choose the best answer for each of the following questions. <br>After you've selected your answer, roll over the <span class="bold">Check Answer</span> button.</p>
<div class="quiz-25a question1 inline vertical" style="margin:15px 0 0 0;">
<p class="bold float-left">1.</p><span class="bold float-left" style=" width:640px; margin:0 0 10px 10px;">Indicators are why the claim rep referred this questionable claim to you as an investigator.</span>
<div class="clear"></div>
<input id="quiz-25a-1a" type="radio" name="quiz-25a-1a" value="a"><p class="float-left" style="margin:0 12px;">a.</p><span>True</span>
<div class="clear"></div>
<input id="quiz-25a-1b" type="radio" name="quiz-25a-1b" value="b"><p class="float-left" style="margin:0 12px;">b.</p><span>False</span>
<div class="clear"></div>
<button id="answer-btn1" class="answer-btn"></button>
</div><!-- end quiz-25a question1 inline vertical -->
<form class="chbx-25a inline vertical" style="margin:15px 0 0 0;">
<p class="bold float-left">2.</p><span class="bold float-left" style=" width:640px; margin:0 0 10px 10px;">Identify 3 reasons included in the following list that are reasons for creating a vehicle theft insurance fraud scheme.</span>
<div class="clear"></div>
<label for="chbx-25a-2-1"><input id="chbx-25a-2-1" type="checkbox"><span class="bold float-left">A.</span><span>There is no work number for either Bob or Jane Field’s in the claim file.</span></label>
<label for="chbx-25a-2-2"><input id="chbx-25a-2-2" type="checkbox"><span class="bold float-left">B.</span><span>The vehicle had 8400 miles on it at the time of the theft.</span></label>
<label for="chbx-25a-2-3"><input id="chbx-25a-2-3" type="checkbox"><span class="bold float-left">C.</span><span>The theft happened in the middle of the day, downtown with no witnesses.</span></label>
<label for="chbx-25a-2-4"><input id="chbx-25a-2-4" type="checkbox"><span class="bold float-left">D.</span><span>Mrs. Fields parked the car one door down from Betty’s.</span></label>
<label for="chbx-25a-2-5"><input id="chbx-25a-2-5" type="checkbox"><span class="bold float-left">E.</span><span>The vehicle had a premium sound system.</span></label>
<label for="chbx-25a-2-6"><input id="chbx-25a-2-6" type="checkbox"><span class="bold float-left">F.</span><span>The vehicle had an anti-theft alarm that no one heard.</span></label>
</form><!-- end chbx-25a inline vertical -->
<button id="check-answer-btn" class="check-answers-btn"></button>
<p style="margin-top:15px;">Click NEXT to continue.</p>
<div id="answer1" class="fade-box absolute" style="width:340px; height:105px; top:150px; left:270px;">
<p class="answer-title bold">The correct answer is a, true.</p>
<p class="font-size14">Indicators of a questionable claim are inconsistencies in a claimant’s story, they don’t make sense in the over-all big picture. As these indicators mount up, it becomes more important to investigate the claim.</p>
</div><!-- end answer1 -->
<div id="checkbox-fadebox" class="fade-box absolute" style="text-align:center; width:410px; height:470px; top:65px; left:235px;">
<p class="bold italic" style="font-size:16rpx; margin-top:5px;">The following indicators of vehicle theft insurance fraud apply to this case.</p>
<img src="img/25b-chbx-ans.gif" alt="" style="margin:12px 0 0 0;"/>
</div><!-- end checkbox-fadebox -->
<div class="alert-box absolute">
<p>Please select the best answer(s)<br> for <span style="text-decoration:underline;">each</span> of the following questions.</p>
<img class="OK-btn absolute pointer" style="display:block; bottom:6px; right:6px;" src="img/OK-btn.gif" />
</div>
<div class="alert-box2 absolute">
<p>Please identify 3 reasons for creating a vehicle theft insurance fraud scheme.</p>
</div>
I found my answer by discovering errors in my own syntax and breaking the conditionals into two separate ones. I realized that the value I assigned to my variable "checkboxes" was different than the one found in my HTML (.chbx-25b and .chbx-25a). Also, the first curly braces used after each of the "ifs" are incorrect. I have posted the successful block of code below. Thanks to all who attempted to help!
$('#check-answer-btn').hover(function(){
var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
if(checkboxes === 3)
$('#checkbox-fadebox').fadeIn();
}, function(){
$('#checkbox-fadebox').stop().fadeOut();
});
$('#check-answer-btn').hover(function(){
var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
if(checkboxes!== 3)
$('.alert-box25b').fadeIn();
}, function(){
$('.alert-box25b').stop().fadeOut();
});
Related
I am trying to use the Flickity library to create a horizontal history timeline carousel. I have the basics working with data attributes, but am stuck on implementing data-nav and data-nav-title functionality. This functionality would be used to sync the .carousel-cell in the .carousel-nav with the associated .carousel-cell in the .main-carousel.
For example, the .carousel-nav .carousel-cell 1984-1988 would remain visible in the carousel until all of the associated 1984-1988 slides have been clicked/tapped/scrolled through by the user.
The following code sample details how the structure is currently set.
I have tried using "asNavFor": ".carousel-nav" and "asNavFor": ".main-carousel" in the respective DIVs with no success. I have also tried removing title from the data-nav-title attribute, but that did not work either.
Any suggestions or tips are greatly appreciated.
.carousel-container {
max-width: 1040px;
margin: 0 auto;
background-color: #f7f7f7;
overflow: hidden;
}
.carousel-nav .carousel-cell {
display: inline-block;
width: 100%;
height: 60px;
}
.carousel-nav .carousel-cell.is-selected {
font-weight: bold;
color: #A4475B;
}
.carousel-nav .end-year {
position: absolute;
top: 0;
right: 0;
}
.main-carousel .carousel-cell {
width: 100%;
}
.carousel-card p {
width: 50%;
min-width: 400px;
margin: 0 10px 0 0;
padding: 0;
background-color: #f7f7f7;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel-container">
<div class="carousel-nav flickity-enabled" tabindex="0" data-flickity='{"asNavFor": ".main-carousel", "pageDots": false, "prevNextButtons": false, "draggable": false, "contain": true}'>
<div class="carousel-cell" data-nav="1984-1988">
<span class="start-year">1984</span>
<span class="end-year">1988</span>
</div>
<div class="carousel-cell" data-nav="1989-1992">
<span class="start-year">1989</span>
<span class="end-year">1992</span>
</div>
<div class="carousel-cell" data-nav="1993-1999">
<span class="start-year">1993</span>
<span class="end-year">1999</span>
</div>
<div class="carousel-cell" data-nav="2000-2002">
<span class="start-year">2000</span>
<span class="end-year">2002</span>
</div>
<div class="carousel-cell" data-nav="2003-2005">
<span class="start-year">2003</span>
<span class="end-year">2005</span>
</div>
<div class="carousel-cell" data-nav="2006-2012">
<span class="start-year">2006</span>
<span class="end-year">2012</span>
</div>
<div class="carousel-cell" data-nav="2013-2020">
<span class="start-year">2013</span>
<span class="end-year">2020</span>
</div>
</div>
<div class="main-carousel flickity-enabled is-draggable" data-flickity='{"pageDots": false}'>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Medicine River Wildlife Centre (MRWC) began in the basement and barn of a rental property with no thought of a long-term plan. The vision was that a few wild animals might come to the Red Deer SPCA each year and MRWC could help to care for them
in the founder’s (Carol Kelly) rented home.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Wildlife Rehabilitation was a relatively new concept in Alberta and although MRWC had many supporters, there were others who questioned it, criticized the efforts, and some were outright against it. Fundraising was exceedingly difficult. Very
few people wanted to give to something they didn’t understand. The facility, vehicle, labour and many supplies came from Carol and her family. The children’s playroom became an intensive care room and the barn served as a flight area.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>The first year saw 14 patients, admitted mostly through Red Deer Department of Fish and Wildlife (F & W).</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>For the first 2 years, MRWC was not allowed to advertise as a "wildlife" hospital but had to call themselves an “animal” hospital.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>By the third year, MRWC was given permission to call themselves a wildlife hospital. The Red Deer Advocate did a one-page article on the Centre and the patient load increased to 284 the following year.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Carol contacted numerous organizations and people to help increase her knowledge and create a network, including Calgary Zoo, F & W biologists, Morris Flewwelling, Kerry Wood Nature Centre, Coaldale Birds of Prey Centre, and many more. She
joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>She joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
</div>
</div>
I am trying to write a script in tampermonkey that prints/inserts a value calculating the $ per sq ft. (Price/Total Sq Ft.) of each listing in a list like this. I have no javascript experience:
Screen Shot Example
Webpage:
http://www.utahrealestate.com/search/map.search
Relevant portion of HTML (one of the listings:)
<div id="mls-inline-1420899" class="listing_container">
<div class="listing-wrapper-table">
<div class="listing-wrapper-row">
<div class="listing-container-desktop">
<div class="listing-wrapper-cell">
<img src="http://assets.utahrealestate.com/photos/280x210/1420899_6faef96a263f4613b6b300cc915a9767_710733.jpg" class="listing-img" alt="MLS #1420899 Photo">
</div>
<div class="listing-wrapper-cell aligned-top">
<div class="inline_info">
<p class="status">
<i class="icon icon-circle status-1"></i> Active </p>
<h3>$249,000</h3>
<div class="list-info-content">
135 S 300 E <br>
Provo, UT 84606 </div>
<div class="list-info-content">
5 bds •
2.00 ba •
2026 sqft<br>
Built: 1914 • MLS #: 1420899 </div>
<p class="inline_agent">Agent: Chase Leavitt</p>
<p class="inline_brokerage">RE/MAX Equity</p>
</div>
</div>
</div>
<div class="listing-container-handheld">
<img id="img_1420899" class="listing-img" src="http://assets.utahrealestate.com/photos/640x480/1420899_6faef96a263f4613b6b300cc915a9767_710733.jpg" alt="MLS #1420899 Photo">
<div class="listings-info" style="display: block;">
<div class="listings-info-left-col">
<span>$249,000</span>
<p class="listing-address">135 S 300 E</p>
<p class="listing-address-csz">Provo, UT 84606</p>
</div>
<div class="listings-info-right-col">
<div class="border"><span>5</span><br>Beds</div>
<div class="border"><span>2.00</span><br>Baths</div>
<div class="end"><span>2026</span><br>Sq.Ft.</div>
<p>#1420899</p>
</div>
<p class="inline_brokerage">RE/MAX Equity</p>
</div>
</div>
</div>
</div>
</div>
I wrote a list of things that I need to accomplish to make this happen:
Javascript to grab the value of each listing and put it in a
variable
Javascript to grab the sq footage of each listing while excluding the uneeded info in the same div
Javascript to divide those variables and store result in a $perSqFt variable
Javascript to output that new value along with the original data
Loop for all of the listings doing the same as above.
Here is what I have so far. Feel free to offer any pointers, links, or advice. I am just updating this as I go. Thank you for helping!
(#1) The value for each listing is within a h3 tag. I am thinking that I will need to use find to get the value of the h3 tag:
.find('h3')
(#4) I am thinking I can use appendChild to output the new value next to the original sq ft value. Still working on this:
document.getElementById('list-info-content').appendChild(dollarPerSqFt);
(#5) The beginnings of a loop through .list-info-content classes:
var find_class = document.getElementsByClassName('list-info-content');
for (var i = 0, i++) {
find_class[i].innerHTML = {do something to} find_class[i].innerHTML ;
}
I can't seem to separate out an event method to effect just one specific element within a larger class.
Goal: When user changes value in input box for number of nights, the total price changes (only for that specific input). Currently, all classes are being altered simultaneously. I believe .find or .closest is the trick, but am unsure how to implement. here's the .js.
//nights auto multiply price
$(".cashtotal").prepend("$");
$('.nights').on('keyup change', function() {
var nights = +$(this).val();
var dailyPrice = +$(this).closest(".tour").data("daily-price");
$(".cashtotal").text(nights * dailyPrice);
$(".nights-total").text(nights);
$(".cashtotal").prepend("$");
});
and an example from the html
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100">
<h2 class="title">Idlehour, Angeles National Forest</h2>
<div class="info">
<div class="description">A pleasant trail through red fir forest with access to different
lake basins and the Yosemite Creek watershed.</div>
<div class="nightsnum">
<p>
<label for="nights">Number of Nights</label>
</p>
<p>
<input type="number" value="3" class="nights">
</p>
</div>
<div class="total">
<p><span class="cashtotal">400</span><br> for <span class="nights-count">3</span> Nights</p>
</div>
</div>
//nights auto multiply price
$(".cashtotal").prepend("$");
$('.nights').on('keyup change', function() {
var $thisTour = $(this).closest(".tour");
var nights = $(this).val();
var dailyPrice = $thisTour.data("daily-price");
$(".cashtotal", $thisTour).text("$" + nights * dailyPrice);
$(".nights-total", $thisTour).text(nights);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I can't seem to separate out an event method to effect just one specific element within a larger class.
Goal: When user changes value in input box for number of nights, the total price changes (only for that specific input). Currently, all classes are being altered simultaneously. I believe .find or .closest is the trick, but am unsure how to implement. here's the .js. -->
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100">
<h2 class="title">Idlehour, Angeles National Forest</h2>
<div class="info">
<div class="description">A pleasant trail through red fir forest with access to different lake basins and the Yosemite Creek watershed.</div>
<div class="nightsnum">
<p>
<label for="nights">Number of Nights</label>
</p>
<p>
<input type="number" value="1" class="nights">
</p>
</div>
<div class="total">
<p><span class="cashtotal">100</span>
<br>for <span class="nights-total">1</span> Nights</p>
</div>
</div>
</div>
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="200">
<h2 class="title">Another forest</h2>
<div class="info">
<div class="description">another tour.</div>
<div class="nightsnum">
<p>
<label for="nights">Number of Nights</label>
</p>
<p>
<input type="number" value="1" class="nights">
</p>
</div>
<div class="total">
<p><span class="cashtotal">200</span>
<br>for <span class="nights-total">1</span> Nights</p>
</div>
</div>
</div>
The question is worded in a way where the person giving the answer needs to interpret it. This is my interpretation. I am assuming that there are multiple tours. When you change one tour it changes all the ".nights-total" and ".cashtotal" classes. What you can do to solve this issue is use a context for the selector. In this case it is the tour that is the container that is the context for each ".nights-total" and ".cashtotal" class. If I have made the wrong assumptions please update your question in a clearer meaning. Hope this helps.
So, I am using oracle apex and I use JavaScript to populate a div tab and add the element to a hidden region on the current page. The resulting HTML is below:
<div class="t-ButtonRegion **t-Form--floatLeft** t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="main_details" role="group" aria-labelledby="main_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="main_details_heading">Main Panel</h2>
<div class="container">
<div class="row">
<div class="col col-12 ">
<div class="t-ButtonRegion t-Form--floatLeft t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="other_details" role="group" aria-labelledby="other_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="other_details_heading">Details</h2>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
<div id="divide" style="margin: 5px 5px 15px; padding: 20px 15px 20px 20px; **position: fixed;** background-color: rgb(222, 239, 251);"><h3 id="header1">B.2.1</h3><p id="paragaph1">Organizational system for the environmental program that defines staff roles and responsibilities, etc,etc </p></div></div>
</div>
</div>
</div>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
</div>
I starred the two spots that if removed would fix the issue of the divide element not appearing on the screen. Not both, either one or the other. I needed a fix position so i removed the floatLeft. Would anyone know why this floatLeft class would cause the divide element to not show. Note: only time this occurs is in IE, Firefox and chrome work fine with the above code. Any help is appreciated.
Edit: I looked for the css after the suggestion and got:
.t-Form--floatLeft{overflow:hidden}
.t-Form--floatLeft .col{width:auto!important}
.t-Form--floatLeft .t-Form-fieldContainer{width:auto;float:left;clear:none}
.t-Form--floatLeft .t-Form-labelContainer{min-width:0;width:auto}
.t-Form--floatLeft .t-Form-inputContainer select{max-width:100%}
I have more to go off of now, so I am researching still but if anyone has ideas, please let me know.
Ok well, I just implemented a scroller with hammer inside an angular directive, I need a div to be scrollable by page (some sort of carrousel) so I wen't with hammer.js everything works just great in desktop and android (any device) but I'm having issues with chrome on iOS and I'm not sure why is that happening, I can see hammer.js examples and they work on iPad as well so I'm sure I'm probably doing something wrong, so here is my html.
<div class="my-slidebox slidebox-container ng-isolate-scope" content-class="my-slidebox-content">
<div class="slidebox" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div ng-transclude="" class="slidebox-content" style="width: 2820px;">
<!-- ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><img data-ng-src="/spree/products/29/product/ror_ringer.jpeg?1404930806" src="/spree/products/29/product/ror_ringer.jpeg?1404930806">
<div class="caption text-left">
<p class="brand-name ng-binding">Rails</p>
<p class="product-name"><strong class="ng-binding">Ruby on Rails Ringer T-Shirt</strong></p>
<p class="product-price ng-binding">$19.99</p>
</div>
</div><!-- end ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><img data-ng-src="/spree/products/33/product/apache_baseball.png?1404930809" src="/spree/products/33/product/apache_baseball.png?1404930809">
<div class="caption text-left">
<p class="brand-name ng-binding">Apache</p>
<p class="product-name"><strong class="ng-binding">Apache Baseball Jersey</strong></p>
<p class="product-price ng-binding">$19.99</p>
</div>
</div><!-- end ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><img data-ng-src="/spree/products/41/product/spree_jersey.jpeg?1404930816" src="/spree/products/41/product/spree_jersey.jpeg?1404930816">
<div class="caption text-left">
<p class="brand-name ng-binding">Spree</p>
<p class="product-name"><strong class="ng-binding">Spree Baseball Jersey</strong></p>
<p class="product-price ng-binding">$19.99</p>
</div>
</div><!-- end ngRepeat: product in vm.similarProducts -->
<div class="right-fix ng-scope"></div>
</div>
</div>
</div>
this markup is for a horizontal list, so I have a container with a fixed width, then another container inside with a huge width so it'll be scrollable and then each individual element inside, I don't wan't the user to use the horizontal scrollbar, instead I wan't to show 'pages' of items every time the user swipes(mobile) or clicks a button(desktop), so then according to hammer documentation, the usage would be
var content = document.getElementsByClassName('slidebox')[0];
var hammer = Hammer(content, { touchAction: 'pan-y' });
hammer.on('swipeleft', function(){ alert('swipe left'); });
hammer.on('swiperight', function(){ alert('swipe right'); });
This just works great on both desktop and chrome/android, but not on iPad, I don't know if maybe the event is being captured by children elements or something, I've been dealing with this for a while with no luck, any help appreciated.