History option for back button a bit too light weight

I have a back button on the detail page that uses pretty basic history code to take the user back to the previous page, which worked well until i realised an issue.

Here is the code:


 function goBack()
   {
   window.history.back()
   }

As I said it worked fine until I put an image swap over script in and basically the page refreshes very quickly to swap the images over, and then takes over the history, so on click of back, the user stays on the same page.

http://devchecksafetyfirst.csf.dcmanaged.com/hotel.php?hotel_ID=246659

How do I get around this, where the history remembers the page it came from not the page after its refreshed.

Why do you refresh the page just to swap images?

Logic Ali is right, I think it would be better to take a look at your image swapping code and try to sort that issue.

I took a look at the page you linked to, and I think the problem is your JS isn’t preventing the link’s default action. You should really avoid inline JS like that anyway, and as you’re already loading jQuery on the page, it would be quick and easy to do something like this:

var mainImage = $("#imgHolder img")[0];
$("a.showImg").click(function(e){
    e.preventDefault();
    mainImage.src = $(this).children('img')[0].src;
});

then you wont need all those [b]onmouseup="return Swap(this,'imgHolder');"[/b] inline JS calls, and it should solve your back button problem.

Hi guys,

OK I will have to take a look in the morning now UK time, as I cant get access to the files from home, but if I could get your ideas working yes it will solve the problem.

I will have a go and post back if I get any problems.

Cheers

OK Im back in now and yes I have inline jscript as below:


function Swap(obj,id){
 var main=document.getElementById(id).getElementsByTagName('IMG')[0],msrc=main.src,obj=obj.getElementsByTagName('IMG')[0],tsrc=obj.src;
 main.src=tsrc;
 obj.src=msrc;
 return false;
}


<a href="#" class="showImg active" onmouseup="return Swap(this,'imgHolder');" >
<img class="HomeFeaturedImages4" src="<?=$f['Foto2_Hot']?>" alt="" border="0" height="65" width="130" />
</a>

<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
<img class="HomeFeaturedImages4" src="<?=$f['Foto3_Hot']?>" alt="" border="0" height="65" width="130" />
</a>

<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
<img class="HomeFeaturedImages4" src="<?=$f['Foto4_Hot']?>" alt="" border="0" height="65" width="130" />
</a>

<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
<img class="HomeFeaturedImages4" src="<?=$f['Foto4_Hot']?>" alt="" border="0" height="65" width="130" />
</a>

So do I take away the function I have and replace it with the function you have potsed, but then what goes with the link to call the function.

Thanks for the help by the way

I had a go and pasted the function in and took away the link around the image and nothing seems to happen, I’m just posting an update as I will keep on trying to figure it out.



<script>
var mainImage = $("#imgHolder img")[0];
$("a.showImg").click(function(e){
    e.preventDefault();
    mainImage.src = $(this).children('img')[0].src;
});
</script>

<div id="imgHolder">
<div id="hotel_Pic_Area_Middle">
<img class="HomeFeaturedImages3" src="<?=$f['Foto1_Hot']?>" alt="" border="0" height="285" width="430" />
</div>
</div>

<div id="hotel_Pic_Area_Right">
<div id="imgThumbs">
<div id="hotel_Pic_Area_Right_Pic_1">
<a href="#" class="showImg active">
<img class="HomeFeaturedImages4" src="<?=$f['Foto2_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_2">
<a href="#" class="showImg" >
<img class="HomeFeaturedImages4" src="<?=$f['Foto3_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_3">
<a href="#" class="showImg" >
<img class="HomeFeaturedImages4" src="<?=$f['Foto4_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_4">
<a href="#" class="showImg" >
<img class="HomeFeaturedImages4" src="<?=$f['Foto4_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>

Morning multichild,

Yeah that’s right, you want to remove the inline JS, so that your thumbnail markup should look similar to this:


<div id="hotel_Pic_Area_Right_Pic_3">
  <a href="#" class="showImg" >
    <img class="HomeFeaturedImages4" src="<?=$f['Foto4_Hot']?>" alt="" border="0" height="65" width="130" />
  </a>
</div>

The code should work OK, but there are some other JS errors on the page that are causing problems. If you open up your browser console (Ctrl+Shift+J on Chrome, Ctrl+Shift+K on Firefox, F12 on IE) you should see an error msg something like this: Uncaught TypeError: Object [object Object] has no method ‘live’ scripts.js:33

The .live() function is no longer used in the latest version of jQuery, so you need to update your scripts to use .on() instead. What you need to do is, in scripts.js, every time you see some code like this:

$(".filter-by").live({
    mouseenter: function(){
        $(".tab").addClass("rollover");
        $(".filter-by ul").slideToggle();
        $(this).css('border-color','#c1c0c0');
    }
});

Change it so it looks like this:

$(document).on('mouseenter', ".filter-by", function(){
    $(".tab").addClass("rollover");
    $(".filter-by ul").slideToggle();
    $(this).css('border-color','#c1c0c0');
});

Hi fretburner,

There where 2 of those to change, so they now look like htis:


$(document).on('mouseenter', ".filter-by", function(){
    $(".tab").addClass("rollover");
    $(".filter-by ul").slideToggle();
    $(this).css('border-color','#c1c0c0');
});

$(document).on('mouseleave', ".filter-by", function(){
    $(".tab").addClass("rollover");
    $(".filter-by ul").slideToggle();
    $(this).css('border-color','#c84927');
});

I saved and reloaded the page and the image swap didnt work, but then another error on this line below:


$("label").inFieldLabels();

Error: Object doesn’t support property or method ‘inFieldLabels’

From this function


$(document).ready(function(){
$("label").inFieldLabels();
$(".work-slides").fitVids();
});

Looks like you’re missing a jQuery plugin (probably this one?) I can’t see it included in your page anywhere.
I expect you’ll have a similar problem with .fitVids() too - if you don’t need the functionality of these two plugins, you could just comment out these two lines.

I see, ok have commented them out and all seems fine with everything else but the image swap problem.

The thumbs are still not swapping with the main image sorry fretburner.

Ah when i refreshed this error came up:

Line: 63
Error: DOM Exception: INVALID_CHARACTER_ERR (5)

And not sure what its referring too

Not sure if that is even related to that page im working on, it seems to be popping up now when i refresh the bbc website, or is it still asking me about the development page.

I’m not getting that error when viewing your site in Chrome… what browser/version are you using?

As for the image swap script, try changing it like this:


<script>
$(document).ready(function(){
    var mainImage = $("#imgHolder img")[0];
    $("a.showImg").click(function(e){
        e.preventDefault();
        mainImage.src = $(this).children('img')[0].src;
    });
});
</script>

Perfic, thanks fretburner, works really well, and then tried to history button and works too.

Thank you.

I’m using IE8 and it seems to pop up now for any error on any page, so not to worried now that my stuff is working, so how do I trun that off so it doesnt pop up on every error.

I’m guessing that error that I’m seeing is an IE8 broweser error, and nothing to do with the webpages.

I think :slight_smile:

MMM, I’m not sure i went to another page on my site and the error pop up again with:

Line: 63
Error: DOM Exception: INVALID_CHARACTER_ERR (5)

I’ll try it in another browser now