We Keep Coding

Javascript : difficulties when making a hidden element visible

I have some problems with css manipulation with jQuery.
Here is what I need to do.
I have these three picture. Each are a representation of a person.
When we click on one of those, this div appears:
The problem is when I close it, the website should become as in the first picture, but the 3 picture don't reappear with $("class").css("visibility", "visible").
I don't know why.
The code (there is some PHP, it's done with Wordpress) :
Here is the code for the first picture (I will keep it short, it's not relevant) :
<div class="team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">
<img class="img_avocat" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>
Here is the code for the second picture :
$html .= '<div class="team-member-container" style="position:relative;z-index:-200">';
$html .= '<div class="avocat_container ' .$i. '" height="400px" style="width:1250px; height:442px;border:2px solid black;z-index:200;position:absolute;top:-5%;">
<div style="width:400px; display:inline; position:relative; z-index:200" class="photo_container"><img class="img_avocat_cont" style="display:inline; padding-top:23px" width="400px" height="200px" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>
<div style="display:inline-block; vertical-align:top;z-index:200; margin-left: 50px;position:relative;padding-top:23px;" class="container_description">
<h3 style="display:block;z-index:200; color:#f5a982;position:relative;">' . $name . '</h3>
<p style="display:block;z-index:200;position:relative;">' . $job_position . '</p>
<p style="display:block;z-index:200;position:relative;">DESCRIPTION</p>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">FORMATION</h4>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">Expertise</h4>
</div>
<div style="display:inline;" class="avocat_close"><img style="display:inline;float: right;padding-top: 20px; padding-right:20px;" src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/croix_fermeture.png" /></div>
<div style="display:inline; margin-left:28%;" class="avocat_mail"><img style="display:inline;padding-right:10px;"src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/mail.png" />Envoyer un message</div>
';
$html .= '<div class="testo team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">';
The Jquery code :
$(".avocat_container").hide();
var on = 0;
$(".team-member-container").click(function () {
if (on == 0) {
$(this).find(".avocat_container").fadeIn("slow");
$(".team-member").css("visibility", "hidden");
on = 1;
}
});
$(".photo_container").click(function() {
$(".avocat_container").fadeOut("slow");
$(".avocat_container").css("visibility", "hidden");
$(".testo").fadeIn("slow");
$(".team-member").style.visibility = "visible";
on = 0;
});
});

I would actually use min-height for this, and you'd also get a nice slide-down transition. Basic idea is to set your 2nd div to min-height:0;, then in JQuery use a click event on the other div to increase min-height. If you keep the z-index of the 2nd div higher than the first, it will appear overtop of it. To close it, attach a click event that resets min-height:0;. Add transition:min-height .4s ease; to your 2nd div and you've got a nice little effect!

This is because when you get elements by '$', it will return a jQuery object (an array-like object) even if there is only one element compatible with the condition, you can use console.log($(".team-member")) to see what you have.
In this case, just modify
$(".team-member").style.visibility = "visible";
to
$(".team-member").css("visibility", "visible");
or
$(".team-member")[0].style.visibility = "visible";

adding html image using jquery to div/table

