|
JavaScript - Show Sidebar Navigation On Only One Page
Hello,
I need some help to insure that this: Code: <?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) {?>
<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<?php } ?></li>
<?php }?>
</ul>
<ul role="navigation">
<li><h2>Nyheder</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
</ul>
<ul><?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<li>
<ul><?php wp_meta(); ?></ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>
Only appear on this page: http://finmand.dk/almastofa/nyheder-2 And if possible, how I can clean it up a bit, since there is stuff in there I don't think I need. I would like it to only be "Nyheder", under this there shall be (as now) a list of post, shown by which month they where made. Any help or advice would be helpful. Thanks Similar TutorialsI am using CSS navigation that shows/hides on mouseover with a javascript function. I also have a slide show on the page right under the navigation that fades images in and out. When the navigation is visible over an image in the slideshow it is always on top EXCEPT when the image is fading in and out. Once the image is done fading the navigation goes back to the front. VERY ANNOYING! I have tried the z-index with no luck and also tried playing with the absolute and relative positioning. Neither worked as I had hoped. i believe that the problem lies within the Javascript of the slideshow during the fading but I am not sure where to start...Any thoughts? My code: *Navigation* Code: CSS
#nav {
width: 800px;
margin: 0 auto;
padding: 0px 10px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(59, 98, 120);
}
#nav a {
float: left;
padding: 0 15px;
height: 25px;
line-height: 220%;
font-weight: bold;
color: rgb(235, 235, 235);
font-size: 11pt;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: rgb(0, 0, 0);
}
table.menu {
background: rgb(79, 131, 161);
position: absolute;
visibility: hidden;
}
JAVASCRIPT
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
*Slideshow* Code: HTML
var imgArray = new Array();
imgArray[0] = "images/ss1.jpg";
imgArray[1] = "images/ss2.jpg";
imgArray[2] = "images/ss3.jpg";
imgArray[3] = "images/ss4.jpg";
imgArray[4] = "images/ss5.jpg";
imgArray[5] = "images/ss6.jpg";
imgArray[6] = "images/ss7.jpg";
imgArray[7] = "images/ss8.jpg";
imgArray[8] = "images/ss9.jpg";
slideshowFade('Slideshow1','',imgArray,8,3000);
JAVASCRIPT
var slideshowFadeAnimate = new Array();
var slideshowFadeTimer = new Array();
var slideshowFadeCount = new Array();
var slideshowFadeImages = new Array();
function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{
if(cl)
cl = ' class="'+cl+'"';
document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');
var ss = document.getElementById(id+'img');
slideshowFadeCount[id] = 0;
slideshowFadeImages[id] = imageArray;
slideshowFadeAnimate[id] = 'run';
slideshowFadeTimer[id] = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
}
function slideshowFadeAnimation(id,holdTime)
{
if(slideshowFadeAnimate[id]=='run')
{
var obj = document.getElementById(id+'img');
var opa = slideshowFadeCount[id]%200;
if(opa==0)
{
slideshowFadeAnimate[id] = 'load';
obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
}
else if(opa==100)
{
slideshowFadeAnimate[id] = 'hold';
setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
}
else if(opa>100)
opa = 200-opa;
obj.style.opacity = (opa/100).toString();
obj.style.filter = "alpha(opacity="+opa.toString()+")";
slideshowFadeCount[id]++;
if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
slideshowFadeCount[id]=0;
}
}
function slideshowFadeRun(id)
{
slideshowFadeAnimate[id] = 'run';
}
Hello, I'm working on a page navigation script and i'm stuck at a part. I have made a little picture gallery script and my team partners can fill in how many folders they want to show on a page. So example i have 5 folders and want to show 2 folders per page i tried to use code like this var totalFolderPages = 1; if ((parseInt(pageCounter) / parseInt(totalFoldersPerPage) % 1 == 0)) { totalFolderPages++; } I'm still a bit new in coding and don't know how i can create a working solution for my page navigation. Some help would be great Hi all I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111 Kind regards Anne This is my js: Code: $(".nav").click(function(){
$(".nav.a").toggle("fast");
$(this).toggleClass("active");
});
This is my css; Code: .nav {
text-align: center;
overflow: hidden;
margin: .3em ;
width: 500px;
position: fixed;
padding: 0px 0px 0 830px;
}
.nav a {
position: relative;
float: left;
padding: 2.2em 0 3.1em;
width: 20%;
text-decoration: none;
color: #484848;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: 120%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 66.3%; }
.nav a:nth-child(2):hover ~ .effect {
left: 73.8%; }
.nav a:nth-child(3):hover ~ .effect {
left: 81.2%; }
.nav a:nth-child(4):hover ~ .effect {
left: 89%; }
.nav a:nth-child(5):hover ~ .effect {
left: 96.4%; }
/* ----- dot effect -----*/
.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #484848;
bottom: 40px;
}
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
bottom: 38px;
left: 50%;
margin-left: 0px;
background: #484848;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #fff;
border-radius: 100%;
z-index:999;}
I am trying to figure out how to code this type of horizontal navigation like this site. http://www.maxdesign.com.au/ When you click on, say, "News", the CSS button turns red and white. I am thinking that this is done with JavaScript and a basic CSS list menu. But I cannot seem to find an example of this the of menu anywhere. The Max Design site is based on WordPress and apparently this navigation uses an API built into the WP framework. I need this type of horizontal menu for a custom coded CSS and PHP site. Any and all help would be appreciated. Either code or point me to a tutorial. Thanks, WiLd Hi Guys, I need to put previous/next navigation button images on a lot of slides and was wondering if javascript could do the following: Firstly say my slides increment as: slide1.html slide2.html slide3.html slide4.html If i am on slide 3 I'd like javascript to identify previous button as slide2.html and next button as slide4.html and so on Some loop/array code that does if filename = slide3.html then set button left(left.lpg)) url to slide2.html and button right(right.jpg) url to slide4.html array[0] = slide1.html array[1] = slide2.html ... opening as _self i.e no pop up. Thanks Hi, I created a simple menu: Code: <html>
<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>
<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>
<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>
<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>
<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>
</tr>
</tbody>
</table>
</body>
</html>
Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on. Regards Rain Lover I have already worked on this pop-up: https://defencedog.googlecode.com/sv...lcome_box.html but I still considers a lightweight replacement so here it goes https://defencedog.googlecode.com/sv...elcome/my.html as you can see the popup show at click event; I want it to load automatically when page loads & can't find the appropriate method: Here my failed tries... Code: $(document).ready(function () {
// id is the ID for the DIV you want to display it as modal window
launchWindow( dialog );
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$( dialog ).css('top', winH/2-$( dialog ).height()/2);
$( dialog ).css('left', winW/2-$( dialog ).width()/2);
//transition effect
$( dialog ).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
I am running a simple show hide div script as follows: Code: <script type="text/javascript">
<!--
function toggle_visibility(slideshow) {
var e = document.getElementById(slideshow);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<a href="#" onclick="toggle_visibility('slideshow');">Show Gallery + </a>
<div id="slideshow" style="display:none">slideshow</div>
It works but the page reloads and returns the user to the top of the page not to the "shown" div. Any way to send them back to the shown div or stop the reload? Any help would be appreciated. Thanks I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time. I have searched all over the internet and I havn't found anything that will solve my problem. PHP Code: $listmonth=array("January","February","March","April","May","June","August","September","October","November","December"); foreach ($listmonth as $month) { if (file_exists($year2.'-'.$month.'.pdf')) { echo '<embed src="'.$year2 .'-'.$month.'.pdf#toolbar=0&navpanes=0" width="500" height="375">' ;} else {echo $month;} echo '<br />'; } I have a small price quote calculator/contact information form. I want the customer to fill out the whole form submit it, and get his/her estimated price based on selections in the form. I am using asp, and I have a javascript for the quote calculations. My question is how would I take this js and execute it when the user hits submit, and then display that quote price on the next page. Here is the javascript that I'm working with: Code: var practice_field = new Array();
practice_field["None"]=0;
practice_field["Allergy and Immunology"]=4400;
practice_field["Endocrinology"]=4400;
practice_field["Pathology"]=4400;
practice_field["Dermatology"]=4400;
practice_field["Geriatrics"]=4400;
practice_field["Physical Rehabilitation"]=4400;
practice_field["Family Practice"]=6900;
practice_field["General Practice"]=6900;
practice_field["Internal Medicine"]=6900;
practice_field["Oncology"]=6900;
practice_field["Oral Surgery"]=6900;
practice_field["Radiology"]=6900;
practice_field["Gastroenterology"]=6900;
practice_field["Infectious Disease"]=6900;
practice_field["Nephrology"]=6900;
practice_field["Ophthalmology"]=6900;
practice_field["Pediatrics"]=6900;
practice_field["Urology"]=6900;
practice_field["Anesthesiology"]=9000;
practice_field["Cosmetic Surgery"]=9000;
practice_field["General Surgery"]=9000;
practice_field["Neurology"]=9000;
practice_field["Otolaryngology"]=9000;
practice_field["Plastic Surgery"]=9000;
practice_field["Vascular Surgery"]=9000;
practice_field["Cardiology"]=9000;
practice_field["Emergency Medicine"]=9000;
practice_field["Gynecology"]=9000;
practice_field["Orthopedic Surgery"]=9000;
practice_field["Pain Management"]=9000;
practice_field["Pulmonary Surgery"]=9000;
practice_field["Neurological Surgery"]=9900;
practice_field["Obstetrics"]=9900;
var society_member= new Array();
society_member["None"]=null;
society_member["BCMA"]=0.10;
society_member["DCMA"]=0.10;
society_member["FOGS"]=0.10;
society_member["FNS"]=0.10;
society_member["PBCMS"]=0.10;
society_member["FSPS"]=0.10;
function getPracticeField()
{
var docPracticeField=0;
var theForm = document.forms["quoteform"];
var selectedPracticeField = theForm.elements["practice"];
docPracticeField = practice_field[selectedPracticeField.value];
return docPracticeField;
}
function getSelectedSociety()
{
var docSelectedSociety=0;
var theForm = document.forms["quoteform"];
var selectedSociety = theForm.elements["society"];
docSelectedSociety = society_member[selectedSociety.value];
return docSelectedSociety;
}
function bareDefensePrice()
{
var defensePrice=0;
var theForm = document.forms["quoteform"];
var includeDefense = theForm.elements["baredefense"];
if(includeDefense.checked==true)
{
defensePrice=0;
}
return defensePrice;
}
function insuranceDefensePrice()
{
var insuranceDefense=0;
var theForm = document.forms["quoteform"];
var includeMoreDefense = theForm.elements["insureddefense"];
if(includeMoreDefense.checked==true){
insuranceDefense=0;
}
return insuranceDefense;
}
function calculateTotal()
{
var defensePrice = getPracticeField() + null - (getPracticeField() * getSelectedSociety()) + bareDefensePrice() + insuranceDefensePrice();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Your Pre-Paid Legal Defense Fee Will Be Around $"+defensePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
here is the html: Code: <body onload='hideTotal()'>
<div id="wrap">
<form action="" id="quoteform" onsubmit="">
<div>
<div class="cont_order">
<fieldset>
<legend>How Much Will My Pre-Paid Legal Defense Cost?</legend>
<label >Choose Your Practice Field</label>
<select id="practice" name='practice' onchange="calculateTotal()">
<option value="None">Select Field</option>
<option value="Allergy and Immunology">Allergy and Immunology</option>
<option value="Endocrinology">Endocrinology</option>
<option value="Pathology">Pathology</option>
<option value="Dermatology">Dermatology</option>
<option value="Geriatrics">Geriatrics</option>
<option value="Physical Rehabilitation">Physical Rehabilitation</option>
<option value="Family Practice">Family Practice</option>
<option value="General Practice">General Practice</option>
<option value="Internal Medicine">Internal Medicine</option>
<option value="Oncology">Oncology</option>
<option value="Oral Surgery">Oral Surgery</option>
<option value="Radiology">Radiology</option>
<option value="Gastroenterology">Gastroenterology</option>
<option value="Infectious Disease">Infectious Disease</option>
<option value="Nephrology">Nephrology</option>
<option value="Ophthalmology">Ophthalmology</option>
<option value="Pediatrics">Pediatrics</option>
<option value="Urology">Urology</option>
<option value="Anesthesiology">Anesthesiology</option>
<option value="Cosmetic Surgery">Cosmetic Surgery</option>
<option value="General Surgery">General Surgery</option>
<option value="Neurology">Neurology</option>
<option value="Otolaryngology">Otolaryngology</option>
<option value="Plastic Surgery">Plastic Surgery</option>
<option value="Vascular Surgery">Vascular Surgery</option>
<option value="Cardiology">Cardiology</option>
<option value="Emergency Medicine">Emergency Medicine</option>
<option value="Gynecology">Gynecology</option>
<option value="Orthopedic Surgery">Orthopedic Surgery</option>
<option value="Pain Management">Pain Management</option>
<option value="Pulmonary Surgery">Pulmonary Surgery</option>
<option value="Neurological Surgery">Neurological Surgery</option>
<option value="Obstetrics">Obstetrics</option>
</select>
<br/>
<p>
<label >Are You Affiliated With Any of the Following Medical Societies</label>
<select id="society" name='society' onchange="calculateTotal()">
<option value="None">Select Society</option>
<option value="None">No, I am not</option>
<option value="BCMA">Broward County Medical Association</option>
<option value="DCMA">Dade County Medical Association</option>
<option value="FOGS">Florida Obstetrics & Gynecology Society</option>
<option value="FNS">Florida Neurological Society</option>
<option value="PBCMS">Palm Beach County Medical Society</option>
<option value="FSPS">Florida Society of Plastic Surgeons</option>
</select>
</p>
<br/>
<label >What Type of Defense Are You Interested In?</label>
<br />
<label for='baredefense' class="inlinelabel">Bare Defense</label>
<input type="checkbox" id="baredefense" name='baredefense' onclick="calculateTotal()" />
<br />
<label class="inlinelabel" for='insureddefense'>Insured Defense</label>
<input type="checkbox" id="insureddefense" name="insureddefense" onclick="calculateTotal()" />
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
<div class="cont_details">
<fieldset>
<legend>Contact Details</legend>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
</div>
<input type='submit' id='submit' value='Calculate Rate' onclick="calculateTotal()" />
</div>
</form>
</div><!--End of wrap-->
I create a webpage where i use pagination where it is predefined that i want to show 10 item per page.But i want to do that when a user logged in he have a option that how many items he wants to show per page?javascriptkit.com site use this type?please any one help me how can i do this?
hello. I have several switch menus that are VITAL to my website's navigation. They all worked very well when I tested the pages in all browsers. However, I finally FTPed my site to the internet, now when you click a link from a switch menu, instead of staying opened due to the onLoad function in the body, they do not appear. Strangely, the only way to get my switch menus to show is to refresh the page. Suggestions? Is there coding to force the page to refresh to look the way I want it? thanks see website he www.jingspa.com ignore the first menu link, it's different. notice how you go to a section and the menu closes when you click on something? hit refresh, and the menu will be there... Greetings! I'm not a huge javascript person, I barely know enough php to get by. I struggle and I learn. I have this page that take a while to load and I really don't want it to show the results in the browser before the php script finishes. So I was hoping that somebody could point me to a way to either give some sort of wait indicator (i.e. a bar, the trendy twrilling circle thingy) or just hide the everything till the page is completely loaded. Below this sentence is the original post I left in the PHP forum. Since the birth of CSS3 you can easily use fonts that are NOT on the local users PC. This is the best! Although some fonts do not render through the browser. I wrote this script (for personal use) which is pretty elementary which reads fonts in a directory (without installing them in windows) and then lets you display them in various web aspects. In the script I pick a random background color and calculate a contrast color and then determine if the text color should be black or white depending on the color of the background. What's happening is that if I pile a bunch of fonts in the fonts directory when the script executes it displays the contents until it 100% complete. Basically I'd like it NOT to do that. I was looking around a progress bars but .. they don't seem to do much. I couldn't find one that would either give you that twrilling circle while it loads or something to that nature. **Is you test this script you MUST create a folder named 'fonts' in the root of where you put the script! ***If you find ways that I can make this more effecient or any tips or tricks that'd be great and constructive criticism is always appreciated! Thanks so much for any help or advice given! You'll need the javascript file animatedcollapse.js from my site http://handlersspot.net/css3font/animatedcollapse.js There's are three images: http://handlersspot.net/css3font/slantdivider.gif http://handlersspot.net/css3font/minus.png http://handlersspot.net/css3font/plus.png I tried to post the source here but it seems that I used up my allotment of 20K characters I tried to use the attachments feature but it doesn't work for me for some reason so I posted all the source here on my website: http://handlersspot.net/css3font/source.html Whew! That's allot of stuff! Again .. thanks for the effort/advice/help way in advance! Oh! Sorry! Meant to put the actual working version of this here --> http://handlersspot.net/css3font Looking for a simple way to have a hidden element made visible when the page scrolls. The idea is to have a back arrow appear only when the page has been scrolled horizontally. trying something along these lines without success ... Code: <script type="text/javascript">
window.onscroll = function () {
if $("back").is(":hidden") {
$("back").show("slow");
}
}
</script>
The site is he www.milesjaffe.com. Thanks -- Hi EveryBody, I want to add a preview of html page feature in my project. I had created registration form and I need when user click submit button,user should get a preview of registration form after that further operation will b performed. Guys just tell me how can i achieved this. Any clue or sample code so i can learn it and implement in my project. Hi. I have a form and in the form is a checkbox use as a switch to hide and unhide a two textbox. When the other textbox is hide, the other is unhide such as the code below. When the user click the submit button on the first time and there is an error, it reloads and the id="fieldset.-in_honor" hide because it is set to hide initially but not empty. My problem is, I want to show the fieldset whichever is not empty after submit button is click and there is an error so user will not enter any more information to the other field. Is that possible? Please help. I have a hard time explaining it but hopefully you will get the idea. Thanks in advance and hope to hear from you as soon as possible. Code: /*toggle switch*/
<p><input type="checkbox" name="in_honor" value="" id="checkmemoriam" onclick="showHide(this.name);" />Please check to make this donation in honor of someone special.</p>
/*hide textbox but unhide when the switch is on or the checbox is check*/
<fieldset id="fieldset-in_honor" class="fieldgroup" style="display:none">
<legend class="hide">In Honor Of</legend>
<p>To make this donation in honor of someone special, please complete the two fields below:</p>
<div class="formfield" <?php echo highlight('donate_honor_name'); ?>>
<label for="donate_honor_name">Name:</label>
<input id="donate_honor_name" name="donate_honor_name" class="text" type="text" value="<?php safeEcho($form['donate_honor_name'])?>" />
<?php helper_error('donate_honor_name'); ?>
</div>
<div class="formfield" <?php echo highlight('donate_honor_acknowledgement'); ?>>
<label for="donate_honor_acknowledgement">Acknowledgement should be sent to:</label>
<textarea id="donate_honor_acknowledgement" name="donate_honor_acknowledgement"><?php safeEcho($form['donate_honor_acknowledgement'])?></textarea>
<?php helper_error('donate_honor_acknowledgement'); ?>
</div>
/*always show on first load of the page but once the checkbox is check, will need to hide and delete info entered*/
<fieldset id="fieldset-in_registration">
<label for="impact" style="font-weight:bold">B. Impact Areas</label>
<table>
<tr>
<td style="width:380px;text-align:left"><label for="d" id="deslist4" name="deslist4">Crime and Drug Use <a href="javascript:alert('Ensuring prevention and treatment programs and appropriate support services are available to people who are at risk for drug addiction and supporting efforts to reduce crime.');">what is this?</a></label></td>
<td style="float:right"> $<input id="d" name="d" class="text" type="text" value="<?php safeEcho($form['d'])?>" style="width:90px;" onChange="CalculateTotal()" />
<?php helper_error('d');?> </td>
</tr>
<tr>
<td style="width:380px;text-align:left"><label for="e" id="deslist5" name="deslist5">Early Childhood Development <a href="javascript:alert('Children are healthy, loved, nurtured, safe and have access to quality childcare and early education. This includes programs that increase parenting skills, providing books to all children and providing developmental screening for 3 and 4 year olds.');">what is this?</a></label></td>
<td style="float:right"> $<input id="e" name="e" class="text" type="text" value="<?php safeEcho($form['e'])?>" style="width:90px;" onChange="CalculateTotal()" />
<?php helper_error('e');?> </td>
</tr></table>
Code: /*JAVASCRIPT FUNCTION*/
function showHide()
{
if (document.getElementById('checkmemoriam').checked)
{
if (document.getElementById('TotalC').value == "0.00")
{
document.getElementById('fieldset-in_honor').style.display=""; // this is for showing
document.getElementById('fieldset-in_registration').style.display="none";
}
else
{
var answer = confirm("You entered a total gift designation of $" + document.getElementById('TotalC').value + ". At this time, gifts made \"in honor of someone special\" are not eligible for the designation option. Clicking the OK button will delete all your designation(s). Do you want to continue?")
if (answer)
{
document.getElementById('TotalC').value="0.00";
document.getElementById('d').value="0";
document.getElementById('e').value="0";
document.getElementById('fieldset-in_honor').style.display=""; // this is for hiding
document.getElementById('fieldset-in_registration').style.display="none";
}
else
{
document.getElementById('checkmemoriam').checked=false;
}
}
}
else
{
if ((document.getElementById('donate_honor_name').value="") && (document.getElementById('donate_honor_acknowledgement').value=""))
{
document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding
document.getElementById('fieldset-in_registration').style.display="";
}
else
{
var answer = confirm("The field you are trying to close will delete all information you entered \"in honor of someone special\" but it will allow you to designate. Clicking the OK button will show the designation list. Do you still want to continue?")
if (answer)
{
document.getElementById('donate_honor_name').value = "";
document.getElementById('donate_honor_acknowledgement').value = "";
document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding
document.getElementById('fieldset-in_registration').style.display="";
}
else
{
document.getElementById('checkmemoriam').checked=false;
document.getElementById('fieldset-in_honor').style.display=""; // this is for showing
document.getElementById('fieldset-in_registration').style.display="none";
}
}
}
}
epic thread title! Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case. PHP Code: // save notes against company if ($_POST['a']=="Save Note") { if (addnote($_POST['notetitle'],$_POST['notebody'])) { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>"; } else { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>"; } } I want to then wait until the page load is complete and then do the following. PHP Code: document.getElementById('addevent').style.display='block'; The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown. Now my current fail attempt at doing it was this PHP Code: echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this. What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. Please see the design. I want that when user click on "Vyrobce" on top this change design chage according to the design. To see the code please visit this link: http:// jordanek.eu/aktual/index6 dot html Please help me to fix it. Thank you. N.B. I use boostrap collapse javascript function for this section: http:// getbootstrap dot com/javascript/#collapse On Mashable's site, in their post pages (not the home page), there's a floating widget to the left of the content that descends as you scroll down below the fold, but doesn't ascend above a certain point. I'd love to replicate this, but their site is so clogged with code that I'm having a really hard time parsing apart the (javascript) scripting that's controlling this. Thoughts or any help identifying the moving parts? |
|||||||