Jump to content
StudioWeb Forums

Details Balloon on marquee


Recommended Posts

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...

Link to post
Share on other sites

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..

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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?

Link to post
Share on other sites
  • 3 weeks later...

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...

Link to post
Share on other sites

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) {

             ....

       });

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 4 weeks later...

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?!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...