Jquery Taphold not working on dragdealerjs slider - javascript

I am adding a series of divs with dragdealerjs functionality. The problem is I need to be able to tap and hold the ".handle" div inorder to expose a slider/drawer below it. I have simplified my code down to get to the root of the problem. I am appending the ".innerGroup" div to the ".groups" div.
HTML:
<div class="groups scroll">
<div class="innerGroup">
<div id="demo-simple-slider1" class="dragdealer">
<div class="igIcon1"></div>
<div class="handle"></div>
</div>
</div>
</div>
Javascript:
This code doesn't work,
$(document).on('taphold', '.handle', function() {
alert('Tapped');
});
This code does work though,
$(document).on('click', '.handle', function() {
alert('Tapped');
});
I know there are several other similar answers to this one here but I fear that drag dealer may be complicating the issue. I also think the problem is related to adding the innerGroup after the DOM has loaded. Thanks in advance.

The error here is that drag dealer actually takes control of the taphold event. To work around you need to take a two stage check with a 750 millisecond time out (same as a standard taphold) and put the distance the slider can move as .49-.51 (or something similar ). If anyone wants the code leave a comment here and ill post what I come up with.
Happy coding

Related

Using jQuery to remove html elements from a dropdown

<script>
$(document).ready(function() {
$('.notification .tools .remove').on('click', function () {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});
</script>
<div id="notification-list" class="notification-chain" style="display:none">
#foreach ($notifications as $notification)
<div class="notification" style="width:300px">
<div class="tools">
</div>
<div class="notification-messages">
<div class="message-wrapper">
<div class="heading">{{ $notification->name }}</div>
<div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div>
<div class="date pull-left">{{ $notification->created_at }}</div>
</div>
<div class="clearfix"></div>
</div>
</div>
#endforeach
</div>
Hello readers,
Above is currently what I'm working with. It displays a drop-down to hold all notifications a user has received and I currently have an x in the top corner of each "notification" div.
However none of the above jQuery seems to be running. The alert won't display and I get nothing in the console.
Please feel free to ridicule me and tell me what stupid thing I'm doing wrong.
Many thanks.
I appreciate all the help guys.
Here are some laravel.io files with some wider context:
The full html:
http://laravel.io/bin/Nk4xP
js for the dropdown:
http://laravel.io/bin/9vn1O#
Here are some debugging tips:
Think about all the things that might be going wrong, then start ruling them out. For example:
Maybe jQuery is not loaded at all.
Maybe the selector for the event handler is incorrect and jQuery can't find an element to attach the event handler to.
Maybe the code in your $(document).ready() function is not executing, and the event handler is never set up.
Using a combination of changes to your code and the browser console, you can rule these three things out:
Is jQuery loaded? Open the console & type $ - if it says undefined, then that's your problem.
Is the selector for the element incorrect? Open the console and type $('.notification .tools .remove'). If you get an empty array, then that's your problem. As an added bonus, Chrome (and probably other browsers) will highlight the selected element if you mouse over it - this is useful in case you're selecting a different element than you expected.
Is the $(document).ready() code executing? Stick a different alert in there at the top of the function & see if it fires when you reload the page.
It's important to tackle issues like these one at a time - what happens if you change two or more things at once, and the problem goes away (or a new problem arises)? You won't know which one solved or caused the problem!
I was able to make it work in the fiddle below.
I removed the display:none (so I can see the div) and the non html characters. Try looking at the browser console (F12 in linux and windows computers) and see if there are errors. Javascript errors will prevent further code to run.
Also I put a text within the a href tag
remove
https://jsfiddle.net/m9rktusb/
As notification is a class for the div, there should be a dot in front of the class as a selector like this:
$(this).parentsUntil('.notification').remove();
Hope this works.
Luke can you please show us the final HTML?
the code is running perfectly, so the issue should be somewhere else.
https://jsfiddle.net/z7958hx7/1/
$(document).ready(function() {
$('.notification .tools .remove').on('click', function() {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});

Jquery / AJAX sliding Menu - CrazyEgg - Used With Frequently Asked Questions

I'm having a bit of trouble figuring out what Crazy Egg used for their F.A.Q.s. I would like to implement the same thing exactly (where the questions slide down upon clicked - and show a blue box for the current active question).
Ex) https://www.crazyegg.com/help
I went through the code and I see it has javascript events, but I am unable to script this myself. Is there a plugin I can use for this behavior? Some form of showing/hiding divs I presume?
You should be able to code it yourself with jquery. Just look into very basic jQuery tutorial that goes over selectors, hiding and showing and click events. All you do is assign an id to each header that you click on, and then on click you hide all content and show the one clicked. You should read some stuff online, try something, and then come back with code and ask questions.
This effect can be achieved easily with jQuery's slideToggle function:
HTML:
<span class="faq">This is a FAQ question...</span>
<div class="answer" style="display: none;">
And this is the answer.
</div>
JavaScript:
$(document).ready(function(){
$(".faq").click(function(){
$(this).next("div.answer").slideToggle();
});
});
JSFiddle: http://jsfiddle.net/ySahP/

Fade in, fade out div with images and text (with jquery)

What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?
It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.
You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});

jQuery starts with selector

Here's my code:
<script type="text/javascript">
$(document).ready(function () {
$("[class^=\"hide\"]").hide();
});
</script>
<div class="hide1">Hide</div>
<div class="show1">Show</div>
<div class="hide2">Hide</div>
<div class="show2">Show</div>
<div class="hide3">Hide</div>
<div class="show3">Show</div>
<div class="hide4">Hide</div>
<div class="show4">Show</div>
But on page load, the hide divs are still visible... what am I doing wrong?
Wow... I feel so stupid. I spent so much time banging my head against a wall, and only discover the solution after I post here...
So turns out I was doing everything correctly, but the divs were in a View (I'm using MVC3) that was being loaded after $(document).ready was being called. Moving the code into the View solved the problem.
Why do you have separate classes for those? Why not have a single hide class and set those attributes above (e.g. "hide1") as ids, then your selector can simply be on that class e.g. $('div.hide')?
See http://jsfiddle.net/2GzpA/1/ for an example.
EDIT:
For your question, you comment:
#Tomgrohl well my code is actually much more complicated. I need to be able to hide and show each div individually.
Why not add a separate class to use for this case? Then your selector becomes $('div.specificCaseHideClass'). You can have as many classes as you like and this is a fine example of when to add one.
try this its simple
$("div:even").hide();
Are you sure that jquery is included? This seems to work: http://jsfiddle.net/6ycbT/
Also, check your js console to see if any errors are getting thrown that might prevent this code from executing
switch out the outer quotes by single quotes and it works:
working fiddle: http://jsfiddle.net/geertvdc/hv4Ls/
code:
$('[class^="hide"]').hide();
You can do :
$(document).ready(function () {
$("div[class*=hide]").hide();
});

Weird behaviour hover event jQuery

I have the following code on some absolute positioned divs on a page:
JS/JQUERY:
$("div.do").hover(function(){
$(this).stop().next('.tooltip').fadeIn();
}, function(){
$(this).stop().next('.tooltip').fadeOut();
});
HTML:
<div class="do"></div>
<div class="do"></div>
<div class="do"></div>
When hovering over an event using console.log($(this)) returns multiple events firing in a very sporadic way. it seems like they are being trigger multiple times. I have been using jQuery for quite some time and never experienced anything like this.
Any insight is greatly appreciated.
works like a charm for me > http://jsfiddle.net/ekxxC/
Here's a fiddle of almost the same thing you posted. It's working exactly as I would imagine. See if your code is any different:
http://jsfiddle.net/eyLNn/4/
I highlighted the divs in red so you can see where the target area is.

Categories