"Overflow:hidden" interfering with editing
Permalink
I have an image scroller that depends on the CSS rule "overflow:hidden" to prevent the line of images from simply stretching off the side of the screen. The scroller itself works fine; but it is impossible to edit, because apparently the "Add to (editable area)" div is a child element of the div in which the PHP call resides...and since it usually is positioned outside (below) that div--in the overflow area--it doesn't show, and isn't clickable.
Is there any way around this? The scroller MUST have "overflow: hidden," but the area MUST be editable.
Is there any way around this? The scroller MUST have "overflow: hidden," but the area MUST be editable.
Well...maybe "child element" isn't technically the right term, since they're all absolutely positioned relative to the browser window. But still: the photos shove down the "Add to" div until it is outside the scroller div, and it's then no longer visible...just as though it were a child element.
I changed the CSS to "overflow-x: hidden" which gave me a vertical scrollbar and allowed me to add content (the "Add to" div was at the bottom of the photo stack); but the scroller doesn't work with that rule. It needs the original CSS rule, which I have restored.
The page is athttp://www.1stdesignbrigade.com/arch/index.php?cID=120.... You can see (I hope) that the scroller is working. There aren't any missing closing tags in either the page source, or the view.php for the block that adds the photos (actually, there are no divs in it).
I changed the CSS to "overflow-x: hidden" which gave me a vertical scrollbar and allowed me to add content (the "Add to" div was at the bottom of the photo stack); but the scroller doesn't work with that rule. It needs the original CSS rule, which I have restored.
The page is athttp://www.1stdesignbrigade.com/arch/index.php?cID=120.... You can see (I hope) that the scroller is working. There aren't any missing closing tags in either the page source, or the view.php for the block that adds the photos (actually, there are no divs in it).
You're right, everything looks clean on the page output. What about your page type? Can you attach the page type file that's assigned to this page.
This is kind of cheating but you could add some PHP to the page so it applies css only in edit mode like this:
Also, an unrelated point but something I learned the hard way. I always add something unique to the ID's on my pages so instead of just id="content" use something like as id="1db-content". The reason for this is that sometimes blocks will be too generic in assigning ID's to their elements and then when they style those generic elements, their css bleeds into yours.
This is kind of cheating but you could add some PHP to the page so it applies css only in edit mode like this:
<?php $c = Page::getCurrentPage(); if ($c->isEditMode()) {?> <style> #ts2 {overflow-x: hidden;} </style> <?php } ?>
Also, an unrelated point but something I learned the hard way. I always add something unique to the ID's on my pages so instead of just id="content" use something like as id="1db-content". The reason for this is that sometimes blocks will be too generic in assigning ID's to their elements and then when they style those generic elements, their css bleeds into yours.
Thanks for that suggestion...although I had to alter it a bit. It's not important to specify the overflow-x property (since it's already hidden)--it's the overflow-y property that has to be specified: "overflow-y: visible;"
I added that to the template, and it works now. It still has a scrollbar, though, so even though the "Add to" div is accessible, it's still initially hidden inside the scroller div.
I've tried to attach the portfolio.php file, but I keep getting "File portfolio.php has an invalid extension."
I added that to the template, and it works now. It still has a scrollbar, though, so even though the "Add to" div is accessible, it's still initially hidden inside the scroller div.
I've tried to attach the portfolio.php file, but I keep getting "File portfolio.php has an invalid extension."
You have to rename it portfolio.txt to post it. Posting PHP files is a secuity risk for Concrete5.org
Here it is.
It may be irrelevant anyway, because I should have been adding the photos to a stack instead (since they'll be used across a number of pages). That has a different interface, and adding numerous blocks is easy.
Then, after adding the stack, you should never have to add anything else to the scroller div. But it's still useful to have the scrollbar to access the "Add to" div, so thanks for that PHP snippet. I'll file that away in case anything like this ever happens again.
It may be irrelevant anyway, because I should have been adding the photos to a stack instead (since they'll be used across a number of pages). That has a different interface, and adding numerous blocks is easy.
Then, after adding the stack, you should never have to add anything else to the scroller div. But it's still useful to have the scrollbar to access the "Add to" div, so thanks for that PHP snippet. I'll file that away in case anything like this ever happens again.
Ok, I think I see what's happening. The thumbnail scroller is not an actual block, correct? You are just adding images to the area called 'Thumbnails' and letting the page markup wrap these thumbnails in the proper divs so the jquery plugin works. I got confused because when I asked what was in the view.php file, I was referring to the block's view file but there is no view.php for the block because it's not a block.
So you can either do what you've already done or try to build the jquery thumbnail scroller into an actual block. I'm guessin' you'll choose the former.
So you can either do what you've already done or try to build the jquery thumbnail scroller into an actual block. I'm guessin' you'll choose the former.
So I was sitting around on this rainy day and you got me thinking about creating a block for your thumbnail scroller.
I have attached a basic block called 'jQuery Thumbnail Scroller' that you unzip and upload directly into your 'root/blocks' folder so your structure ends up as 'root/blocks/jquery thumbnail scroller'. Then head over to "Dashboard -> Block Types" and install the block.
When you add this block to your page, it just asks for the name of your stack. I see you've edited the css but I just included the plugin's stock css. You edit the block's css by going to the block's css folder and editing the css file in there.
I used the window.onload function from your site to set the parameters and I added jQuery's .addClass to add the 'tipClass' class to the images.
Anyways, I had fun and learned a few things along the way so if you just end up tossing it in your Recycle Bin, my feelings won't be hurt (but I'm going to develop it a bit more for my use).
I have attached a basic block called 'jQuery Thumbnail Scroller' that you unzip and upload directly into your 'root/blocks' folder so your structure ends up as 'root/blocks/jquery thumbnail scroller'. Then head over to "Dashboard -> Block Types" and install the block.
When you add this block to your page, it just asks for the name of your stack. I see you've edited the css but I just included the plugin's stock css. You edit the block's css by going to the block's css folder and editing the css file in there.
I used the window.onload function from your site to set the parameters and I added jQuery's .addClass to add the 'tipClass' class to the images.
Anyways, I had fun and learned a few things along the way so if you just end up tossing it in your Recycle Bin, my feelings won't be hurt (but I'm going to develop it a bit more for my use).
Thanks...I'll check it out. I can't promise I'll understand everything, but I'll give it my best.
Actually, the scroller is working pretty well on the development site as it is. I've already shown it to the person who will have to be doing the upkeep to the site (and who happens to be married to me), and she's fine with the way it works.
Actually, the scroller is working pretty well on the development site as it is. I've already shown it to the person who will have to be doing the upkeep to the site (and who happens to be married to me), and she's fine with the way it works.
Basically, it just moves this stuff:
into a block so you can add it to any area of your site on any page type and you will see the proper 'Add To' structure to boot. The way you have it set up now, your scroller will only work on a page type of 'portfolio.php' because you hard-coded the scoller's specific divs into that page.
Play around with it when you have the time.
<div id="tS2" class="jThumbnailScroller"> <div class="jTscrollerContainer"> <div class="jTscroller"> Outputs the stack images </div> </div> </div>
into a block so you can add it to any area of your site on any page type and you will see the proper 'Add To' structure to boot. The way you have it set up now, your scroller will only work on a page type of 'portfolio.php' because you hard-coded the scoller's specific divs into that page.
Play around with it when you have the time.
Can you post the 'View Source' of the page when it's not in edit mode for us to inspect?