Forums

Problem with a block.

Permalink
Arrgh. I really wanted to try to solve this on my own, but it's not happening.

I made a block.

It's a Frankensteined block (drawing from Remo's "Person" block, which is excellent, and one or two of C5's default blocks), because I'm learning PHP but I'm not good enough to write my own blocks in PHP, so I borrowed from the blocks I liked, and made a new block. It's probably wonky, but it seems to work... except for one thing. One. Thing.

I'll try to explain. I have a container that is split into two parts: on the left side is an image, and on the right is a whole area that is an anchor, the background color changes on hover, there are two bits of text in it. The two bits of text are 1) Title/link of the page where you'll be going (i.e., "Work"), and 2) "View Collection" which is repeated in every subsequent container, just as text.

I made a block with 3 fields:

1) Image from library.

2) Description (This was part of what I Frankensteined from another block, but I'm not sure what I want to do with it. If I can just put "View Collection" on the view.php page, I obviously don't need to keep the Description field, but... I don't know if, to fix this linking issue, I'll have to keep this field to somehow tie it in with the next field.)

3) Relative link URL options list, to link to an internal page.

THE ISSUE: The issue I'm having is that, since the "View Collection" text isn't contained, somehow, within the PHP for the fields, it's sitting "above" the container, position:absolute, with a higher z-index. Sooo... when the user hovers the cursor over the container, the background changes on hover as expected... but then when the cursor hovers over "View Collection," the anchor is interrupted. The background goes back to the not-on state. Am I explaining it well?

Here's an image:

http://imgur.com/R5UKC.jpg

(I drew a text cursor and wanted to make it clear that it's a text cursor, but in retrospect it looks like I'm saying, "This needs to stay a text cursor!" which is NOT the case. Sorry.)

I don't know what to do! I'm at my wit's end. Do I use some JS hack to fix it? Is there something CSS can do that I'm unaware of, to make "View Collection" sit flush with the hover area? Or do I need to build this into the PHP, but then, how? Do I find some way to link up the two text fields? I have no idea how to do that. I've tried. I can't find documentation on what components go into building a block in C5, besides the basic "starter block" which doesn't go into much detail.

Any help on this is so appreciated. Beyond appreciated. If there's any other info I can provide, let me know.

Here are my files. Snickering is fine, but please don't belly laugh. I'm trying to learn.

add.php:

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$controllerObj=$controller;
$bf = null;
$bfo = null;
?>
<?php
include($this->getBlockPath().'/form.php');
?>
<?php $bt->inc('editor_init.php'); ?>
<div style="text-align: center">
<textarea id="ccm-content-<?php echo $a->getAreaID()?>" class="advancedEditor ccm-advanced-editor" name="content"></textarea>
</div>


edit.php:

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$controllerObj=$controller;
$bf = null;
$bfo = null;
if ($controller->getFileID() > 0) { 
   $bf = $controller->getFileObject();
}
?>
<?php
include($this->getBlockPath().'/form.php');
?>
<?php
$bt->inc('editor_init.php');
?>
Viewing 15 lines of 18 lines. View entire code block.


controller.php:

