We Keep Coding

JavaScript Library needed for Showing/Hiding a div panel using JQuery

I have a simple fieldset and div panel, which I want to initially show. If you then click on a button/image or text I then want to hide the div panel. Let's call this "myPanel". Clicking on the button/image or text once more will then show it again. Now I have a solution in JavaScript below, but my question is how can I create a library for this and re-use this instead of writing out the method's for multiple panels. Something similar to this:
var panel = new library.panel("myPanel");
Then all events will be handled and variables defined in the JavaScript library.
Consider the following code:
<fieldset>
<legend>My Panel<a id="MyPanelExpandCollapseButton" class="pull-right" href="javascript:void(0);">[-]</a></legend>
<div id="MyPanel">
Panel Contents goes here
</div>
</fieldset>
<script type="text/javascript">
//This should be inside the JavaScript Library
var myPanelShown = true;
$(document).ready(function () {
$('#MyPanelExpandCollapseButton').click(showHideMyPanel);
if (myPanelShown) {
$('#MyPanel').show();
} else {
$('#MyPanel').hide();
}
});
function showHideMyPanel() {
if (myPanelShown) {
$('#MyPanelExpandCollapseButton').text("[+]");
$('#MyPanel').slideUp();
myPanelShown = false;
} else {
$('#MyPanelExpandCollapseButton').text("[-]");
$('#MyPanel').slideDown();
myPanelShown = true;
}
}
</script>

If you want to make it yours then it is simple, make a function in separate js file :
function showHideBlock(panelId, buttonId){
if($(panelId).css('display') == 'none'){
$(panelId).slideDown('normal');
$(buttonId).text("[+]");
}
else {
$(panelId).slideUp('normal');
$(buttonId).text("[-]");
}
}
Now pass the panel or block id which you want to hide/show and button id which will cause hide/show.
onclick="showHideBlock('#MyPanel', '#MyPanelExpandCollapseButton');"
Try this

create a separate .js file and include it in whichever page you want. however remember to keep the id same :3

find text contained in a div and get its child checkbox ID

I`m trying to write a script that gets the ID from a checkbox element and do something with it. The problem is that I can not target the checkboxes by value since its generated from mysql query.
Here is how the html for the checkboxes looks like :
<div class="cat_checkbox cat_unchecked">
<input id="r_c136" type="checkbox" value="36" name="r_c1[]">
Sample
</div>
<div class="cat_checkbox cat_unchecked">
<input id="r_c131" type="checkbox" value="31" name="r_c1[]">
Text1
</div>
And here is the code I managed to write (I`m still learning java script and jQquery).
What I am trying to do is to tell js to select the that contains "Text1" and find the checkbox inside it, get its id and then add checked prop to the item.
But instead it selects the first div finds the checkbox inside and checks it no matter the value inside.
$( "#click" ).click(function() {
if ($( "div:contains('Text1')" ))
{
id = $("div:contains('Text1')").find("input[type='checkbox']").attr("id")+"";
alert(id);
$("#"+id).prop("checked", !($("#"+id)).is(':checked'));
}
});
});
Any help will be aprciated. Thank you.

Use $("div:contains('Text1')").length instead of $("div:contains('Text1')")
Change Your code as
$("#click").click(function () {
if($("div:contains('Text1')").length) {
var checkbox = $("div:contains('Text1')").find("input[type='checkbox']"); //Find Checkbox here
checkbox.prop("checked", !checkbox.is(':checked'));
}
});
DEMO
Change your code as
$("#click").click(function () {
var checkbox = $("div:contains('Text1')").find("input[type='checkbox']");
if (checkbox.length) {
checkbox.prop("checked", !checkbox.is(':checked'));
}
});
Updated DEMO

How to hide and show item if checkbox is checked

I am trying to hide and show an area based on whether a checkbox is checked. I've tried some options but either the area is visible all of the time or it is hidden all of the time.
JavaScript :
$(document).ready(function () {
var mgift = $('#chkbxMGift input[type=checkbox]');
MshowHide();
mgift.change(function () {
MshowHide();
});
});
function MshowHide() {
var mgift = $('#chkbxMGift input[type=checkbox]');
var shcompany = $('#shcompany');
if (mgift.checked) {
shcompany.show();
} else {
shcompany.hide();
}
}
HTML :
<li>
<div class="info">
<asp:CheckBox ID="chkbxMGift" runat="server" Text="A matching gift will be made" ClientIDMode="Static"/>
</div>
</li>
<li id="shcompany">
<div class="info">
<label for="txtCompanyName">Company Name</label>
<asp:TextBox runat="server" ID="txtCompanyName" CssClass="narrow" />
</div>
<div class="info">
<label for="txtCompanyPhone">Company Phone Number</label>
<asp:TextBox runat="server" ID="txtCompanyPhone" CssClass="narrow" />
</div>
</li>
How can I make this work correctly?

Try this code
$(document).ready(function () {
$('#chkbxMGift').click(function () {
var $this = $(this);
if ($this.is(':checked')) {
$('#shcompany').hide();
} else {
$('#shcompany').show();
}
});
});
Hope it solves your issue

Your selector is wrong.
var mgift = $('#chkbxMGift input[type=checkbox]');
This means you select the childnode input from parent #chkbxMGift.
I believe this is the selector you need:
var mgift = $('input#chkbxMGift[type=checkbox]');
And here are some improvements on your code:
$(document).ready(function () {
var mgift = $('input#chkbxMGift[type=checkbox]');
var shcompany = $('#shcompany');
// check for default status (when checked, show the shcompany)
if (mgift.attr('checked') !== undefined){
shcompany.show();
} else {
shcompany.hide();
}
// then simply toggle the shcompany on every change
mgift.change(function(){
shcompany.toggle();
});
});
jQuery's toggle is really useful and added in version 1.0, so you should be able to just go with that.
Here's a proof of concept in a jsFiddle, with only the bare minimum:
http://jsfiddle.net/Y39Bu/1/

