We Keep Coding

Styling a div based on the flex wrap property using javaScript

A created a function that renders buttons depending on how many data gotten from database.
I want to use js to set the style the button container differently,
especially setting property of of the button container to flex direction to column when it starts wrapping,
Since the website can have many buttons.
Is there a way to use javascript to check for the flexwrap property of the button container.
I tried this code but it is returning an empty string
Console.log (btnContainer.style.flexWrap)

try running btnContainer.style in the console directly, rather than console.log(). hope it will help you find a solution

This commend check only inline style like <div style="flex-wrap:wrap;"></div>. Now if you console.log(document.querySelector('div').style.flexWrap) you will get string with value "wrap".
The solution your problem is add style this element in html inline as I wrote above or in js like document.querySelector('div').style.flexWrap = wrap

jQuery Select One Element From Class name

I am in a position where I need to use the .slideToggle() function in jQuery, on a regular JavaScript determined element.
I can use this code:
var feedback = document.getElementsByClassName('feedback');
and then a bit later on in a function:
feedback[index].style.display = 'block';
However, what I want to do is use the slideToggle('fast') function on feedback[index], so instead of so brutally changing its display to block, I get a nice jQuery-esque transition.
Obviously this code won't work:
feedback[index].slideToggle('fast');
However this will:
$('.feedback').slideToggle('fast');
but I can't choose which feedback by index to run the slideToggle() function on, it just does them all, which makes sense.
If I could get some code that effectively does this:
$('.feedback')[index].slideToggle('fast');
That would be perfect. I like the fact that I can stick a class on something and iterate through the list of items that appear in .getElementsByClassName('classname'), so I don't have to stick an ID on everything of the same class, and it would be nice if I could choose which $('.feedback') element I am using in the list of all elements returned by this but I cannot figure out how that would work. If I can somehow choose by index which items in a list by class, to run jQuery commands on it would make this a lot simpler as I do not want to stick an ID on each and every item that has the class of feedback.
Thanks a lot.

Try this : You can use eq() to select element with specific index.
$('.feedback:eq('+index+')').slideToggle('fast');

You can use JQuery like this:
$(feedback[index]).slideToggle('fast');
Here you can see demo

Hiding button in JQuery using .prop(hidden: true)

I am trying to figure out how to hide a button with JQuery using the .prop(hidden: true) method. For some reason, in Chrome when I set this value and view the html, the button has a hidden element, but the button still shows up as visible on the page.
Any ideas?

A button does'nt have a hidden property ?
$('button').hide();
or
$('button').toggle(true); //shows button
$('button').toggle(false); //hides button

You can use set the display style to none. For example,
$("#button").css("display", "none");
Or, .hide() for brevity,
$("#button").hide()
There's also visibility and opacity but these two may not generate the effect you desired.

You can't hide a button using jQuery's .prop() function, you have to use either .hide() or .fadeOut() or you can try with .css() method:
using .css():
$('input[submit]').css('display','none');
using fadeOut():
$('input[submit]').fadeOut();
using .hide():
$('input[submit]').hide();

Your syntax is incorrect, but there's no "hidden" property anyway. You probably want:
$('#your_button').hide();
or possibly
$('#your_button').addClass('hidden');
if you've got a "hidden" class in your CSS.
The incorrect part of your syntax is that the parameters to your function call are expressed incorrectly. Setting a property should look like:
$("#your_button").prop("name", "value");

jQuery.prop is intended for HTML attributes only, things defined on the DOM node. CSS styles aren't applicable things to set with prop, and hidden just doesn't exist, whereas href or class is applicable. Instead you must use $(el).css('display', 'none') or $(el).hide().

What you described is actually correct if you happen to use jquery alongside bootstrap4.
just do the following:
$element.prop('hidden', true);
If no bootstrap 4 available it is still works for modern browser.

prop() is a getter function: http://api.jquery.com/prop/ I suggest using hide: http://api.jquery.com/hide/

If you want to use prop, then
$("#my_button").prop("style").display="none"
I would go w/o jquery. (back to the basic)
document.getElementById("mybutton").style.display = "none";

You can use a ternary operator and the css() method to accomplish the same thing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
$("#button").css("display", (mycondition) ? "block" : "none");

Isotope plugin: How to implement 'insertAfter" method?

I'm trying to add an element to the middle of the elements list.
I have tried adding it using jQuery with insertAfter method and applying isotope('reLayout').
However, this doesn't really work.
$('#insertAfter a').click(function() {
var $newEl = $(fakeElement.getGroup()).first();
$newEl.insertAfter($container.children().eq(3));
$container.isotope('reLayout');
return false;
});
jsfiddle
Any ideas how to make it work?
Thanks

Isotope does not allow you to manually insert an element into a specific position since it's supposed to automatically handle the element placement. One way to solve your problem is to add a special attribute to every element that can be used to sort the elements in the required order. Then, configure Isotope to use the created attribute to sort the elements. When you need to insert an element, assign a value to that attribute of the new element that will place it into the required position.
Please see the solution on jsfiddle: http://jsfiddle.net/9V2Mj/20/

jQuery Hide using ID

I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});

This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});

I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});

Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.