We Keep Coding

Change picture when holding down click

I have a code that I am experimenting with. I want the image to change when being held down by a click and to go back to its original state when I release the click. It is not changing at all here.
JS:
$('src').on('mousedown mouseup', function mouseState(e) {
if (e.type == "mousedown") {
this.setAttribute("src", 'rustb.png')
} else {
this.setAttribute("src", 'rust.jpg')
}
});
HTML:
<img src="rustb.png" id="click" value="Click" />
Please help, thanks!

Your selector gets nothing , you need to select the element / class / ID
$('img'/'.imgClass'/'#imgId')

You can try direct Mouse events like below and use valid selector.
$( "img" )
.mousedown(function() {
$( this ).prop("src", 'rust.jpg');
})
.mouseup(function() {
$( this ).prop("src", 'rustb.png');
});

How can I make my Javascript event handler execute just once?

I have a bit of JS code to track if the user's mouse leaves the window. How would I make this event fire only once using jQuery? (Sorry, I'm new to Javascript and new to programming).
Mouse Tracking Code:
addEvent(document,"mouseout",function(e){
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if(!from || from.nodeName == "HTML"){
//cursor has left, add action here
window.location.href = '#popup1';
}
});
I believe this is what I'm looking to implement to make the event fire just once:
$(document).ready(function(){
$("button").one("event", function(evt){
//Your Code
});
});
Thank you!

If your not using the one() function which should do exactly what you described you can do the same with on() and off()
$( "#foo" ).on( "click", function( event ) {
alert( "This will be displayed only once." );
$( this ).off( event );
});

couldn't you just do something like this?
$(window).one('mouseout', function () {
alert();
});
http://jsfiddle.net/20av9bnr/2/

jquery slidetoggle how to set if mouse click other, close slidetoggle

I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/

$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....

You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle

jquery.mobile swipe page navigation restrict to div element

I am working with this jquery.mobile example to use swipe to navigate pages.
jquery.mobile swipe-page example
Now I don´t want to have the swipe on the whole page. I want to bind it only to an div element.
I have a div element on my page
<div id="divSWIPE"></div>
I have looked at the source code of the example and I think I found the part that handles the swipe event.
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if ( prev && ( event.target === $( this )[ 0 ] ) ) {
navprev( prev );
}
});
I have tried to modify this but I can´t get this working only on the div element.
I have tried this
$( "#divSWIPE" ).on( "swiperight", ".ui-page", function( event ) {
and this
$( document ).on( "swiperight", "divSWIPE", function( event ) {
But this doesn´t work.
How can I bind this to my div element?

Attack swipe listeners on pagecreate. The below code will check if there is a page in DOM before the current page. Or retrieve value from custom attribute in page div data-prev.
$(document).on("pagecreate", function (e) {
var page = e.target;
$("#divSwipe", page).on("swiperight", function () {
var prev = $(this).closest(".ui-page").prev("[data-role=page]");
/* or read custom attribute */
var prev = $(this).closest(".ui-page").data("prev");
if ( prev.length > 0 || typeof prev != "undefined" ) {
/* navigate or do something else */
$.mobile.pageContainer.pagecontainer("change", prev);
}
});
});

hide div if clicked outside of it [duplicate]

This question already has answers here:
Close/hide an element when clicking outside of it (but not inside)
(3 answers)
Closed 8 years ago.
I’m having a little trouble with this JQuery function.
Basically, I have a div, that when clicked, shows another Div. It’s set to a toggle, actually, so it toggles on/off when you click.
I want to have it where if you click on anywhere outside of the opened div (that appears after you click on the first div), the div that was opened is closed.
$("#idSelect").click(function() {
$("#idDiv").toggle();
});

EDIT : A better approach here:
How to create a custom modal popup - and how to close it clicking outside of it
jsBin demo
$( "#idSelect" ).click(function( e ) {
e.stopPropagation();
$("#idDiv").toggle();
});
$( "#idDiv" ).on('click',function( e ) {
e.stopPropagation();
});
$( document ).on('click', function( e ) {
if( e.target.id != 'idDiv' ){
$( "#idDiv" ).hide();
}
});

Hope this helps:
$(document).click(function() {
if($(window.event.target).attr('id') != 'idSelect')
$("#idDiv").hide();
});

$(document).on("click",function(e) {
if ($(e.target).is("#idDiv, #idDiv *"))
$("#idDiv").show();
else
$("#idDiv").hide();
});

jQuery-outside-events plugin adds support for the following events
clickoutside, dblclickoutside, focusoutside, bluroutside,
mousemoveoutside, mousedownoutside, mouseupoutside, mouseoveroutside,
mouseoutoutside, keydownoutside, keypressoutside, keyupoutside,
changeoutside, selectoutside, submitoutside.
Applied to your case you can do
$("#idDiv").on("clickoutside", function( ) {
$("#idDiv").hide();
});
$("#idSelect").on("click", function( e ) {
$("#idDiv").toggle();
e.stopPropagation();
});
Demo here