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);
}
Related
I am developing a website and I need few div tags to hide when I'm on the mobile version and certain conditions are met.
I usually hide div tags with jQuery or CSS but I can't do this here. The div tags are created with a PHP foreach printing a query. And some of the results must not show on the mobile version of the website. But I still need those results to show on the desktop version.
if ($article->reference > 0) {
if ($article->apothema > 1) {
if ($catalogue->id == 2) {
$qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Άμεσα Διαθέσιμο') . "</span>";
} else {
$qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Available') . "</span>";
}
echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
} elseif ($article->getApothema() == 1) {
$qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Αμεσα Διαθέσιμο') . "</span>";
echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
} elseif ($article->getApothema() < 1) {
$qty = "<img title='Μη Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/midiathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Not Available') . "</span>";
echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
}
}
This is the condition based upon the div tags are to hide or show on mobile.
If the condition ($article->getApothema() < 1) is truthy, the tags must be hidden, otherwise they should be shown. On desktop it should always show.
What this part of the code actually do is checking the availability of some items in a warehouse and displays accordingly green for plenty, orange for few and red when none is available. Any help would be greatly appreciated.
Use media queries. Adn class thatis hidden when screen has mobile width and then in php echo that class into elements you want hide.
#media screen and (max-width: 600px) {
.mobile{
display:none; #2 options how to hide elemet
visibility:hidden;
}
PHP
echo
foreach
<div class="mobile"></div>
```
You can use this library to detect if a user uses a mobile. To use it, you can do it this way.
// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if ( ($detect->isMobile()) && ($article->getApothema() < 1) ) {
//data show specifically for mobile
}else{
//show data for Desktop
}
I'm currently working on a page which loops some content. When you click on the image, more information appears in a javascript popup. I want to give every popup an unique link (with a $_GET). Any ideas how I can do this with PHP or Javascript (or both).
Pop-up script:
<!----- JAVASCRIPT FOR EACH ELEMENT ---->
<script type="application/javascript">
function openPopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "block";
}
function closePopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "none";
}
</script>
The pop-ups are created inside a foreach loop (PHP) with the onClicks in it.
Thanks in advance!
you can do like this:
<?php if (isset($_GET['my_get_var']) && !empty($_GET['my_get_var']) : ?>
<div class="my-popup">
<!-- my popup code -->
</div>
<?php endif; ?>
no need for js at all - just CSS, HTML and PHP
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";
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);"
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})
});