I'd use a jQuery plugin to do this. I like this one:

http://www.jquerynewsticker.com/...

You might consider rolling your own - I've used the cycle plugin to to fading testimonials on another project.

http://jquery.malsup.com/cycle/...

does this mean I'd have to turn each of the testimonials into jpgs first?

No.

It works just as well with <div> or <p> tags, so long as you enclose them in a parent <div> that the plugin can latch on to.

For example:



And you'll need to fire off the cycle plugin:
[code]
<script type="text/javascript">
$('#testimonial').cycle({
fx: 'fade',
timeout: 5000,
pause: 1
});
</script>
[code]

ok, still kind of green about this. Oh, and I am using the default theme, btw, if that is helpful.

I figured i should download and install the js into the .js directory - but even that took me a while!

I've been reading likesalmon.net/add-javascript-to-a-concrete5-template-the-right-way/ and I don't see an "elements/header.php file" that is referred to to edit.

Is that something I should do? should i be in the ftp site at all?
mayday mayday!

U can also make the scroll effect my making af "block" u can easily do this by adding a html code "marquee".




I could send u an exsample (a block u can install from the dashbord)

/Mike

Sorry Mike, but this approach isn't suitable - the marquee tag is a non-standard tag that isn't recommended.

I usually drop any javascript into a "js" folder in my theme folder, and add this to elements/header.php:

hi jero,

Thanks again for the info. Embarrassingly, a little confused, especially coming from wordpress and my not-so-techy side seems to be showing up.

FTPed in, I see 2 folders names 'elements', one in the URL (mytrucklube.com) folder, which is blank, and one on the /concrete folder. There I see a 'header_required.php', but no header.php file. Is that the one?

I just made a new header.php file, but wondering,

1. Which folder do I put it?
2. Where do I place the js code that you mentioned above? Been reading a few tutorials, but I just don't see a place for that.

It depends where your theme files are located. They're generally going to be in one of three places:

Default themes supplied with C5
concrete/themes/theme_name

Ad hoc themes you might have added
themes/theme_name

Themes installed as part of a package
packages/package_name/themes/theme_name

within the theme_name folder, you should find an elements folder, which will have a header.php and footer.php. Add your code to the header.php. Drop your js into theme_name/js.

ooh, tricky.

Here's what I did:

put the file, named as "jquery.cycle.all.js" in the /js folder (did not see it in the themes folder).

added the line: <?php
$html = Loader::helper('html');
$this->addHeaderItem($html->javascript('jquery.cycle.all.js'));
?>

to the header.php file in the themes folder (I am using the default theme, so it is in the default folder)

Added a block: html, then added:



but the thing just spins and doesn't stop.

What am i doing wrong?

Also, doesn't a reference to the jquery.cycle.all.js need to be in the

[code]
<script type="text/javascript">
$('#testimonial').cycle({
fx: 'fade',
timeout: 5000,
pause: 1
});
</script>
[code]

section?

did you know, the power slider already have that feature, the cycle
http://www.concrete5.org/marketplace/addons/power-slider-lite/...

if you dont want the big image, you can just use transparent image 1 x 1 px, to make it valid to submit

ok, hey, thanks.

i downloaded it, installed it. how do i actually get this thing to work?

i'm thinking it would be under adding a block, but i don't see it. what am i missing?

well, you can start with adding that block with image - just play araund a bit, and you will realize :). you can add title head or just the description, there is option to hide next-prev button and page. you can decide the width of image(the width of block). everythin is configureable, you can select a lot effect to. it's amazingly michaelg make this free.

are sure already instaled it, it should be under 'add block', its name power slide lite?

nb : sorry i dont know if it was compatibel with c5.5 yet, i'm still using 5.4

this is what i want! http://www.dynamicdrive.com/dynamicindex2/crosstick.htm... (the one in beige)

but it seems old. looking into it, as i am still stuck.

if anyone has info on one like this that is easy to install, please let me know.

thanks!

