amitamberker Posted December 26, 2011 Share Posted December 26, 2011 Hello Everyone,1. Please find the attached "Transitions in JS.zip" file.2. Upon unzipping the zipped folder, please open the HTML page from your IE and Google Chrome browsers.3. It looks NICE and the Fade Transition works properly on IE browser but somehow the Fade Transition does not work on Google Chrome browser.4. Upon clicking the Red Slide, it should direct to www.Google.com5. Upon clicking the Green Slide, it should direct to www.Yahoo.com6. Upon clicking the Blue Slide, it should direct to www.CNN.com7. We all would be glad if you could share other kind of transition effects such as Wipe Transition, Split Transition, Random Bars Transition and etc...Please help. Link to comment Share on other sites More sharing options...
amitamberker Posted December 26, 2011 Author Share Posted December 26, 2011 Looking forward to hear from someone. Please help. Link to comment Share on other sites More sharing options...
JamesB Posted December 27, 2011 Share Posted December 27, 2011 i think css "filter" is just for IE this might help:http://www.w3schools.com/css3/css3_transitions.asp Link to comment Share on other sites More sharing options...
amitamberker Posted January 3, 2012 Author Share Posted January 3, 2012 i think css "filter" is just for IE this might help:http://www.w3schools...transitions.asp Hi JamesB,CSS Transitions Effects does not look good. I guess Transitions Effects from JavaScript looks good. Link to comment Share on other sites More sharing options...
amitamberker Posted January 3, 2012 Author Share Posted January 3, 2012 Please help...Thanks. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 3, 2012 Share Posted January 3, 2012 Is there an example online? The 100+ views for this topic and 3 downloads tells me that most people don't want to download an example. Link to comment Share on other sites More sharing options...
amitamberker Posted January 4, 2012 Author Share Posted January 4, 2012 Is there an example online? The 100+ views for this topic and 3 downloads tells me that most people don't want to download an example. Hi justsomeguy,I tried to find an example online but could get it. Can attach PPT file to show the example? Link to comment Share on other sites More sharing options...
justsomeguy Posted January 5, 2012 Share Posted January 5, 2012 Start by posting the code for the HTML and Javascript, and check the console in Chrome for Javascript errors. Link to comment Share on other sites More sharing options...
amitamberker Posted January 7, 2012 Author Share Posted January 7, 2012 Start by posting the code for the HTML and Javascript, and check the console in Chrome for Javascript errors. Hi justsomeguy, The CODE is:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css">.Size{ width: 277px; height: 179px;}.noborder {border-width: 0px;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/// The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. // Image1 = new Object();Image1.src = "images/Red.jpg"document.getElementById('slide_link').href = 'http://www.google.com';Image2 = new Object();Image2.src = "images/Green.jpg"document.getElementById('slide_link').href = 'http://www.yahoo.com';Image3 = new Object();Image3.src = "images/Blue.jpg"document.getElementById('slide_link').href = 'http://www.cnn.com';step = 1;speed = 5;max = 3function animation() { if (!document.images) return if (document.all) slide.filters.blendTrans.apply() document.images.slide.src=eval("Image"+step+".src") if (document.all) slide.filters.blendTrans.play() whichimage=step if (step<max) step++ else step=1 if (document.all) setTimeout("animation()",speed*500) else setTimeout("animation()",speed*500) } window.onerror=animation /*--*//*]]>*/</script> </head><body><div class="Size"><a id="slide_link" href="#"><img src="images/Red.jpg" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div></body></html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ By the way I could QUOTE the above code and hence I have placed it in between: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...........................~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Link to comment Share on other sites More sharing options...
justsomeguy Posted January 9, 2012 Share Posted January 9, 2012 The filters property of an element is only defined in IE, so that's why it doesn't work anywhere else. You should see Javascript errors in other browsers because you're not checking if the filters property is defined before you use it. There are a couple other things that will cause this to only work in IE, like you're using a variable called "slide" which isn't defined, but is the name of an element. Not all browsers will automatically define things like that. The links don't work because you don't change the URL when you change the slide. The top of the code that defines everything sets the link at that point, not when the slide changes. These lines overwrite each other: document.getElementById('slide_link').href = 'http://www.google.com';...document.getElementById('slide_link').href = 'http://www.yahoo.com';...document.getElementById('slide_link').href = 'http://www.cnn.com'; All of those are setting the href of the link, and they all get executed during the same point. Once those lines finish the last line, where you set the link to CNN, will be the one that everything uses because it doesn't change after that. The function that changes the slide should also change where the link points to. Link to comment Share on other sites More sharing options...
amitamberker Posted January 10, 2012 Author Share Posted January 10, 2012 The filters property of an element is only defined in IE, so that's why it doesn't work anywhere else. You should see Javascript errors in other browsers because you're not checking if the filters property is defined before you use it. There are a couple other things that will cause this to only work in IE, like you're using a variable called "slide" which isn't defined, but is the name of an element. Not all browsers will automatically define things like that. The links don't work because you don't change the URL when you change the slide. The top of the code that defines everything sets the link at that point, not when the slide changes. These lines overwrite each other: document.getElementById('slide_link').href = 'http://www.google.com';...document.getElementById('slide_link').href = 'http://www.yahoo.com';...document.getElementById('slide_link').href = 'http://www.cnn.com'; All of those are setting the href of the link, and they all get executed during the same point. Once those lines finish the last line, where you set the link to CNN, will be the one that everything uses because it doesn't change after that. The function that changes the slide should also change where the link points to. Hi justsomeguy,Thanks for the info. Let me see what I can do. I need some time. Will revert back shortly... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.