perfG1

I understand it - I got here by myself based on sample code. The challenge in this example is that is not obvious as to how I can make a portion of the text static and also dynamic (in that it will changes as the subheading changes). My As to your Qs: What do you mean here by "static"? Stay in the same location next to the blue heading while the content is scrolled beneath it? Yes If so, how does it get there? Animate there like the rest of the content? Yes And how does it exit? The same way? Yes Thanks

The strings in the above NewsTicker are laid out under subheadings as follows: Indian Budget Headlines · India aims high with 12% GDP Growth · India builds momentum with record Tax collection in Q3 and green shoots Global Headlines · Myanmar leader Aung San Suu Kyi and other leaders detained · Chinese survey Ships straying into other Nations · Bomb and Gunfire rock Somali Capital, Terrorists Claim Responsibility · Taiwan says both Chinese and US Planes entered defense zone · US Vows to Defend Philippines · Thailand challenges Laos River Dam Building · Blinken speaks QUAD with India · Jake speaks Countering Chinese Narrative · UK applies for TA - CPP Partnership and on top of the Queue As the news scrolls I would like to have the subheading be placed static to the right of PGurus Headlines: ... till the news entries under that subheading are finished. Then the text changes to the next section. See the JS code below: var subheadings = [ "&bull; Indian Budget Headlines", "&bull; Global Headlines", "&bull; US Headlines", "&bull; Global Covid update", "&bull; Markets & Economy" ]; var news = [ ["&bull; India aims high with 12% GDP Growth", "&bull; India builds momentum with record Tax collection in Q3 and green shoots"], ["&bull; Myanmar leader Aung San Suu Kyi and other leaders detained", "&bull; Chinese survey Ships straying into other Nations", "&bull; Bomb and Gunfire rock Somali capital, Terrorists claim responsibility", "&bull; Taiwan says both Chinese and US Planes entered defense zone", "&bull; US vows to defend Philippines ", "&bull; Thailand challenges Laos River dam Building ", "&bull; Blinken speaks QUAD with India ", "&bull; Jake speaks countering Chinese narrative ", "&bull; UK applies for TA - CPP Partnership and on top of the Queue"], ["&bull; US can draw lessons from Taiwan on China disinformation ", "&bull; Biden wants to focus on Agenda and not Impeachment ", "&bull; US has spent $162 million to keep 9/11 Masterminds alive ", "&bull; Major Storms head North East after blanketing Midwest "], ["&bull; Global cases at 103M and Deaths at 2.24M Active 26M", "&bull; US Cases at 26.7M Deaths at 0.452M active at 9.9M", "&bull; Californian Cases starting to slip ", "&bull; France, UK, Italy, Germany, Mexico, Poland, etc. remain high", "&bull; AstraZeneca to supply 9 Million vaccines to EU"], ["&bull; Dow futures drop 270 Points building on losses", "&bull; Companies have bid $81 Billion for aor waves to build 5G", "&bull; 10 GOP Senators Offer Alternative Stimulus Package - $600 Billion plan", "&bull; Extend Aid thru June and Vaccination Funding", "&bull; Direct checks of up to $1000"] ]; So news is a two dimensional array which is being worked on as follows: for (i = 0; i < subheadings.length; i++) { $("#newsTicker p").append( "<span class='section'; style='color:#E8F9C5'>" + subheadings[i] + "</span>" ); for (j = 0; j < news[i].length; j++) { $("#newsTicker p").append( "<span class='story'>" + news[i][j] + "</span>" ); } } Codepen - https://codepen.io/inventor_2000/pen/MWbYERQ Write now, the subheadings are in cream color (RGB #e8f9c5) to differentiate it from the news items which are in white. Instead of this what I would like is for the subheading to be static for all news items under it and then change Hope this helps

MikelI have got my Codepen script to almost work... What I would like to see is subheadings show up to the right of the heading with a background-color #2A3132 and stay static while all the news under the subheadings are done. Then the subheadings will change to the next entry and all the news items will scroll for the next entry, till all entries in the subheadings are done. How can I do that?Thanks in advance!Sree

Sorry, I forgot to fork it - here is the forked entry, my project - https://codepen.io/inventor_2000/pen/yLVyNaM

Mikel I have got my Codepen script to almost work... What I would like to see is subheadings show up to the right of the heading with a background-color #2A3132 and stay static while all the news under the subheadings are done. Then the subheadings will change to the next entry and all the news items will scroll for the next entry, till all entries in the subheadings are done. How can I do that? Thanks in advance! Sree

