We Keep Coding

Swapping CSS with a Click addEventListener in JavaScript

I am having trouble getting a click event to work on a page. I have a Div with an ID of 'icon', and the class of 'lock', and I want to be able to click on this Div's background image to change the class from 'lock' to 'locked'.
Before any confusion happens, I have both classes in my external CSS file, and they add a background image to the Div. Also, I don't want to use JQuery, but addEventListener with a function. so far, this is what my JS looks like:
var elLock = document.getElementById('icon');
function changeLock(){
var imgSwitch = elLock.getAttribute('class');
if(imgSwitch !== 'unlock'){
elLock.className = 'unlock';
}else{
elLock.className('lock');
}
}
elLock.addEventListener('click', changeLock, false);
The desired result is what is in this youtube video: https://www.youtube.com/watch?v=oI2sRCN7CiM
Any help would be greatly appreciated. I would love to learn from mistakes i've made.

I would use the Element.classList property rather than what you're doing here ...
Then you could simply do:
elLock.addEventListener('click', function() {
elLock.classList.toggle('lock') },
false);
and leave unlock as a default class on the element. Every time you click on the element, it will toggle the lock class on-and-off, and you can use the cascading properties of CSS to override the background properties that are on your default unlock class.

Change an element's CSS with Javascript may provide some help, although it does reference to jQuery. Element.className could be what you need, or element.classList.
I'd check if the current class is 'unlock'. If one class is considered a default, the other class can toggle. Using CSS's cascading properties will allow the toggling class to override the default when it is present.
Alternatively you could remove the currently applied class and apply the other.
if (elLock.classList.contains('unlock')) {
elLock.classList.remove('unlock');
elLock.classList.add('lock');
}
else {
elLock.classList.remove('lock');
elLock.classList.add('unlock');
}

Jquery event - how to select entire DIV excluding some inner area

Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.

You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});

You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.

Hiding Then showing something via jquery

I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.
as far as i know, you hide something via this code:
$("element").click(function() {
$("element2").hide("slow");
});
and to show something:
$("element").click(function() {
$("element2").fadeIn("slow");
});
so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"
How do I accomplish this?

You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:
<button id="toggleButton" type="button">Hide</button>
Then bind an event handler to the button which
toggles the visibility of the elements you want to show/hide and
changes the text content of the button
And here it is:
$('#toggleButton').click(function() {
// toggle visibility if all p elements
$('p').toggle();
// Change text based on current text
// If the current text is 'Hide' then we just hid the elements and
// we have to change the text to 'Show' (and vice versa).
$(this).text(function(i, current_text) {
return current_text === 'Hide' ? 'Show' : 'Hide';
});
});
DEMO
Reference: .click, .toggle, .text, conditional operator.
You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.
jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.
Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).

To Hide:
$("element").click(function() {
$("element2").hide("slow");
$("element").text('Show');
});
To Show:
$("element").click(function() {
$("element2").fadeIn("slow");
$("element").text('Hide');
});

Change button value like
$("element").click(function() {
$("element2").hide("slow");
$("#btnID").prop('value', 'Show');
});
$("element").click(function() {
$("element2").fadeIn("slow");
$("#btnID").prop('value', 'Hide');
});

I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.
HTML:
Show
Hide
<p id="textshow" style="display:none"> lorem ipsum</p>
Javascript:
$('#bshow').click(function() {
$('#bhide').fadeIn();
$('#textshow').fadeIn();
$(this).hide();
});
I think this jsFiddle can help you:

How can I use multiple Floating Help Dialogue by using 'class' instead of 'id'?

I need to use multiple floating help dialog boxes in a page. I have tried it by using 'display:block' and 'display:none' and used ID in javascript. I cannot use classes since I have multiple of them on the same page and if I use classes then all of them will be displayed/hide at the same time. However, as the number of help items are increasing in the page, I have to go back to the javascript and add more lines ...
for example:
$(document).ready(function() {
$("#help-icon1").click(function() {
$('#help-details1').css('display', 'block');
});
$("#help-icon2").click(function() {
$('#help-details2').css('display', 'block');
});
$("#help-icon3").click(function() {
$('#help-details3').css('display', 'block');
});
});
Each of them also have close icons and they should be disappeared if clicked on that close icon or clicked anywhere in the page. That means I have to write javascript functions 3 times for all the different close icons.
I tried to rely on jquery's "next" feature, but since there are many layers (div/p/span) in between the areas where the help icon is places and the help text, it becomes problamatic. Any idea or any better way to resolve this?
Thanks in advance.

