SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Jul 12, 2012, 22:24 #1
- Join Date
- Jul 2012
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Displaying images on a timed basis on a web page
I used the code shown below to display images on a timed basis in the same place on my web page.
It waorked fine before, but has since started to display the images one after the other. This messes up
the rest of the web page.
Why are images no longer displayed as a slideshow?
Please help.
<t:seq repeatCount="indefinite">
<t:par>
<img class="time" begin="0" dur="5" timeAction="display" src="lotus01.jpg"
/>
<p align="center">
</t:par>
<t:par>
<img class="time" dur="5" timeAction="display" src="lotus02.jpg"
/>
<p align="center">
</t:par>Last edited by Mittineague; Jul 14, 2012 at 16:24. Reason: OP forgot to turn off smilies
-
Jul 12, 2012, 23:35 #2
- Join Date
- Jan 2012
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This is not an asp issue, but ..
check if you have anything like :
<?IMPORT namespace="t" implementation="#default#time2">
in your page. If not, you should.
-
Jul 12, 2012, 23:51 #3
- Join Date
- Jul 2012
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jul 12, 2012, 23:56 #4
- Join Date
- Jan 2012
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's it .
http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx
it says :
This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.
-
Jul 13, 2012, 00:03 #5
- Join Date
- Jul 2012
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks! Any idea how I can get it to work with Explorer 9?
I appreciate your help sir!
Now, how can I get Explorer 9 to display images as I want them to be? Any ideas?
Most people will have upgraded their Explorer, so I need to find a solution...
-
Jul 13, 2012, 00:08 #6
- Join Date
- Jan 2012
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry, no idea.
but using jquery would not be too complicated...
check this:
http://snook.ca/technical/fade/fade.html
there are many other jquery eamples on the web.
-
Jul 22, 2012, 12:20 #7
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
There are numerous ways to do this, but IMO the best is not to use images, but elements with images in. This way they become more versatile in the future. And also, you'll need javascript to change the images. For that, you'll need a noscript alternative.
so....
Code:<html> <head> <style type="text/css"> *{border:0;padding:0;margin:0;} ul,li{display:block;position:relative;width:448px;height:336px;float:left;} li{background:gold;} ul.tabs{height:32px;} ul.tabs li{width:32px;height:32px;float:left;} .container1{width:448px;height:336px;float:left;overflow:hidden;font-size:336px;} .container1 ul{width:2250px;-webkit-transition:left 1s;} .container2{display:block;width:224px;height:168px;float:left;overflow:hidden;font-size:168px;} .container2 ul{display:block;width:224px;height:1008px;-webkit-transition:top 1s;} .container2 li{width:224px;height:168px;clear:both;} </style> <script type="text/javascript"> function dgebi(s){ return document.getElementById(s); } function scrollAnchor(obj){ if(obj.indexOf("#")>-1){ a=obj.split("#"); obj=a[1]; } if(obj_id=dgebi(obj)){ if((dgebi(obj).parentNode.id=="targets")||(dgebi(obj).parentNode.className.indexOf("targets")>-1)){ dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop); dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft); } else if((dgebi(obj).parentNode.parentNode.id=="targets")||(dgebi(obj).parentNode.parentNode.className.indexOf("targets")>-1)){ dgebi(obj).parentNode.style.top=-parseFloat(obj_id.offsetTop)+"px" dgebi(obj).parentNode.style.left=-parseFloat(obj_id.offsetLeft)+"px" } else { dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop); dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft); } } } window.onload=function(){ a=document.getElementsByTagName("a"); for(i=0;i<a.length;i++){ a[i].onclick=function(){ scrollAnchor(this.href); return false; } } var current_image=0; setInterval(function(){ current_image++ scrollAnchor("img"+current_image); if(current_image>10) current_image=0; },3000); } </script> </head> <body> <div style="position:relative;margin:64px;width:448px"> <ul class="tabs"> <% for i=1 to 10 response.write "<li><a href=""/scroller/index.asp#img" & i & """ title=""image number " & i & """>" & i & "</a></li>" & vbcrlf next %></ul> <div class="container1 targets"> <ul><% for i=1 to 5 response.write "<li id=""img" & i & """>" & i & "</li>" & vbcrlf next %></ul> </div> <div class="container2 targets"> <ul><% for i=6 to 10 response.write "<li id=""img" & i & """>" & i & "</li>" & vbcrlf next %></ul> </body>
Edit: Sorry, but left the index.asp in. Trying to force myself to learn more or .NET so only .aspx is default! You'll need to tweak the address, or put it in a folder called scroller as a file name index.asp.....LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
Jul 22, 2012, 12:38 #8
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
HTML Code:<html> <head> <style type="text/css"> *{border:0;padding:0;margin:0;} ul,li{display:block;position:relative;width:448px;height:336px;float:left;} li{background:gold;} ul.tabs{height:32px;} ul.tabs li{width:32px;height:32px;float:left;} .container1{width:448px;height:336px;float:left;overflow:hidden;font-size:336px;} .container1 ul{width:2250px;-webkit-transition:left 1s;} .container2{display:block;width:224px;height:168px;float:left;overflow:hidden;font-size:168px;} .container2 ul{display:block;width:224px;height:1008px;-webkit-transition:top 1s;} .container2 li{width:224px;height:168px;clear:both;} </style> <script type="text/javascript"> function dgebi(s){ return document.getElementById(s); } function scrollAnchor(obj){ if(obj.indexOf("#")>-1){ a=obj.split("#"); obj=a[1]; } if(obj_id=dgebi(obj)){ if((dgebi(obj).parentNode.id=="targets")||(dgebi(obj).parentNode.className.indexOf("targets")>-1)){ dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop); dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft); } else if((dgebi(obj).parentNode.parentNode.id=="targets")||(dgebi(obj).parentNode.parentNode.className.indexOf("targets")>-1)){ dgebi(obj).parentNode.style.top=-parseFloat(obj_id.offsetTop)+"px" dgebi(obj).parentNode.style.left=-parseFloat(obj_id.offsetLeft)+"px" } else { dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop); dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft); } } } window.onload=function(){ a=document.getElementsByTagName("a"); for(i=0;i<a.length;i++){ a[i].onclick=function(){ scrollAnchor(this.href); return false; } } var current_image=0; setInterval(function(){ current_image++ scrollAnchor("img"+current_image); if(current_image>10) current_image=0; },3000); } </script> </head> <body> <div style="position:relative;margin:64px;width:448px"> <ul class="tabs"> <li><a href="#img1" title="image number 1">1</a></li> <li><a href="#img2" title="image number 2">2</a></li> <li><a href="#img3" title="image number 3">3</a></li> <li><a href="#img4" title="image number 4">4</a></li> <li><a href="#img5" title="image number 5">5</a></li> <li><a href="#img6" title="image number 6">6</a></li> <li><a href="#img7" title="image number 7">7</a></li> <li><a href="#img8" title="image number 8">8</a></li> <li><a href="#img9" title="image number 9">9</a></li> <li><a href="#img10" title="image number 10">10</a></li> </ul> <div class="container1 targets"> <ul><li id="img1">1</li> <li id="img2">2</li> <li id="img3">3</li> <li id="img4">4</li> <li id="img5">5</li> </ul> </div> <div class="container2 targets"> <ul><li id="img6">6</li> <li id="img7">7</li> <li id="img8">8</li> <li id="img9">9</li> <li id="img10">10</li> </ul> </body>
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
Bookmarks