|
JavaScript - Looking For Client To Confirm They Want To Proceed From A Dynamic Menu
Ok, I seem to be stuck on one part of my code. A quick background, this is a website to showcase various photography services.
First, I will lay out what I have: The Javascript for my menu (in the head section): Code: <script type="text/javascript">
<!--
var timeout = 200;
var closetimer = 1;
var items = 0;
function dropit(id)
{
canclcls();
if(items) items.style.visibility = 'hidden';
items = document.getElementById(id);
items.style.visibility = 'visible';
}
function mclose()
{
if(items) items.style.visibility = 'hidden';
}
function mcls()
{
closetimer = window.setTimeout(mclose, timeout);
}
function canclcls()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
// -->
</script>
Now, here is what I have in the body section Code: <div id="menu">
<ul id="control">
<li><a href="#" onmouseover="dropit('dropone')" onmouseout="mcls()">Wedding Portfolio</a>
<div id="dropone" onmouseover="canclcls()" onmouseout="mcls()">
<a href="jamaicawed.html">Wedding in Jamaica</a>
<a href="indianwed.html">Indian Wedding</a>
</div>
</li>
<li><a href="#" onmouseover="dropit('m2')" onmouseout="mcls()">Model Portfolio</a>
<div id="m2" onmouseover="canclcls()" onmouseout="mcls()">
<a href="emilymodel.html">Emily</a>
<a href="nicolemodel.html">Nicole</a>
</div>
</li>
<li><a href="#" onmouseover="dropit('m3')" onmouseout="mcls()">Other Works</a>
<div id="m3" onmouseover="canclcls()" onmouseout="mcls()">
<a href="catalog.html">Catalog</a>
<a href="#" onclick "alert">Boudoir</a>
<a href="product.html">Product</a>
</div>
</li>
<li><a href="#" onmouseover="dropit('m4')" onmouseout="mcls()">More</a>
<div id="m4" onmouseover="canclcls()" onmouseout="mcls()">
<a href="aboutus.html">About Us</a>
<a href="contact.html">Contact Us</a>
</div>
</li>
</ul>
</div>
Ok, so the only thing I can't figure out how to do is create an onclick event for one of the menu items (boudoir) that confirms that the user is comfortable being exposed to a specific (topless) type of image. Would someone be kind enough to help? Similar TutorialsHi All, I'm working on a javascript-only application that queries an in-memory database, at times requests (all internal to the JS app) are lengthy, so I need to post a "Processing..." overlay atop the clicked UI tab to provide user feedback that something is actually happening. For the life of me I cannot figure out how to push the "Processing..." content to the screen while the DB lookup is underway. It appears that there's only one shot at updating the display, and that's when all JS processing has concluded (ie, the data has been looked up and is displayed). Any tips would be greatly appreciated, what I wish to do may not be possible? Thanks in advance for your assistance! JD I have an animated gif of a door opening on my site. The animated gif is triggered onclick. (It's triggered only when the user clicks on a certain part of the door, hence the image map). This is the current code: <img src="img/door_admin_static.gif" width="229" height=401" alt="admindoor" usemap="#admin" name="animate"> <map name="admin"> <area shape ="rect" coords ="65,165,236,501" onClick="document.images.animate.src='img/door_admin.gif'; return true" href ="admin.html" rel="nofollow" target="_self" alt="admin" /> </map> What is supposed to happen is that after the user clicks, the animation of the door opening runs, and then the user is taken to the page linked to that door (in this case, admin.html). As it is now, the user is taken immediately to the admin.html page, so they never get to see the animation run. I need some kind of code that makes it so that the user is taken to the admin.html only after the animation is complete. Any help would be greatly appreciated!! Hi, I have 3 selects in a form for day, month and year for the user to enter his/her birthday. What I'm looking for is a piece of code / script which will dynamically change the day dropdown menu dependent on the month which is selected to display the correct number of days, and also according to if it is a leap year. Ive tried looking on google but I'm not sure what the correct term is to look for? Could anyone please help? Thanks I have been searching everywhere and have found a few of articles available regarding dropdown menu.. couldnt get exactly what i wanted.. i am not really good at javascript, or even programing..am trying my best. anyway~ Here is what i want. something simple if there is more than 1 data entity (count>1) (Case 1), then execute 'select(drop down)' else (count <=1)(Case 2), then just show the data entity itself. (i dun even want the dropdown box to appear) as below screenshot or the attachment I have a script getting me the dropdown menu as below, i wanna modify this but not sure where to start... -------------------------------- <div id="abcdefg"> <form id="setLanguage" action="{$request_uri}" method="post"> <select name="selectlanguage" id="selectlanguage" onchange="setLanguage(this.value)"> {foreach from=$languages key=k item=language name="languages"} <option value="{$language.id_lang}" {if $language.iso_code == $lang_iso} selected {/if} >{$language.name} </option> {/foreach} </select> <input type="hidden" name="id_lang" id="id_lang" value=""/> </form> </div> -------------------------------- Really appreciate your help with modifying this. Please try not to give me a totally new script (i bet it will/may work better but i wouldnt be able to understand..:-( so no point...) Hi I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder i have the top folders at the first dropdown how can i have the subfolders at the second when change first? the problem is how to open folder if i have folders aaaaa has subfolders(1111,2222,2233) bbbbb has subfolders(3333,4422,2433) ccccc has subfolders(1131,2232,2532) and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa, bbbbb, ccccc) I have more than 1000 top folders and eachone have 10 subfolders already i have all topfolders at first dropdown ,i want to have subfolders at second automatic , any help?? Hi Guys, I have a multi language cms site and need to be able to resize font to fit the div its contained in so eg if I have a 300px wide navbar with 13px text: home | about | contact | services | products and in Russian its: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I would like the font size to reduce down to fit the 300px fixed width div from say 13px to 10px or whatever fits. so it would be like: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I was looking at http://jsfiddle.net/e8B9j/2/show/ and was hoping someone could get it to work to suit the above. So as above u'd have say 5 menu item divs nested in a navbar div Code: <div id="navbar"> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> </div> ...or using ul and li's Any help greatly appreciated. Perhaps a jquery solution out there? Thanks Well i want to implement something very similar to this (youtube). My javascript knowledges are low. I think it has something to be with onload and onclick events with links. Do i have to write a function and include it on the html page? Where do i have to put the diferent contents? I would prefer to separate html content and javascript since i have some variable to display from my template engine like {$name}, {$uploaded_date}, etc. Thanks in advance Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! Hello all! I hope everyone had a great Holiday I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? Hi, I am trying to give the user the option of music on my homepage (b/c we've all found it annoying at times...perhaps most times). I have found an "onload" option for the body tag on dotnetspider.com, but it doesn't seem to be working for me. Please take a look and let me know of any improvements I could make. Thx Code: <body onload="loadMusic()">
<p>
<script type="text/javascript"><!--
function loadMusic()
{
var r=confirm("Would you like a background tune?");
if (r==true)
{
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
<object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640">
<param name="autoplay" value="false" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav" autoplay="true" loop="true" controller="true"></embed>
</object>
}
else
{
alert("If you change your mind reload the page to choose again.");
// --></script>
Hi, when my page loads it starts with a confrim box. If "Cancel" is selected then the rest of the page loads fine. If "Ok" is selected nothing after the confirm box loads. Any ideas. Also, it appears that IE and Firefox have trouble with this type of media and Chrome will only play the audio file for about 15 seconds. Any solutions? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Justin Revard</title>
<style type="text/css">
html, body {height: 100%; margin: 0; padding: 0;}
#background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<p><img id="background" src="Images/siteBackground.jpg" /></p>
<div id="content">
<h1>Justin Revard's Home Page</h1>
<p>
<script type="text/javascript"><!--
var r = confirm("Would you like a background tune?");
if (r == true)
{
document.body.innerHTML += '<object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"><param name="autoplay" value="true" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav autoplay="true" loop="true" controller="true"></embed></object>';
}
else
{
alert("If you change your mind reload the page to choose again.");
}
// --></script>
</p>
<p>
<table>
<tbody>
<tr>
<td><a href="Source/page2.html" style="opacity:0">Page 2</a></td>
<td><a href="Source/page3.html" style="opacity:0">Page 3</a><br /></td>
<td><a href="Source/today.php" style="opacity:0">Today's Date</a></td>
<td><a href="Source/morePHP.php" style="opacity:0">More PHP</a></td>
<td><a href="Source/database.php" style="opacity:0">Database</a></td>
<td><a href="source/products.html" style="opacity:0">Products</a></td>
<td><a href="Source/origFileRead.php" style="opacity:0">Original File Reader</a></td>
<td><a href="Source/fileRead.php" style="opacity:0">File Reader</a></td>
</tr>
<tr>
<td><a href="http://justinrevard.com"><img src="Images/homeButton.jpg" /></a></td>
<td><a href="foosball.html"><img src="Images/foosballButton.jpg" /></a></td>
<td><a href="physics.html"><img src="Images/physicsButton.jpg" /></a></td>
<td><a href="skiing.html"><img src="Images/skiingButton.jpg" /></a></td>
<td><a href="message.html"><img src="Images/messageButton.jpg" /></a></td>
<td><a href="links.html"><img src="Images/linksButton.jpg" /></a></td>
<td><a href="aboutMe.html"><img src="Images/aboutMeButton.jpg" /></a></td>
</tr>
</tbody>
</table>
</p>
</div>
<p> </p>
</body>
</html>
Ok, I need some help with this. When you click the close button on your browser, I want it to have a confirmation. Saying "**Click OK to be redirected to a new page**" something like that. If you click "OK" you are redirected to another page. If you hit CANCEL, then it closes out. It doesn't have to be a confirmation. Just needs to be something that has an option. (Maybe return xx?) Anyways, here's what I've got: Code: <script type="text/javascript" language="javascript">
var sure = false;
var lin = false;
function sureF()
{
if(!sure && !lin)
{
sure = true;
var con = confirm("**Are you sure you want to leave?**")
if(con == true)
{
location.href = "http://www.google.com/"
return con;
}
else
{
alert("Sorry")
}
}
}
window.onbeforeunload = sureF;
</script>
What that does, is when you click close on your browser, it will say "Are you sure you want to leave?" you click "OK", and you get redirected to google .com (How I set it) BUT then a popup comes up saying, "Are you sure you want to navigate away?" which I don't want at all. As you can see, my script is quite messed up. Could you help me out? Thanks. Hello, this is not and advert This is a class i built in javascript What it dose: When users leave a site that has a confirm you want to leave box from the browser Why have i posted: I have seen around on the internet posts about how to do such a thing so i though i would get hits to codding forum when user search for such a thing and any one of codding forum members could help it get better Well this is a nice little object to use insted that dose a light box effect and brings up a Yes/no true/false box you set what you want it to say The JSON Object PHP Code: confirmBox = { 'message' : 'This is a Confirm Box', 'trueTxt' : 'True', 'complete' : true, 're' : '', 'falseTxt' : 'False', 'onTrue' : 'alert("true")', 'onFalse' : 'alert("false")', 'setTrue' : function(ontrue){ this.onTrue = ontrue + "confirmBox.update('true')"; }, 'setFalse' : function(onfalse){ this.onFalse = onfalse + "confirmBox.update('false')"; }, 'setTrueText' : function(trueText){ this.trueTxt = trueText; }, 'setFalseText' : function(falseText){ this.falseTxt = falseText; }, 'setText' : function(text){ this.message = text; }, 'hide' : function(){ var bg = document.getElementById('___confirmBox_bg'); var center = document.getElementById('___confirmBox_center'); var dialog = document.getElementById('___confirmBox_dilog'); center.removeChild(dialog); bg.removeChild(center); document.body.removeChild(bg); }, 'show' : function(){ this.createBG(); this.createCenter(); this.createDialog(); }, 'update' : function(sw){ this.re = sw; }, 'state':function(){ if(this.re = ''){ return false; }else{ return this.re; } }, 'createBG' : function(){ var bg = document.createElement("div"); bg.setAttribute('style', "display: table; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);"); bg.setAttribute('id', '___confirmBox_bg'); document.body.appendChild(bg); }, 'createCenter' : function(){ var center = document.createElement('div'); center.setAttribute('style',"#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; margin-left:auto; margin-right:auto;"); center.setAttribute('id', '___confirmBox_center'); document.getElementById('___confirmBox_bg').appendChild(center); }, 'createDialog' : function(){ var dialog = document.createElement('div'); dialog.setAttribute('style', "display:block; width: 300px; padding: 16px; background-color: white; z-index:1003; margin-left:auto; margin-right:auto;"); dialog.setAttribute('id', '___confirmBox_dilog'); dialog.innerHTML = this.message + '<div align="right"><input type="button" onclick="eval(confirmBox.onTrue); confirmBox.hide();" value="' +this.trueTxt + '" /><input type="button" onclick="eval(confirmBox.onFalse); confirmBox.hide();" value="' + this.falseTxt + '" /></div>'; document.getElementById('___confirmBox_center').appendChild(dialog); }, } Then this is how you call it and set propertys Code: <script src="confirmBox.js" type="text/javascript"></script>
<script type="text/javascript">
confirmBox.setText("This is a test"); //Sets the text to show in the box
confirmBox.setTrueText("I can see it"); // sets the text on the return true button
confirmBox.setFalseText("I can't see it"); // sets the text on the return false button
confirmBox.setTrue('alert("Thanks");'); //what to do when true is clicked
confirmBox.setFalse('alert("Your a lier");');// what to do when false is clicked
confirmBox.show(); // Show the confirmBox
</script>
I amcalling a JS confirm function from my code behind like this: If bResetNewUser Then strMessage = "Your profile was successfully updated. Would you like to be redirected to the Inquiry screen?" ClientScript.RegisterStartupScript(Me.GetType(), "confSQUpdateScript", "ConfirmSQUpdate('" & strMessage & "');", True) My JS function is as follows: function ConfirmSQUpdate(message) { if (confirm(message)) { window.location = "ClaimantInquiry.aspx" }else { window.location = "http://www.labor.vermont.gov/" } } When I click the Update Profile button the first code snippet executes except no confirm message box appears and hence no redirect. The page says there is an error and the error is Object expected on the ClientScript... line. I have this same functionality with alert boxes and they all work. What gives? I'm working on a bank website that needs disclaimers on their external links. I've searched for a tutorial or a script I could understand but need additional help if anyone is willing.. Here's my page with external links: http://designphilanthropy.org/services/links/ Here's the js I used from the previous bank design (I don't see any code here that will do what I need): Code: <script language="javascript">
<!-- Hide
window.resizeTo(440, 440);
function go() {
var width = screen.width;
var height = screen.height;
if(width<650) {
width = 600;
height = 400;
} else {
width = width - 200;
height = height - 100;
}
window.resizeTo(width, height);
location.href="";
}
// end Hide -->
</script>
And here's the code on the "yes" button: Code: <input type="button" VALUE="YES" onclick="javascript:go();"> The link opens the disclaimer and populates the url in the browser, but I don't know how to write the js for it to continue to the destination after clicking "yes" Any help would be greatly appreciated... Hi Guys, I would like to add a confirmation to this: PHP Code: echo "<a href=\"delete.php?dir=$dir&file=$file\" onclick='return del(this, \"$id\")'><img src=\"images/delete.gif\" border=\"0\" /></a>"; However I seem to be struggling, severely! Any help would be greatly appreciated, especially if spelt out if alphabetti spaghetti. Kind Regards, Drew Hi, im using this code as a fancybox replacement for confirm. Code: function fancyAlert(msg) {
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"
});
}
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
modal : true,
content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
onComplete : function() {
jQuery("#fancyConfirm_cancel").click(function() {
ret = false;
jQuery.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
onClosed : function() {
callback.call(this,ret);
}
});
}
function fancyConfirm_text() {
fancyConfirm("Ceci est un test", function(ret) {
alert(ret)
})
}
how can i use fancyConfirm via an onclick in a hyperlink? thanks for your help! Hi I really really really need your help since I have no idea about this. How can I insert the Javascript Confirmation Alert into the del.php file? I have this del.php file PHP Code: <?php require ("include/config.php"); $id=$_REQUEST['id']; $strSQL = "DELETE FROM change WHERE id = '".$id."' "; $objQuery = odbc_exec($conn,$strSQL); if($objQuery) { echo "<script language='Javascript'>alert('Deleted.'); window.location=\""."index.php?action=syif\"</script>"; } else { echo "Error Delete [".$strSQL."]"; } odbc_close($conn); ?> This is the confirmation javascript Code: <html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Delete?");
if (r==true)
{
alert("Deleted!");
}
else
{
alert("Cancelled!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
Hello, I'm new to Javascript, but have been programming in PHP and other web codes for 4 years now. I was wondering how you would check if a checkbox was ticked, upon its selection and then unhide HTML content, and then hide such content when deselected.. So far I have this: Code:
<script type="text/javascript">
function Agree() {
document.getElementById("stepTwo").className = "";
}
</script>
Which is called by onclick="Agree()" on the select box itself.. I understand an if statement is needed, but how would one go about doing this as my if statements do not appear to be working. |
|||||||