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
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 |
Hi JB,
Sorry I don't know how to get this working.
I have a default template with:
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
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
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
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
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
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
Sorry wrong screenshot.
Here is the correct one.
Mirjam
Here is the correct one.
Mirjam
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
JB
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
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
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.
I need to see if any JavaScript errors are created so I'll need a public URL to check further.
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
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
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...
It's working fine on my demo site at:http://demo.c5extras.com/index.php?cID=158...
The scrollbar will work with any type of block.
Hope this helps.
JB