thanks you for paying attention on my issue here. I am a total beginner for PHP and jQuery programming. Now I am trying to create a very simple function to show and hide multi-layer divs. For example, when you click "show div 1", the corresponding content under div 1 will be shown (this is div 1 contents). After that you still can click the content under div 1 to show lower level contents (graph1). I got all these worked properly. However, when I click "show div 2", the div 2 contents (this is div 2 contents) will be shown but the lower level contents of div 1 is still there (graph1). What I want is the lower content of div 1 is shown, and then I click show div 2, the lower content of div 1 will be hidden and only show div 2 contents. The following is my codes, thank you guys in advance~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>show and hide try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function showStock(n)
{
document.getElementById("div"+n).style.display = 'block'
return false;
}
function hideStock(n)
{
for (x=1; x<=10; x++)
{
document.getElementById("div"+x).style.display = 'none'
}
document.getElementById(n).style.display = 'block'
return false;
}
function toggleStock(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
<script>
function showGraph(m)
{
document.getElementById("graph"+m).style.display = 'block'
return false;
}
function hideGraph(m)
{
for (y=1; y<=10; y++)
{
document.getElementById("graph"+y).style.display = 'none'
}
document.getElementById(m).style.display = 'block'
return false;
}
function toggleGraph(id)
{
for (y=1; y<=3; y++)
{
document.getElementById("graph"+y).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
show div 1
show div 2
show div 3
</td>
</tr>
</table>
<div id="div1" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 1 contents</td></tr>
</table>
</div>
<div id="div2" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 2 contents</td></tr>
</table>
</div>
<div id="div3" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 3 contents</td></tr>
</table>
</div>
<div id="graph1" style="display: none; border:1px solid black;">graph1</div>
<div id="graph2" style="display: none; border:1px solid black;">graph2</div>
<div id="graph3" style="display: none; border:1px solid black;">graph3</div>
</body>
</html>
Replace your code with this, Hope it will help you
function toggleStock(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
toggleGraph(id);
}
Related
I have two tables in my webpage, each being populated with a php while loop.
My first table gets all its data outputted but my second while loop only outputs as many fields as the first one.
My second while loop is not nested within the other one, they are both independent from each other.
When i check the console I see that my second while loops seems to have outputted my data but when I click on my button to display the entire column, only 3 values appear instead of all of them
This is what is shown when I click on TEAM TASK
https://imgur.com/4FCu1dX
This is what is shown when I click on MY TASK
https://imgur.com/q1F6sgx
I also noticed that whether I click on MYTASK or TEAM TASK their are two rows from MYTASK that are always shown.
I Initially had both while loops within the same table but then moved them to each fill there own table but this issue still occurs.
<table border='0' style="float:left; width:20%; height: 500px; border-radius: 5px; display: block;" bgcolor="#2B4353">
<thead>
<tr>
<td bgcolor="#2B4353" border="0" valign="top" align="right">
<div class="messages-header-my" onclick="myTasks()"><p id="myTasks">MY TASKS</p></div></td>
</tr>
</thead>
<tbody>
<?php
while($row8 = mysqli_fetch_array($TableMY)){ $task1234=$row8[1];
?>
<tr id="my" style="display: block;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
<?php if ($row8[0]=='HIGH')
{$statuscss= 'taskHigh';}
elseif ($row8[0]== 'MEDIUM')
{$statuscss= 'taskMedium ';}
else{ $statuscss= 'taskLow';}
echo 'class="',$statuscss,'"';?> style="margin-left: 30px;">OD_<?php echo $task1234?></p></td></tr>
<?php }?>
</tbody>
</table>
<table border='0' style="float:left; width:20%; height: 500px; border-radius: 5px; display: block;" bgcolor="#2B4353">
<thead>
<tr>
<td bgcolor="#2B4353" border="0" valign="top" align="right">
<div class="messages-header-team" onclick="teamTasks()"><p id="teamTasks">TEAM TASKS</p></div></td>
</tr>
</thead>
<tbody>
<?php
while($row8 = mysqli_fetch_array($TableTeam)){ $task1234=$row8[1];
?>
<tr id="team" style="display:none;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
<?php if ($row8[0]=='HIGH')
{$statuscss= 'taskHigh';}
elseif ($row8[0]== 'MEDIUM')
{$statuscss= 'taskMedium ';}
else{ $statuscss= 'taskLow';}
echo 'class="',$statuscss,'"';?> style="margin-left: 30px;">OD_<?php echo $task1234?></p></td></tr>
<?php }?>
</tbody>
</table>
My php
require('server.php');
session_start();
$email=$_SESSION['email'];
$sqli="Select URLDomain from Admin.Users where Email = ?";
$stmt =mysqli_prepare($link,$sqli);
mysqli_stmt_bind_param($stmt,"s",$email );
mysqli_stmt_execute($stmt);
$useremail=mysqli_stmt_get_result($stmt);
$row = mysqli_fetch_array($useremail);
$DBdomain=$row[0];
mysqli_select_db($link,"Universe");
$stmt = mysqli_prepare($link,"Select Priority,TaskNumber from Task where urlDomain=?");
mysqli_stmt_bind_param($stmt,"s",$DBdomain );
mysqli_stmt_execute($stmt);
$TableTeam=mysqli_stmt_get_result($stmt);
mysqli_stmt_close($stmt);
mysqli_select_db($link,"Universe");
$stmt = mysqli_prepare($link,"Select Priority,TaskNumber from Task where TaskOwner=?");
mysqli_stmt_bind_param($stmt,"s",$email );
mysqli_stmt_execute($stmt);
$TableMY=mysqli_stmt_get_result($stmt);
mysqli_stmt_close($stmt);
Here is my Javascript
<script>
function messagesTab() {
document.getElementById("task-message").style.display = "block";
}
</script>
<script>
function myTasks() {
document.getElementById("myTasks").style.color = "#1FAC96";
document.getElementById("teamTasks").style.color = "#FFFFFF";
document.getElementById("team").style.display = "none";
document.getElementById("my").style.display = "block";
document.getElementById("messageDisplay").style.display = "block";
document.getElementById("myTaskView").style.display = "none";
}
</script>
<script>
function teamTasks() {
document.getElementById("teamTasks").style.color = "#1FAC96";
document.getElementById("teamTasks").style.underline = "#1FAC96";
document.getElementById("myTasks").style.color = "#FFFFFF";
document.getElementById("team").style.display = "block";
document.getElementById("my").style.display = "none";
document.getElementById("myTaskView").style.display = "none";
document.getElementById("messageDisplay").style.display = "block";
}
</script>
<script>
function myTaskView(Task_Number) {
$.ajax({
url:'messages_select.php',
type:'POST',
data:{Task_Number:Task_Number},
success:function(data){
$('#myTaskView').html(data);
document.getElementById("myTaskView").style.display = 'block';
document.getElementById("messageDisplay").style.display = 'none';
}
});
}
</script>
<script>
var main = function() {
$('form').submit(function(event) {
var $input = $(event.target).find('input');
var comment = $input.val();
if (comment != "") {
var user = '<i class="fas fa-user-circle"></i>';
var userInfo = $(user).text(' '+'nataliekoly#mail.usf.edu'+' | '+'01/31/19'+' | '+'3:45 PM')
var comment = $('<li>').text(comment);
comment.prependTo('#comments');
userInfo.prependTo('#comments');
$input.val("");
}
return false;
});
}
$(document).ready(main);
</script>
IDs need to be unique, you can't have id="my" and id="team" on each row of the table. Use classes instead:
<tr class="my" style="display: block;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
and
<tr class="team" style="display:none;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
Then you need to loop over them:
document.querySelectorAll(".my").forEach(el => el.style.display = "block");
I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA
<html>
<head>
<style>
#table1{/*table aspects and design */
border:1px solid #FFFFFF;
background:#FFFFFF;
display:none;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th{/*align table headers*/
text-align:center;
}
td,th{
border:1px solid #FFFFFF;
text-align:center;
}
</style>
</head>
<table id="table1" cellpadding="5" cellspacing="1" width="50%">
<? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
{
/* select all information from the table and take it into the page */
$query->execute();
while ($result = $query->fetch(PDO::FETCH_ASSOC)){
$head = $result['headline'];/*puts result of headline from table into variable*/
$content = $result['content'];
/*puts result of content from table into variable*/
echo /* echo the table to display announcements*/'
<tr>
<th>
<h1>
'.$head.'
</h1>
</th>
</tr>
<tr>
<td>
<font size="4">
'.$content.'
</font>
</td>
</tr>';
}
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/
$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}
)};
</script>
You need to use a timer in your Javascript to show each row separately.
$(document).ready(function() {
var cur_row = 0;
setInterval(function() {
$("#table1 tr").fadeOut(2000).eq(cur_row).fadeIn(2000);
cur_row = (cur_row + 1) % $("table1 tr").length;
}, 5000);
});
In this below code i have text box and submit button .when i enter or refresh that page the div tag displays but my expected result is when i enter a value in textbox and click submit button then div tag should appear.The problem is div tag displays always. Please any one help me.
<form action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
<input type="text" name = "keyword" />
<input type="submit" id="opn" value = "Search" />
</form>
<div id='hideme'>
<strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')"/>
</a>
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal" >
<table>
<tr>
<th>course_code</th>
<th>course name</th>
</tr>
<?php foreach($results as $row):?>
<tr>
<center>
<td>
<?php echo $row->course_code?>
</td>
</center>
<center>
<td>
<?php echo $row->course_name?>
</td>
</center>
</tr>
<?php endforeach;?>
</table></div></div>
</div>
<script>
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(10);
});
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
First I'd like to say that mixing JQuery with traditional javascript is not very efficient.. Instead of using getElementById you can use $('#' + obj).val()...
In your problem I guess the most efficient solution would be to use JQuery's .hide() and .show() methods to hide and unhide divs....
You can try this :
function hide(obj) {
var el = $('#' + obj).val();
e1.hide();
}
Also if you want any div to be hidden as soon as the page is loaded, you can use the hide method in $(document).ready(){}... To show it anytime you can use e1.show() method...
First you need to hide your div through css usign display:none;. You haven't set this that is why your div is showing on page load.
Your div should looks like
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;display:none;" id="modal" >
Call a function on form submit. Your <form> tag should looks like
<form onSubmit="return showDiv();" action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
And your javascript function will looks like
function showDiv() {
$('#modal').fadeIn(10);
return false; //not to refresh page
}
First add display:none; to the div whom you want to be hidden,
add attribute
onsubmit="return validate()"
function validate()
{
//validate the form as you want
document.getElementById('modal').style.display="block";
return false ; // if you dont want to submit the form
}
all you need is an css style <style>#hideme{display:none}</style>
i have this code:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
I don't know what the element with an ID of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.
Edit
As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.
<button class="button" data-clicked="0">
As you can see we've added the new data-clicked attribute.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.
It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv
I also like to animate changes so people can more easily follow a change.
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>
I want to create a banner scrolling function for my homepage. I am not too sure of which programming language to use here. I want to code something similar to: http://www.squidfaceandthemeddler.com/. But I want the footer to remain at the same position while the user scroll the table. Is it possible to get that result? I have create a simple tables and 2 images for the user to click on
here is my code for the tables:
<div id="banner" style="height:750px; width:600px; overflow:scroll;" >
<table width="750px" height="600px">
<tr>
<td><img src="banner1.png"/></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><img src="banner2.png"/></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><img src="banner3.png"/></td>
</tr>
</table>
</div>
and this is the upwards and downwards button for the scrolling:
<table width="750px" height="30px">
<tr>
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td>
</tr>
</table>
If you put the contents inside two div tags you can use CSS to clip the
outer div and "scroll" the inner div by scripting its CSS "top" value, thus:
<html><head><style>
#contents{
position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
}
</style>
<script>
var t = 0;
function up()
{
t += 10;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 10;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td>up</td>
<td rowspan="2"><div id="scrollable">
<div id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div>
</td></tr><tr><td>
down</td></tr></table>
</body></html>
take the help of this edit your code
Have a look at jquery scrolltop: http://api.jquery.com/scrollTop/. I would fix the tables width to a certain height, like you already did and then:
$('#buttonUpID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop - 600);
});
$('#buttonDownID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop + 600);
});