1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with an interactive slideshow

Discussion in 'jQuery' started by supercain, Dec 19, 2013.

  1. #1
    Hi,

    i made an interactive slideshow with the help of other users here that allows you to slide the current image and another user on their own end can see the changes in real time. The page kinda works its just that it gets stuck after a while. I use jquery to have the page continuously read a value stored in an external txt file which contains the ID of the current image so it can detect when it changes and slide to that image. However seems like this method overloads the page and thats what makes it get stuck.

    This is my code as of now:

    Code (Text):
    1. (function(d) {
    2.     var get = ajaxNew(function() {
    3.         if ((this.readyState == 4) && (!get.ignore)) {
    4.             var id = 'visual' + get.responseText;
    5.             if (
    6.                 (this.status == 200) &&
    7.                 (current.id != id)
    8.             ) setCurrent(d.getElementById(id));
    9.             this.nextEvent = setTimeout(request, 1000);
    10.         }
    11.     });
    12.    
    13.     if (get !== false) {
    14.         var
    15.             t,
    16.             fader = d.getElementById('fader'),
    17.             botones = d.getElementById('botones'),
    18.             divstatus = d.getElementById('status'),
    19.             tags = fader.querySelectorAll('img, iframe'),
    20.             iList = tags,
    21.             iListMax = iList.length - 1,
    22.             set = ajaxNew(function() {
    23.                 if (this.readyState == 4) {
    24.                     textReplace(status, current.id);
    25.                     get.ignore = false;
    26.                     get.nextEvent = setTimeout(request, 1000);
    27.                 }
    28.             }),
    29.             current = iList[0],
    30.             status = d.createElement('div'),
    31.             previous = false;
    32.            
    33.         function prevent(e) {
    34.             if (e.preventDefault) e.preventDefault();
    35.             e.returnValue = false;
    36.         }
    37.  
    38.         function setCurrent(e) {
    39.             if (current != e) {
    40.                 get.ignore = true;
    41.                 clearTimeout(get.nextEvent);
    42.                 if (previous) classRemove(previous, 'previous');
    43.                 if (current) {
    44.                     classSwap(current, 'current', 'previous');
    45.                     previous = current;
    46.                 }
    47.                 current = e;
    48.                 classAdd(e, 'current');
    49.                 set.open('GET', 'imageId.txt', true);
    50.                 set.send();
    51.             }
    52.                 var isJPG = $(current).attr('src').split('.').pop();
    53.     if($('#fader').hasClass('scriptedFader') && isJPG == 'JPG') {
    54.       classSwap(fader, 'scriptedFader', 'visorclose');
    55.     } else if($('#fader').hasClass('visorclose') && isJPG != 'JPG') {
    56.       classSwap(fader, 'visorclose', 'scriptedFader');
    57.     }
    58.         }
    59.            
    60.         classAdd(fader,'visorclose');
    61.    
    62.         function request() {
    63.             get.open('GET','imageId.txt', true);
    64.             get.send();
    65.             this.ignore = false;
    66.         }
    67.    
    68.         request();
    69.        
    70.         divstatus.appendChild(status);
    71.        
    72.     } // might want to add an else handler for no AJAX here
    73. })(document);
    The html code is really simple, only the images on the gallery:

    HTML:
    1. <img id="visual1" src="01.jpg">
    2. <img id="visual2" src="02.jpg">
    3.  
    4. and so on
    Also 2 buttons, one for going to the next image and other for the previous. They only thing they do is to update the value in the text file with the current one. They work fine so no need to put here.

    I would like to know if there is a more effective alternative for this. Something like the way Facebook and google notifies you of new messages without having to reload the page.

    Thank you.
    supercain, Dec 19, 2013 IP
  2. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    Hello? Any help please?
    supercain, Dec 21, 2013 IP
  3. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #3
    HuggyStudios, Dec 22, 2013 IP
  4. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    The text file only contains a number: 1, 2 or whatever the image ID is supposed to be. I do it like this because both users are supposed to see the changes simultaneously on their own ends. For example, if user 1 press the button NEXT, he sees the images slide to the next one and user 2 sees it too without moving a finger.
    supercain, Dec 22, 2013 IP
  5. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Hello?? What about some help? Please?
    supercain, Dec 28, 2013 IP
  6. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #6
    I think the obvious points are that you aren't using jQuery throughout your script. Try and incorporate all of jQuery's functionality (they take care of cross browser performance issues).
    HuggyStudios, Dec 28, 2013 IP
  7. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    What you mean im not using jquery? Could you please give me a acmore concrete answer?
    supercain, Dec 28, 2013 IP
  8. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #8
    It needs to be accessed by multiple users so if one user changes it, everyone sees it. Localstorage can't do that at ALL.

    As I told you SEVERAL times when I gave you that original code, it doesn't use jQuery, it's just flat javascript because it was less code, less effort, and less problems without getting the steaming train wreck of asshattery known as jQuery involved.

    You've gone and mixed the idiotic halfwit bull known as jQuery into it, and that's why it doesn't work right anymore! Generally speaking how I write scripting and what jQuery does are NOT compatible -- in fact they tend to get along like sodium and water.
    deathshadow, Dec 30, 2013 IP
  9. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    Well man... to be honest, it never worked quite right and i told you that many times too. With your code the current image keeps jumping back to the previous one all the time. With my modifications i dont have this problem anymore and it works quite fine mostly but it still doesnt work as good as i need because it gets stuck from time to time. It only happens when i have loaded more than 50 images or so.

    Anyway, if somebody else can provide really helpful answers instead of insults i will appreciate it.
    supercain, Dec 30, 2013 IP
  10. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #10
    Nobody willing to help?
    supercain, Jan 17, 2014 IP
  11. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #11
    I'm not sure why your problem but it could be related to the image being stored in the browser's memory?
    HuggyStudios, Jan 18, 2014 IP
  12. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #12
    You mean there are too many images and thats why the browser gets stuck?
    supercain, Jan 18, 2014 IP
  13. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #13
    It could be that. I'm just guessing without looking at the network in my developer tools. Try removing old images from the browser and see if that improves things.
    HuggyStudios, Jan 19, 2014 IP
  14. supercain

    supercain Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #14
    Hi,

    i think there is a problem with the code itself because the page gets stuck on both sides. Did you see the code i posted? What do you think?
    supercain, Jan 19, 2014 IP