Say I have 4 topics under 4 headings, with 5 bullet points below each one. And I would like to 1. Have a title bar that just shows the headings and 2. Below that the bullet points scroll one after another. I may want to change the color of the BG (background) of this text box just to suggest to the viewer that the heading is different. Example text is sent as attachment. Ignore the first two lines and start from US Politics: Thanks in advance! Sree Iyer 2020-01 Jan 29 #86 Daily Global Insights.docx

Understood and appreciate your help in solving the problem.

I fixed 1 above, it was frameborder not border. Still looking for scaling code that will work for the majority of new browsers.

I am almost there! I put this on my site and I have a couple of minor issues that need to be sorted out: 1. Post -> https://www.pgurus.com/two-half-years-still-no-justice-sunanda/ Issues: 1. I am explicitly specifying in my iframe no border and yet a border shows up on the left and top... <iframe width="696" height="1740" border="0" src="//pgurus.com/myJS/html/bmpsDissolving.html" scrolling="no"></iframe> 2. How do I scale my images? When I see the post on my iPhone, the image is cut off... Thanks in advance!

Yes! Thank you very much for the prompt response!

Great illustration of how to automatically run images... One question: I want to be able to fade each image in and out and tried using ease:Power1.easeInOut, in the code but it doesn't do anything - My JSFiddle link -> http://jsfiddle.net/perfG1/p7rn1nk4/1/

Hi - My design is at - https://jsfiddle.net/perfG1/dpLgmh02/10/ I am trying to make my 300px X 250px design responsive by responding to a resize window request. The code I added is: var contentResizeTimer; function scale_content_on_window_resize(outer, inner, natural_width, natural_height) { /* Here we pass in an outer wrapper and an inner wrapper. Our content sits inside the inner wrapper. We then calculate the scale from the original height and width of the outer wrapper. At desktop the scale will be 1.0 but as the browser width decreases the scale will gradualy get smaller. The calculated scale then gets set on the inner wrapper and the height of the scaled element then gets set on the outer wrapper. This is to remove the borders around the scaled inner element. */ var outer_width = outer.width(); if (outer_width > natural_width) { outer_width = natural_width; } var theScale = outer_width / natural_width; // Calculate the actual slides height after its scaled. var processed_height = theScale * natural_height; TweenMax.to(outer, 0.2, { height: processed_height, // width: "inherit", width: outer_width, maxWidth: "100%", ease: Power4.easeOut }); TweenMax.set(inner, { autoAlpha: 1.0, transition: "all 0.2s ease", transformOrigin: "top center", scale: theScale, marginLeft: "0px", marginTop: "0px" }); } // end function scale_content_on_window_resize $(window).resize(function() { clearTimeout(contentResizeTimer); contentResizeTimer = setTimeout(function() { scale_content_on_window_resize($("#banner"), $(".slide"), $(window).width(), $(window).height()); }, 100); }); scale_content_on_window_resize($("#banner"), $(".slide"), 300, 250); To test this, I feed different values in the last line, e. g. 150, 125. This correctly sets the window but does not scale the animation itself. What could I be doing wrong? I am new to this and any help is greatly appreciated! Sree

Some progress, finally! I used JSFiddle https://jsfiddle.net/perfG1/7mc57483/#&togetherjs=JMi3Ex9BKA to create a simple animation script. I can now embed this using JSFiddle to get this https://pgurus.com/test. What I would like to do is 1. Just display the 300x250px ad (not the window into which it is embedded in). How do I accomplish this? Thanks in advance! Sree

Try this link, with my changes... https://jsfiddle.net/perfG1/saszahh2/#&togetherjs=HM9o0j28ru

I am new to HTML5/ CSS/ Javascript programming... The intent of the code is to load animation only after the page has completely loaded. In addition, once the Animation completes execution, it should return control back to the browser. To address your observation above, I moved the LPBanner.js and other JS files to within the callback function that gets called when page load is completed but nothing happens... What am I doing wrong? My latest version of code is at the same link as shown above. Sree

I derived this sample ad from Animation banner source and am running into a problem - 1. My CMS is WordPress and when I execute this script (https://jsfiddle.net/perfG1/saszahh2/#&togetherjs=HM9o0j28ru) it stops loading the page completely. Even after the animation stops, I cannot make the page load resume. 2. This is my first attempt at animation and I am sure there are glaring omissions in my code - Need your help in resolving it.