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
This works fine here:
- import QtQuick 1.0
- import QtWebKit 1.0
- WebView {
- width: 200; height: 30
- html: "<marquee>GOOG 544.59 (+95.05) | TWX 14.88 (+0.27) | IBM 124.96 (+1.88)</marquee>"
- }
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:
- import QtQuick 1.0
- import QtWebKit 1.0
- WebView {
- width: 200; height: 100
- html: "[removed]\n" +
- "var marqueecontent='<p>GOOG 544.59 (+95.05)</p><p>TWX 14.88 (+0.27)</p><p>IBM 124.96 (+1.88)</p>'\n" +
- "var cross_marquee, cross_marquee2\n" +
- "function populate(){\n" +
- "cross_marquee= document.getElementById(\"iemarquee\")\n" +
- "cross_marquee2= document.getElementById(\"iemarquee2\")\n" +
- "cross_marquee2[removed]=cross_marquee[removed]=marqueecontent\n" +
- "cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+105)+\"px\"\n" +
- "lefttime=setInterval(\"scrollmarquee()\",16)\n" +
- "}\n" +
- "window.onload=populate\n" +
- "function scrollmarquee(){\n" +
- "if (parseInt(cross_marquee.style.top)<-105)\n" +
- "cross_marquee.style.top=105+\"px\"\n" +
- "if (parseInt(cross_marquee2.style.top)<-105)\n" +
- "cross_marquee2.style.top=105+\"px\"\n" +
- "cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-1+\"px\"\n" +
- "cross_marquee.style.top=parseInt(cross_marquee.style.top)-1+\"px\"\n" +
- "}\n" +
- "with (document){\n" +
- "write('<div style=\"position:relative;width:'+200+';height:'+100+';overflow:hidden\">')\n" +
- "write('<div id=\"iemarquee\" style=\"position:absolute;top:0px;\"></div>')\n" +
- "write('<div id=\"iemarquee2\" style=\"position:absolute;\"></div>')\n" +
- "write('</div>')\n" +
- "}\n" +
- "[removed]"
- }
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.
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
You must log in to post a reply. Not a member yet? Register here!