I create this code to show and hide div this code work but when i use it with php not work correctly when i click show for the first div he show me the div
but when i click the second he show me the first not the second how to solve this?
include("connect.php");
$sql=mysqli_query($conn,"select * from tbl_codelibrary order by db_id desc")or die(mysqli_error($conn));
echo'<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">';
echo"<tr>";
echo"<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Title</th>
<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Code</th>";
echo"</tr></thead><tbody>";
while($row=mysqli_fetch_array($sql)){
$title=$row['db_title'];
$code=$row['db_code'];
echo"<tr>";
echo"<td data-title='Title'>";echo $title;echo'<div id="opener">Show Code</div>';echo"<br/>";echo'<div id="upbutton"><a onclick="return hide();">Hide Code</a></div>'; echo"</td>";
echo"<td data-title='Code'>";echo"<pre><code class='' ><";?><?php echo $row['db_code'];?><?php echo"></code></pre>";echo"</td>";
}
?>
</body>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
You are creating an html in a loop where you are using fixed id value instead of a dynamic one. This cause an id conflict. So your code will not work as desired. This only takes the first id of the page always.
I have written some dynamic content as per your requirement below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="showContent buttonCode">Show Code</a>';
echo' ';
echo'<a class="hideContent buttonCode">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.showContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').show();
});
$('.hideContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').hide();
});
</script>
Hope this will help you.
If you want it with javascript only then you can do like below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="buttonCode" onclick="showbenefit('.$i.')">Show Code</a>';
echo' ';
echo'<a class="buttonCode" onclick="hidebenefit('.$i.')">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' id='benefits-".$i."' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script>
function showbenefit(s) {
if(document.getElementById('benefits-'+s).style.display=='none') {
document.getElementById('benefits-'+s).style.display='block';
}
return false;
}
function hidebenefit(h) {
if(document.getElementById('benefits-'+h).style.display=='block') {
document.getElementById('benefits-'+h).style.display='none';
}
return false;
}
</script>
function show_hide(){
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
else if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
<div id="benefits" style="display:block">test</div>
Submit
Hello! Hope this help you!
p.s you can use .toggle() to show and hide in JQuery
Related
I am trying make some div for message when is showing just when i call him.
I need to call javascript to change div style (style="display:block;") but i don't know how.
I try call with echo, but now work.
I am try add in HTML file <script type="text/javascript">openmsgpF();</script> and that not work too.
Some other way how can i call javascript funtion?
MY PHP FILE:
if (isset($_POST['newsletter'])){
$message='Thanks for signig up on our newsletter!';
echo '<script type="text/javascript">openmsgpF();</script>';
}
MY MESSAGE DIV:
<div id="message-p" style="display:none;background-color: green;color: rgb(255, 255, 255);text-align: center;position: fixed;top: 0px;left: 0px;z-index: 999999;width: 100%; font-size: 25px; font-style: normal;letter-spacing: 1px;height: 100px;padding-top: 30px;letter-spacing: 1px;">
<?php echo $message;?>
<div id="close_msg" style="position: absolute;top: 0;right: 10px;">
<a style="color: #c6c6c6;" href="javascript:void(0);" onclick="closemsgF()">X</a>
</div>
</div>
MY SCRIPT:
<script>
function closemsgF()
{
document.getElementById("message-p").style.display = "none";
document.getElementById("message-n").style.display = "none";
}
function openmsgpF()
{
document.getElementById("message-p").style.display = "block";
}
function openmsgnF()
{
document.getElementById("message-n").style.display = "block";
}
</script>
You have an issue with the order in which your javascript is loading.
I presume you are echoing
<script type="text/javascript">openmsgpF();</script>
before you have printed your HTML. In that scenario, the elements are not yet on the page.
Try outputting your code with this order:
<?php
$message = '';
if (isset($_POST['newsletter'])){
$message='Thanks for signig up on our newsletter!';
}
?>
<div id="message-p" style="display:none;background-color: green;color: rgb(255, 255, 255);text-align: center;position: fixed;top: 0px;left: 0px;z-index: 999999;width: 100%; font-size: 25px; font-style: normal;letter-spacing: 1px;height: 100px;padding-top: 30px;letter-spacing: 1px;">
<?php echo $message;?>
<div id="close_msg" style="position: absolute;top: 0;right: 10px;">
<a style="color: #c6c6c6;" href="javascript:void(0);" onclick="closemsgF()">X</a>
</div>
</div>
<script>
function closemsgF()
{
document.getElementById("message-p").style.display = "none";
document.getElementById("message-n").style.display = "none";
}
function openmsgpF()
{
document.getElementById("message-p").style.display = "block";
}
function openmsgnF()
{
document.getElementById("message-n").style.display = "block";
}
</script>
<?php
if (isset($_POST['newsletter'])){
echo '<script type="text/javascript">openmsgpF();</script>';
}
?>
https://jsfiddle.net/de6ha4nf/
Besides of putting the script tag before the end of the body tag add the call to openmsgpf inside the window.onload() event for it to trigger when the page finishes loading.
To display conditionally you surround the function with an if statement.
can be to check if the html in the message div is empty, or to check if you have included (from the php code) a specific css class or attribute in the message div. There are many ways.
<script>
function closemsgF()
{
document.getElementById("message-p").style.display = "none";
document.getElementById("message-n").style.display = "none";
}
function openmsgpF()
{
document.getElementById("message-p").style.display = "block";
}
function openmsgnF()
{
document.getElementById("message-n").style.display = "block";
}
window.onload(function(){
var showMessage = <whatever condition you evaluate>;
if(true === showMessage){
openmsgpF();
}
});
</script>
I want to add some transition like slidedown, fadein using jquery. when someone clicks on a title city. it opens with effect. I am trying it with jquery but it won't work. Any solution that where i am wrong or solution with css ?
Java Script Code :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//------------------- Jq used to show/open single div when click on title link -----------
function showDiv(obj)
{
$('.CityDivInner').css('display','block');
var div = $(obj).find('.CityDivInner').css('display','none');
}
</script>
<script>
$(document).ready(function(){
$(".CityDivOuter").click(function(){
$(".CityDivInner").slideDown("slow");
});
});
</script>
Css Code :
<style>
.CityDivInner
{
display:none;
}
</style>
</head>
Php Code :
<?php
$link = mysqli_connect("localhost", "root", "", "test");
// Check connection
if($link === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
$sql = "SELECT * FROM sample";
if($result = mysqli_query($link, $sql))
{
if(mysqli_num_rows($result) > 0)
{
echo "<div class='cityContainer'>";
while($row = mysqli_fetch_array($result))
{
echo "<div class='cityContainerInner' style='border: 2px solid black;' >
<p class='CityDivOuter' onclick='showDiv(this);'>City</p>
<div class='CityDivInner' style='border: 1px solid black;'>
<p class='CityTitle'>". $row['UserCity'] ."</p>
</div>
</div></br>";
}
echo "</div>";
// Close result set
mysqli_free_result($result);
}
else
{
echo "No records matching your query were found.";
}
}
else
{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
</body>
Check this code, This might help you!
$(document).ready(function(){
$('.expand').hide();
$(".expand, .collapse").click(function(){
$(".CityDivInner").slideToggle("slow");
$('.expand').toggle();
$('.collapse').toggle();
});
});
.CityDivInner{
width:300px;
height:100px;
background:#888;
}
.expand, .collapse{
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CityDivInner"></div>
<button class="expand">Expand</button>
<button class="collapse">Collpase</button>
$(document).ready(function() {
if ($("#grid .media-box").hasClass("brand1")) {
$("#grid .media-box-content").addClass("brand01")
};
}
});
and in body looping div grid
<div id="grid">
<?php foreach($data as $items) { ?>
<div class="media-box video <?php echo $items->brand; ?> <?php echo $items->country; ?>">
<div class="media-box-image">
<div data-width="240" data-height="168" data-thumbnail="gallery/thumbnails/thumb-2.jpg"></div>
<div data-type="iframe" data-popup="https://www.youtube.com/watch?v=5guMumPFBag" title="Psico dell consecteture"></div>
<div class="thumbnail-overlay">
<i class="fa fa-video-camera mb-open-popup"></i>
<i class="fa fa-link"></i>
</div>
</div>
<div class="media-box-content">
<div class="media-box-title">Psico dell consecteture</div>
<div class="media-box-date">
<?php echo $items->country; ?></div>
<div class="media-box-text">Lorem ipsum dolor sitam psico.</div>
<div class="media-box-more"> Read more
</div>
</div>
</div>
<?php } ?>
</div>
CSS:
.media-box {
font-size: 13px;
}
.brand01 {
background: blue !important;
}
.media-box-content {
padding: 20px;
position: relative;
color: rgb(51, 51, 51);
line-height: 17px;
}
The above code is not working for me.
<?php echo $items->brand; ?> <?php echo $items->country; ?>" >
is fetching 2 classes to the dive from database.
$("#grid .media-box.brand1").find(".media-box-content").addClass("brand01")
Your code will add class brand01 to all .media-box-content if the condition is true.
There is no need to use if condition, you can use .toggleClass() with second arg as function which returns a boolean value as true/false:
$(document).ready(function() {
$("#grid .media-box-content").toggleClass("brand01", function(){
return $(this).closest(".media-box").hasClass("brand1");
});
});
I feel you need to target the each .media-box-content and find the parent .media-box has the class, if has true then add it if false remove it.
Use this, it will work
$(document).ready(function() {
$("#grid .media-box").each(function(index, element) {
if ($(this).hasClass("brand1")) {
$(this).children(".media-box-content").addClass("brand01")
}
});
});
How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.
Here is the code I tried for -
<?php
$names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
My Css code --
<style>
#font-face {
font-family:roboto;
src: url("/roboto/Roboto-Medium.ttf")
}
.mydivCls {
background-image: url("1.png");
width: 325px;
height: 207px;
}
.mydivCls p {
font-family: roboto;
padding-top: 100px;
text-align: center;
}
</style>
And here is my script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
I'm getting following error in my console --
TypeError: document.getElementById(...) is null
document.getElementById('canvas'+i).appendChild(canvas);
Here is the solution I found --
<?php
/**
* This Script is used for converting a particular div to image
*/
?>
and my HTML code --
<?php
$names = [" ", "Kuldeep Kumar", "Rishabh Gaur", "AMIT RANJAN", "Vinay Agarwal", "MANJEET KUMAR", "Shuchi Singla", "Sumit Chaturvedi"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
and changes in script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
Code for image generation is correct, you have issue in your php part (all div have the same id). Need to increment $i variable:
<?php $i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++;
} ?>
I have a #val container div that stretches to accommodate Javascript content within a div called #cat-container.
cat-container has 4 tabs above it and are numbered 1 - 4, so if you click 1, it will load content from a php array, and similar for tabs 2 -3.
When you click on each tab, #val-container successfully stretches to the correct height, however I have set tab 1 and its content to display by default as the page loads. The problem is that the content from all the other tabs gets loaded into tab 1 onpage load.
<script type="text/javascript">
var i=1;
var tab;
document.getElementById('cat-container').style.position='relative';
document.getElementById('val-container').style.height='auto';
while(tab=document.getElementById('option'+i+'-body'))
{
tab.style.position='absolute';
tab.style.top='0';
tab.style.left='0';
i++;
}
var urllocation = location.href; //find url parameter
if(urllocation.indexOf("#") == -1)
{
displayTab(1);
}
else
{
if(urllocation.indexOf("#option1")>-1)displayTab(1);
else if(urllocation.indexOf("#option2")>-1)displayTab(2);
else if(urllocation.indexOf("#option3")>-1)displayTab(3);
else if(urllocation.indexOf("#option4")>-1)displayTab(4);
else displayTab(1);
}
</script>
Essentially I would like tab 1 to just show just its content on page load.
This line is the issue:
document.getElementById('val-container').style.height='auto';
So if the dispalyTab(1), just show its content!
The code that actually displays the tabs:
<script type="text/javascript">
function displayTab(num)
{
var tab,x;
x=1;
while(tab=document.getElementById('option'+x+'-body'))
{
if(num!=x)tab.style.display='none';
else tab.style.display='inherit';
x++;
}
}
</script>
<div class="category-tab" id="aoption1">Tab1</div>
<div class="category-tab" id="aoption2">Tab2</div>
<div class="category-tab" id="aoption3">Tab3</div>
<div class="category-tab" id="aoption4">Tab4</div>
<br><br>
Here is the PHP/HTML:
I have used tab 1 - 4 to simplify things but in actual fact they represent price ranges:
echo "<div id=\"cat-container\">";
echo '<div id=\"val-contain\">';
$cats=array(0,1000,5000,10000,100000);
for($ci=1;$ci<count($cats);$ci++)
{
if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for over £100!</h3></a>";
else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>";
$i=0;
for ($p = 0; $p < count($game); $p++ )
{
$game[$p]->getProduct();
if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1])
{
if (($i % 3) == 0 )
{
if($i)echo "</tr></table>";
echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>";
}
echo "<td>";
$game[$p]->getLink();
echo $game[$p]->link;
echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>";
echo "<div class=\"container\" style=\"text-align:center;\"><div class=\"image-spacer\">";
echo $game[$p]->getImage();
echo $game[$p]->image;
echo "</div>";
echo "<div class=\"specialprice\" >";
if(!is_numeric($game[$p]->price)){
echo $game[$p]->price;
}
else
{
if($game[$p]->price < $game[$p]->maxprice)
{echo "From only: £".fixedtofloat($game[$p]->price);}
else
{echo "Only: £".fixedtofloat($game[$p]->price);}
}
echo "</div></div></a>";
echo "</td>";
$i++;
}
}
echo "</tr></table></div>";
}
echo "</div>";
echo '</div>';
?>
CSS:
#val-contain { }
#cat-container { }
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design- gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;}
.category-tab a { color:white; }
.category-tab a:hover { color:#white; }
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;}
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans- serif;}
.container { background-color:white; }
.imgpad { margin-bottom: 10px; }
.vallinks {color: #c50f07; font-weight: bold; }
Hope someone can help?
Volterony
This is a pure html/inline css solution with one static tab.
<body>
<style>
html{
height: 100%;
}
body {
min-height: 100%;
}
</style>
<div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block">
<div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1);
return false;">Tab1</a></div>
<div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2);
return false;">Tab2</a></div>
<div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3);
return false;">Tab3</a></div>
<div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4);
return false;">Tab4</a></div>
</div>
<div style="max-height: 95%;min-height: 95%; background-color: red;display: block">
Tab 1 content
</div>
</body>
you used 'val-contain' as your div's id
echo '<div id=\"val-contain\">';
but you are trying to change it with
document.getElementById('val-container').style.height='auto';
change the div's id to val-container.