This is stolen from this answer:
http://jsfiddle.net/MH8e4/4/
$('.wpbook_hidden').css({
'display': 'none'
});
alert($(':checkbox:checked').attr('id'))
$(':checkbox').change(function() {
var option = 'wpbook_option_' + $(this).attr('id');
if ($('.' + option).css('display') == 'none') {
$('.' + option).fadeIn();
}
else {
$('.' + option).fadeOut();
}
});
search for similar questions before you ask yours. Please give the original author the credit if this solves your problem

Have you tried changing the CSS directly? Such as
document.getElementById("shcompany").style.display="none";
or
document.getElementById("shcompany").style.visibility="hidden";
(or "visible")

Why use JQuery when a simple CSS property change can do the trick?
Just change the div's class or modify it's style:
If you want it to take up space even when hidden use visibility:hidden (respectively visibility:visible)
if you want it NOT to take space when hidden use css display:none (respectively display:block)

Converting jQuery code into Javascript

I am very new to Javascript and jQuery. I am trying to implements a dropdown select box, whereby, when certain items are selected an input text box is disabled. I was able to implement by hacking together some jQuery from various StackOverFlow questions:
<select name="Severity-of-your-symptoms" id="Severity-of-your-symptoms" class="cformselect" >
<option value="full01_severity_notselected" selected="selected">Please select...</option>
<option value="full01_severity_other">Mild</option>
<option value="full01_severity_other">Moderate</option>
<option value="Severe">Severe</option>
<option value="full01_severity_other">Other</option>
</select>
<br />
<input type="text" id="li-10-14" />
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" id='color'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
<script type="text/javascript">
$('#Severity-of-your-symptoms').change(function() {
$("#li-10-14")[$(this).val() == "full01_severity_other" ? 'show' : 'hide']("fast");
}).change();
$('#Severity-of-your-symptoms').change(function() {
$("#li-10-14")[$(this).val() == "full01_severity_other" ? $('#color').attr("disabled", true)
: $('#color').attr("disabled", false)]
}).change();
</script>
I really wanted to implement this in Javascript but was only able to get it working with jQuery, can anyone help me convert this into pure Javascript?

If I understand the intent of your code, you can do it like this. The only thing this leaves out is animation for hiding/showing like you had with jQuery.
// this code should be located after the rest of the HTML at the end of the <body> tag
function checkSeverity() {
var displayVal, disabledVal;
if (document.getElementById("Severity-of-your-symptoms").value == "full01_severity_other") {
displayVal = "inline";
disabledVal = true;
} else {
displayVal = "none";
disabledVal = false;
}
document.getElementById("li-10-14").style.display = displayVal;
document.getElementById("color").disabled = disabledVal;
}
// hook up the event handler
document.getElementById("Severity-of-your-symptoms").onchange = checkSeverity;
// call it initially to establish the initial state
checkSeverity();
You can see it work here: http://jsfiddle.net/jfriend00/3xGxp/

Taking it in bits:
$('#Severity-of-your-symptoms')
The $ function creates a "jQuery object" that is an array with additional methods. The members of the array are the elements selected by the selector. In this case, it is using an ID so only one element is selected. It can be replaced by:
var element = document.getElementById('severity-of-your-symptoms');
.change(function(){...})
This calls a method of the jQuery object to add an onchange listener to the element what will be called when the element receives a change event. If you only need one change listener, then you can attach it to the onchange property:
element.onchange = function(){...};
But element might be null, so better to do:
if (element) element.onchange = function(){...};
To remove the jQuery bits from the function, if you just want the element to appear and dissaear, then:
function() {
var element = document.getElementById('li-10-14');
if (this.value == "full01_severity_other") {
element.style.display = element.style.display == 'none'? '' : 'none';
}
}
If you want fade in/out or slide up/down effects, there are very simple libraries to implement those.
Finally there is:
.change();
You could write the whole thing as a single statement, but I think it's much more robust to keep it as seperate statements. Converting the other part is much the same.

Replacing Checkbox with image and update onClick (possibly jQuery?)

Is there a way that I can have an image replace a checkbox, and when someone clicks on it, it selects it, and changes the image to another image like a "checked" image?
So essentially:
[heart-icon] Health and Fitness
user clicks on it
[check-icon] Health and Fitness
and now that area is selected

There are definitely scripts/plugins available to do this. I've not used any of them so I can't recommend one specifically, but here's an example:
http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin

I would try this plugin: SimpleImageCheck
http://www.jkdesign.org/imagecheck/
Code to customize the checkbox looks simple:
$('#checkbox').simpleImageCheck({
image: 'unchecked.png',
imageChecked: 'check.png'
afterCheck: function(isChecked) {
if (isChecked) {
// do something
}
}
});

No need of plugins nor JQuery:
<span onclick="changeCheck(this)">
<img src="http://www.clker.com/cliparts/e/q/p/N/s/G/checkbox-unchecked-md.png">
<img src="http://www.clker.com/cliparts/4/h/F/B/m/4/nxt-checkbox-checked-ok-md.png">
<input type="checkbox" name="chk">
</span>
<script>
function changeCheck(target)
{
chk = target.lastElementChild;
chk.checked = !chk.checked;
target.children[+ chk.checked].style.display = '';
target.children[1 - (+ chk.checked)].style.display = 'none';
}
function initCheck()
{
chk = document.getElementsByName('chk')[0];
chk.style.display = 'none';
chk.parentNode.children[1 - (+ chk.checked)].style.display = 'none';
}
initCheck();
</script>