you can just add that into html block, 'select all' code. and copy paste into html block, and its done.

another block similiar
http://www.concrete5.org/marketplace/addons/tickers-messages/...

but i'm not try it yet.

nb : powerslider have some effect like that, scroll vertical

fast-cgi

Yeah, but it mentions 2 pieces - a <head> and BODY section.

I tried to add an hmtl block and put the first part in that was listed under Step 1.

Then I added <head> before it and </head> after.

Then I added the Step 2 piece to the above.

Then I added <body> and </body> to the piece that I added above.

None of these steps I did worked. I just see a hardly viewable block that is only a few pixels high, with no content at all.

What am I missing?

it's work for me,
i just copy step 1 to html block, and then below step 1, i added step 2. save the block. that's is. the scroll text appear in my sidebar. i'm not added anything. just copy 'AS IS'.



fast-cgi

Thanks fastcrash!

I just reread this, and realize I downloaded the plug in before, but not installed it, and that is why I did not see it as a block that could be added.

So I installed it, created and added 3 transparent images and added the text.

Seems to works well, except for main text is too large. I know there is something in the CSS that I can change, but I don't know where to go, which file, ...

Also, I added it when I had a black background, and changed it to white. But, the block still has the black background and white font. I bet that also is a CSS issue, but not sure where that is either.

Do you know how I can reduce the font size and change color on command?

Thanks again for all your assistance.

i think this is the part where i am getting stuck. i am looking for a tutorial for plugins. i can't seem to find one. can someone recommend one?

just to be clear, is the part:


<div id="testimonial">
<p>blah blah</p>
<p>more blah blah</p>
<p>Even more blah</p>
</div>

to be added under Add Block --> HTML?

and the part:

<script type="text/javascript">
$('#testimonial').cycle({
fx: 'fade',
timeout: 5000,
pause: 1
});
</script>

I don't know where this goes. A little help here?

The <script> part would go somewhere *below* your <div> so that the div is defined before the plugin is fired up. As long as youve correctly included the plugin in the header, then it should just work.

Check out examples athttp://jquery.malsup.com/cycle/...

Also look athttp://www.avlogic.co.nz/ - uses the plugin to fade testimonials in and out.

jero,

I finally got it. I reread your reply, and realized you c/r/e/a/t/e/d a 'js' folder in the theme folder that I was using. Just dropping it into the 2 other js folders didn't do it.

Well, I did that. I created the js folder in my theme folder, then put the file there, added the html back, and voila!, it worked.

So, thank you. Finally got it. I am thankful and amazed.

Cool - glad it's working. :)

well, Jero, Murphy's Law came up and bit me.

It was working, i changed something in the html block, and boom, now it doesn't work. Back to square one. Things's just spinning again.

I wonder if it's the quotation marks.

This is my code:




Back to troubleshooting. If I get it soon, I'll delete this post. Otherwise, I'm I'm in search and repair mode...

</br> is an illegal tag. That could be messing up the DOM and hence confusing the jQuery. You could try it with <br> before each source, but just close the paragraph after.

Purists would probably do the whole thing as a list with css to remove any list bullets. But I don't think that would be anything to do with your problem.

Thanks.

***</br> is an illegal tag. That could be messing up the DOM and hence confusing the jQuery. You could try it with <br> before each source, but just close the paragraph after.

I removed the <br> and </br> references, but it still just spins away, and there are multiple copies of that block, each below the previous one for every edit I do.



Did I mess something else up some where else?

***Purists would probably do the whole thing as a list with css to remove any list bullets. But I don't think that would be anything to do with your problem.

For a css newbie such as myself, I'll look up the how, but where would I go to implement that?


as a p.s., how do you quote others in a reply, so you can tell whose text is from who?

what the ???

OK, had an idea. I deleted the block, then I readded it, after dumping the cache on Chrome (XP).

Same code, but when I saved, I got a pink "Error" window with the following:


