Way to see if link is clicked in separate html file

**nellisbasson** · 10-04-2012, 07:55 AM

Good day folk. I am making a website and have tried absolutely everything to find a way to make this work, with no avail.

I use jquery to insert a separate HTML file in a div, when clicked, and then in that again a separate HTML file when a link is clicked on that file.
So I have my homepage > index.html. then photography.html and then india.html and one for each country.

www.anetnepgen.co.za/test.html is what i have done sofar.

ok, so my code.
in my index.html file I have a forward and back button.

Code:

<div class="leftColumn">
      		<a onClick="changeImageright()" id="changeRight" style="color:#FFF;"><img src="forward.png" /></a>
      		<a onClick="changeImageleft()" id="changeLeft" style="color:#FFF;"><img src="backward.png" /></a>
</div>

It is handled by:

Code:

<script type="text/javascript">
		var i=0;
		var indiaarray = new Array("photos/india/1.jpg","photos/india/2.jpg","photos/india/3.jpg","photos/india/4.jpg","photos/india/5.jpg","photos/india/6.jpg","photos/india/7.jpg","photos/india/8.jpg","photos/india/9.jpg","photos/india/10.jpg","photos/india/11.jpg","photos/india/12.jpg","photos/india/13.jpg","photos/india/14.jpg","photos/india/15.jpg","photos/india/16.jpg","photos/india/17.jpg","photos/india/18.jpg","photos/india/19.jpg","photos/india/20.jpg","photos/india/21.jpg","photos/india/22.jpg");
		var francearray = new Array("photos/france/1.jpg","photos/france/2.jpg");
		var russiaarray = new Array("photos/russia/1.jpg","photos/russia/2.jpg","photos/russia/3.jpg","photos/russia/4.jpg","photos/russia/5.jpg","photos/russia/6.jpg","photos/russia/7.jpg","photos/russia/8.jpg","photos/russia/9.jpg","photos/russia/10.jpg","photos/russia/11.jpg","photos/russia/12.jpg","photos/russia/13.jpg");
		
		
		function changeImageright()
		{	
			 if(i<21)
			  {
				  i++;
				  document.images["image"].src = indiaarray[i];
			  }
			  if(i==21)
			  {
				 i=0;
			  }	
		}
		function changeImageleft()
		{
			if(i>0)
		   	{
			   i--;
			   document.images["image"].src = indiaarray[i];
			}
			if(i==0)
			{
			   i=21;
			}
		}
</script>

my photography.html is basically just:

Code:

<div style="float:left; width: 90px;">
    <div class="navboxphoto">
        <ul class="navphoto">
            <li>
                  <div style="font-size:14px;"><a id="india" href="javascript:ajaxpage('india.html', 'photoarea');">India</a></div>
            </li>    
            <li>
                  <div style="font-size:14px;"><a id="france" href="javascript:ajaxpage('france.html', 'photoarea');">France</a></div>
            </li>
            <li>
                  <div style="font-size:14px;"><a id="russia" href="javascript:ajaxpage('russia.html', 'photoarea');">Russia</a></div>
            </li>
        </ul>
    </div>
</div>

at the moment, whether one clicks on anyone of the countries and click the forward or back button it goes through the indiaarray. I am looking for a way to test if the user clicks on india/france/Russia and then go through the applicable array.
I have tried booleans and everything, but do not know how to access a id from another html file or get the users choice...

Thank you very much in advance.

**jscheuer1** · 10-04-2012, 07:07 PM

