Swipe event propagation with nested div doesn't work - javascript

Hi I've the following html structure:
<div class="container">
<div class="scroller">
<div id ="goldenPage" class="page active">
<div class="block text">
<div class="rich-text"></div>
</div>
<div class="block">
<div class="form"></div>
</div>
<div class="block">
<ul class="menu"></ul>
</div>
</div>
<div id ="cachePage" class="page"></div>
</div>
</div>
If I bind a swipe event on div with class container using code
var myElement = $(".container")[0];
var hammertime = new Hammer(myElement);
hammertime.on("swiperight",function(){
console.debug(" manage swiperight event.");
});
and if I swipe nothing happen (except if I swipe on the bottom of my page because the internal div with scroller class is fewer height than parent div). If I bind the swipe on div with class scroller the swipe is correctly binded. The scroller div is binded with jquery scrollpane plugin.
Any ideas?!

DEMO — Make sure your JavaScript/jQuery is fired after the document.ready event.
If the JavaScript fires before the element is available in the DOM, your JavaScript will not find the element, and thus be unable to bind the (swiperight) event to the element.
Using jQuery, this can be achieved by wrapping your JavaScript code in:
$(function() {
// Your code here.
console.log("Ready!");
});

Related

How do I make it so, when the user clicks on a button, the page scrolls to a certain div? [duplicate]

I have the following HTML, with scrollbar:
<div id="parent">
<div id="child1">Something</div>
<div id="child2">Something</div>
<div id="child3">Something</div>
<div id="child4">Something</div>
<div id="child5">Something</div>
<div id="child6">Something</div>
<div id="child7">Something</div>
<div id="child8">Something</div>
<div id="child9">Something</div>
</div>
My question is this:
How can I, in pure javascript, position the scroll of the div 'parent' in one of the childs?
You can use the scrollIntoView function of JavaScript like this:
document.getElementById('child9').scrollIntoView()
Try it online

I have an issue when trying to add class to image in jQuery

here is the code:
$(function()
{
$('.sign1').click(function(){
$(this).addClass('good');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6 menu-item">
<div class="front">
<img class="center-block sign1" src="images/sign1.png">
</div>
</div>
</div>
</div>
</div>
It's supposed to add the class 'good' when clicking the image with class 'sign1'
but that never happens.
what's wrong with my code please?
you code works fine if you remove the link <a> surrounding the <img> element.
after jquery adds the good class to the image, the click even bubbles up to its parent <a> and this directs the browser to the new address: main.html.
so you won't have the time to see the change i suppose.
You can code like below
var targetImg = document.getElementsByTagName("img");
targetImg.classList.add("mystyle");

Put element inside an element, which is not the parent (JQuery UI sortable)

I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();
You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});
You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!

How can I link the scrolling of two divs that are dynamically loaded without using .on?

I would like to link the scrolling of the wrapper1 and wrapper2:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
The above is loaded dynamically and from what I have read I cannot use the .on jQuery method with scroll. So I would like to use something like this:
<div id="mydiv" onscroll='myMethod();'>
function myMethod(){ alert(1); }
Can someone give me some suggestions as to how I can make the scrolls work at the same time using the onscroll call and methods?
Please note that this is not a duplicate question to:
How can I get two scroll bars to scroll at the same time with jQuery and .on?

Categories