Details Balloon on marquee

[TheEagle]

Hi

Is it possible to make a details balloon on a marquee?

I tried to use z-index on a marquee but the marquee stops working.I'm using JQuery in addition to CSS and HTML and an enhanced marquee using JQuery which I found on the web.

But if it is impossible using CSS z-index on an ordinal html marquee then it will be impossible to do it using JQuery right?.

Please any idea could be helpfull...

[newseed]

I don't see why not. We would have to look at the code you have so far. Or else provide a url of a test page that has your marquee and the jquery script that you are using.

[TheEagle]

I don't see why not. We would have to look at the code you have so far. Or else provide a url of a test page that has your marquee and the jquery script that you are using.

This is the JQuery marquee I'm using:

http://remysharp.com/demo/marquee.html

I want a detail balloon (Div with simple text inside) to appear when the mouse hover on the image or come over it.But that Div should be on another layer using z-index.I think it is impossible because z-index require absolute position which cause any marquee to stop(whatever ordinal or enhanced like the one above).You can try it on your own way but if you did please tell me what are the results you have?

By the way the marquee above is very cool it is not a waste of time..trust me..

[newseed]

You could try setting the content (in this case the <p> tag) to position: static and then add your link tag to whatever portion of the text where it will show a popup. Apply a span within that link tag, set the span tag to display: none. Now set your hover to display the span tag using display:block, position: absolute and then position it where you want it.

 

I haven't tested this but maybe this will point you to the right direction.

[TheEagle]

You could try setting the content (in this case the <p> tag) to position: static and then add your link tag to whatever portion of the text where it will show a popup. Apply a span within that link tag, set the span tag to display: none. Now set your hover to display the span tag using display:block, position: absolute and then position it where you want it.

 

I haven't tested this but maybe this will point you to the right direction.

Sound interesting especially having the position static doesn't stop the marquee.

I will try it and tell you about the results in my next reply as soon as I can.

[TheEagle]

You could try setting the content (in this case the <p> tag) to position: static and then add your link tag to whatever portion of the text where it will show a popup. Apply a span within that link tag, set the span tag to display: none. Now set your hover to display the span tag using display:block, position: absolute and then position it where you want it.

 

I haven't tested this but maybe this will point you to the right direction.

Sorry for being late...

Yes your static position idea solved the main problem but I'm facing another problem.In FireFox the marquee is restarting after the last picture ( I'm using images instead of Text statements ).

instead of moving in a continuous loop.I know that the marquee was perfect only with IE not FireFox but I don't know if this is the case for the

JQuery marquee I mentioned above? Is this a bug in FireFox against the old marquee?Is there any fix to it?

[newseed]

Can you upload what you have so far. It hard to tell what's going on as to why the browsers give you different results.

[TheEagle]

Can you upload what you have so far. It hard to tell what's going on as to why the browsers give you different results.

 

Sorry for being late.I didn't upload my code directly because it was mixed with alot of Ajax+Database code.However after alot of testing I found that as soon as I use Ajax call back methods I get the FireFox loop restart problem even with a simple text and a simple webservice method as following:

 

<div style="width:400px;">

<marquee direction="left" style="margin-right:20%" scrollamount="4" width="90%" loop="true"></marquee>

</div>

<script type="text/javascript">

var ma = $('marquee');

$.ajax({

type: "POST",

url: "NSOnlineService.asmx/HelloWorld",

data:"{}",

contentType: "application/json; charset=utf-8",

dataType: "json", //for Firefox change this to "jsonp"

success: function() {

$('<span> bla bla bla bla bla bla bla bla bla</span>').appendTo(ma);

}

});

</script>

 

 

You can try the code above in FireFox and please tell me do you see the same problem I see on my machine?

If this is true then the JQuery marquee is useless in my opinion because most of developers make a gallery ot a news text marquee with Ajax...

[Webkiller]

Sorry for being late.I didn't upload my code directly because it was mixed with alot of Ajax+Database code.However after alot of testing I found that as soon as I use Ajax call back methods I get the FireFox loop restart problem even with a simple text and a simple webservice method as following:

 

<div style="width:400px;">

<marquee direction="left" style="margin-right:20%" scrollamount="4" width="90%" loop="true"></marquee>

</div>

<script type="text/javascript">

var ma = $('marquee');

$.ajax({

type: "POST",

url: "NSOnlineService.asmx/HelloWorld",

data:"{}",

contentType: "application/json; charset=utf-8",

dataType: "json", //for Firefox change this to "jsonp"

success: function() {

$('<span> bla bla bla bla bla bla bla bla bla</span>').appendTo(ma);

}

});

</script>

 

 

You can try the code above in FireFox and please tell me do you see the same problem I see on my machine?

If this is true then the JQuery marquee is useless in my opinion because most of developers make a gallery ot a news text marquee with Ajax...

 

 

 

Implement a new event, called "looped" and modify the plugin to generate this event every time it reaches the end. This way, you could let it loop continuously, and still have a mechanism to add the new content in. Add this one line at line 53.

 

 if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {

                       $marqueeRedux.trigger('looped'); // Ejn mod for looping

                       if (marqueeState.behavior == 'alternate') {
                           marqueeState.dir *= -1; // flip
                       }

 

Then bind add the bind method:

 

$('div.mymarquee').bind('looped', function(event) {

             ....

       });

[TheEagle]

Implement a new event, called "looped" and modify the plugin to generate this event every time it reaches the end. This way, you could let it loop continuously, and still have a mechanism to add the new content in. Add this one line at line 53.

 

 if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {

                       $marqueeRedux.trigger('looped'); // Ejn mod for looping

                       if (marqueeState.behavior == 'alternate') {
                           marqueeState.dir *= -1; // flip
                       }

 

Then bind add the bind method:

 

$('div.mymarquee').bind('looped', function(event) {

             ....

       });

 

Thank you for your respond.Your code does solve the restart problem perfectly.But when I use it in my project code the bind line was not executed except if I add an alert after it or add a break point using Firebug.

Then I used the JQuery delegate function which solved the problem but after editing some code it was ignored just like the bind function.

I returned the old code but that was no use.I removed most of the code because I thought an error could cause the bind or delegate line to be ignored but this was no use too...

I'm not the first one who face this problem as you can see in the following post:

 

http://forum.jquery.com/topic/event-binding-to-buttons-in-firefox-requires-an-alert-box#14737000001408094

 

Your code is great but I hope that you can help me in this one too

[TheEagle]

Implement a new event, called "looped" and modify the plugin to generate this event every time it reaches the end. This way, you could let it loop continuously, and still have a mechanism to add the new content in. Add this one line at line 53.

 

 if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {

                       $marqueeRedux.trigger('looped'); // Ejn mod for looping

                       if (marqueeState.behavior == 'alternate') {
                           marqueeState.dir *= -1; // flip
                       }

 

Then bind add the bind method:

 

$('div.mymarquee').bind('looped', function(event) {

             ....

       });

 

I think the jquery marquee is not that much stable so I'm looking in other solutions.I'm starting a new thread because what I'm asking about is different.However thank you guys for your usefull informations and I learned alot from you two.By the way I don't see any mark as answer button so you get more reputation?!