Code:

 <script type="text/javascript">
		var i=0;
		var indiaarray = new Array("photos/india/1.jpg","photos/india/2.jpg","photos/india/3.jpg","photos/india/4.jpg","photos/india/5.jpg","photos/india/6.jpg","photos/india/7.jpg","photos/india/8.jpg","photos/india/9.jpg","photos/india/10.jpg","photos/india/11.jpg","photos/india/12.jpg","photos/india/13.jpg","photos/india/14.jpg","photos/india/15.jpg","photos/india/16.jpg","photos/india/17.jpg","photos/india/18.jpg","photos/india/19.jpg","photos/india/20.jpg","photos/india/21.jpg","photos/india/22.jpg");
		var francearray = new Array("photos/france/1.jpg","photos/france/2.jpg");
		var russiaarray = new Array("photos/russia/1.jpg","photos/russia/2.jpg","photos/russia/3.jpg","photos/russia/4.jpg","photos/russia/5.jpg","photos/russia/6.jpg","photos/russia/7.jpg","photos/russia/8.jpg","photos/russia/9.jpg","photos/russia/10.jpg","photos/russia/11.jpg","photos/russia/12.jpg","photos/russia/13.jpg");
		var curarray;
		
		
		function changeImageright()
		{	
			 if(i<curarray.length - 1)
			  {
				  i++;
				  document.images["image"].src = curarray[i];
			  }
			  if(i==curarray.length - 1)
			  {
				 i=0;
				document.images["image"].src = curarray[i];
			  }	
		}
		function changeImageleft()
		{
			if(i>0)
		   	{
			   i--;
			   document.images["image"].src = curarray[i];
			}
			if(i==0)
			{
			   i=curarray.length - 1;
			   document.images["image"].src = curarray[i];
			}
		}
</script>

Code:

<div style="float:left; width: 90px;">
    <div class="navboxphoto">
        <ul class="navphoto">
            <li>
                  <div style="font-size:14px;"><a id="india" href="javascript:ajaxpage('india.html', 'photoarea'); i = 0; curarray = indiaarray;">India</a></div>
            </li>    
            <li>
                  <div style="font-size:14px;"><a id="france" href="javascript:ajaxpage('france.html', 'photoarea'); i = 0; curarray = francearray;">France</a></div>
            </li>
            <li>
                  <div style="font-size:14px;"><a id="russia" href="javascript:ajaxpage('russia.html', 'photoarea'); i = 0; curarray = russiaarray;">Russia</a></div>
            </li>
        </ul>
    </div>
</div>

**nellisbasson** · 10-04-2012, 10:37 PM

Thank you very very much jscheuer1! Much appreciated!

**jscheuer1** · 10-04-2012, 11:35 PM

I think I made a mistake, try this instead for the links:

Code:

                  <div style="font-size:14px;"><a id="india" href="javascript:ajaxpage('india.html', 'photoarea');" onclick="i = 0; curarray = indiaarray; return true;">India</a></div>
            </li>    
            <li>
                  <div style="font-size:14px;"><a id="france" href="javascript:ajaxpage('france.html', 'photoarea');" onclick="i = 0; curarray = francearray; return true;">France</a></div>
            </li>
            <li>
                  <div style="font-size:14px;"><a id="russia" href="javascript:ajaxpage('russia.html', 'photoarea');" onclick="i = 0; curarray = russiaarray; return true;">Russia</a></div>

**nellisbasson** · 10-05-2012, 08:44 AM

Both of them seem to do exactly the same! thanx a million

**jscheuer1** · 10-05-2012, 09:07 AM

That depends upon the browser. Chrome, and I would assume Safari seems OK with the first method. All others do not.

And I think the math in the changeImage functions could be made better. They seem to skip a slide near the end/beginning sometimes.

And it would be a good idea to turn off those changeImage buttons when there is no gallery.

When I get more time, I'll look into all of that.

**nellisbasson** · 10-05-2012, 09:45 AM

haha, ja! trying to figure that out now... would be much appreciated.

**nellisbasson** · 01-10-2013, 02:18 PM

Good day. I'm still struggling with hiding and showing the next and previous button. If it's possible. could you please help me with that. would be much appreciated.

Thank you

**jscheuer1** · 01-10-2013, 05:47 PM

The back and forth math looks right now I think. There is a typo in the back button:

Code:

<a onClick="changeImageleft() j = 1;" id="changeLeft" style="color:#FFF;"><img src="backward.png" /></a>

That needs a semi colon:

Code:

<a onClick="changeImageleft(); j = 1;" id="changeLeft" style="color:#FFF;"><img src="backward.png" /></a>

I'm not sure what you're trying with the var j and the display properties of the buttons. Are you trying to get the back button to disappear when there are no more images in a backward direction and the forward button to disappear when there are no more forward images?

The way it is now, it just wraps from 0 to the end and from the end back to 0 again. That's fine I think.

**nellisbasson** · 01-11-2013, 08:22 AM

I used j to try and figure out a way of hiding the back and forward button on the home page. I want it to only display after one click on one of the photography links (where there are actually fotos to go back and forth on). Played a bit with the opacity. Is there a way of accessing and changing a parent attribute (opacity:0) from the photography.html page?