Form into Scrollbar Add-On

Permalink Browser Info Environment
Hi,

I would like to implement a basic concrete5 form into the scrollbar Add-On. Is this possible? Can you tell me how to realize this?

Thanks in advance,
Mirjam

Type: Discussion
Status: New
mirjamk
View Replies:
jb1 replied on at Permalink Reply
jb1
Hi Mirjam, yes this is possible. Most blocks create a div tag with a class or ID. If not, just click the desired block and choose "design" so you can give it a CSS ID. Once this has been done, you use that class/ID in the scrollbar block.

The scrollbar will work with any type of block.

Hope this helps.

JB
mirjamk replied on at Permalink Reply
mirjamk
Hi JB,

Sorry I don't know how to get this working.

I have a default template with:
<div id="tekstvak-breed">
<?php
   $a = new Area('Main Content');
   $a->setBlockLimit(1);
   $a->display($c);   
?>
  </div>


I add a form block to the page in edit mode. But how to connect this to the Scrollbar block? Should I first add the form block and then the scrollbar block where I give the block ID of the form block? But this doesn't work. Or should I place some code in the default template? Or use atributes?

Can you give me a tip where to start?

Thanks and regards,
Mirjam
jb1 replied on at Permalink Reply
jb1
I'd suggest you want the demonstration video (here's a direct link on YouTube:http://www.youtube.com/watch?v=ZdeqhcgI9xg&feature=channel_vide... At the 4:00min mark, it explains how to integrate it with your template.

In your case if you want the entire editable area to be scrollable, you would enter "#tekstvad-breed" in the "div selector" field in Scrollbar. You need to have both your form block and scrollbar block on the same page - it doesn't matter in which order.

If you just want 1 block in your page to be editable (instead of the whole area), follow these steps:
1) Get your page in edit mode. Click the form block and choose "design"
2) On the "CSS" tab, enter something in the "CSS ID" field (eg. "myform"). Here's a screenshot of what you should see:
http://screencast.com/t/QZdu8qKhFkZo...
3) Click "update" to save the changes to that block.
4) Now click on your new "scrollbar" block (or add it if you haven't already).
5) In the "div tag" field enter "#myform". Here's a screenshot:
http://screencast.com/t/n388ebMwr...
6) Click "add" (or "update") and then exit edit mode.

You have completed the steps.

Hope this helps.

JB
mirjamk replied on at Permalink Reply 1 Attachment
mirjamk
Hi JB

Thanks for the great support!

I had to remove the code ($a->setBlockLimit(1);) to make it work. And it does work on one by one block in my page but not on the whole area.

In edit mode I set the scrollbar add-on DIV selector:#tekstvak-breed
and put in another block on that page a lot of lorem ipsum content.
Then published the page.
What happens is that the page is blank. No scrollbar and no lorem ipsum.

In firebug the "tekstvak-breed" div is greyed out. I've attachet a screenshot of the code and the CSS.

Can you see what I'm doing wrong? Maybe it is not possible with absolute DIV's?

Thanks again,
Mirjam
mirjamk replied on at Permalink Reply 1 Attachment
mirjamk
Sorry wrong screenshot.
Here is the correct one.

Mirjam
jb1 replied on at Permalink Reply
jb1
Hi Mirjam, if you send me a URL where you've installed the scrollbar I can take a closer look. But if you're using absolute positioning on that DIV tag, it may be causing the problem. The scrollbar may be stuck behind that div or another one, in which case the z-index and/or absolute positioning could be throwing it out. The easiest way to test is try reverting the page back to the "plain yogurt" theme and see if it works. If it does, then it's a theme CSS issue.

JB
mirjamk replied on at Permalink Reply 1 Attachment
mirjamk
Hi JB,

Thanks for your fast reply.

I did a fresh install of concrete5 and used the "plain yoghurt" template.
I did the same as in the Demonstration video on YouTube. Added a scrollbar block to the main conctent with DIV selector: #header

The result is the screenshot I attached. Still no scrollbar.

Any idea?

Best regards,
Mirjam
jb1 replied on at Permalink Reply
jb1
Do you have the option set to hide the scrollbar on mouse out? The cropping of the header area is working.
I need to see if any JavaScript errors are created so I'll need a public URL to check further.
mirjamk replied on at Permalink Reply
mirjamk
Hi JB

I did not set the option to hide the scrollbar on mouse out.

I did a fresh install on a public server.
see:http://concrete5.kleurpunt.nl/
The scrollbar block is on the homepage #header.

I can't give the login here public.

Thanks again!
Mirjam
jb1 replied on at Permalink Reply
jb1
I've looked at the source code on that page, and the scrollbar is disabled - this usually happens if the block isn't tall enough. Can you please try downloading the last version from the C5 site (v1.0.1)? If that doesn't solve the issue, please PM the login details for the site so I can test it for you.

It's working fine on my demo site at:http://demo.c5extras.com/index.php?cID=158...

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.