i'm new to JQuery and currently using it in Visual Studio 2013.
I want to ask how do I add img tag into a table or div using JQuery?
Ie. i have a div and i want to dynamically create image using jquery. OR
i have a dynamically created table in a dynamically created div, and I want to add an image to one of its row.
I've tried this in jsfiddle (http://jsfiddle.net/3C7UD/1/)
$("#divid").append('<table>
<tr>
<td>asdasdasd</td>
<td><img src:"https://www.google.com/images/srpr/logo11w.png" width:"225px" height:"225px" /></td>
</tr>
</table>');
$('#divid').append('<img src:"' + imgLink + '" width:"225px" height:"225px" />');
but no image.. I also have tried that in visual studio project but the same (no image).
I can't found any tutorial about adding image, and the solutions I found in this forum haven't work for me by far....

You wrote <img src:"..." /> instead of <img src="..." /> which is the reason why your code isn't showing the image:
Corrected fiddle : http://jsfiddle.net/Zword/3C7UD/3/
Corrected part of code:
$("#divid").append('<table><tr><td>asdasdasd</td><td><img src="http://blog.sckyzo.com/wp-content/google-small.png" width:"225px" height:"225px" /></td></tr></table>');
$('#divid').append('<img src="' + imgLink + '" width:"225px" height:"225px" />');

HTML attributes are specified with =, not :.
$("#divid").append('<table><tr><td>asdasdasd</td><td><img src="http://blog.sckyzo.com/wp-content/google-small.png" width="225px" height="225px" /></td></tr></table>');
$('#divid').append('<img src="' + imgLink + '" width="225px" height="225px" />');
Updated demo: http://jsfiddle.net/3C7UD/5/

try changing this 2 lines:
var img = "<img src='"+imgLink+"' />";
and the last one:
$('#divid').append(img);

Change your code to :
$("#divid").append('<table>
<tr>
<td>asdasdasd</td>
<td><img src:"https://www.google.com/images/srpr/logo11w.png" style="width:225px; height:225px" /></td>
</tr>
</table>');
$('#divid').append('<img src:"' + imgLink + '" style = "width:225px;height:225px" />');

Change your:
><img src:"
to
><img src="

How to add 2 buttons to <li> via jquery

I am using http://jsfiddle.net/eLENj/493/ as a guide line to create 2 stacked buttons in an li element.
This is the code I am using
'<li><div class="ui-grid-a">' +
'<div class="ui-block-a" style="width: 75%;">' +
'<div data-role="fieldcontain">' +
'<h3>Address Details:</h3>' +
'<p>Address 1</p>' +
'</div>' +
'</div>' +
'<div class="ui-block-b" style="width: 25%; float: right;">' +
'<div data-role="controlgroup" data-type="horizontal" style="height: 20px;">' +
'Map' +
'Delete' +
'</div>' +
'</div>' +
'</div>' +
'</li>').listview('refresh');
But what I end up with are two "regular" hyperlinks which look like "MapDelete". Any ideas why the buttons are not being rendered correctly?

Method listview('refresh') will style ONLY a listview.
Because buttons are not part of a listview they will be disregarded.
You will need to style them separately like this:
$('[data-role="button"]').button();
Or you can use this method on your content DIV:
$('#contentDivID').trigger('create');
If you want to find more about this topic take a look at my other blog ARTICLE describing how to enhance dynamically added jQuery Mobile content.
EDIT :
Working example: http://jsfiddle.net/Gajotres/UDBCM/
You will need to position them by yourself + find some custom map icon.

find img attribute and change src value inside divs

I have a structure like:
<div id="so1" class="card over" data-direction="right" gal="gal1" >
<div class="front" >
<img src="img1.jpg" width ="100%;" height ="100%;" alt="">
</div>
<div class="back" style="background-color:#99ca3c;">
</div>
</div>
to recognize this sections I do
change_it = function (id,effect, img ) {
$('#' + id).toggleClass(effect);
$('#' + id).attr('img', img);
}
I call it
change_it ("so1", "flipping-right" ,"imgs/img1/2.jpg");
However it is not changing its value, How can I access this img attribute, if I only have id of parent div?
I mean, the structure is div->div->img

You need to find the image and change its src attribute:
change_it = function (id,effect, img ) {
$('#' + id).toggleClass(effect);
$('#' + id).find('img').attr('src', img);
}

Here so1 is div id but you are using
$('#' + id).find('img').attr('src', img);
for a div.
Here you need to find the image tag first existed in that div.Then change the src of that image.

If you want to assign img to div you can set its background image.
$('#' + id).css('background-img', 'url(' + imageUrl + ')'

Elegant way to extract specific text from between HTML nodes?

From the following string I need the dynamically changing "6.903" number to make calculation with.
Is there some regular expression or some jQuery trick to do that easily or elegantly?
<a href="javascript:void(0)" class="" id="buddyTrigger">
38.760 <img border="0" align="absmiddle" alt="Arany" src="/img/symbols/res2.gif">
5 <img border="0" align="absmiddle" alt="Pokolkristály" src="/img/symbols/res3.gif">
220 <img border="0" align="absmiddle" alt="Szilánk" src="/img/symbols/res_splinters.png">
91 / 125 <img border="0" align="absmiddle" alt="Akciópont" src="/img/symbols/ap.gif">
6.903 / 82.100 <img border="0" align="absmiddle" alt="Életerő" src="/img/symbols/herz.png">
<img border="0" align="absmiddle" alt="Szint" src="/img/symbols/level.gif"> 41
<img border="0" align="absmiddle" alt="Harci érték" src="/img/symbols/fightvalue.gif"> 878</a>
Here is my code as lenghty solution, can I simplify somehow?
<script type="text/javascript">
var dataIn=$('#infobar div.gold').html();
var dataPrep2Split=dataIn.replace(/<img(.*)>/g,';');
var dataSplit=dataPrep2Split.split(';');
var myData2Int=parseInt(dataSplit[18].replace('.',''));
if(myData2Int<=10000) {
$('#player').find('button.btn').remove();
var putBack=dataIn.replace(dataSplit[18],'<span class="newmessage">'+dataSplit[18]+'</span>');
$('#infobar div.gold').html(putBack);
}
</script>

Use DOM methods; replacing things using .html() often breaks page features. Also, that regex is liable to break with the smallest change.
You're trying to grab the Life value right? And that ends with the <img> with alt="Életero".
So that text node is (based on the Q code):
var lifeValTxtNd = $("#buddyTrigger img[alt='Életero']")[0].previousSibling;
And this gets 6903 from the contents like 6.903 / 82.100:
var lifeVal = $.trim (lifeValTxtNd.nodeValue)
.replace (/^\s*(\d*)\.?(\d+)\s*\/.+$/, "$1$2")
;
lifeVal = parseInt (lifeVal, 10);
Then to wrap that section in a span use:
$("#buddyTrigger img[alt='Életero']").before (
'<span class="newmessage">' + lifeValTxtNd.nodeValue + '</span>'
);
lifeValTxtNd.parentNode.removeChild (lifeValTxtNd);
Doing it this way:
Won't break any event listeners on the page.
Is less susceptible to changes in the page layout/content.
Is easier to understand and maintain.
Will run faster, if performance is a factor.