POWERPLAY27 Posted February 11, 2013 Share Posted February 11, 2013 (edited) Ok well I have used Powerpoint to create an animation, I then saved the file as a GIF.I have no idea if I did it correctly, because the GIF image does not animate: I want to animate this to put on my website: Each bullet point and text to fade on entrance one after the other. Edited February 11, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2013 Share Posted February 11, 2013 You can't save it as ANIMATED gif, in powerpoint, you could save it as .wmv, then use program to divide into individual frames, then use these within gif animation program Photoshops ImageReady, or GIMP which is free. Link to comment Share on other sites More sharing options...
callumacrae Posted February 11, 2013 Share Posted February 11, 2013 Please don't do this, though. Export it as images, and use JavaScript to switch between them. Gifs should not be used for this. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2013 Share Posted February 11, 2013 (edited) Please don't do this, just use jquery then fade text in one at a time. no images, no bandwidth loading images. Edited February 11, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 11, 2013 Author Share Posted February 11, 2013 Please don't do this, just use jquery then fade text in one at a time. no images, no bandwidth loading images. I would like to have the bullet points to be grouped with each line of text, so if I want to do this, this won't work that that method or can I it? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2013 Share Posted February 11, 2013 just use span styled to be block element, define height:, width: background-color: and float left within paragraph. Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 (edited) Ok this is my javascript code <script type="text/javascript"> $('#webdesignerAnime p:gt(0)').hide(); setInterval(function(){ $('#webdesignerAnime p:first-child').fadeIn('slow') .next('p').fadeOut('slow') .end().appendTo('#webdesignerAnime');}, 1000); </script> This is my html code: <div id='webdesignerAnime'><p>Static/Dynamic Website Design/Re-Design</p><p>Bespoke Online Applications</p><p>Flash Animation Design Development</p><p>Database Creation & Communication</p><p>Content Management System (CMS)</p><p>Multimedia (CD-ROM / DVD-ROM / Blu Ray)</p><p>Ecommerce</p><p>Search Engine Optimisation</p></div> The result: www.sign-technologies.net/webdesigner.aspx I want to adjust this code I found on another forum so that the list of text is fades in one at a time similiar as to what is going on within the red space on that webpage.What is needed in order to do this? Edited February 12, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 (edited) Create a counter and duration variable (this will make it easy to adjust timing), and make global var cp=0;var duration=800; You will have to use $('#webdesignerAnime p').css({'visibility': 'hidden'}); AS if you use hide() will use display: none when finished, and the box will collapse, and grow as the content fadeIn. you need to create function to check current counter value against total number of paragraphs, if below total, loop again $fadethis = (function () { if(cp < $('#webdesignerAnime p').size()) { $('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){ $fadethis(); }); cp++; } }); when you start the fadeIn function using '$fadethis'it will first reset css styling to display: none; (so fadeIn will work) and visibility: visible (prevent collapsing of outer box),then it should fadeIn, the queue function will wait for the fadein to complete, before running $fadethis function again, and at the same time the counter is incremented (cp++). All code var cp=0;var duration=800;$(function(){ $('#webdesignerAnime p').css({'visibility': 'hidden'}); $fadethis = (function () { if(cp < $('#webdesignerAnime p').size()) { $('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){ $fadethis(); }); cp++; } }); $fadethis(); }); Edited February 12, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 (edited) Thanks for the swift response, I went to sleep just after writing that and woke up just now, its on my mind lol. I've done it, thank you very much , I actually did it the long way at first and inserted the code myself, but it didn't work so I just copied and pasted your code.With every new piece of coding I find I try to understand it, try to get the gist and feel for it thats why sometimes I just do it the long way. Now with the issue of bullet points, I am thinking maybe change the paragraphs into <li> list and have bullet points with the text, but then I won't be able to change the color of the bullet points themselves.So I want to create bullet poinst myself to go along with the text, you mentioned "just use span styled to be block element, define height:, width: background-color: and float left within paragraph" <span style="display:block; height: 50%; width: 50%; background-color: yellow; float:left;"> so basically something like this, shall I put this within each <p> element? Edited February 12, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
callumacrae Posted February 12, 2013 Share Posted February 12, 2013 All code var cp=0;var duration=800;$(function(){ $('#webdesignerAnime p').css({'visibility': 'hidden'}); $fadethis = (function () { if(cp < $('#webdesignerAnime p').size()) { $('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){ $fadethis(); }); cp++; } }); $fadethis(); }); There are a few problems with this code:The $fadethis variable is undeclared. Your lack of correct spacing makes the code very tricky to read. I initially thought that the $fadethis function was being called immediately inside the $fadethis function, which it isn't. Why have you begun your function name with a dollar sign? This isn't PHP. Sure, do it yourself in your own code, but don't confuse beginners by trying to get them to do it Why are you passing a function which calls $fadethis as a callback? Why not just pass $fadethis? Your line with logic in seems needlessly complicated, and also wrong. How are you hiding the old elements? I suspect you meant to .hide() the elements (which is easier than calling .css() manually), then call .eq(), and then fade the specific element in. Assuming the logic you implemented it correct, everything on the page will jump up a couple hundred pixels wfor a fraction of a second when slides change. There is no way to restart the powerpoint. User cannot manually advance the powerpoint, which would be nice. Why are you hiding the elements using .css()? This is what .hide() was designed for, and it is better at it. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 (edited) oh dear should i commit hari kiri now correct spacing what, are you going on about? see 1 because you want it to proceed to next sibling element AFTER the fadeIn has been fully excuted, if this was not added it would instantly proceed to next with no delay using hide() has the drawback of finishing the fadeIn with display: none, this causes these 'p' elements to collapse, as the box container has no fixed height, it would collapse also, 'calling css manually? WHAT! never happens, and whay are we talking about powerpoint and slides all of a sudden, hello, huston drifting away here. again! why are we talking about powerpoint, NOT POWERPOINT, jquery undeestandee. ditto 7 see 5 you are what we call in the trade as a numpty. You seem to have got confused with powerpoint,and i think the code he last posted, which did not provide the solution he wanted, which he clearly stated what he required was The result: www.sign-technologies.net/webdesigner.aspxI want to adjust this code I found on another forum so that the list of text is fades in one at a time similiar as to what is going on within the red space on that webpage.What is needed in order to do this? Edited February 12, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 (edited) Now with the issue of bullet points, I am thinking maybe change the paragraphs into <li> list and have bullet points with the text, but then I won't be able to change the color of the bullet points themselves.So I want to create bullet poinst myself to go along with the text, you mentioned "just use span styled to be block element, define height:, width: background-color: and float left within paragraph" <span style="display:block; height: 50%; width: 50%; background-color: yellow; float:left;"> so basically something like this, shall I put this within each <p> element? percentage is unlikely going to give correct result, use same size as font, i guess at 14px, and yes! place in paragraph element as they are targeted for fadein, therefore it will hide span as well, plus you have better control of positioning and alignment with text. Edited February 12, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 (edited) dsonesuk your suggestions are the most accurate when you know what the user actually wants and I thank you for your time and knowledge its not the first time you got me out of a mess. Edited February 12, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 I wondered what the ###### was going on then i noticed the background was image, and you use - top margin. You can get away with not using image completely use border-radius: download PIE.htc and it should work IE older browsers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var cp=0, cp2=0;var duration=800;$(function(){ $('#webdesignerAnime p').css({'visibility': 'hidden'}); var $fadethis = (function () { if(cp < $('#webdesignerAnime p').size()) { $('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){ $fadethis(); }); cp++; } }); $fadethis();});/*--*//*]]>*/</script><style type="text/css">#webdesignerAnime {background-color:#990000; width:460px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size: 14px; overflow:hidden;margin: 10px; margin-left: 53px; border-radius: 12px; behavior: url(PIE.htc); /* MSIE fix */ }#webdesignerAnime p { margin-bottom: 1em; margin-left: 33px; margin-top: 1.15em;}#webdesignerAnime p span {display:block; height: 14px; width:14px; float:left; background-color:#FFFF9A; margin-top: 1px; margin-right: 16px;}</style></head><body><div id="webdesignerAnime"><p><span></span>Static/Dynamic Website Design/Re-Design</p><p><span></span>Bespoke Online Applicatios</p><p><span></span>Flash Animation Design Development</p><p><span></span>Database Creation & Communication</p><p><span></span>Content Management System (CMS)</p><p><span></span>Multimedia (CD-ROM/DVD-ROM/BlueRay)</p><p><span></span>Ecommerce</p><p><span></span>Search Engine Optimisation (SEO)</p></div><!--<img src="http://img341.imageshack.us/img341/7582/slide1ud.gif" alt="" />--></body></html> Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 Its fine now I sorted it. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 Give span position: relative, so it appears above image. Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 (edited) If I do that doesn't work properly and also I put the span in css, but one of the block is marginally to the left of the other blocks. I can sort that out by inputing the span and the css properties individually in each line and adjusting the values, but of course would be easier to have just one line of css properties and all in line. Edited February 12, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 (edited) The first span is being affected by a previous floated element OUTSIDE #webdesignerAnime , just add overflow:hidden; OR clear: both; to #webdesignerAnime, either of these will prevent this. Edited February 12, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 (edited) Ok now I'm having trouble lifting that text up. Text up now, trying to move to the left, but I'm stuck now. Fixed it, thanks, clear: both; helped me to do it with the overflow:hidden I was stuck with the margin-left positioning. Edited February 12, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 OK! you have to get rid excess tranparent border, and trim it to minimum, then either have to make it the size you require to accommodate the text, and use for background-image of #webdesignerAnime using css3 to adjust size to fit #webdesignerAnime, OR use as img and place in #webdesignerAnime give it position: absolute; left:0; top:0;right:0; bottom:0; this will cause the img to stretch to full width and height of #webdesignerAnime container. Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 The clear both; is the best method to use right? I did it, its now working just as my flash file was. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2013 Share Posted February 12, 2013 The clear both; is the best method to use right? I did it, its now working just as my flash file was. What ever suits your needs, i personally would have used the border-radius method, no image, just background color, and rounded corners, using border-radius:, seem strange to create two separate elements, and merge one into the other with a minus top margin, but everyone have their own methods of achieving their final design effect. Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 12, 2013 Author Share Posted February 12, 2013 (edited) I will take your way into consideration, I didn't know I could do it that way per say, I just started now reading through a book on javascript, there is about 14 chapters and I'm now only on chapter 3 nearly on 4, lol. Haha just realised border-radius is a css property, haha still I didn't know I could do certain backgrounds this way! Edited February 12, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
POWERPLAY27 Posted February 13, 2013 Author Share Posted February 13, 2013 (edited) Thought I had another problem, thankfully resolved now. Edited February 13, 2013 by POWERPLAY27 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now