|
JavaScript - Hiding A Div When Javascript Turned Off
I am trying to make an order form I am working on accessible for users who have javascript turned off in their browser, and to do this I would like to hide a div if JS is disabled.
Searching the Web has led me to think that styling the div to not display is the way forward and then using JS to display it. It is the JS bit I am struggling with! The div in question is a set of radio buttons to allow a purchaser to choose how many gift memberships they want to buy: Code: <div id="giftmember-buttons" style="display:none";> <h2 class="threepeaksform">How many gift memberships do you wish to purchase?</h2> <fieldset class="threepeaksform"> <legend>Please select the number of people you are buying a gift membership for using the buttons below.</legend> <div class="generalcontactform-group"> <label>1</label><input name="numbergift" type="radio" value="1" checked="checked" onClick="showhidefields(this.value)" /> <label>2</label><input name="numbergift" type="radio" value="2" onClick="showhidefields(this.value);"/> <label>3</label><input name="numbergift" type="radio" value="3" onClick="showhidefields(this.value);"/> <label>4</label><input name="numbergift" type="radio" value="4" onClick="showhidefields(this.value);"/> </fieldset> </div> <br /> </div> I have used a JS switch function lower down the page but that relies on onClick to make it work, I want the above div to display as the page loads - would I do this with the switch function and onLoad applied to the body to make the div display when JS is on? The full page is at: http://yd97.peak1.titaninternet.co.u...sform-gift.htm Thanks for any help. Cheers Stu Similar TutorialsMy page has a form which has some sections that do not show unless needed, but if JS is turned off then these section will never show, so looking for a way to test if it is on or not and if not allow the page to display everything that would normally be hidden unless needed.
I 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 I want to hide my JavaScript but when I checked the FAQ of this forum, I saw that it said that it isn't possible. But how did worldometers.info did it? Because I cant find the JavaScript source. I am in the progress of building a new website; the layout and stuff is already done for the most part, but I am having a problem with the two order forms on my website. Well not the forms themselves, more with how they appear (and disappear). Like stated I have 2 forms on my website. When coming to my website they should be hidden (standard). When someone wants to order they press the link for order form A or form B. From here I am running into several problems. Problem #1 I want each form only to appear when they click on a link. For example; when a person clicks on link 1 form A appears. If they click on link 2 form B appears. Problem #2 If form A appears and they click on link 2, than form A should disappear and form B should be visible and the other way around. Problem #3 Is it possible to load a page within the DIV for example I want form B to include extra-info.php. Is this possible? If I understand correctly the above would be possible with Javascript and with the use of hidden DIV's. But I really don't know much about Javascript to pull this of myself. Anyone in here who can help me out and provide me with a working example? I would be very grateful... If something is not clear, please do no hesitate to ask me... Hello, I'm new to the forum. I tried coding this myself, but i'm just not that well versed in javascript and need a little help. I am trying to show certain div tags when you click on a hyperlink in an html document. I have four links (bio, news, portfolio, and resume) and four div tags (bio, news, portfolio, and resume). I am just going to show the code for one of the links. This is what I have for the bio link in the head of the html: Code:
function setVisible( setting )
{
var myElement = document.getElementById("bio");
if(setting)
myElement.style.visibility="visible";
else
myElement.style.visibility="hidden";
}
</script>
This is what I have in the style sheet: Code:
#bio {
position: absolute;
font: 9pt arial;
line-height: 10.5pt;
color: #fff;
width: 575px;
height: 300px;
margin-top: 390px;
margin-right: auto;
margin-left: 40px;
margin-bottom: 5px;
z-index: 1;
border: 0px solid #fff;
}
This is what I have on the link in the html doc (I'm assuming this is wrong, I don't know what the proper code should be): Code: <a href="javascript:onClick="setVisible(true)";">BIO</a> Does what I'm trying to do make sense? I'm assuming that it would be the same set up for all four links? Please let me know if I need to be more specific. Any help would GREATLY be appreciated! Thank you, Gerry Hi, Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
var obj;
var sel = $_('divContent').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
obj = sel[i].id;
if (obj != IDS) { $_(obj).style.display = 'none'; }
else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
}
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>
<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>
<div id="divContent">
<div id="BIO" class='divElem'>
<p>This is my content for bio</p>
</div>
<div id="News" class='divElem'>
<pThis is my content for news</p>
</div>
<div id="Portfolio" class='divElem'>
<p><This is my content for portfolio </p>
</div>
<div id="Resume" class='divElem'>
<p>This is my content for resume</p>
</div>
</div>
</body>
Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?
http://turtle-tv.com I already have the server time (top left) in a live format but this other bit is a bit much for me as I know little to nothing about JS and the code in question isnt mine. Anyway, the bit in the parenthesis which depending on the current server time will read Lights on in ??? or Lights off in ??? I would like to have turned in to a liver ticker while keeping all of it's current functionality. Like lets say it was 7:59:59pm EST time the message in the parenthesis would read (Lights off in 1 sec) then come 8:00:00pm the message would do a live rollover to read (Lights on in 11 Hrs, 30 Mins & 0 Secs) then count down from there and then come lets say 7:39:59am EST the message would read (Lights on in 1 Sec) and come 7:30:00am EST the message would roll over to the lights off message. If this is something you can do then great but if not then thankyou for at least reading my post. If you are able to do this and can improve on existing code for the liver server clock then please do that as well as there's some redundant code I don't even need for stuff liek the day etc since I'm just displaying as hh:mm am/pm clock in a 12hr format. Code: <head>
<title>Niko's Live 24/7 Video Broadcast</title>
<script type="text/javascript">
var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]
function showLocalTime(container, servermode, offsetMinutes, displayversion){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.displayversion=displayversion
var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-php")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
this.updateContainer()
}
showLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
showLocalTime.prototype.updateContainer=function(){
var thisobj=this
if (this.displayversion=="long")
this.container.innerHTML=this.localtime.toLocaleString()
else{
var hour=this.localtime.getHours()
var minutes=this.localtime.getMinutes()
var seconds=this.localtime.getSeconds()
var ampm=(hour>=12)? "pm" : "am"
var dayofweek=weekdaystxt[this.localtime.getDay()]
<!--
// this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+""+ampm+""
// -->
}
setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}
function formatField(num, isHour){
if (typeof isHour!="undefined"){ //if this is the hour field
var hour=(num>12)? num-12 : num
return (hour==0)? 12 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}
</script>
</head>
<body background="./smalls_file_mainBg_1919366_7636654_l.jpg">
<font size="2" color="FFFF00" style="background: #181818;">Time Now: <span id="timecontainer">Loading...</span></font>
<script type="text/javascript">
new showLocalTime("timecontainer", "server-php", 0, "short")
</script>
<?php
$lights_on = '7:30am';
$lights_off = '8pm';
$time = lights_on_off(time(), $lights_on, $lights_off);
?>
<center>
<font size="5" color="FFFF00" style="background: #181818;">
Lights out from <?php echo $lights_off; ?> to <?php echo $lights_on; ?> <?php
echo date('T');
?> (Lights <?php
echo $time['n_state'];
?> in <?php
$h = ($time['remaining']['m'] + 1 ==60) ? $time['remaining']['h'] + 1 : $time['remaining']['h'];
$m = ($time['remaining']['m'] + 1 ==60) ? 0 : $time['remaining']['m'];
$s = ($time['remaining']['m'] + 1 ==60) ? 0 : $time['remaining']['s'];
echo ($h>1) ? $h . ' Hrs, ' : (($h==1) ? $h . ' Hr, ' : ' ');
echo ($m>1) ? $m . ' Mins & ' : (($m==1) ? $m . ' Min & ' : ' ');
echo ($s>1) ? $s . ' Secs' : (($s==1) ? $s . ' Sec' : '0 Secs');
?>
) !</font></center>
<?php
function lights_on_off($time, $lights_on, $lights_off){
$time = (isset($time)) ? $time : time();
$d_lights_on = strtotime($lights_on);
$d_lights_off = strtotime($lights_off);
$secs_lights_on = (date("G",$d_lights_on)*60 + date("i",$d_lights_on))*60 + date("s",$d_lights_on);
$secs_lights_off = (date("G",$d_lights_off)*60 + date("i",$d_lights_off))*60 + date("s",$d_lights_off);
$secs = (date("G",$time)*60 + date("i",$time))*60 + date("s",$time);
$c_state = ($secs_lights_on < $secs && $secs < $secs_lights_off) ? 'on' : 'off';
$n_state = ($secs_lights_on < $secs && $secs < $secs_lights_off) ? 'off' : 'on';
$next_switch = ($secs_lights_on < $secs && $secs_lights_off > $secs) ? $secs_lights_off : ($secs_lights_on + 60*60*24);
$next_switch = ($next_switch > ($secs+60*60*24)) ? $next_switch - (60*60*24) : $next_switch;
$time_rem = $next_switch - $secs;
$h = floor($time_rem/(60*60));
$m = floor(($time_rem-($h*60*60))/60);
$s = $time_rem-($h*60*60)-($m*60);
return array('c_state' => $c_state,'n_state' => $n_state, 'remaining' => array('secs' => $next_switch, 'h' => $h, 'm' => $m, 's' => $s));
}
?>
<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="523" id="utv451302">
<param name="flashvars" value="autoplay=false&brand=embed&cid=1919366"/><param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/live/1/1919366"/>
<embed flashvars="autoplay=false&brand=embed&cid=1919366" width="625" height="545" allowfullscreen="true" allowscriptaccess="always"
id="utv451302" name="utv_n_740840" src="http://www.ustream.tv/flash/live/1/1919366" type="application/x-shockwave-flash" /></object>
<iframe scrolling="no" height="523" frameborder="0" width="576" src="./prochatrooms/index.php"></iframe>
</center>
</body>
Hi, I'm trying to make my javascript linked "print" button NOT appear in browsers with js disabled? I'm a total js noob. Any help will be appreciated. Thanks. Here's my code: Code: <a href="javascript:window.print()"><img src="images/PrintButton.png"></a> I have a form that only shows the submit (update) buttons if the value select field beside it is changed. But what is someone has JS disabled, how can I enable them? Code: <select title="3553" name="3553" onchange="JavaScript:document.cart.add3553.disabled=false;"> 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 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 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? 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 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, 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! 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> 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 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 |
|||||||