December 6, 2010

imxiangpeng imxiangpeng
Lab Rat
2 posts

How to Achieve Scrolling marquee using qml

 

I want to achieve the effect whick liking scroll marquee in webpage(html), does someone have some suggest?

7 replies

December 6, 2010

xsacha xsacha
Lab Rat
502 posts

This works fine here:

  1. import QtQuick 1.0
  2. import QtWebKit 1.0
  3.  
  4. WebView {
  5.     width: 200; height: 30
  6.     html: "<marquee>GOOG 544.59 (+95.05) | TWX 14.88 (+0.27) | IBM 124.96 (+1.88)</marquee>"
  7. }

Edit:

You can achieve the same thing in JavaScript, if you do not want to use marquee. JavaScript allows a little more manipulation, such as this:

  1. import QtQuick 1.0
  2. import QtWebKit 1.0
  3.  
  4. WebView {
  5.     width: 200; height: 100
  6.     html: "[removed]\n" +
  7.           "var marqueecontent='<p>GOOG 544.59 (+95.05)</p><p>TWX 14.88 (+0.27)</p><p>IBM 124.96 (+1.88)</p>'\n" +
  8.           "var cross_marquee, cross_marquee2\n" +
  9.  
  10.           "function populate(){\n" +
  11.               "cross_marquee= document.getElementById(\"iemarquee\")\n" +
  12.               "cross_marquee2= document.getElementById(\"iemarquee2\")\n" +
  13.               "cross_marquee2[removed]=cross_marquee[removed]=marqueecontent\n" +
  14.               "cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+105)+\"px\"\n" +
  15.               "lefttime=setInterval(\"scrollmarquee()\",16)\n" +
  16.           "}\n" +
  17.           "window.onload=populate\n" +
  18.  
  19.           "function scrollmarquee(){\n" +
  20.               "if (parseInt(cross_marquee.style.top)<-105)\n" +
  21.               "cross_marquee.style.top=105+\"px\"\n" +
  22.               "if (parseInt(cross_marquee2.style.top)<-105)\n" +
  23.               "cross_marquee2.style.top=105+\"px\"\n" +
  24.               "cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-1+\"px\"\n" +
  25.               "cross_marquee.style.top=parseInt(cross_marquee.style.top)-1+\"px\"\n" +
  26.           "}\n" +
  27.  
  28.           "with (document){\n" +
  29.               "write('<div style=\"position:relative;width:'+200+';height:'+100+';overflow:hidden\">')\n" +
  30.               "write('<div id=\"iemarquee\"  style=\"position:absolute;top:0px;\"></div>')\n" +
  31.               "write('<div id=\"iemarquee2\" style=\"position:absolute;\"></div>')\n" +
  32.               "write('</div>')\n" +
  33.           "}\n" +
  34.           "[removed]"
  35. }

The [removed] are script type “javascript”

Edit: Thread is closed, but for future readers, I’ll mention in reply to blam:
You can use QML objects within the HTML code if you want.

 Signature 

- Sacha

December 6, 2010

blam blam
Lab Rat
58 posts

Do you mean you want to implement a scrolling marquee within a web page in QML, or do you want to take the scrolling marquee effect from html and apply it in QML?

December 6, 2010

fcrochik fcrochik
Lab Rat
447 posts

Thread is closed? What does it mean?

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

December 6, 2010

Deleted Member # 4a2 Deleted Member # 4a2
Ant Farmer
1274 posts
fcrochik wrote:
Thread is closed? What does it mean?

When a thread is closed, you cannot post new replies to it. this seems still open :)

December 6, 2010

fcrochik fcrochik
Lab Rat
447 posts

That is what I imagined… Don’t think I came across any yet… Just added a suggestion to allow to use for “closed” or “open” as a search criteria and also display status (open or closed) on search results.

 Signature 

Certified Specialist & Qt Ambassador Maemo, Meego, Symbian, Playbook, RaspberryPi, Desktop… Qt everywhere!

December 7, 2010

xsacha xsacha
Lab Rat
502 posts

Uh, this was definitely closed! I couldn’t reply. Don’t know why it was closed as I was expecting a reply by OP.

But, as blam says, did you want the marquee within a webpage (like just scrolling text object) or did you want to use marquee for QML objects.

Both are possible using the WebView. You can define QML objects in the WebView as a plugin.
See this example: http://qt.gitorious.org/qt/kinetic/blobs/43199af242918b3c77bb47bdcc3ec60f8236b0d3/examples/declarative/webview/qml-in-html.qml

 Signature 

- Sacha

December 7, 2010

Deleted Member # 4a2 Deleted Member # 4a2
Ant Farmer
1274 posts

xsacha wrote:
Uh, this was definitely closed! I couldn’t reply. Don’t know why it was closed as I was expecting a reply by OP.

xsacha maybe the page hadn’t loaded fully or the script failed. I’ve seen it happen sometimes but very rare. a refresh should usually solve this issue

 
  ‹‹ Calling a C++ function inside a property subclass from QML      Problems Compiling QML app in Visual Studio ››

You must log in to post a reply. Not a member yet? Register here!