last day (15 days later) » 

7:37 AM
1
A: How to put image into my scrolling text js

Andrew HoffmanThe marquee start code has been moved into a function and is triggered only when a socket.io event was emitted and all images have loaded. HTML <div class='marquee'><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" height="100" alt="">Lorem ipsum dolor sit amet, consectetur adipis...

 
Let me explain, the author of the js mentioned that if I put image into his plugin, I will have width inaccuracy issues. He mentioned that it can be solve by using the $(window).load. But if I put this $(window).load into a function, it can't work.
 
@Coolguy I modified the above code a little so that it more closely matches what you're asking.
 
I'm not using a button to trigger. Actually I'm using socket.io. When I received a command from the server using socket.io, I trigger the scrolling image to run.
 
I've modified the above code to (hopefully) work with socket.io.
 
I'm not only loading one image. I have multiple image. How do I change the #myImage id?
 
7:37 AM
Edited the code to call the marquee code after all images have been loaded.
 
But you still only have one image. How do we do if we have 5 image? Can apply on this $('img').on('load', startMarquee); too?
I have to mentioned that it is from the server command that tell me what image to put into the scrolling image.
 
@Coolguy Yes, this will call the startMarquee function after all images have loaded. I just happened to use one image in the example code, but any number of images should work.
 
I have to mentioned that it is from the server command that tell me what image to put into the scrolling image. So the 'your_event_name' is actually the server sending me the image name and location. After getting this info, I will put it into the scrolling image.
 
Hi, I thought we could move this to chat.
 
ok
so, actually the command from server is actually telling me what image to put
 
7:38 AM
I don't have socket.io set up on my machine, but I believe what I have should work for you with a little work.
I think you can pass that info in the emit line?
Like, socket.emit('your_event_name', { src: 'http://blah.com/some_img.jpg' } );
Even using $('img').on('load', startMarquee) ?
 
yes... that's what I do
But I face image width inaccuracy problem
the scrolling plugin can't calculate the width correctly
 
Even using $('img').on('load', startMarquee), the width is still messed up ?
That ensures that the image is actually loaded.
 
