Develop Reference

Hidden Content and Jquery 2 Clicks to Fire

I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle

Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/

I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.

Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle

Using MouseOver and MouseOut

Hi guys im working on my first website and im trying to implement a sliding menu using jquery.
This is what a got so far :
<a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
<script type="text/javascript">
function ShowBox()
{
$("#SlideMenu").slideDown();
}
function HideBox()
{
$("#SlideMenu").slideUp();
}
</script>
When i MouseOver the control my menu slides down but slides back up automatically.
What I would like is to let the user the time to select and option from the menu and if he doesn't, i would like the menu to close as soon as the mouse leaves the control.
Any idea why this isn't working ?
Thanks in advance.

Do your stuff without the inline JS, and remember to close the <a> element and use a ready function
<a id="test">Show box</a>
<script type="text/javascript">
$(document).ready(function() {
$("#test").on({
mouseenter: function() {
$("#SlideMenu").slideDown();
},
mouseleave: function() {
$("#SlideMenu").slideUp();
},
click: function(e) {
e.preventDefault();
}
});
});
</script>
FIDDLE

As you're using jQuery I believe it would be beneficial for you to use something similar to:
$("#box").hover(
function() {
//.stop() to prevent propagation
$(this).stop().animate({"bottom": "200px"}, "fast");
},
function() {
$(this).stop().animate({"bottom": "0px"}, "fast");
}
);
What this will mean is that whilst the mouse is over the menu, the menu will stay in its open position. When the mouse exits the menu it will close. Obviously change the id, and animation CSS values to suit your needs :)!
Here is a working example:
http://jsfiddle.net/V3PYs/1/

Really there is no problem here - the script is doing exactly what you told it to. However, from what I understand, what you want is for the menu to stay open when you leave the "trigger" element if the user's mouse is now over the menu. Try this:
<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
$("#trigger").hover(function(){
$("#SlideMenu").slideDown();
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
$("#SlideMenu").hover(function(){
clearTimeout(menuMouseout);
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
});
</script>
This way, the user is left some time after mousing out of the trigger element to get to the menu. You might need to fiddle with the timeout, but this should work. I tested this and it seems to be working. Just be sure, if necessary, to wrap this in $(document).ready to make sure all elements are loaded and ready.
Demo: http://www.dstrout.net/pub/menu.htm

If you're using jQuery this would be the proper way to go about it:
Show box
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(just copy/paste this in and it should work)

jQuery JS scroll to top on click works only once?

I'm trying to make a page scroll to top when a link is clicked.
Heres what I got so far.
<script>
jQuery(document).ready(function () {
jQuery("ul.pager a").click(function() {
scroll(0,0);
return false;
});
});
<script>
Problem with that code is that it works only on first click.
How to make it work every time I click on a link?

Maybe you could use internal links (href="#top") instead of binding events with jQuery.

jQuery(document).ready(function () {
jQuery("ul.pager a").live("click", function() {
scroll(0,0);
return false;
});
});
try this

JQuery drop down bobs up and down continuously

I am using jquery to hide/show an DIV on hover of an LI. When I do this the div appeared but pops up and down without stopping until I take my mouse off the LI.
$(document).ready(function () {
$('li.menu_head').mouseover(function () {
$('div.newsadviceDrop').slideToggle('medium');
});
});

Try:
$(document).ready(function () {
$('li.menu_head').hover(function () {
$('div.newsadviceDrop').slideToggle('medium');
});
});
EDIT: To keep it open until you mouse over again do this
$(document).ready(function () {
$('li.menu_head').mouseenter(function () {
$('div.newsadviceDrop').slideToggle('medium');
});
});

Try to use .mouseenter instead of .mouseover

While the mouse is over li.menu_head, you will repeatedly call .slideToggle, which explains why you see the continuous behaviour. You could perhaps replace this with behaviour on mouseenter and mouseexit.

There is an issue like that with "mouseover".
Try "mouseenter" instead...
OR...
just use the jQuery hover()
EDIT:
silent1mezzo submitted the best/correct answer first.

Jquery .next() help

I use the following code to hide and show a box on a bunch of search results. Each result has its own toggle and box to show and hide. The problem I have is that clicking any one of the toggles will show and hide ALL of the boxes on the page and NOT just the box for the one result. How can I do this?
Thanks
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$("div.MoreResultsTrigger").next().slideToggle('fast');
});
});
UPDATED CODE USING HOVER
$('a.MoreResultsTrigger').hover(
function () {
$(this).next().show();
},
function () {
$(this).next().hide();
}
);

Use the this keyword since you only want to hide the element next to the one you're clicking on.
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
});

untested but try:
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});

use $(this).next().slideToggle('fast'); that will apply it to ONLY the one you have selected. At the moment its applying the slideToggle to ALL div.MoreResultsTrigger's.

Try this:
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function()
{
$(this).next('.toggleable').slideToggle('fast');
});
});
The addition of the '.toggleable' class to the .next() is just in case you might have other things in between that you don't want to toggle. You would of course have to add the .toggleable class to all elements that you're interested in toggling. Of course, you can replace, and should, replace toggleable with a name that has more meaning.