We Keep Coding

Target input with :focus, even when changing

I have something like this in jQuery
if($("input").is(":focus")){
// do something
}
It has an effect on the focused input like it should. However, when I switch over to a new input that gets the focus instead, the first one is the still having that effect and not the new one. What would be a good way to make it auto update so that the one that is currently focused has the effect? Thanks!

You might use a simple CSS3 rule:
input:focus {
background-color: red;
}

"Do something" on focus; "Undo that thing" on blur
Your example only runs one time and targets only one input: the one with focus. It doesn't respond to changes.
Use jQuery's .on() method to bind event listeners that can respond to changes.
A basic example:
$('input').on('focus', function () {
// do something
$(this).css('background-color','yellow');
});
$('input').on('blur', function () {
// do something
$(this).css('background-color','white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />
Another example using chaining:
$('input')
.on('focus', function () {
$(this).addClass('highlight');
})
.on('blur', function () {
$(this).removeClass('highlight');
});
input.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />
Another example using space-separated list of events:
$('input')
.on('focus blur', function () {
$(this).toggleClass('highlight');
});
input.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />

Does this help?
$('input').on('focusin' function(){
$(this).toggleClass('someClass')
});
$('input').on('focusout' function(){
$(this).toggleClass('someClass')
});

If you're using jQuery, you could attach event handlers to the focus and blur events.
http://api.jquery.com/category/events/form-events/
$(someSelector).on('focus', function(evt) {
//do stuff
})
and
$(someSelector).on('blur', function(evt) {
//do stuff
})
Note that you can use focusin and focusout if you need to listen for event bubbling.

Disable right click except some elements

I am using this code to disable right click on my page:
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
How can i add some exception, lets say when you right click on image the context menu should not be disabled.
Maybe something with stopPropagation but can't figure it out.
Thanks

with event.target:
$(document).ready(function() {
$(document).bind("contextmenu", function(e) {
if(!$(e.target).is('img')){
return false;
}
});
});

Try this:
<script type="text/javascript">
$(function () {
$('#btnClick').bind('contextmenu',function(e){
e.preventDefault();
alert('Right Click is not allowed');
});
});
</script>
<input type="text" /><br>
<input type="checkbox" />
<button id="btnClick">Click</button>
http://jsfiddle.net/NLJ6t/1/

Initializing Magnific Popup with form element (input)

What I want:
I want to initialize a modal Magnific Popup from a radio button on an HTML form. The popup will then display the "send" button.
Actually, I want to initialize the popup by clicking on the label of the radio input because I'll replace the radio elements with custom CSS radio buttons.
I'm using Zepto because it's lighter and I wouldn't use jQuery otherwise.
What's the problem:
If I click on a label, I do get a Magnific modal, but the radio option doesn't get selected.
If I click on the radio button itself, the option does get selected and the modal appears. But, if I dismiss the modal to choose another option, the modal appears without changing the option. (This is not usable anyway because I'll hide the stock radio buttons — as previously mentioned).
My code: (http://jsfiddle.net/Nkc5X/)
HTML:
<form action="#">
<label>
<input type="radio" name="whatside" title="Left" value="Left">
<span>Left</span>
</label>
<label>
<input type="radio" name="whatside" title="Right" value="Right">
<span>Right</span>
</label>
<div id="modal" class="white-popup-block mfp-hide">
<h2>Modal dialog</h2>
<button type="submit" value="Send">Send</button>
<a class="popup-modal-dismiss" href="#">Dismiss</a>
</div>
</form>
JavaScript:
$(function () {
$('label').magnificPopup({
type: 'inline',
items: {src: '#modal'},
preloader: false,
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
What I've tried:
I've several tried variations on my html/javascript to no avail. I've tried initializing the popup using different selectors (label and input elements, class, id).

Okay, I left this problem simmer for a while and finally found a solution.
I initialize the popup from the input element: $('input').magnificPopup, which allows me to select the option when clicking on the label.
I reset the form controls using native JavaScript, using the method described in this SO answer: $('form')[0].reset();
Working JSFiddle here: http://jsfiddle.net/Nkc5X/1/
$(document).ready(function() {
$('input').magnificPopup({
type: 'inline',
items: {src: '#modal'},
preloader: false,
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
$('form')[0].reset();
});
});

You can do it like this
$.magnificPopup.open({
items: {
src: '<div class="my-container">here is the content of the html you want to popup</div>'
},
callbacks: {//this is optional
close: function () {
//do something on exit
}
}
});

How to enable/disable Anchor Tag

Below example is working for enable/disable of href but not for onclick. I need to enable/disable for both attributes
Note: I cant simply remove/bind the onclick event to dummy function() as it need once we enable it.
Script Code:
<script type="text/javascript">
$(document).ready(function () {
$("#b1").click(function () {
$("#yahoo").attr("disabled", "disabled");
$("#yahoo").css("background-color", "silver");
})
$("#b2").click(function () {
$("#yahoo").removeAttr("disabled");
$("#yahoo").css("background-color", "white");
})
$("#yahoo").click(function (e) {
if ($("#yahoo").attr("disabled") == "disabled") {
e.preventDefault();
}
});
});
</script>
HTML Code:
<div>
<input type="button" id="b1" value="Disable Yahoo Link">
<input type="button" id="b2" value="Enable Yahoo Link">
</div>
<a id="yahoo" target="_blank" href="javascript:alert('href alert')" onclick="javascript:alert('onclick alert')">Yahoo.com</a>
Working Example
http://jsfiddle.net/nunnakirankumar/suYe4/

Inside your click() function, you need to explicitly return false (after discovering it's disabled). Otherwise the default handler will cause the browser to go to or run the designated href.
The OP has most likely moved on, so this answer is really just for google searchers' sake.

JQuery - Problem with Modal Dialog after reload page in div

take a look to the example:
example.jsp:
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").load("example_1.jsp");
});
});
</script>
<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>
example_1.jsp:
<script type="text/javascript">
$(document).ready(function() {
$("#a").button().click(function() {
$("#a_form").dialog("open");
});
$("#a_form").dialog({
autoOpen: false,
height: 480,
width: 625,
modal: true
});
});
</script>
<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
Hello!
</div>
I load example.jsp and I press the button "RELOAD".
Then, in "mainContent", appears the button "MODAL", that open a modal dialog.
But if I press again "RELOAD" button and then "MODAL" the MODAL DIALOG doesn't appear anymore!
why?
where am i doing wrong?

That is because :
<input id="a" type="button" value="MODAL" />
Is using an ID.
When you run load again you are creating another input with the id=a which is not allowed.
Try using a class identifier instead of an id

The problem might be because the script block of example_1 is ignored because it is loaded dynamically into the page.
So what you need to do is to move that script block to example.jsp and use .live() for '#a' instead of .click()
$("#a").button().live("click", function() {
$("#a_form").dialog("open");
});

Before you load/reload the main content try to empty it and then load.
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").html('').load("example_1.jsp");
});
});
</script>