<?
   Loader::block('library_file');
   defined('C5_EXECUTE') or die(_("Access Denied."));   
   class PersonBlockController extends BlockController {
      protected $btInterfaceWidth = 500;
      protected $btInterfaceHeight = 700;
      protected $btTable = 'btPerson';
      /** 
       * Used for localization. If we want to localize the name/description we have to include this
       */
      public function getBlockTypeDescription() {
         return t("Adds a person block.");
      }
      public function getBlockTypeName() {
         return t("Person");
Viewing 15 lines of 196 lines. View entire code block.


db.xml:

<?xml version="1.0"?>
<schema version="0.3">
   <table name="btPerson">
      <field name="bID" type="I">
         <key />
         <unsigned />
      </field>
      <field name="tID" type="I">
            <unsigned />
         <default value="0" />
        </field>
      <field name="fID" type="I">
         <unsigned />
         <default value="0" />
      </field>
Viewing 15 lines of 23 lines. View entire code block.


view.php:

<style>
.diva {position: relative; height: 165px; width: 329px; float: right;}
.diva a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 90; color: #fff;}
.diva a:hover {background: #392313; color: #fff;}
.wish {position: absolute; z-index: 91; color: #fff;}
.wish:hover {position: absolute; z-index: 91; color: #fff; display: inline;}
</style>
<div class="collection-set-wrapper">
    <div class="collection-art-container" style="position: relative; float: left;">
    <?
    defined('C5_EXECUTE') or die(_("Access Denied."));
    echo "<div class=\"ccm-person-image\"><img src=\"" . $controller->getFileObject()->getURL() . "\" alt=\"\"></div>";
    echo "<div class=\"ccm-person-description\" style=\"position: absolute; left: 400px; top: 10px; color: red; z-index: 90000;\">" . nl2br($controller->description) ."</div>";
    //echo "<div class=\"ccm-person-description\">" . $content = $controller->getPerson(); print $content; ."</div>";
    ?>
Viewing 15 lines of 27 lines. View entire code block.


form.php:

<? 
defined('C5_EXECUTE') or die(_("Access Denied."));
$includeAssetLibrary = true; 
$assetLibraryPassThru = array(
   'type' => 'image'
);
$al = Loader::helper('concrete/asset_library');
?>
<div class="ccm-block-field-group">
<h2><?=t('Image')?></h2>
<?=$al->image('ccm-b-image', 'fID', t('Choose Image'), $bf);?>
</div>
<div class="ccm-block-field-group">
<h2><?=t('Description')?></h2>
<?= $form->textarea('description', $description, array('style' => 'width: 280px;height:40px;')); ?>
Viewing 15 lines of 16 lines. View entire code block.


Other files are: auto.js, editor_config.php, editor_init.php.

Here's what the block interface looks like, in case it helps:

http://imgur.com/jlPCq.jpg

Thanks for any help on this. You guys have been so great with questions I've had in the past and I hate to keep being a pest, but I figure maybe it will help someone in the future. Thanks thanks.
stephmars
 
stephmars replied on at Permalink Reply
stephmars
Anyone? :( Did I do a terrible job of explaining it?

I can provide additional information, if needed.

I'm thinking the solution may be in creating two link fields which draw from the same internal page library. Trying to do that now, but when I go to Add it, I can't. I get an error.
LucasAnderson replied on at Permalink Reply
LucasAnderson
Hmm, if I'm understanding you correctly, you need the background to change in the 'diva' container when someone hovers over the View Collection link.

I think you can do this using jQuery, try adding this in your view.php towards the bottom:

<script>
$("div.diva a").mouseover(function(){
$("div.diva").css("background-color","red");
}).mouseout(function(){
$("div.diva").css("background-color","yellow");
});
</script>

Replace 'red' and 'yellow' with the correct colors you're using for your backgrounds.

I tested this in a mock of your block and it seems to work.
stephmars replied on at Permalink Reply
stephmars
A brave and generous attempt, thank you so much - alas, it did not work. Well, not the way it needs to, because when the block is repeated, and you hover over the offending text, each block has the hover color. :(

I think I'm going to create a transparent area that covers the hover area, and acts as a trigger for an anchored area beneath it, using some CSS magic. The two text areas won't be selectable, but I guess I'll have to live with that until I learn more PHP. I hope this works. If it doesn't, after working on this one block for 2 weeks, I think I'll be ready for the nuthouse.

In the meantime, if anyone else has any solutions... I'm just sitting here at work pulling my hair out, so feel free to suggest anything. Thanks guys. :)
Fernandos replied on at Permalink Reply
Fernandos
hey steph ;)

This would do it. Old but good.
http://roshanbh.com.np/2008/03/image-hover-effect-jquery.html...

if you have multiple instances of your block and this doesn't work whyever, let me know. I've made a solution to that, but you can read it up yourself also, because others had different solutions.

http://github.com/jackmoore/colorbox/issues#issue/4...

I'm X4^

I know this isn't related to your block, but the code for multiple instances is.
LucasAnderson replied on at Permalink Reply
LucasAnderson
It's just a thought, but if your attempt and Fernandos' links do not help, I suppose you could modify the code I gave you in this fashion:

1. Make each instance of the block create a div with the same class but append a number to it, such as an 'instance ID'. Example: diva-1, diva-2

2. Then, use the code I gave you but auto-generate a snippet for each 'instance ID'. Something like this:


<script>
$("div.diva-1 a").mouseover(function(){
$("div.diva-1").css("background-color","red");
}).mouseout(function(){
$("div.diva-1").css("background-color","yellow");
});

$("div.diva-2 a").mouseover(function(){
$("div.diva-3").css("background-color","red");
}).mouseout(function(){
$("div.diva-3").css("background-color","yellow");
});

$("div.diva-3 a").mouseover(function(){
$("div.diva-3").css("background-color","red");
}).mouseout(function(){
$("div.diva-3").css("background-color","yellow");
});
</script>