- This topic has 5 replies, 2 voices, and was last updated 11 years ago by
.
-
Posts
-
first sorry for my english 🙁
Hi.. I have this problem in my app… I put this code in HTML Widget, and another screen (file) the same code HTML widget.. the first html widget work perfect when I go to next screen the code do not work…. why?
this is the code in HTML widget: slideshow
<html>
<head>
<style type=”text/css”>
#slideshow {
margin: 0px auto;
width: 320px;
height: 135px;
padding: 0px;
}#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style><script language=”JavaScript”>
$(“#slideshow > div:gt(0)”).hide();setInterval(function() {
$(‘#slideshow > div:first’)
.fadeOut(3000)
.next()
.fadeIn(3000)
.end()
.appendTo(‘#slideshow’);
}, 4000);</script>
</head>
<body>
<div id=”slideshow”>
<div>
<img src=”images/silver1.png” width=”320″ height=”135″>
</div>
<div>
<img src=”images/silver2.png” width=”320″ height=”135″>
</div>
<div>
<img src=”images/silver3.png” width=”320″ height=”135″>
</div>
</div></body></html>
please help…..
For a starter, try taking out the HTML, HEAD and Body tags, these are unneeded as Mobione Creates the html file and may cause problems.
Also, if you are using the exact same code you will have dual # tags that will cause problems. Make sure on the second page you are renaming them.
Hi CincyPlanet… thanks for reply…. I need ready help… can you give me an idea with example… Im not good on this code… I hope you can help me thanks 🙁
Un tested but should give you and idea of what I mean:
For page 1<style type="text/css"> #slideshow { margin: 0px auto; width: 320px; height: 135px; padding: 0px; } #slideshow > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } </style> <script language="JavaScript"> $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(3000) .next() .fadeIn(3000) .end() .appendTo('#slideshow'); }, 4000); </script> <div id="slideshow"> <div> <img src="images/silver1.png" width="320" height="135"> </div> <div> <img src="images/silver2.png" width="320" height="135"> </div> <div> <img src="images/silver3.png" width="320" height="135"> </div> </div>For page 2
<style type="text/css"> #slideshow2 { margin: 0px auto; width: 320px; height: 135px; padding: 0px; } #slideshow2 > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } </style> <script language="JavaScript"> $("#slideshow2 > div:gt(0)").hide(); setInterval(function() { $('#slideshow2 > div:first') .fadeOut(3000) .next() .fadeIn(3000) .end() .appendTo('#slideshow2'); }, 4000); </script> <div id="slideshow2"> <div> <img src="images/silver1.png" width="320" height="135"> </div> <div> <img src="images/silver2.png" width="320" height="135"> </div> <div> <img src="images/silver3.png" width="320" height="135"> </div> </div>
