JavaScript - Next/previous Page Navigation Based On Filename_n.html

Hi. Please help. I have a credit card donation page and what I wanted to do is after they click the submit button and transaction is successfult I wanted to capture the donation amount they enter from the donation page and show it to the next page. I know that is possible but I just don't know how to do it. I am new in Javascript and still consider as a baby. Can someone please help? Thanks in advance.

Hi guys,

Having a little bit of trouble with a site I'm currently working on...

I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc.

Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:

http://www.mySiteOfFun.com/index.html#page=news.html;

This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example).

I can't add a #, because one is already being used to reference the anchor for the content div.


Has anyone run into a similar problem before? If so, how did you resolve it?

Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that?

Just not sure how to progress really, and any help would be greatly appreciated!

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

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

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,

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

Anyone know of a script that shows a different page based upon a users IP address?

Thanks

Hi,

I want my page to jump to a different page based on data collected in the form input fields. I can jump to a new page alright, using the following javascript:

1. javascript code in form_a.html
document.forms["form_A"].action = "page_x.html"l;
document.forms["form_A"].submit();

2. document.forms[0].action = "page_x.html"l;

3. window.locaton = "page_x.html";

4. window.location.href = "page_x.html";

The problem is, I can see the new page was jumped to, but immediately it return back to the page that trigger the jump.

Any idea? I need to finish the project before Christmas. Any help is greatly appreciated!

Jeff

Hello all!

I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more.

It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca).

My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time.

Here is my Javascript:

Code:

		

		var categoryLink=new Array(); 
		var counter;
		var link = "";
		categoryLink[0] = "";   
		categoryLink[1] = "";   
		categoryLink[2] = "";   
		counter = "0";

$(document).ready(function() {
        $(".atonal").live('click', function() { {
          alert("sometext");
          		if (categoryLink[0]=="") {
					categoryLink[0] = "atonal";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[0] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".tonal").live('click', function() {
          alert("sometext");
          		if (categoryLink[0]=="") {
					categoryLink[0] = "tonal";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[0] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});


$(document).ready(function() {
        $(".being").live('click', function() {
          alert("sometext");
         categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
          
          		if (categoryLink[1]=="") {
					categoryLink[1] = "being";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[1] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".doing").live('click', function() {
          alert("sometext");
          		if (categoryLink[1]=="") {
					categoryLink[1] = "doing";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[1] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});


$(document).ready(function() {
        $(".abstract").live('click', function() {
                 alert("sometext");
          		if (categoryLink[2]=="") {
					categoryLink[2] = "abstract";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[2] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".documentary").live('click', function() {
                 alert("sometext");
          		if (categoryLink[2]=="") {
					categoryLink[2] = "documentary";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[2] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

and the HTML in question:

Code:

<table>
<tr>
<td height="35" width="210" valign="top">choose your sound</td>
<td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td>
<td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your text</td>
<td width="165" valign="top"><a href="#" id="being">being words</a></td>
<td width="165" valign="top"><a href="#" id="doing">doing words</td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your image</td>
<td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td>
<td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td>
</tr>
</table>

I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great!

First off... I am new to javascript, and am learning while trying to add some cool extra features to an existing project.

An existing JSP is generating the HTML page and table. I have retro-fitted it so that it adds to each input field a 'trigger' to the onkeyup event.

The purpose of this trigger is check for the the cursor keys being pressed (UP, DOWN, LEFT, RIGHT) and then if it is a logically valid move, shift to the next cell in that direction.

Code:

<td class="inputField" rowspan="1" colspan="1" nowrap="nowrap">
<input name="ColorNumber0" id="" maxlength="" size="20" onchange="saveFieldObj(this)"  onkeyup="return doOnKeyUp(event, 18, 14, 'ColorNumber0')"  type="text">
</td>

Now, the function it calls, doOnKeyUp, for the most part is working fine... when the input field in the table cells are a textbox or textarea, my method can re-focus the fields appropriately.

HOWEVER, I am having a huge headache when the input field is a combo box. Basically, the value of the combo box is changed with the cursor keys (which is default combo box behaviour (I think)), instead of moving to the next editable cell in that chosen direction.

Problem #1:
My question: Is there a way to intercept/override the various onKey events or similar for the combo boxes. For the combo boxes, I want to continue to move between table cells UNLESS a do something specific, like press the spacebar to entire an update/modification mode for the current cell. Everything I have done so far does not prevent the combo box events from triggering.

Any ideas?


Problem #2:

Also, I tried a nasty hack to try and get it to work, by trying to switch the combo box's value back 1 spot (if it appeared to be needed) by changing the <combo box>.selected value. However, that change never appears to be taking hold, so it is staying at whatever the original selected value was. For this one, I am just curious as to the correct way to have javascript change the selected value in a combo box and make it "stick" and make it applied to the view/UI?

Code example:

Code:

		  var selectedIdx = (curObj.selectedIndex - 0);
		  	  if ( selectedIdx < curObj.length ) {
			   	  var newIdx = (selectedIdx-0) - 1;
			   	  curObj[selectedIdx].selected = "0";
		    	          curObj[newIdx].selected = "1";
		    	          curObj[newIdx].focus();
			   	  //curObj.selectedIndex = newIdx;
		  	  }

You can probably tell by the code that I had been trying various things to change the combo box's selection via javascript, but none has worked for me.


Any help on either topic would be greatly appreciated!

Hi there,

we have quite a big and successful project going on. We're a bunch of hardcore hockey gaming people and we're editing a game that has its entire interface written in Javascript. The whole game has been completely rebuilt... graphics, sounds, etc. Also all menus have been changed and reconstructed and we have managed to add some really unique features (previously unseen in sports games). I have some really wild ideas for the interface but we're at a dead end because we don't really have anyone who has advanced JS skills.

See our project here. You can see the completely rebuilt menu features in the thumbnails.

If this forum has someone who's interested in hockey simulator & gaming and has JS skills and would like to develop this brilliant game with us, I would like to get in touch with him. I can send him the full (unmodified base game) any time. The modifications have to be installed from the thread I linked.

Thanks in advance.

Best regards
Trent

What I would like to do is have a page with a dropdown menu, and depending on which option the user chooses from the dropdown, reload the page and display a particular iframe below the dropdown, based on the users choice. Also, a default iframe would load (the one connected to the default choice in the select box). Hopefully that makes sense. I was trying to make this work with PHP (without having the user having to click a submit button) but I couldn't find a way to make it happen.

Hi,

Please i am not getting clear understanding of a javascript code to redirect user to a different web page based on the day of the week.

Please i have search for many script and not getting clear understanding from their code.I have also try several code myself but nothing good has come from it.

Please can someone help me and write a descriptive code for me to understand better.I really plead you and your to help me...but i belief the Lord God will bless you for your time helping me.

looking forward to here from you.

Thank you.

Clement Osei

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.