HomeServicesValue AddedAboutContact // maxHeight) maxHeight=this.imgInfos[i].imgHeight; } this.displayWrap.css('height',maxHeight); //center images for(var i=0;i=this.imgInfos.length) this.imgNum=0; this.imgEls[this.imgNum].css('opacity',0); this.imgEls[this.imgNum].css('display','block'); this.imgEls[this.imgNum].animate({opacity:1}, this.imgInfos[this.imgNum].fadeDuration*1000,'',function(){ccmSlideShowHelper43.preparefadeOut()}); var prevNum=this.imgNum-1; if(prevNum0) imgURL=this.imgInfos[num].fullFilePath; else imgURL='/files/'+this.imgInfos[num].fileName; //el.innerHTML=''; el.innerHTML=' '; //alert(imgURL); if(this.imgInfos[num].url.length>0) { //el.linkURL=this.imgInfos[num].url; var clickEvent='onclick="return ccmSlideShowHelper43.imgClick( this.href );"'; el.innerHTML=''+el.innerHTML+''; } el.style.display='none'; this.displayWrap.append(el); var jqEl=$(el); this.imgEls.push(jqEl); }, imgClick:function(linkURL){ //override for custom behavior }, imgInfos:[ { fileName:"2.jpg", fullFilePath:"/files/2213/2954/3332/2.jpg", duration:5, fadeDuration:2, url:"", groupSet:0, imgHeight:370 } , { fileName:"1.jpg", fullFilePath:"/files/5213/2954/3306/1.jpg", duration:5, fadeDuration:2, url:"", groupSet:0, imgHeight:370 } , { fileName:"3.jpg", fullFilePath:"/files/5213/2954/3304/3.jpg", duration:5, fadeDuration:2, url:"", groupSet:0, imgHeight:370 } ] } $(function(){ccmSlideShowHelper43.init();}); //]]> Testimonials "I am very pleased with everything that Trucklube has done for our company over the years. Prompt and punctual service, consistently do a great job!" Hugh St.Claire, St. Claire Signs "My company is not large enough to have "departments", so I rely on certain vendors to fill those needs. Trucklube is one of the best. They are an integral part of our team." Mike Z. Roto Rooter "TruckLube is able to schedule maintenance appointments, repairs and DOT annual inspections on our campus location. They plan around our drivers' work schedules in setting appointments. This ... results in reduced expense - keeping our vehicles running during peak hours and avoiding the cost of having to drive vehicles to a repair facility." Jim A. - The Salvation Army Need Commercial Vehicle Service and Maintenance? You're in the right place. TruckLube is a mobile service specializing in on-site and roadside truck maintenance and general repairs. We work on medium and heavy-duty fleet trucks, tractors, trailers, and forklifts. We have a professional staff with over 25 years of combined experience. Serving all of Greenville, SC and the surrounding area, our mission is to keep your fleet maintained properly and avoid costly repairs and vehicle downtime. We do our best to keep your trucks moving. concrete5 - open source CMS © 2012 My Truck Lube. All rights reserved. Sign In to Edit this Site


What is going on?

I just noticed that the script is not in a ready fn. That could result in instability based on load times, how busy the server is, how busy your browser pc is, what else you have on the site ....

Try:


You could also probably make use of the developer console to monitor what is going on - have a look at the final section of:
http://www.concrete5.org/documentation/how-tos/editors/getting-help...

There's something I didn't mention, that I think is significant.

I think it's because I *accidentally* (well, I thought it wouldn't make that big a deal) went in and edited the header.php file in the .../themes/default/elements folder.

I thought I could remove some of the blank space at the top, which I had been trying to do for a while. I commented out a line:

<div style="min-height: 80px"> with a //

Then I copied that line and pasted it below, changing it to:

<div style="min-height: 8px">.


I think that broke the script.


I just remembered (did it at 3 in the morning) and changed it back, and now it's worse! The "dashboard band" at the top is gone.

I can't even edit the page, as there is no "edit page" button.

More details athttp://www.concrete5.org/community/forums/customizing_c5/header-too...

