SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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.dcman...otel_ID=246659

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

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you refresh the page just to swap images?
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    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:
    Code JavaScript:
    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 onmouseup="return Swap(this,'imgHolder');" inline JS calls, and it should solve your back button problem.

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK Im back in now and yes I have inline jscript as below:

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

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

  7. #7
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Morning multichild,

    Yeah that's right, you want to remove the inline JS, so that your thumbnail markup should look similar to this:
    HTML Code:
    <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:
    Code JavaScript:
    $(".filter-by").live({
        mouseenter: function(){
            $(".tab").addClass("rollover");
            $(".filter-by ul").slideToggle();
            $(this).css('border-color','#c1c0c0');
        }
    });
    Change it so it looks like this:
    Code JavaScript:
    $(document).on('mouseenter', ".filter-by", function(){
        $(".tab").addClass("rollover");
        $(".filter-by ul").slideToggle();
        $(this).css('border-color','#c1c0c0');
    });

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fretburner,

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

    Code:
    $(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:

    Code:
    $("label").inFieldLabels();
    Error: Object doesn't support property or method 'inFieldLabels'



    From this function

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

  9. #9
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by multichild View Post
    Error: Object doesn't support property or method 'inFieldLabels'

    From this function

    Code:
    $(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.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,257
    Mentioned
    32 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by multichild View Post
    Ah when i refreshed this error came up:

    Line: 63
    Error: DOM Exception: INVALID_CHARACTER_ERR (5)
    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:
    HTML Code:
    <script>
    $(document).ready(function(){
        var mainImage = $("#imgHolder img")[0];
        $("a.showImg").click(function(e){
            e.preventDefault();
            mainImage.src = $(this).children('img')[0].src;
        });
    });
    </script>

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •