Javascript OnMouseOver and Out disable/re-enable item problem - javascript

I wanted to have some radio buttons that disabled when the mouse went over and enabled again when it went out (just for fun).
<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>
When the mouse goes on it it does what it should be when it goes back off the button wont re-enable. Also, how do I make it default to enable so that when you refresh the page it doesn't stay disabled.
Thanks in advance.

You could achieve the same effect by wrapping your radio buttons in a div tag and setting the onmouseover and onmouseout events.
<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
<input name="rigged" type="radio">
</div>
The above solution only works in IE, for a solution that works in FireFox do the following.
<script type="text/javascript">
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>
*This javaScript function was borrowed from here: Enable or disable DIV tag and its inner controls using Javascript
<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
<input name="rigged" type="radio">
</div>

The inputs do not fire the mouseout events because they are disabled.
So you have to wrap it in a div and catch the div's events.
If you want pure javascript, use Phaedrus's example "toggleDisabled" script.
If you want jQuery and not-so-newbie friendly:
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
function toggleDisabled(d) {
var disable = d;
this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
}
$("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
});
</script>
</head>
<body>
<form>
<div class="radios">
<input type="radio" name="rigged" value="1"/> Item One<br />
<input type="radio" name="rigged" value="2"/> Item Two<br />
<input type="radio" name="rigged" value="3"/> Item Three<br />
<input type="radio" name="rigged" value="4"/> Item Four
</div>
</form>
</body>
</html>

I had a similar problem with wanting an image to expose, and then go regular when the mouse left the image. I was using jQuery and ended up hooking into mouseenter and mouseout, instead of the events you are using. You might want to try those.
$('#rigged').mouseenter(function() {
$(this).disabled = true;
}).mouseout(function() {
$(this).disabled = false;
});
Something like that.
Again, that's using jQuery.
(You'll have to give the input radio button the id 'rigged')

I think when it's becoming disabled, it's not going to fire any events.
You could try a few things.
On mouseover, make an invisible div overlay the radio box. This will make it impossible to use. Then on the mouseout of this invisible div, remove the div.
You could play with mouse x and y coords, and see if they overlay your radio elements. This isn't an optimal solution though.
Markup for the first, in jQuery, would go something like this
$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element
$('#rigged').bind('mouseover', function() {
$('#overlay').show();
});
$('#overlay').live('mouseout', function() {
$(this).hide();
});
You'll need to adapt this to work with multiple elements.

Related

Hide/show child element onClick

I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});

Change text of button if it has a display of none?