Well, I'm learning - even if I keep causing all the issues here. Sorry for any trouble, got a little excited there, but would anyone be willing to help me make this thing fly again?

Try the attached custom template.

Unzip it in your document root.

Once you've done that, edit your page and set a custom template of "Scrolling" on the content block with the testimonials in.

Thanks jero. Good to hear back from you.

I think there's a bigger issue. As you may know, I've got:

a missing toolbar on the home page when i log in and an error (which may be causing the missing toolbar)

should i still unzip that file and put all that in the document root, or can we fix the above errors first?

(more atwww.www.concrete5.org/community/forums/customizing_c5/header-toolbar... btw)

i think i've got something.

i looked at the page again, and see that the error:

"Uncaught TypeError: Object [object Object] has no method 'cycle'" is on the stylesheet, right under:



It says, in red, xhttp://www.mytrucklube.com/:202... Uncaught TypeError: Object [object Object] has no method 'cycle'.

How do I change the stylesheet? Googling: "how to edit stylesheet concrete5", (without the quotes), and am in the:
/concrete/css folder, where I am guessing I should be, but there are 17 files there, and I don't if that is where I should be, let alone which file to edit.

Going through em now. If you have a good suggestion where to go, and what I should do, please post.

This is a javascript error.

It means that either the jquery.cycle plugin is not being loaded, or that it has been loaded in a wrong sequence and was not loaded at the time that you tried to set the cycle running.

If you look at the network tab on the developer console and limit it to just scripts, you will see actual the sequence of loading.

I would check where you are loading the scripts and make sure cycle is amongst them and that it is loaded before your script that sets it running.

I think (not sure without looking it up) that some of the cycle effects require the easing plugin to be installed first. You may want to check the documentation and either use an effect that does not require easiung, or also incorporate the easing plugin into your work.

(too many notes on notepad copied - sorry 'bout that)

OK -

Site is all right, toolbar is back.

Can't seem to get it to run again. i went towww.www.concrete5.org/community/forums/customizing_c5/trying-to-edit... and deleted a version and got the toolbar back.

still doesn't work. cycle is not on the list. will go back to the other solution from above with the zip file.

hey jero,

re: Unzip it in your document root...set a custom template of "Scrolling" on the content block with the testimonials in.


I just tried that. Still don't see a change. Wonder what I am missing...

Working now. Thank you jero, I redid the site, used the custom script and it works fine.

Not done yet.


Was not going to let this end. Wanted this to work, so for this, I pulled the site down and reloaded it from scratch. New dB, new version of C5 5.5.0, activated Greek Yogurt theme - to do this I had to write to the dB.


Redid the homepage. The header was made in this them I made different than in Plain Yogurt. Was a little confused as there are 3 header areas:

Sitewide Site Name
Sitewide Header Nav
Header Image

and I only have 2 things - a logo and the needed autonav.

So I placed the logo in the "Sitewide Site Name", and the AutoNav in "Sitewide Header Nav". Looked ok.

Added slider, content, social icons.


Wanted to use jero's method, which seems the cleanest. Using his last tip, I unzipped the attached file above. Followed the instructions - It worked! I was so happy.


But, again, something got out of whack.


Looks fine when logged in. Not logged in, the logo and the autonav in the header are gone. I don't know if this happened before the js template was loaded.


So far I tried:

Checked the Chrome console for errors.
looked at the css file - it's short. I can't tell if there's anything suspect.
looked at the js file - it's really long. Also can't tell if there is something suspect there.
looked at it again in Chrome (looked off in Notepad) - still long, I don't know what I am looking for (but would like a longer cycle time when I do get this working.

I'll keep at. Anyone have an idea?

I used this one:

http://www.quackit.com/html/html_generators/html_marquee_generator....

And pasted the code in an HTML block.

Easy as pie, fully customizable with simple HTML tags.

You can see it in action here (website still under construction):

http://www.iacc-matnasim.org.il...

That custom template is excellent and hugely appreciated - you should get that into the marketplace!

Thanks