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.
Related
<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();
});
});
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
I'm very hard wondering why this code doens't work:
$(document).ready(function(){
$("#text-heading").slideDown("slow");
});
I want this to work as following: when I enter the page, the selected div should drop downwards, but for some dark reason this doensn't happen. jQuery is called right, I did a namecheck and all that I'm feeling really stupid.
$("#text-heading") needs to be hidden first before slideDown() will do anything.
Try this:
$("#text-heading").hide().slideDown('slow');
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();
});
I've not found an answer really specific to my case, which I would imagine is common. I'm looking to add the scrollTo effect to my webpage using jquery (or javascript). I still don't know what is the easiest way granted I've not gotten anything to work. :(
I have a single vertical page. Navigation is on the bottom of each div wrapper. I'd like my button areas to scroll to the divs. As of now, I've styled the buttons to link to the Divs. That's perfect, except, I need to add the animation.
You can have a look at my test page here: my site
I've tried scrollTo, but each of my buttons links to a specific div. Not sure how to modify the plugin to work for me.
I think the next best solution is inserting javascript that animates all links in a window? Definitely don't know where to find that code or how to modify it for my case.
Thanks in advance everyone, and I look forward to a solution from what seems to be a very vibrant community.
Try something like this...
working example: http://jsfiddle.net/BTncy/
$(document).ready(function(){
$('a').click(function(){
var ele_href= $(this).attr('href');
$('html,body').animate({scrollTop: $('#' + ele_href).offset().top},'slow');
return false;
});
});
(Note, from your example you have the javascript in the title attribute, not an onclick, not sure if that's intended)
This doesn't use a plugin, but you could do something as simple as the following using jQuery:
function scrollTo (element) {
var target = $(element).offset();
$('body').animate({scrollTop: target.top}, 'slow');
}
This allows you to just specify the selector to what you want to scroll to, so it could be as simple as:
<div id="more">
<a onclick="scrollTo('#intro_2_container'); return false;" href="#into_2_container">
<img src="images/more.png" border="0" />
</a>
</div>
In my quick testing that seemed to work. (After I fixed the typo of the target element in the scrollTo call)