|
JavaScript - Hiding A Class And A Button
I have a button design below:
Code: <a class="button"><span name="submit" id="sub_button" style="display:none">Submit</span></a> When I do this: Code: document.getElementById('sub_button').style.display="none";
It hides all of the button except a tiny sliver on the far left border of the button. Do I need to do something to hide the entire class? Similar TutorialsI have a store that sells certain products. When you add a product to the cart and go to view your cart you can estimate shipping costs. It will list different shipping methods and the cost to ship them. However, there is one shipping method called "Request a Quote" that has a price value of 0.01. This can confuse customers because they sometimes think that the shipping is only $0.01 when it really isn't. So I want to just remove this value, but still list pricing for all the other shipping methods. I know I can just do this using CSS and setting the display to none. But am having trouble getting it to work. Here is the link to the shopping cart page: Folding Chairs and Tables.com - Shopping Cart If you add a product and run the 'estimate shipping and tax' you will see what I'm talking about. How can I remove this value? Any help would be really appreciated. Here is a picture of what the table looks like when you calculate the estimate shipping costs: Thank You How can I hide/disable the submit button if the name Todd is selected? Code: <html> <head> </head> <body> <form name="people"> <select name="group"> <option value="Pick Your Name">Choose</option> <option value="Tom">Tom</option> <option value="Freddy">Freddy</option> <option value="Todd">Todd</option> <option value="Fred">Fred</option> <option value="William">William</option> <option value="Johnson">Johnson</option> </select> <INPUT TYPE=submit VALUE="submit"> </form> </body> </html> Greetings! I'm trying to disable some form elements using the onclick from a radio input element. It ain't working so great! I googled around and finally scraped together some code that in theory 'I' think should work. I'm no javascript guru! It has to be some tiny tiny thing I'm missing. Here's my code and mind you this is a project in the making! I still have along way to go! Thanks for you time and help! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Empty Page</title>
<script type='text/javascript'>
function setReadOnly(obj)
{
if(obj.value == "1")
{
document.shiftreport.artprogs.disabled = true;
document.shiftreport.artprog_stat.disabled = true;
} else {
document.shiftreport.icprogs.disabled = true;
document.shiftreport.icprog_stat.disabled = true;
}
}
</script>
</head>
<body>
<?php
include_once('form_input_functions.php');
$artprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$artprog_wfls = array('no_job' => '------- select a job -------',
'ARTPROG/WFL/DAILY/BATCH' => 'ARTPROG/WFL/DAILY/BATCH',
'ARTPROG/WFL/OPERATIONS/IMAGE' => 'ARTPROG/WFL/OPERATIONS/IMAGE',
'ARTPROG/WFL/WKLY/BATCH' => 'ARTPROG/WFL/WKLY/BATCH',
'ARTPROG/WFL/DAILY/CLAIMS' => 'ARTPROG/WFL/DAILY/CLAIMS'
);
$bllyprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$bllyprog_wfls = array('no_job' => '------- select a job -------',
'BLLYPROG/WFL/DAILY/SISCHEDPAY' => 'BLLYPROG/WFL/DAILY/SISCHEDPAY',
'BLLYPROG/WFL/DAILY/REPORTS' => 'BLLYPROG/WFL/DAILY/REPORTS',
'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM' => 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'$UTIL/O/AUDIT/CLOSE/BLLY' => '$UTIL/O/AUDIT/CLOSE/BLLY',
'DATASIWH/EXTRACTALL/DAILY/AUD/WFL' => 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL',
);
$sbwcprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$sbwcprog_wfls = array('no_job' => '------- select a job -------',
'WORKPROG/WFL/DAILY/WAREHOUSE' => 'WORKPROG/WFL/DAILY/WAREHOUSE',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'$UTIL/O/AUDIT/CLOSE/WORKCOMP' => '$UTIL/O/AUDIT/CLOSE/WORKCOMP'
);
$tcsprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$tcsprog_wfls = array ('no_job' => '------- select a job -------',
'TCS/WFL/DAILY/BATCH' => 'TCS/WFL/DAILY/BATCH',
'BLPROG/WFL/COPY/REMOVE/GLCHECKS' => 'BLPROG/WFL/COPY/REMOVE/GLCHECKS'
);
$icprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$icprog_wfls = array ('no_job' => '------- select a job -------',
'BLPROG/WFL/DAILY/INDCONT' => 'BLPROG/WFL/DAILY/INDCONT',
'INDCON/WFL/PRINT/IDCARDS' => 'INDCON/WFL/PRINT/IDCARDS',
'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' => 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT'
);
$truckprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$truckprog_wfls = array('no_job' => '------- select a job -------',
'TRUCKPROG/WFL/DAILY/TKINTMARSH' => 'TRUCKPROG/WFL/DAILY/TKINTMARSH',
'TRUCKPROG/WFL/DAILY/TKINTERNET' => 'TRUCKPROG/WFL/DAILY/TKINTERNET',
'TRUCKPROG/WFL/DAILY/BATCH' => 'TRUCKPROG/WFL/DAILY/BATCH',
'TRUCKPROG/WFL/DAILY/TKSCHEDPAY' => 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY',
'TRUCKPROG/WFL/DAILY/REPORTS' => 'TRUCKPROG/WFL/DAILY/REPORTS',
'BLPROG/WFL/DAILY/CLAIMS' => 'BLPROG/WFL/DAILY/CLAIMS',
'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM' => 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM',
'TRUCKPROG/WFL/DAILY/BALRPT' => 'TRUCKPROG/WFL/DAILY/BALRPT',
'PROG-MEDICAL/WFL/DAILY/PMCLMEXT' => 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT',
'AGPROG/WFL/DAILY/AGNUCOPREM' => 'AGPROG/WFL/DAILY/AGNUCOPREM',
'BL/WFL/WKLY/FEDEX/0005' => 'BL/WFL/WKLY/FEDEX/0005',
'TRUCKPROG/WFL/WKLY/DE542' => 'TRUCKPROG/WFL/WKLY/DE542',
'TRUCKPROG/WFL/WKLY/FDXDISAB' => 'TRUCKPROG/WFL/WKLY/FDXDISAB',
'TRUCKPROG/WFL/WKLY/FDXDISERR' => 'TRUCKPROG/WFL/WKLY/FDXDISERR',
'BL/WFL/ONLINE/DUMP/TRUCKING' => 'BL/WFL/ONLINE/DUMP/TRUCKING',
'DATATKWH/EXTRACTALL/DAILY/WFL' => 'DATATKWH/EXTRACTALL/DAILY/WFL',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
);
$smallprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$smallprog_wfls = array('no_job' => '------- select a job -------',
'SMALLPROG/WFL/DAILY/BATCH' => 'SMALLPROG/WFL/DAILY/BATCH',
'SMALLPROG/WFL/DAILY/CERTS' => 'SMALLPROG/WFL/DAILY/CERTS',
'SMALLPROG/WFL/OPERATIONS/PRINT' => 'SMALLPROG/WFL/OPERATIONS/PRINT',
'SMALLPROG/WFL/WKLY/BATCH' => 'SMALLPROG/WFL/WKLY/BATCH',
'SFCLAIMS/WFL/DAILY/DWHCLAIMS' => 'SFCLAIMS/WFL/DAILY/DWHCLAIMS',
'SFCLAIMS/WFL/DAILY/REPORTS' => 'SFCLAIMS/WFL/DAILY/REPORTS',
'SFCLAIMS/WFL/WEEKLY/REPORTS' => 'SFCLAIMS/WFL/WEEKLY/REPORTS',
'BL/WFL/ONLINE/DUMP/SFDB/1WORKER' => 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER',
'$UTIL/O/AUDIT/CLOSE/SFDB' => '$UTIL/O/AUDIT/CLOSE/SFDB',
'DATASFWH/EXTRACTALL/DAILY/WFL' => 'DATASFWH/EXTRACTALL/DAILY/WFL',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
);
$persauto_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$persauto_wfls = array('no_job' => '------- select a job -------',
'PERSAUTO/WFL/DAILY/BATCH' => 'PERSAUTO/WFL/DAILY/BATCH',
'PERSAUTO/WFL/OPERATIONS/IMAGE' => 'PERSAUTO/WFL/OPERATIONS/IMAGE',
'PERSAUTO/WFL/OPERATIONS/PRINT' => 'PERSAUTO/WFL/OPERATIONS/PRINT',
'PERSAUTO/WFL/WKLY/BATCH' => 'PERSAUTO/WFL/WKLY/BATCH',
'PERSAUTO/WFL/DAILY/CLAIMS' => 'PERSAUTO/WFL/DAILY/CLAIMS',
'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL' => 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL',
'$UTIL/O/AUDIT/CLOSE/DB1' => '$UTIL/O/AUDIT/CLOSE/DB1',
'DATAWH/EXTRACTALL/DAILY/WFL' => 'DATAWH/EXTRACTALL/DAILY/WFL',
'BL/WFL/OFFLINE/DUMP/WAREHOUSE' => 'BL/WFL/OFFLINE/DUMP/WAREHOUSE'
);
$isoprog_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$isoprog_wfls = array('no_job' => '------- select a job -------',
'ISOPROG/WFL/BATCH/ISOSAGDAILY' => 'ISOPROG/WFL/BATCH/ISOSAGDAILY'
);
$bkuplive_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$bkuplive_wfls = array('no_job' => '------- select a job -------',
'BL/WFL/ONLINE/DUMP/BLDB' => 'BL/WFL/ONLINE/DUMP/BLDB',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'$UTIL/O/AUDIT/CLOSE/BLDB' => '$UTIL/O/AUDIT/CLOSE/BLDB',
'DATARDWH/EXTRACTALL/DAILY/REIN/WFL' => 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL',
'(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP',
'BL/WFL/FICHE/DISK' => 'BL/WFL/FICHE/DISK'
);
$testsite_status = array('none' => 'None',
'stopped' => 'Stopped',
'running' => 'Running',
'completed' => 'Completed',
);
$testsite_wfls = array('no_job' => '------- select a job -------',
'WFL/TESTLYON/DATABASE/ONLINE/DISABLE' => 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE',
'UTIL/WFL/REMOVE/TESTLYON/BDFILES' => 'UTIL/WFL/REMOVE/TESTLYON/BDFILES',
'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP'
);
?>
<form method="POST" name="shiftreport" action="<?php print $_SERVER['PHP_SELF']; ?>">
<p>1st Shift <?php input_radiocheck('radio','shift','0','1','1'); ?></p>
<p>2st Shift <?php input_radiocheck('radio','shift','0','2','1'); ?></p>
<p>3st Shift <?php input_radiocheck('radio','shift','0','3','1'); ?></p>
<table>
<thead>
<tr>
<th>Application</th>
<th>Job Stream</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>ARTISAN</td>
<td>
<?php input_select('artprogs',$artprog_wfls['no_job'], $GLOBALS['artprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('artprog_stat', $artprog_status['none'] , $GLOBALS['artprog_status']); ?>
</td>
</tr>
<tr>
<td>SELF INSURED</td>
<td>
<?php input_select('bllyprogs',$bllyprog_wfls['no_job'], $GLOBALS['bllyprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('bllyprog_stat', $bllyprog_status['none'] , $GLOBALS['bllyprog_status']); ?>
</td>
</tr>
<tr>
<td>SBWC</td>
<td>
<?php input_select('sbwcprogs',$sbwcprog_wfls['no_job'],$GLOBALS['sbwcprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('sbwcprog_stat', $sbwcprog_status['none'] , $GLOBALS['sbwcprog_status']); ?>
</td>
</tr>
<tr>
<td>TCS</td>
<td>
<?php input_select('tcsprogs',$tcsprog_wfls['no_job'], $GLOBALS['tcsprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('tcsprog_stat', $tcsprog_status['none'] , $GLOBALS['tcsprog_status']); ?>
</td>
</tr>
<tr>
<td>IC</td>
<td>
<?php input_select('icprogs',$icprog_wfls['no_job'], $GLOBALS['icprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('icprog_stat', $icprog_status['none'] , $GLOBALS['icprog_status']); ?>
</td>
</tr>
<tr>
<td>TRUCKING</td>
<td>
<?php input_select('truckprogs',$truckprog_wfls['no_job'], $GLOBALS['truckprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('truckprog_stat', $truckprog_status['none'] , $GLOBALS['truckprog_status']); ?>
</td>
</tr>
<tr>
<td>SMALL FLEET</td>
<td>
<?php input_select('smallprogs',$smallprog_wfls['no_job'], $GLOBALS['smallprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('smallprog_stat', $smallprog_status['none'] , $GLOBALS['smallprog_status']); ?>
</td>
</tr>
<tr>
<td>PERSONAL AUTO</td>
<td>
<?php input_select('persauto',$persauto_wfls['no_job'], $GLOBALS['persauto_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('persauto_stat', $persauto_status['none'] , $GLOBALS['persauto_status']); ?>
</td>
</tr>
<tr>
<td>ISO</td>
<td>
<?php input_select('isoprog',$isoprog_wfls['no_job'], $GLOBALS['isoprog_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('isoprog_stat', $isoprog_status['none'] , $GLOBALS['isoprog_status']); ?>
</td>
</tr>
<tr>
<td>BACKUPS LIVE</td>
<td>
<?php input_select('bkuplive',$bkuplive_wfls['no_job'], $GLOBALS['bkuplive_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('bkuplive_stat', $bkuplive_status['none'] , $GLOBALS['bkuplive_status']); ?>
</td>
</tr>
<tr>
<td>TEST SITE INSTRUCTIONS</td>
<td>
<?php input_select('testsite',$testsite_wfls['no_job'], $GLOBALS['testsite_wfls'], '390px'); ?>
</td>
<td>
<?php input_select('testsite_stat', $testsite_status['none'] , $GLOBALS['testsite_status']); ?>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
The included functions file that I didn't include is below: Code: <?php
function input_text($element_name, $value) {
print '<input type="text" name="' . $element_name . '" value="';
print htmlentities($values[$element_name]) . '">';
}
function input_submit($element_name,$label) {
print '<input type="submit" name="' . $element_name .'" value="';
print htmlentities($label) .'"/>';
}
function input_textarea($element_name,$values) {
print '<textarea name="' . $element_name . '">';
print htmlentities($values[$element_name]) . '</textarea>';
}
function input_radiocheck($type,$element_name,$values,$element_value,$clicker = '0') {
print '<input type="' . $type . '" name="' . $element_name . '" value="' . $element_value . '" ';
if ($element_value == $values[$element_name]) {
print ' checked="checked"';
}
if ($clicker == '1')
print ' onclick="setReadOnly(this)"';
print '/>';
}
function input_select($element_name, $selected, $options, $drop_width = '100px', $multiple = false) {
print '<select style="width:' . $drop_width . ';" name="' . $element_name;
if ($multiple) { print '[]" multiple="multiple'; }
print '">';
$selected_options = array();
if ($multiple) {
foreach ($selected[$element_name] as $val) {
$selected_options[$val] = true;
}
} else {
$selected_options[ $selected[$element_name] ] = true;
}
foreach ($options as $option => $label) {
print '<option value="' . htmlentities($option) . '"';
if (isset($selected_options[$option])) {
print ' selected="selected"';
}
print '>' . htmlentities($label) . '</option>';
}
print '</select>';
}
?>
Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() {
this.elements = new Array;
}
function derivedClass() {
}
derivedClass.prototype = new baseClass;
Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass();
a.elements.push("A");
a.elements.push("B");
b = new derivedClass();
b.elements.push("C");
b.elements.push("D");
When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass();
a.elements.push("A");
a.elements.push("B");
b = new baseClass();
b.elements.push("C");
b.elements.push("D");
then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos Hello All, I am new to this forum and to web development, I am trying to hide div based on conditions.. This is the scenario: the div should never appear again for that user, until i write another server side message. lets say i write a message today saying " we are really sorry, but the website will be don for one hour today" and you login today, the message will be displayed, when you click close its closed, it wont appear again for you, until i post another message, but each message would have an expiration date, if i post a message which would be displayed to every user, i should decide how long i want it displayed, maybe 24 hrs, so in 24 hrs the message should no longer display. Please help me out on this...I need a solution fast... Thanks Hi guys, I am working with a plugin calld Hashslider which is a fairly simple div slider. Here is the code for startrs Code: // hashslider v0.9 by manuel huegel, copyright 2010
// mgoys.com
$(document).ready(function(){
//get width and height of the wrapper and give it to the UL
var wrapperwidth = $('#slider').width() * $('#slider ul > li').size();
$('#slider ul').css('width', wrapperwidth);
var wrapperheight = $('#slider').height();
$('#slider ul').css('height', wrapperheight);
//set my li width
var width = $('#slider').width();
$('#slider ul li').css('width', width);
//set my counter vars
var counter = $('#slider ul > li').size();
var decount = 1;
var autocount = 1;
//create my number navigation
var createNum = 1;
$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
while ( createNum != counter) {
$('#numbers li:last-child').after('<li> </li>');
createNum++;
$('#numbers li:last-child').html(createNum);
$('#numbers li:last-child').attr('id', 'id' + createNum);
}
//get my number-width (number navigation should always be centered)
var numwidth = $('#numbers li:first-child').width() * $('#numbers li').size();
$('#numbers').css('width', numwidth);
//slide the button to the next item
function goNext() {
if ( decount != counter) {
$('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
$('.activenum').removeClass('activenum').next().addClass('activenum');
decount++;
window.location.hash = decount;
}
}
function goBack() {
if ( decount != 1) {
$('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
$('.activenum').removeClass('activenum').prev().addClass('activenum');
decount--;
window.location.hash = decount;
}
}
//make the number clickable
$("#numbers li").click(function() {
//$('#info4').html( $(this).html() );
var clickednum = $(this).html() * - $('#slider').width() + $('#slider').width();
//$('#info4').html( clickednum );
$('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
$('.activenum').removeClass('activenum');
$(this).addClass('activenum');
decount = $(this).html();
window.location.hash = $(this).html();
});
//thaths the hash-shizzle
if ( window.location.hash != '') {
//get hash, scroll to position
var hashnum = window.location.hash.substr(1) * - $('#slider').width() + $('#slider').width();
$('#slider ul').animate({ left: hashnum }, 0, function() { });
//set counters to position
decount = window.location.hash.substr(1);
$('.activenum').removeClass('activenum');
var hashname = window.location.hash.substr(1);
$('#id' + hashname).addClass('activenum');
}
//get my clickers
$("#right").click(function() { goNext(); });
$("#left").click(function() { goBack(); });
//get mousewheel function
$("#slider ul").mousewheel(function(event, delta) { if (delta > 0) { goBack(); event.stopPropagation();event.preventDefault(); } });
$("#slider ul").mousewheel(function(event, delta) { if (delta < 0) { goNext(); event.stopPropagation();event.preventDefault(); } });
});
As you will see the current code loops through all of the slides, and when it reaches the last (or first) the previous and next links become unclickable. I would like to go a stage further than this and make them dissapear entirely. I don't know how to do this or even to start, I dont even know what function to edit. Please help guys. Thanks in advance Dan Hi, I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row. How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids. Thanks. Hi, I wondering if anyone can help: I've got rows of divs in this manner <div class="row">This is row 1 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 1</p></div> <div class="row">This is row 2 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 2</p></div> <div class="row">This is row 3 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 3</p></div> <div class="row">This is row 4 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 4</p></div> I wish to have some javascript to toggle the hidden row for its corresponding link. Please can someone help point me to an example if available. Any help will be greatly appreciated Hi, Would someone here please help me with this script. I know I am a complete hack at this, but I need to get it to work. Your help is appreciated. As you can see, based on the if statement, I need to leave the Div element below hidden, or un-hide it. I know the first part works. The second part (after "else" ) is where I am having the problem. Code: <td>
<script type="text/javascript">
if ([fieldXX]==1)
{
document.write("<a href='page1.asp?itemid=1234'><img src='images/btn-choose.gif' border='0' alt='choose button'</a>");
}
else
{
var id = 'hide-buy-btn';
var item = document.getElementById(id);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<div id="hide-buy-btn" class="hidden">
x
xother button code
x
</div>
</td>
I have this simple checkbox menu http://myresearchfinder.com/dev/checktest.html If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas? hello all...just joined up...very anxious to get my website improved with some of your kind help i have this current JS running, but Im having some little issues i thought someone here could help me out with. I want the background color to be #0f3559. But whenever I add this to the script it disables the buttons I have included. Also, I would like to have just one "Show/Hide" button that does both functions rather than 2 seperate. can anyone take a look? THANKS. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > <html lang='en'> <head> <meta http-equiv='Content-type' content='text/html;charset=UTF-8'> <title>ESPN SCORELINE</title> <script type="text/javascript"> function setVisibility(theId, visibility) { document.getElementById( theId ).style.visibility = visibility; } function setDisplay(theId, display) { document.getElementById( theId ).style.display = display; } </script> </head> <body> <input type="button" value="show" onclick="setVisibility('scoreline', 'visible'); "> <input type="button" value="hide" onclick="setVisibility('scoreline', 'hidden'); "> </body> <iframe src="http://espn.go.com/bottomline/espnewsbottomlinebasic.html" width="1000" height="45" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" style="visibility:hidden;" alt="scoreline" id="scoreline"></iframe> </html> Hi all, I have some javascript that when a link is clicked hides the div and when it is clicked again shows the div... what I want to do is reverse that, so it is intially hidden. I have tried changing the display none to different parts but it always shows on load: Code: function toggleDiv (divid) {
if (document.getElementById (divid).style.display == 'none') {
document.getElementById (divid).style.display = 'block';
} else {
document.getElementById (divid).style.display = 'none';
}
}
Code: <a href="javascript:;" class="showmorelink" onmousedown="toggleDiv('checks');">Safeguarding</a>
Can anyone advise? Many thanks, Greens85 i am having some problem showing and hiding some div i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option. Code: function Show (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "block";
return false;
}
function Hide (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "none";
return false;
}
the functions work fine i have tested them on input type="checkbox" and they work fine Code: <select name="education" id="education" onfocus="Show(this.options[this.selectedIndex].value);"> <option selected value="00">-الرجاء الاختيار-</option> <option value="highSchoolsDiv">مدرسة ثانوية</option> <option value="universitiesDiv"> كلية </option> <option value="universitiesDiv">درجة البكالوريوس</option> <option value="universitiesDiv">درجة عليا</option> <option value="universitiesDiv">دكتوراه / ما بعد الدكتوراه</option> <option value="07">اسألني فيما بعد</option> </select> </span> </div> </td></tr></table> </div> <div> <div class="Left"></div> <table class="step2" ><tr><td> <div class="Right"> <div class="Inner" id="Inner"> <div id="universitiesDiv" class="Row innerError" style="display:none;"> <div class="Left"> <label for="universities">الجامعة / الكلية</label></div> <div class="Right"> <input type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> </div> </td></tr><tr><td> </div> <div id="highSchoolsDiv" class="Row innerError" style="display:none;"> <div class="Left"> <label for="high_schools">المدرسة الثانوية</label></div> <div class="Right"> <input type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> </div> </div> </div> </div> </td></tr></table> </div> here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!! anyone can help me, that would be great thanks Hi, If I want to hide a title / heading if a field below is not filled in, what would be the js for that? I have an "Attachments" h2 heading and three following fields for the client to add up to three attachments. But if none are filled in I want the h2 heading to not display. This is what I have so far: var attachment1 ='{tag_attachment 1}' var attachment2 ='{tag_attachment 2}' var attachment3 ='{tag_attachment 3}' === if(attachment1 == '') { document.getElementById('attachment1').style.display = 'none'; } if(attachment2 == '') { document.getElementById('attachment2').style.display = 'none'; } if(attachment3 == '') { document.getElementById('attachment3').style.display = 'none'; } === <div id="attachments"> <h2>Attachments</h2> <p>{tag_attachment 1}<br /> {tag_attachment 2}<br /> {tag_attachment 3}</p> </div> This should take care of the three fields, but how do I tie in the heading too? Thank you! OK, I've been working on this for quite some time now, and have it working, almost. lol. Hopefully someone here can lend a fresh pair of eyes to what I'm doing wrong (bare in mind, I don't know javascript very well at all). I'm creating a simple faq page for my site, but there's a lot of questions, so instead of lumping it all in at once, I'm using divs to store answers in that hide and reappear as my guests click on a question they want to see an answer too. ok, heres the basics of the code I'm using so far: Code: <script type="text/javascript">
function showit(boxName)
{
theBox = document.getElementById(boxName);
theBox.className = "boxVisible";
}
</script>
<script type="text/javascript">
function hideit(boxName)
{
theBox = document.getElementById(boxName);
theBox.className = "boxHidden";
}
</script>
That, is in the head section of my page. Then for the links and such I have: Code: <div><a href="link.html" onclick="showit('s11'); hideit('s12'); hideit('s13'); hideit('s14'); hideit('s15'); hideit('s16'); return false;">Do you shoot in color, or black and white?</a></div>
<div id="s11">
We shoot in color.
Color prints can be printed in black and white and come out perfectly
just as though they were shot in black and white. However if you
shoot in black and white, you can't print it in color. For this
reason we shoot all of our images in full color.
</div>
obviously there are more questions that that, but I don't want to fill this screen with all of them either. Ok, heres what its doing, when you click on the first question, no problem, the answer opens right up, appears where it should be, everythings great, except, that its also following the link and leaving the page. I get to a 404 error telling me that link.html does not exist on my server. So, apparently the Code: return false isnt working.... what do I need to do here, I'm now lost... OH, I should include the CSS I'm using for these DIV's so you can see what the javascript is calling on for them: Code: .boxVisible
{
display: block;
position:relative;
left:25px;
width:755px;
overflow:auto;
}
.boxHidden
{
display: none;
}
Thanks to ANYONE that can help out! I don't mean for this to be an advertisement, and if its not allowed by all means I'll remove it from this post, but if you want to see my exact code that I'm using, you'll find the page I'm working on at http://www.smmahoney.com/index.php?page=faq This might not be as simple as the title suggests. It may be a CSS problem, please say so if you know it to be and I will move it to the correct forum. Now for the question, Please visit: http://danielrhyshardy.com/header/demo.html I am using the jquery plugin supersized to create a carousel of images in the background of the page. As you will see though, as the transition starts, the second image is visible. I only want it to be visible when it indeed starts to overlap the current image. (i.e when the bench image overlaps the trees etc) Here is the CSS: Code:
* { margin:0; padding:0; }
body { background:#111; height:100%; }
img{ border:none; }
#supersized { position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:50%; width:100%; }
#supersized img{ width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/
#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:50%; background:#111; display:block; }
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:50%; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }
Thanks guys Dan I'm new to web programming, and so I may be going about this all wrong but this is what I'm trying to do. I'm creating an interface to access my google base, I can do that part without much trouble but to access the server you need to request a session token. This token has to be sent to the server along with your query. I use JS on the main page which calls a php script that requests the key, then calls the server for a full list of items which is then passed back to the javascript in JSON format. The user then selects a field from the option box and i need to requery the server for the updated list. But to do this i need to resend the session token, and this is where I'm having trouble. I need to save this token, but im not sure the best way to go about this. I can pass it back to the JS portion and save it as a variable that i can then pass to the PHP script that queries the server, but im worried the key may contain private information about my log in information. Is there a way to make this token variable hidden in the JS so that the client could not see it? Or am i way off base and the client can't view any of the variables anyways? If someone has a suggestion for me that would be much appreciated. Hey - I'm pretty much a Javascript n00b, but I know enough to cut and pasted and do minor edits. I wanted some help with this problem I'm having or really just wanted to know if what I want is possible. I would like to have the 'Previous' link hidden on the first image and then the 'Next' link hidden on the last. I wondered if there was some way I could do that based on the number, which I guess would be the ImgNum variable? Here's the code (pulled of Google): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style> #content2 {position:absolute; top:110px; left:610px; width:250px; margin-top:0px;} </style>
<SCRIPT LANGUAGE="JavaScript">
NewImg = new Array (
"images/sketch02/1.jpg",
"images/sketch02/2.jpg",
"images/sketch02/3.jpg",
"images/sketch02/4.jpg",
"images/sketch02/5.jpg",
"images/sketch02/6.jpg",
"images/sketch02/7.jpg",
"images/sketch02/8.jpg",
"images/sketch02/9.jpg",
"images/sketch02/10.jpg",
"images/sketch02/11.jpg",
"images/sketch02/12.jpg",
"images/sketch02/13.jpg",
"images/sketch02/14.jpg",
"images/sketch02/15.jpg",
"images/sketch02/16.jpg",
"images/sketch02/17.jpg",
"images/sketch02/18.jpg",
"images/sketch02/19.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.sketchbook02.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>
</head>
<body>
<div id="content1">
<img src="images/sketch02/1.jpg" name="sketchbook02">
<table cellpadding="3" cellspacing="0" border="0" width="380"><tr>
<td align="left"><a href="javascript:chgImg(-1)">< previous</a></td>
<td align="right"><a href="javascript:chgImg(1)">next ></a></td>
</tr></table>
<br /><br />
</div>
</body>
</html>
Thanks for your help! hey all, Registered for this forum because I found this thread about hiding and unhiding divs. http://www.codingforums.com/archive/.../t-161166.html I have tried to implement this on a site that I am building and have come up with a weird result. My javascript is very poor so debugging this has become a real headache. Hopefully someone can help out. The issue is that when I click the button to unhide the hidden div, it hides everything and reveals the hidden div on its own without everything else. Hopefully that makes sense. Current code looks as follows- Code: <script type="text/javascript">
function unhide(divID) {
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].className='hidden';
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.hidden {
display: none;
}
.unhidden {
display: block;
}
</style>
</head>
<body>
<div class="container" id="wrap">
<!-- MODULE START -->
<div id="web" class="panelContainer">
<div id="panelBtnContainer">
<li><a href="#" onclick="unhide('test1'); return false;" class="web"><span>Button Text</span></a></li>
</div>
<div class="leftContainer">
<div class="panelShadow"></div>
<div class="panelThumb">
<img src="images/works/t-test.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
</div>
</div>
<div class="rightContainer">
<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</div>
</div>
<div id="test1" class="hidden">
<p>Testing :)</p>
</div>
<!-- MODULE END -->
<!-- MODULE START -->
<div id="web" class="panelContainer">
<div id="panelBtnContainer">
<li><a href="#" onclick="unhide('test2'); return false;" class="web"><span>Button Text</span></a></li>
</div>
<div class="leftContainer">
<div class="panelShadow"></div>
<div class="panelThumb">
<img src="images/works/t-test02.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
</div>
</div>
<div class="rightContainer">
<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</div>
</div>
<div id="test2" class="hidden">
<p>Testing :)</p>
</div>
<!-- MODULE END -->
</div>
Any help would be greatly appreciated. Thanks in advanced Alright, working on an ajax image uploader, and im a bit rusty with JS. How would i go about hiding the form after the submit button is pressed, so it disappears? Heres my website. If you need the scripts, just ask. Thanks in advance. |
|||||||