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";
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
}
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);
}
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')....
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})
});
how to format the data caption
I am planning to display three different names for a single image
after i click the cube light box opens and the caption comes with div tag
but i wanted to display it one by one on the light box
its working fine without light box
$data = '';
$('[data-caption]').each(function(){
$data += '<div>' + $(this).data('caption') + '</div>';
});
$('body').append('<div id="more-info">' + $data + '</div>');
http://jsfiddle.net/ZrpLT/52/
<body>
<div class="row">
<div class="span10">
<div class="melonhtml5_gallery">
<div data-caption="<div>Paul Scholes</div> <div>Wayne Rooney</div> <div>Sir Alex Ferguson</div>" data-image="http://www.defie.co/designerImages/thumbnails/inventory.png"></div>
</div>
</div>
</body>
http://jsfiddle.net/ZrpLT/63/
This requires updating the Gallery class to use .html instead of .text when the caption is appended specifically in the onClick function on the line:
var m = $("<div>").addClass("caption").html(g ? g : ""),
As long as you are able to do that, you can get this to work for you.