We Keep Coding

Add overlay on specific images selected (no more than 3)

I have a grid of cards, right now clicking one of the cards adds an overlay to all of them.
I need:
1.- If user clicks one cards, and only that card gets the overlay.
2.- No more than 3 cards at a time can have an overlay. User would have to click one of the already clicked cards to diselect it, in order to select another one.
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
JS Code:
$('.imageDiv').click(function(){
$('img').toggleClass("tricky_image");
$(".text").toggleClass("display-inline");
});
Expected result:

Try this instead. Make use of this so that the relevant scope is preserved.
$('.imageDiv').click(function(){
$(this).find('img').toggleClass("tricky_image");
/*$(".text").css("display", "inline");*/
$(this).find(".text").toggleClass("display-inline");
});
You could equally (maybe) use the .children() method (as opposed to .find()) but I didn't know exactly how your dom structure was inside each "imageDiv".

Your specified click function search for every 'img' element and every node with a .text class.
What you actually want, is to get the child img element and .text of the clicked .imageDiv
By limiting the queried scope with $(this).find(...) we only search for child elements of the clicked .imageDiv.
With some additional logic your second requirement can be also fulfilled ->
$('.imageDiv').click(function(){
const trickyCount = $(".tricky_image").length;
const img = $(this).find('img');
const text = $(this).find(".text");
if(trickyCount < 3 || img.hasClass("tricky_image")){
img.toggleClass("tricky_image");
text.toggleClass("display-inline");
}
});

Toggle(hide/show) between a unknown number of div containers

An example use case would be a registration form that was split into several steps. I.e. there are three steps:
Container 1 is visible
Container 2 is hidden
Container 3 is hidden
User clicks next button:
Container 1 is hidden
Container 2 is visible
Container 3 is hidden
User clicks next button:
Container 1 is hidden
Container 2 is hidden
Container 3 is visible
User clicks previous button:
Container 1 is hidden
Container 2 is visible
Container 3 is hidden
and so on. This is what I tried:
$('#btn-next-step').live('click', function(){
$('.form-step').each(function(){
if($(this).is(':visible')){
$(this).hide();
}else{
$(this).show();
return false;
}
});
});
HTML:
<form>
<div class="container-fluid form-step form-step1">
step1
</div>
<div class="container-fluid form-step form-step2">
step2
</div>
<div class="container-fluid form-step form-step3">
step3
</div>
</form>
Here is my fiddle: http://jsfiddle.net/feFcu/
Can you help me with the logic. Any ideas how to realize this kind of behaviour?

First, store the visible one in a variable. Then hide all of them, and use .next('.form-step') to find the one that follows the previously visible one, and .show() it.
$('#step').on('click', function(){
// Find the visible one and store in a variable
var showing = $('.form-step:visible');
// Hide all of them (including the currently visible one)
$('.form-step').hide();
// Find the next one with .next() and make it visible
showing.next('.form-step').show();
});​
Here is the updated jsfiddle example...
Note that I have replaced .live() with .on(), since .live() is now deprecated.

using this line will provide you with an array of the steps:
var steps = document.getElementsByClassName('.form-step');
now you can itterate through the steps by tracking which step is active with a seperate variable.

Including variable assignments inside a function?

<button onclick="insert()">Click to insert</button>
<hr id="start">
<hr id="end">
I wrote a javascript function that inserts a div between two horizontal rules:
<script type="text/javascript">
var element = document.createElement("div");
var element_content = document.createTextNode("This is a newly added row!");
element.appendChild(element_content);
var sibling = document.getElementById("end")
var parent = document.getElementById("start").parentNode;
function insert(){
parent.insertBefore(element,sibling);
}
</script>
However when I click the button for the second time, no divs are inserted. I had to include all the variable assignments inside the function in order to click on the button for the 2nd time have the div inserted:
<script type="text/javascript">
function insert(){
var element = document.createElement("div");
var element_content = document.createTextNode("This is a newly added row!");
element.appendChild(element_content);
var sibling = document.getElementById("end")
var parent = document.getElementById("start").parentNode;
parent.insertBefore(element,sibling);
}
</script>
Can someone explain why my first approach didn't allow a 2nd div to be inserted after clicking the button?

In the first example you create one element, since you define it outside of the function. The first time the function is called, that element is appended to the DOM and it won't be appended again (it actually gets removed and appended again, but in the same place):
If the node already exists it is removed from current parent node,
then added to new parent node.
See appendChild on MDN.
The second example creates a new element every time you call the function, and appends that new element to the DOM.

Of course! If you keep the element outside of the function, only 1 new div is created and you are inserting the same div over and over. When a div is inserted in a new location, it is removed from it's old location (if any).
Your second method creates new divs every time the button is clicked.

Because you're only creating a div once and then inserting it when you click the button. You never create a second div, so how can you expect one to magically appear out of nowhere?
The second function works because it creates the div when you click the button, then inserts it. Here you create one div for every click, so it works.

in your first approach, the variables you declare outside the function are created before the click is triggered, therefore they will exist always in the same state independently of what you click.

The first approach only creates the div once and inserts it in the DOM. Calling the function twice doesn't create the div again like the second method does. You could probably take the:
var sibling = document.getElementById("end")
var parent = document.getElementById("start").parentNode;
out of the function though.

The Script is syntactically correct and does what you tell it to do. You're inserting the same node to the same position, which results in... nothing.
Try cloning the node:
function insert(){
parent.insertBefore(element.cloneNode(true), sibling);
}

jQuery wrap() is wrapping every assigned object on click

I have a form that creates a div when you enter a name and click "add". I want to wrap this div in an li but when I do this it wraps every created div with the same class name in an li therefore I end up with multiple levels of li's around the div. Is there a way to only target the div that is created on that click?
The fiddle is here
http://jsfiddle.net/clintongreen/BMX4J/1/

Here's an updated fiddle. All I've done is moved the creation of the new div outside of the call to append, and stored it in a variable so it can be reused. The relevant code from the fiddle:
var newDiv = $('<div class="div_menu_button"></div>');
$('#created_buttons').append(newDiv.val(value).text(value) );
newDiv.wrap("<li></li>");

jQuery toggle method issue

When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.
Here is the test page: http://jsfiddle.net/dassio/CLrMx/9
I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?

This should do the job:
http://jsfiddle.net/CLrMx/15/
Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.

I found the problem:
<div id="config" class='name ui-widget-content ui-corner-all'>
<button id="details">show details</button>
</div>
I add the name class name to the parent div around the button, and when the event bubble up to the parent div, the following code:
$(".name" ).click(function() {
var clicked = $(this);
var suggestion = clicked.next();
suggestion.toggle("fold",200);
return false;
});
was called and toggle off the <h3> element which is the next element of the parent div.