|
JavaScript - How Do I Use Noscript So No Show Div Shows
I have a 'show more' link on my page and wish to allow users who disable javascript to automatically see this normally hidden div as the link obviously will not work.
is this possible ? the info in the hidden div will be taken from MySQL databases. Code: <div><!-- start of div2 -->
<div class="floatleft"><a href="#" id="textbox-show" class="showLink" onclick="showHide('textbox');return false;">Show more</a>
</div>
<div><!-- start of div3 -->
<div id="textbox" class="more">
<div class="formtitles">Show more <a href="#" id="textbox-hide" class="hideLink" onclick="showHide('textbox');return false;">Hide this content</a>
</div>
<div>
<div class="containercolour3">
<div class="rtopcolour3">
<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div>
</div>
<div class="formspacer">Hidden text</div>
<div class="rbottomcolour3">
<div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
</div>
</div>
</div>
</div>
<!-- end of div3 --></div>
<!-- end of div2 --></div>
Similar TutorialsSo I was going to comment on another thread that was up a few days ago, but it is resolved and figured best to not repost on it anyways (can you repost on a resolved thread?) anyways... it was this thread and as rnd_me said the <noscript> tag is only supposed to be used in the body. So the reason I began thinking of this is because I am coding asp.net and using a master page. I cannot have <head> tags in the child pages because they get their <head> tags from the master... so i ran into the issue of redirecting clients if they do/do not have js enabled. the problem is if i use a script in the <head> on the master page and then the children get it, everytime a user clicks a link to goto a page they will be redirected to the default js page (script that redirects will be placed on every page). So I am playing around with how to do this the easiest and thought of that thread and thought, well if my default page is the "js enabled page" then i can put the noscript tag in the body and it will redirect users to the non js page and then i no longer have to worry about using the script in the <head> tags... am I making sense? upon further thought though you can put <script> tags anywhere, it is just generally placed in the <head> <-- this is an accurate statement correct?.... so i guess my question/reason for this post is to get feedback... i think it might be a "6, half-dozen the other" situation and just pend on "my style" but do you guys feel (keep in mind that this has to be done outside the <head> tag and inside the <body> tag) it is better to have default page be for script disabled and have a <script> which redirects, or the default page be js enabled and use the <noscript> tag? I guess it would come down to which one processes quicker? any thoughts on this would be great- I feel i have an answer (well two) but wanted feedback on which is better (and preferably a reason as to why one is better eg speed or something)... also if anyone reading could correct me if I am thinking incorrectly about this whole matter that would be great too Ok, I have an ajax form that uses "onkeyup" in an input to display dynamic data. I want to change the value of the input to "Enable javascript" if the user has javascript disabled. Any suggestions on how to accomplish this? Thanks, somniculouse Hello everybody, What I have been trying to incorporate into my site is that if a user has javascript turned off, it redirects them to another page. This is what I have found but doesn't seem to work. Code: <NOSCRIPT> <meta http-equiv=”refresh” content=”0; URL=AlternatePage.cfm”> </NOSCRIPT> When I test it out it shows on the page like this: meta http-equiv=”refresh” content=”0; URL=AlternatePage.cfm” Basically shows the same thing without the tags. It doesn't take any action at all. Any ideas, tips, or advice? I don't have any access to the root directory so SSI is not an option at the moment. (Do plan of hosting it on a dedicated server when I have the money ) Hi, I've got this bit if JavaScript that loads a Flash applet. It also has a noscript tag in case the user has JavaScript turned off. Works great in all browsers I've tried, but it doesn't work at all in IE8 (nor IE7 emulated). Even the noscript content isn't showing up. W3C validator shows no issues. No little exclamation point warning in IE's bottom-left corner. I've even tried lowering the browser security with no change -- but that wouldn't have been a good solution if it had worked anyway; I can't tell my visitors to lower their browser security. Any ideas of suggestions? Thanks for any help! You can see the page he http://www.girlscoutsmoheartland.org/test/vcattest.html If you look at the source, that's all there is to it. No undisplayed server-side scripting. And here's the code if you don't want to visit the page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.myvirtualpaper.com/js/miniflipper.js"></script>
</head>
<body>
Below this line should be either a Flash applet, or a link if JavaScript is unavailable:<br>
<noscript><a href="http://www.myvirtualpaper.com/doc/gs_missouri_heartland/girlscout2010catalog/">Click here to view all pages.</a></noscript>
<script type="text/javascript">
var miniFlipperOptions = {'uid' : 'bfbe7aa59d'};
MVP_printMiniflipper(miniFlipperOptions);
</script>
<br>
Above this line should be the mentioned item option.
</body>
</html>
I have a simple form and the noscript tag I have inserted is displaying as not valid as it is within the form section. Where could I place the noscript tags. Code: <form id="form" action="process.php" enctype="multipart/form-data" method="post" name="form_to_email" onsubmit="return Validate();">
<fieldset>
<legend>Your details</legend>
<p><label for="name"><span>* Name:</span></label><input id="name" name="name" size="45" type="text"/></p><p><label for="email"><span>* Email:</span></label><input id="email" name="email" size="45" type="text" /></p><p><label for="subject"><span>* Subject:</span></label><input id="subject" name="subject" size="45" type="text" /></p></fieldset><fieldset class="message">
<legend>Message</legend><textarea id="message" name="message" cols="55" rows="5"></textarea>
</fieldset> <fieldset class="bold"> *All fields Required</fieldset>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean',
tabindex : 0
};
</script> <noscript><p>Please enable javascript in your browser to post this form</p></noscript>
<?php
require_once('recaptchalib.php');
$publickey = "";
echo recaptcha_get_html($publickey, $error);
?>
<p><input id="submit" name="submit" type="submit" value="Submit" /></p></form>
I am using xhtml strict. If I place it after the form tag, will it still work if javascript is disabled? Hi all, I have a photo gallery on a page, when viewed in IE it will show nothing after it hits this gallery. The error that is produced is - "'null' is null or not an object" The code I have for my photo gallery is below, I have a feeling (though it is only a hunch) that it maybe to do with the IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; line. I have tried swapping the styleSheets[3] for different values 0-5 but to no effect. Code: var thumbProportion = .17 // thumbnails are 32% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
function swapImg(nImg,nSwapImgClass,nFullSizeImg){
var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}
function init(){
var nImg = document.getElementById('fullSizeContainer');
var fullSizeImg = nImg.getElementsByTagName('img')[0];
nCaption = nImg.getElementsByTagName('div')[0];
IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
return false;
}
nGallery[i].href = "#";
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
If anyone can help I would really appreciate it! The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this??? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img {display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <img id="shown" src="/tools/hoe.jpg" alt="hoe"> <script> function imageView(saw) { document.getElementById("shown").src="/tools/"+saw+".jpg"; } imageView('saw'); </script> <p><input type="button" value="Saw" onclick="imageView('saw')"> </p> <p><input type="button" value="Hoe" onclick="imageView('hoe')"> </p> <p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')"> </p> </body> </html> Hi Guys I'm trying to find a way to insert a dropdown eg: <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> ...place the dropdown to the left and have an information panel to the right. i.e. if a user chooses Volvo a panel to the right would appear saying eg "Volvo is a strong car" and so on for other selections eg "Audi is a fast car" if the user selects Audi in the dropdown. THANKS My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet. http://www.kristynaswebpages.com/home2a.html I have this in the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"],
["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"],
["http://www.kristynaswebpages.com/falcon_3.jpg"],
["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom). I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg" If anyone could help, that would be so awesome! Knowing just enough about javascript to get myself in trouble, I have put three timed javascripts to appear from 18 December to the 1 January on three pages of my sister's website. The scripts are on the main index for the site; the index page for the bibliography folder /bibliography/ and in the education folder on just one page: /education/educationlinks.html. Part one of the script inserts the css file; part two of the script inserts a "snowing" script and part three inserts a "make it stop snowing/let it snow" script. Everything is working perfectly for the main index page and the bibliography page. But I cannot figure out why the 3rd "make it stop snowing/let it snow" refuses to show up on the page in the education folder (the snowing javascript IS working on all three pages). There are no errors being thrown and the education page validates. This is the coding for the 3rd script: Code: // snowscript part 3: Show the script between 19-31 Dec and 1 Jan
var date = new Date();
var d = date.getDate();
var m = date.getMonth() + 1;
dm = d + m;
if (m = 12)
{
if (d > 18)
{ document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript" id="snow"></script>');
}
else
{
document.write('');
}
}
else if (dm == 1,1)
{
document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript"></script>');
}
else
{
document.write('');
}
This is the coding for snowlinkswitch.js Code: function myhref(){
document.getElementById('myAnchor').innerHTML="please let it snow!";
document.getElementById('myAnchor').href=location.href;
document.getElementById('myAnchor').title="let it snow! let it snow!";
document.getElementById('myAnchor').onclick="location.reload(); startstop('spanstyle'); return false;";
}
//
document.write ('<div id="snowlinks"><img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"> <a id="myAnchor" href="" onclick="myhref();hidesnow(); return false;" title="please make it stop snowing!">please make it stop snowing!<\/a> <img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"></div> ');
I would search for a similar occurrence but have no clue about what search words to use. Does anyone here have an idea about what I have done incorrectly that is causing this to happen? Many thanks. E Morris Toronto, Canada Hello there I'm trying to code a menu which when clicking say the 'news' button, a div will appear to the right containing the news, if you then click the button below, say 'information', the news div will be replaced by the 'information' div. I can figure out how to make a single menu item show and hide a div, but I can't for the life of me figure out how to do it for a whole menu. Any help greatly appreciated! Hi there, I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough I have this floating banner code and I want to show it once per visitor. How could I have it to show once per visitor? <style> #floating_banner_bottom { text-align: left; width: 00%; bottom: 00px; margin-bottom: 0px; height: 50px; position: fixed; z-index: 50; left: 0px; </style> <div id="floating_banner_bottom"> <!-- Button to Close Banner --> <a style="display:scroll;position:fixed;bottom:50px;left:0px"> banner code <br /> <div class="close"> <a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;"> <i style="font-family: Georgia,"Times New Roman",serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i> <center> <img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" /> </center> </a> </div> <a/> </a></a></div> <!-- End Here --> I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <title>Student Information</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> Code: <SCRIPT type="text/javascript">
<!--
function displayEntries () {
var sfirst = document.frmStudentInfo.textSfirst.value;
var smi = document.frmStudentInfo.textSmi.value;
var slast = document.frmStudentInfo.textSlast.value;
var sadd = document.frmStudentInfo.textSadd.value;
var scity = document.frmStudentInfo.textScity.value;
var sstate = document.frmStudenInfo.textSstate.value;
var szip = document.frmStudentInfo.textSzip.value;
var sphone = document.frmStudentInfo.textSphone.value;
var sdob = document.frmStudentInfo.textSdob.value;
window.alert('sfirst' + 'smi' + 'slast' + '\n' +
'sadd' + '\n' +
'scity' + 'sstate' + 'szip' + '\n' +
'sphone' + '\n' +
'sdob');
}
//-->
</SCRIPT>
</head> <body> <table width="70%" align=center ID="Table1"> <tr><td><img SRC = "nwlogo.jpg" width=120 height=60></td> <td><H3>Student Information</H3></td></tr> </table> <form name="frmStudentInfo" action="ignore"> <table align="center"> <tr><td> Last Name:</td> <td><input type="text" name="txtSlast" size="20"></td> <td> </td> <td></td> </tr> <tr><td> First Name:</td> <td><input type="text" name="txtSfirst" size="20" ></td> <td> </td> <td></td> <tr><td> MI:</td> <td><input type="text" name="txtSmi" size="5" tabindex="3"><td> <td> </td> </tr> <tr><td> Address:</td> <td><input type="text" name="txtSadd" size="20" tabindex="4"></td> <td> </td> <td></td> </tr> <tr><td> City:</td> <td><input type="text" name="SCity" size="20" tabindex="5"></td> <td> </td> <td></td> </tr> <tr><td> State:</td> <td><input type="text" name="txtSstate" size="5" tabindex="6"></td> <td> </td> Code: <td><input type="button" name="cmdUpdate" value="Update" onClick="displayEntries();"></td> </tr> <tr><td> ZIP Code:</td> <td><input type="text" name="txtSzip" size="20" tabindex="7"></td> <td> </td> <td></td> </tr> <tr><td> Phone:</td> <td><input type="text" name="txtSPhone" size="20" tabindex="8"></td> <td> </td> <td></td> </td> </tr> <tr><td> Date of Birth:</td> <td><input type="text" name="txtSdob" size="20" tabindex="9"></td> <td> </td> <td></td> </tr> </table> </form> </body> </html> I'm having trouble with the pop up window. I cannot get it to pop up and I'm not sure where I have went wrong with it. I need it to pop up once the update button is clicked and contain the information that has been input into the form. Any help would be much appreciated. hiya, I just have a specific question regarding to use a canvas-element with javascript I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image. the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback. Code: function UpdateCanvas (CanvId) {
var canvIDNames = ["front", "back"]; // DOM IDs
var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
var newImg = "";
var topLeft = CanvId * 63;
var bottomRight = topLeft + 63;
var xa = 0;
var posX = 0;
var posY = 0;
var imgCode = "";
for (xa = topLeft; xa < bottomRight; xa++) {
newImg = new Image();
imgCode = regRead(xa, 1);
newImg.src = getBase64src(imgCode);
newImg.onload = function () {
currentCanvas.drawImage(newImg, posX, posY);
if (posX == 400) {
posX = 0;
posY += 90;
}
else {
posX += 50;
}
}
}
}
Is it possible to make an app that creates a gif that shows the process of a finished drawing? Im a kid and love drawing and gif . i wanna make app that shows a replay of my initial start of my drawing till the finish product of my drawing in a gif file. thinking to approach this with javascript? would it be possible? Hi guys, I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list. I tried using this... Code: var response = $("#selected_numbers_box").val();
alert( response );
and I also tried this.. Code: var response = $("#selected_numbers_box").html();
alert( response );
both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box". Any suggestions? My code was taken directly from the jquery ui tutorial. Thanks in advance. Hey Guys, I'm using the jQuery Cycle plugin developed Here on this website. In FF, IE8, etc it seems to show up just fine - no background on the animation. In IE7 its showing the color attributed to the body element - a dark blue color. Is there anyway to fix this? Thanks! Does any know a code or a site I can get that from?
|
|||||||