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";

Loading Content Sequentially Using jQuery

TJ Crowder's code from this question (jQuery load content sequentially) is what I am basing this off, but for some reason it is not working as I'd expect.
How I am reading it, it should load the page and have 4 divs that show essentially:
Panel 1
Panel 2
Panel 3
Panel 4
Then, it should sequentially, one after the other load the URL from data-page attribute and replace the "Panel X" with what it is pulling from the URL for that data-page.
I am going to be using this for some charts that take awhile to load, so I wrote a "test" page on my website (the test.php file), that literally waits 5 seconds, then displays a random number and some of Aesop's fables for now to simulate a delay then dumping some text.
If you go to the test file it works fine, but it is not loading it from the code from TJ. Am I missing something?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="panel" data-page="http://jamesorr.com/test.php">Panel 1</div>
<div class="panel" data-page="http://jamesorr.com/test.php">Panel 2</div>
<div class="panel" data-page="http://jamesorr.com/test.php">Panel 3</div>
<div class="panel" data-page="http://jamesorr.com/test.php">Panel 4</div>
<script>
// Assumes script is at the bottom of the page, just before </body>
(function() {
var index = 0,
panels = $(".panel");
triggerLoad();
function triggerLoad() {
var panel;
if (index <= panels.length) {
panel = $(panels[index]);
++index;
panel.load(panel.attr("data-page"), triggerLoad);
}
}
})();
</script>
</body>
</html>
So, based on some of the comments below I am trying it on my own domain in the WordPress plugin I was going to be using it in.
It still does not seem to be working for me there either.
I thought maybe it was the path to the "test.php" file so I've even tried to test several locations and it is still not working:
$Content .= "<h2>Bigger Test</h2>\n\n";
$Content .= "<div class=\"panel\" data-page=\"test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"./test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../../../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../../../../test.php\">Panel 1</div>\n";
$Content .= "<h2>Part 2 of Bigger Test</h2>\n\n";
$Content .= "<div class=\"panel\" data-page=\"./test.php\">Panel 2</div>\n";
$Content .= "<h2>Part 3 of Bigger Test</h2>\n\n";
$Content .= "<div class=\"panel\" data-page=\"test.php\">Panel 3</div>\n";
$Content .= "<h2>Part 4 (Final) of Bigger Test</h2>\n\n";
$Content .= "<div class=\"panel\" data-page=\"http://jamesorr.com/wp-content/plugins/realestatedata/test.php\">Panel 4</div>\n";
$Content .= <<< EOT
<script>
// Assumes script is at the bottom of the page, just before </body>
(function() {
var index = 0,
panels = $(".panel");
triggerLoad();
function triggerLoad() {
var panel;
if (index <= panels.length) {
panel = $(panels[index]);
++index;
panel.load(panel.attr("data-page"), triggerLoad);
}
}
})();
</script>
EOT;
Still does not show the expected content of test.php output file in any of the divs.

If http://jamesorr.com/test.php is a cross domain request, jquery load will not work due to security reason. But it should work if it's a same origin request. Optimize your code as triggerLoad() is getting executed more than expect (5 times instead of 4 times).
if (index < panels.length) {
panel = $(panels[index]);
++index;
panel.load(panel.attr("data-page"), triggerLoad);
}

Codeigniter div tag around anchor

can we use div tag inside anchor function?
I have this div
#first{ opacity:0; }
Then I want to put it into my anchor. Here it is:
<?php
if(is_array($databuku)){
echo '<ol><br>';
$i = 1;
foreach($databuku as $key){
$judul = '<div id="draggable'.$i++.'" class="ui-widget-content"><center><strong>'.$key->tbl_name.'</strong>
<br> <br>
' .$key->index_no. ' / ' .$key->id. '
<br>
'.anchor('perpustakaan/koreksi_buku/'.$key->id, 'Edit').' |
// I want to put the div #first in 'Delete' function below //
'.anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, 'Delete').'
</center></div>';
echo $judul;
}
echo '</ol>';
}
?>
I want to put the div #first in anchor -> delete. How can I do that?

This will work
anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, '<div id="first">Delete</div>')

As the div opacity is 0 in your CSS, so that the div content is not visible to you and if you want to add the div#first in your anchor tag then try,
...anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, '<div id="first"></div>Delete')....

How do i limit results in a while loop with jQuery and PHP

I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>

in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"

Determine what photo thumbnail was clicked and open lightbox with bigger photo

I am using the Lightbox_me plugin to create a photo gallery from scratch. Right now the way my images are populated on the screen is by using:
<?php
require 'DB.php';
try{
$stmt ='SELECT * FROM victoria';
foreach ($conn->query($stmt) as $row)
{
echo ('<div class="photo"> <a href="images/photoGallery/' . $row['name'] .'">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');
}
} catch (PDOException $e){
echo 'Connection failed: ' . $e->getMessage();
}
?>
Each photo is stored inside a div class named photo right now I have 39 photos. Lightbox me works by calling:
$('#try-1').click(function(e) {
$('#sign_up').lightbox_me({
centered: true,
onLoad: function() {
$('#sign_up').find('input:first').focus()
}
});
e.preventDefault();
});
If I wanted to invoke Lightbox_me by clicking on a photo thumbnail and opening the larger high resolution inside the lightbox how would I do this?

You have following (not properly nestede)
echo ('<div class="photo"> <a href="images/photoGallery/' . $row['name'] .'">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');
First of all, make changes here, make it look like this
echo '<div class="photo"><a href="images/photoGallery/' . $row['name'] .'">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" /></a></div>';
Now, register click event on .photo a, like
$('div.photo a').on('click', function(e){
e.preventDefault();
var img = $('<img/>', {'src':$(this).attr('href')}),
div = $('<div/>', {'id':'lightBoxWrapper', 'style':'display:none;'});
$('body div#lightBoxWrapper').remove();
$('body').append(div.append(img));
$('#lightBoxWrapper').lightbox_me({centered: true})
});