I'm not quite sure I understand what you are looking for, but you can set up all the click handlers in one step, and have each one refer to itself in the handler:
jQuery(".help-icon").click(function() {
jQuery(this).css('display', 'block');
});

You can add additional class names to an element.
A div can be hidden by default, and a new class can be appended to it - to "overrule" the previous style (Hence the name Cascading Style Sheets)
<div class="hidden exception"></div>
If an element is clicked, you can append a new classname like so:
$('.target').addClass('newclass');
more info:
http://api.jquery.com/addClass/

I've not done it using JQuery but what you need is "unobtrusive javascript".
It does get done by using a class. Say you have images you all want highlighted:
<img src="pic1.png" onMouseover="this.src='hi_pic1.png';" />
so they all have the same behaviour. Give them a class:
<img src="pic1.png" class="hi" />
Then at load time, on in the script at the end of your page, yahoo-style, you write an initialisation to
- grab every element of the class
- add the event(s) you want
- set the event to use the appropriate data, e.g. by using this and by using systematic names like pic1 -> hi_pic1.
Hope this helps,
Charles

Have you tried the jQuery .each function?
EDIT: Like the following
$(".help-icon").each(function(idx, elm){
elm.click(function(){
...
})
});

If all of your help icons have the same class you can use jQuery's each function to loop through them, retrieve the associated id, replace "icon" with "detail" in the id (so #help-icon3 would become #help-detail3), and then use that to update the panel. Something like:
$(".help-icon").each(function() {
var detailsId = $(this).attr("id").replace("icon", "details");
$("#" + detailsId).css('display', 'block');
});

Let's just ASSUME that you need to use IDs for some unknown reason. Here's your answer to combine efforts:
$("#help-icon1").add("#help-icon2").add("#help-icon3").click(function() {
$(this).css('display', 'block');
});
Which equates to:
$("#help-icon1, #help-icon2, #help-icon3").click(function() {
$(this).css('display', 'block');
});
But really, you don't need to use unique IDs like this without some pretty good reasons.

Creating conditional statements for JQuery

I have a very novice question, so apologies if the answer to this is obvious.
I am using JQuery to toggle the contents of items based on whether the item has been clicked. I have been able to successfully implement the toggle feature.
I now need to have it load with the first two items set to show() with the rest set to hide(). I have given a unique class name to these first 2 items. I know that I can simply do a $('div.activeitem').show() and then hide thee rest, but I'd prefer to setup a condition.
I am a JQuery novice, so I don't know how to target these elements or their classes in a conditional statement. I've searched google but have been unsuccessful. I want a conditional that asks if the div "newsinfo" also has the class "jopen" then show(), else hide().
Thanks for your help. I have attached my code to help you understand the context of my question:
<script type="text/javascript">
$(document).ready(function(){
// Here is where I'd like to implement a conditional
$('div.newsinfo').hide(); // this would be part of my else
$('h5.newstoggle').click(function() {
$(this).next('div').slideToggle(200);
return false;
});
});
</script>

How about simply
$('div.newsinfo').each(function(){
if($(this).hasClass('jopen')){
$(this).show()
}else{
$(this).hide();
}
});

there is hasClass() function. Better way is using toggleClass().
For example:
$('div.blocks').click(function(){
$(this).toggleClass('class_name');
});
after first click class will be added, after second - removed... and so on ^^

JQuery has an .hasClass function.
i.e.
if($(".selectableItem").hasClass("selected")){
//remove selection
$(".selectableItem").removeClass("selected");
}else{
//remove the selected class from the currently selected one
$(".selectableItem .selected").removeClass("selected");
//add it to this one
$(".selectableItem").addClass("selected");
}

Why don't you add a default css to jopen class to display: block and the others to display: none ?
something like
.newsinfo {display: none}
.jopen {display:block!important}

Just use selectors. For example, if all divs with the class "newsinfo" are visible by default:
$("div.newsinfo:not(.jopen)").hide();
If they're all hidden by default:
$("div.newsinfo.jopen").show();