How to put image into my scrolling text js

Question

I'm using the below js plugin to do my text scrolling: https://github.com/aamirafridi/jQuery.Marquee

Basically we just call the below for text scrolling:

$('.marquee').marquee();

But I plan to put image into the scrolling text too. Like what it mentioned in the readme file, we need to put the $(window).load like below so that it can calculate the image width accurately:

$(window).load(function() { $('.marquee').marquee(); });

This function will load the marquee after the webpage load out.

But what if I only load the marquee after I received a command. For example:

receivedCom = function(){ $('.marquee').marquee({duration: 8000}); });

I have try putting $(window).load into the receivedCom function. It won't run. Any idea how?

Answer 1

I reworked the example a bit more. Since you'll know the number of images you're sending from the server, you can pass that number to the client as num_images. The client will dump the marquee content into the div with marquee class and then check to see if the images expected match the number found inside the marquee div. If not, the loading is still happening and we keep checking every half second. Once loading has finished, we clear the setInterval call and tell the marquee to begin.

As we discussed in chat, setTimeout is effective when starting the marquee code because it executes the code in a separate event loop, giving the plugin a chance to "see" the newly loaded dynamic images. If the following isn't working for you, try increasing the setTimeout delay slightly.

I've added a working example which doesn't use socket.io. In this pen, content is dynamically added to the marquee div, two images at a time. The marquee won't initialize until it sees eight images inside of it. Similar to the code below, setInterval is called to check if the expected number of images matches the actual number of images in the DOM.

HTML

<div class='marquee'></div>

Server JS

// Send the HTML along and the known number of images
// inside the string
socket.emit('your_event_name', { 
  marquee_content : 'html images and text go here',
  num_images      : 3
});

Client JS

var socket          = io.connect('http://localhost')
    images_expected = 0, // 'num_images' from socket.emit data
    interval;

function startMarquee() {
  $('.marquee').marquee({duration: 8000});  
}

function checkImagesLoaded() {
  if ($('.marquee img').length === images_expected) {
    clearInterval(interval);
    setTimeout(startMarquee); // fire in new event loop    
  }
}

function insertMarqueeContent(content) {
  $(".marquee").html(content);
}

function initMarquee() {
  interval = window.setInterval(checkImagesLoaded, 500);  
}

socket.on('your_event_name', function (data) {
  images_expected = data.num_images;
  insertMarqueeContent(data.marquee_content);
  initMarquee();
});

Answer 2

If i understand your question correctly, 'after I received a command' means you are looking for an event.

There are lots of techniques depending on the type of event you want to listen to.

For example, you might want to listen for a mouseclick :

$(document).ready(function(){
  $(window).click(function(event, target){
    $('.marquee').marquee();
  });
});

JSfiddle here : http://jsfiddle.net/knr2qzxu/ If you want to play around with it a bit :)

I strongly suggest you read more about the jQuery events here if you want to have a deeper understanding on what's going on here : https://api.jquery.com/category/events/

EDIT :

Ok I went through your question again, correct me if I don't get it correctly :

You somewhere in your js code have a function which is written as such : receivedCom = function(com) { }; If so just check if the window has been loaded before you call the marquee function :

var receivedCom = function(com) {
  if (document.readyState === "complete") {        
    $('.marquee').marquee(); 
  }
};

And there you go : The js checks if your window is displayed correctly, then triggers the marquee.

You can also use a setInterval to check every n miliseconds if the window has loaded, and then trigger the marquee, please read the doc if you need to do this : http://www.w3schools.com/jsref/met_win_setinterval.asp

Please tell me if it worked !