Way to see if link is clicked in separate html file [Archive]

View Full Version : 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.

<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:

<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:

<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

nellisbasson

10-04-2012, 10:37 PM

Thank you very very much jscheuer1! Much appreciated! :D

jscheuer1

10-04-2012, 11:35 PM

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

<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:

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

That needs a semi colon:

<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?

jscheuer1

01-11-2013, 04:04 PM

OK, for that to work out, you need to have the next/prev images (changeRight and changeLeft) display: none; to begin with. And here (and similarly for France and Russia):

<a href="javascript:ajaxpage('india.html', 'photoarea');" onclick="i = 0; curarray = indiaarray; return true; ispressed(); j = 1;">India</a>

That needs to be (anything you do has to come before the return, and j must be set before running ispressed(), otherwise it will have its old value):

<a href="javascript:ajaxpage('india.html', 'photoarea');" onclick="i = 0; curarray = indiaarray; j = 1; ispressed(); return true;" style="display:none;">India</a>

You also need a way to hide them again when any of the main selecting links are clicked. This will do that:

<script type="text/javascript">
jQuery(function($){
$('.rightColumn a').click(function(){
j = 0;
ispressed();
});
});
</script>

Put that after the external tag for jQuery.