This is what I have:
  socket.on('res-displaySetting', function(display){
      console.log(display);
      $('img').on('load',  function() {
          $('.marquee').html("<img src='" + myqiocon_serverIP + "/img/" + display.runningText[0].image + "'>" + display.runningText[0].message + "    " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[1].image + "'>" + display.runningText[1].message + "    " +  "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[2].image + "'>" + display.runningText[2].message + "    " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[3].ima
I try this code but won't run
 
I see the problem
You're dynamically adding the image after the $('img').on('load') check
 
Actually I have image and message concurrently
 
7:44 AM
so the code thinks all images have loaded, even though you sneak one in after the load
 
yup... that y I say the server will tell me what to put into the scrolling image
 
what i would do is initially hide this marquee html when you inject it into the page
 
This is my original code
socket.on('res-displaySetting', function(display){
console.log(display);
$('.marquee').html("<img src='" + myqiocon_serverIP + "/img/" + display.runningText[0].image + "'>" + display.runningText[0].message + " " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[1].image + "'>" + display.runningText[1].message + " " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[2].image + "'>" + display.runningText[2].message + " " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[3].image + "'>" + display.runningText[3].message + " " + "<im
without the img load that you teach me
 
one thing you could try is to run the marquee code in a different event loop. the way you do this is by using setTimeout, with no time specified
so, like
setTimeout(function() {
startMarquee();
});
 
why do we need to set timeout?
 
7:48 AM
What I'm hoping will happen is that the browser will have a chance to calculate the widths of the new images before the marquee code messes things up
But I would add the code to the page first
and then, in a setTimeout, actually start the marquee
 
set timeout how long?
 
don't specify a time
it will default to the fastest it can go
 
you mean like this?
socket.on('res-displaySetting', function(display){
console.log(display);
$('.marquee').html("<img src='" + myqiocon_serverIP + "/img/" + display.runningText[0].image + "'>" + display.runningText[0].message + " " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[1].image + "'>" + display.runningText[1].message + " " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[2].image + "'>" + display.runningText[2].message + " " + "<img src='" + myqiocon_serverIP + "/img/" + display.runningText[3].image + "'>" + display.runningText[3].message + " " + "<img src='" + my
I set a timeout when I call the marquee function
 
I would try that
The idea is that you want the marquee function to happen in a new event loop
and setTimeout does that
I'm hoping that marquee will know about the image dimensions and handle the widths
 
still same problem
 
7:55 AM
now, inside the setTimeout
wrap that call in the $('img').on('load', function() {

});
$('img').on('load', function() {
setTimeout(function() { $('.marquee').marquee({duration: 8000}); });
});
 
ok i try
 
oops
I meant
setTimeout(function() {
$('img').on('load', function() {
$('.marquee').marquee({duration: 8000});
});
});
 
ok i try
it only scroll once
i mean all the image and text only scroll once
 
but is the image width correct?
 
can't say cos it only scroll once
but do you know what problem I face
?
 
8:02 AM
I'm looking at the documentation for the plugin
 
my problem is that the first scrolling have not finish (left around 10 character to be finish), the second will start already.
So, if it only scroll once, I cannot say the problem is solve already or not
If I put all text to scroll, it will not have this problem
So, I think the image width mess this up
 
Maybe try this option: duplicated: true
 
Image have more width than a character of the text. So, I think the plugin assume that the image width is the character width, but actually the width had been increased
 
ah
I'm not sure i can help you further without sitting there with you. it's tricky
I tried!
sorry, man
I think at this point you could create a GitHub issue for the plugin author to address
It's likely something that the plugin author will need to fix in the element calculation of marquee
 
can u intro me some other plugin which don't have this issue
?
I already written into his github, but seems like no response
 
8:11 AM
I don't know of a plugin at the moment. I would create a new stack overflow question and ask people for plugin ideas based on this exact issue
I think we're doing everything correctly, but the plugin is a little limiited
limited
I wish I could help you further
Good luck. it's late and I need to go to bed :)
one last thing
In your CSS
do you have a width and overflow: hidden set on your marquee?
like
.marquee {
width: 300px;
overflow: hidden;
border:1px solid #ccc;
}
it seems really important to have overflow: hidden set in the CSS
 
yes
my overflow is hidden
 
yeah, I'm looking at the open issues on his github. there are many open issues
I would ask the community in a new question for a different plugin idea
 
I have ask him
one of the issue is mine
but seems like maybe he doesn't work in his plugin anymore
the last issue I see is last year
 
I might have one more idea
one sec
 
ok tq
Is it that the plugin will only count the image width after the image had been loaded out?
means that it only will count after I fire $('.marquee').marquee({duration: 8000});, right?
but seems like when I fire $('.marquee').marquee({duration: 8000});, the image had not loaded out, then I get an inaccurate width
 
8:30 AM
it may be a problem with how the plugin actually calculates the width
it may not even be a timing thing
not sure
I'm thinking of a mostly css solution. this is obviously just a start
 
I'm getting headache if I study his plugin
huh?
The scroll runs backward
 
I adjusted it. I had an idea to maybe use an event to help us
$("something").on("animationEnd", function() { })
I'm wondering if we could make it look more like a marquee with some positioning work after the animation ended
 
u mean create a marquee ourselves?
create a marquee plugin ourselves?
 
ha, yeah
check it out now. i just added linear easing, so it seems more like a marquee in the way it moves
 
yes.. it seems like a scrolling now
but the subsequence scrolling looks like it appeared out instead of scrolling from the back
 
8:44 AM
how about now?
 
it looks better... but can put in a image?
 
let's try
 
I have put an image...
seems like your one still have the image width inaccuracy problem
 
Yeah, it's not bad for 10 minutes of playing around :)
There would have to be a JS function that recalculated the contents of the div
and then began the CSS transform
 
9:04 AM
I'll try to make this work better and post it in that pen
but for now it's time for bed
 
9:16 AM
ok. Thanks for your help
waiting for your answer tomorrow
 
9:36 AM
this looks pretty good, too. haven't seen it with images yet
'night
 
9:52 AM
I have tried your timeout method just now
Now I added a specific time
setTimeout("$('.marquee').marquee({duration: 8000});", 1000);
it solve the problem
just that if the time for image loading is more than 1000, then there will be problem
I only can assume all image load is less than 1000
but seems like sufficient for my usage
:)
 
 
4 hours later…
1:57 PM
@AndrewHoffman Congratulations for the 30000000th message! :D
 
 
3 hours later…
4:28 PM
@PraveenKumar :)
@Coolguy

First idea: check to see if all images were loaded after the setTimeout. If not, you could wait another half second and try again

Second idea: similar to the first idea, but use setInterval instead of setTimeout. if all images are loaded, clear the setInterval
 

  last day (15 days later) »