I have a list of of checkboxes that are being used a search fields for a database. When someone clicks a checkbox it will show a button with the text from the label of that checkbox. However, I need that button to be have empty text when it is not visible (in the case of someone clicking the checkbox to hide the button).
Here's my code:
$(document).ready(function() {
$('#locationAll').click(function() {
var value = $('#locationAll').parent().text();
$('#location-all-button').html(value + " ×").toggle('fast');
});
});
$(document).ready(function() {
$('.search-popup').click(function() {
$(this).hide('fast');
});
if ($('.search-popup').css('display') == 'none') {
$(this).text("");
};
});
button {
background-color: lightgray;
border-radius: 20px;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="all" id="locationAll" />All
</label>
<br>
<br>
<button class="search-popup btn" id="location-all-button"></button>
For some reason I can't make the button stay hidden before the checkbox on the example here but that isn't a problem in my full code. if you need more info let me know I might have missed something.
Ok so I changed a few things. I made this work for any checkbox that follows the naming scheme I made really quickly. The scheme is the id of the button = the "button-"+id. Also I hiding all buttons with a class right form the start to set their default state.
$(document).ready(function()
{
\\change to allow all checkboxes to trigger
$('input[type=checkbox]').click(function()
{
\\change the id so it match a button when add "button-" to the start
\\this allows me to target the matching button with any chechbox
$('#button-'+$(this).attr('id')).toggle('fast');
});
$('.search-popup').click(function()
{
$(this).hide('fast');
\\ sets the check box to false so it not checked when you close it
$("#"+$(this).text().replace("  ×","")).attr('checked', false);
});
\\hides all buttons right form the start
$('button.search-popup').each(function()
{
$(this).hide();
});
});
<label>
<input type="checkbox" value="all" id="All" />All
</label>
<br>
<br>
<button class="search-popup btn" id="button-All">All  ×</button>
now if you want to create and remove buttons when a checkbox has changed state you can add an if state meant in that checks to see if the button with the matching id exists or not,!$(tag).size().

Select multiple html elements by clicking on one element in Jquery

I have two images on my html page and I have one button named MOVE to move them left separately. To move them I have a Jquery function with selected class.
I have two input fields each of them belongs to the particular image. My button has a click counter function so I need to get a count by clicking on the same button to both images separately into those two input fields.
I think when I select image 1, It's also should be selected input 1, and then the counter will count image 1's counts of moves and when I select image 2, It's also should be selected input 2, and then the counter will count image 2's counts of moves.
I don't know how to select multiple elements by clicking on one element. please help
My Jquery function
$(document).ready(function() {
$(".plan1").click(function() { //medium move
// unselect others
$(".plan1").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".plan1.selected").animate({left:'+=20px'});
$('#f1.selected').val(function(i, val) { return +val+1 });
});
});
HTML
<img src="imagesource" class="plan1" />
<img src="imagesource" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
This might get you started.
jsFiddle Demo
$('#f1, #f2').val('0');
$(".plan1").click(function() {
$(".plan1").removeClass("selected");
$(this).addClass("selected");
});
$("#b1").click(function() {
if ( $(".plan1.selected").length == 0 ) {
alert("Pick a pic");
return false;
}
var inpID = $(".plan1.selected").attr('id').slice(-1);
var cnt = $('#f'+inpID).val();
cnt++;
$('#f'+inpID).val(cnt);
$(".plan1.selected, #f"+inpID).animate({'left' : '+=50px' });
$(".plan1.selected").removeClass("selected");
});
* {position:relative;} /* Critical! Allows elements to move */
img, input{display:block;max-width:80px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="pic1" src="http://lorempixel.com/80/80" class="plan1" />
<img id="pic2" src="http://lorempixel.com/80/80/animals" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
Notes:
(1) In CSS, you must first make the elements position:relative because the default (position:static) cannot be styled with left or right
(2) In CSS, also must make the inline elements img and input into block elements, because inline elements cannot be animated left/right

How can make toggle be affected on to existing radio button onClick toggle after certain db query?

May be I'm not clear with my title, looks messy, so here is my code. Making a plugin in WordPress.
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
I have two radio buttons in a form to input data:
<label><input type="radio" name="radio_btn" checked="checked" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
And here are my two divs:
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv" style="display: none;">div 2</div>
Scenario: I'm using the same form for Inserting Data and Editing data as well. When inserting, I can toggle between the two divs, where the first one is checked by default. If I click on the other, then the divs are toggling nicely, I can use any one of them at a single time. So the inserting thing is fine.
Now, when I'm going to edit my data, I'm getting the data using $_GET[] and db query, and passing them to their fields accordingly and they are doing well too. But just the matter of toggling here, when data for <div id="togglediv2"> is isset showing, data for <div id="togglediv3"> is isset is also showing, but if not toggled by click the field is not visible you know. :(
I tried in a basic way swapping the HTML checked="checked" from one to another, I failed, because the jQuery isn't matching them.
So, I need to change the jQuery in a way so that, the toggling works when I'm inputting, as well as when editing my data. What are the changes I can do to change my jQuery to achieve this into my desired way?
You have 2 options:
1) Show/hide divs in your php
2) Pass value of "test" to javascript and add
$("#togglediv" + test).click();
In fact there is a 3th option, which I prefere. Create a .hidden css class and add in your php (to a togglediv which is hidden obvieusly) when you render the page. Then instead of hide()/show() use addClass('hidden') and removeClass('hidden'). I'm not sure if this will be slower/faster but I think it makes it more readable.
CSS
.hidden { display: none; }
JS
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").bind('change', function() {
var test = $(this).val();
$("div.togglediv").removeClass('hidden');
$("#togglediv" + test).addClass('hidden');
});
});
</script>
Give this a try (it worked for me).
It does not show the DIVs when initially loaded, they will show when a radio button is selected.
I added the jQuery library link I used, just in case.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.togglediv").addClass('hidden');
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<label><input type="radio" name="radio_btn" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv">div 2</div>
</body>
</html>
I would use two hidden inputs that I would toggle the same ways as the divs to know which form is being submited, hiding the div in which the data is entered will still set the variables inside the div for php.
So I would have
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("input.togglevalue").attr('disabled', 'disabled');
$("input#toggleinput" + test).removeAttr('disabled');
$("#togglediv" + test).show();
});
Then in php I would have these two inputs in each of the divs
<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>
and
<div id="togglediv3">
// The current div content
<input type="hidden" name="togglediv3" value="1" class="togglevalue" id="toggleinput3" />
</div>
Then in php I would check for these inputs if they are set so you have:
<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>

Jquery check boxes

I want to do the following:
I have three checkboxes:
Hide Box1
Hide Box2
Hide Box3
I want to use Jquery to:
When Box1 checked, hide box 2 and 3, if unchecked make box 2 and 3 visible. Also where do I place the code?
Thanks in advance
Here is a complete example using the markup you gave in the comment. I also took the liberty to give the checkbox's labels which means when you click the text it will toggle the checkbox (more accessible and usable).
See on JSFiddle
HTML
<form>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box1" />
<label for="box1">Hide Box1</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box2" />
<label for="box2">Hide Box2</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkbox3" id="box3" />
<label for="box3">Hide Box3</label>
</div>
</form>
jQuery
$('.toggle-checkbox input[type=checkbox]').click(function () {
if ($(this).is(':checked')) {
$('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
} else {
$('.toggle-checkbox').show();
}
});
To include jQuery in your page, place the following within your <head> tag.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
You could do this in between tags
$('.one').click(function () {
if ($(this).is(':checked')) {
$('input[type=checkbox]').not(this).hide();
} else {
$('input[type=checkbox]').not(this).show();
}
});
http://jsfiddle.net/davidchase03/MYASr/
Assuming your checkboxes have the ids "box1", "box2" and "box3":
$(document).ready(function(){
$("#box1").change(function(){
$("#box2, #box3").toggle();
}
}
I haven't tested this, but anytime hide box 1 is checked or unchecked, it will toggle the visibility of the other two boxes.
The optimal place for your code would be inside of a script element located just before your closing body tag, so something like
<body>
Your page stuff here
<script>
Code from above here
</script>
</body>

Categories