safari and IE sidecolumn under main content

jackmaessen

I'm experimenting with a piece of code wich has to catch all the code in a codeblock.
I do this is GoogleCodePrettiify plugin.

This is what i added:

public function DiscussionController_BeforeCommentBody_Handler($Sender) {
    $element_id = uniqid(); //generate unique ID
    $selectcode ='<a rel="highlight'.$element_id.'" class="selectable">[Selecteer Code]</a>'; // assign unique ID aan rel attribute
        $selectcode .= '<div id="highlight'.$element_id.'" class="codeselectable">'; // assign unique ID to div
    echo $selectcode;
    }

    public function DiscussionController_AfterCommentBody_Handler($Sender) {

        echo '</div>'; // close the div with unique ID
        }

The select works fine but in safari and IE the sidecolumn is out of position. The problem is in this line:

$selectcode .= '<div id="highlight'.$element_id.'" class="codeselectable">'; // assign unique ID to div

When disabling this line sidecolumn is back on his place in safari and IE.

What is going wrong exactly? It is only a div i put in front of the code tag


See what happens here: http://forum.webprofis.nl/discussion/297/test-highlighter-2

This is the javascript which belongs to it:

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}


$( document ).ready(function() {
    $('a.selectable').click(function() {
        SelectText( $(this).attr("rel") );
    });

})

R_J

Not sure about the reasons, but a html validator has problems with your site: http://validator.w3.org/check?uri=http://forum.webprofis.nl/discussion/297/test-highlighter-2&charset=(detect+automatically)&doctype=Inline&group=0

Maybe the browsers just handle errors different...

vrijvlinder

Try using span instead of div maybe ?

jackmaessen

doesn't make sense....too bad...

R_J

Well, as I've said before: looking at the source of the side shows me that code (in ul.FilterMenu):

<li class="QnA-UnansweredQuestions ">
    <a href="/discussions/unanswered" class="UnansweredQuestions">
        <span class="Sprite SpUnansweredQuestions">
        </span>
        Onbeantwoord
        <span class="Aside">
            <span class="Popin Count" rel="/discussions/unansweredcount">
            </span>

    </a>
</li>

As you can see, there is a closing span missing in line 9.

If you start with something wrong, don't expect to get logical results. First get the obvious errors out of your code and afterwards see if the browsers behave the same.

jackmaessen

You are right @R_J
I put the end tag in the wrong public function: should be BeforeCommentBody_Handler.
Now it is better:

 public function DiscussionController_BeforeCommentBody_Handler($Sender) {
    $element_id = uniqid(); //generate unique ID

    $rel ='<a rel="highlight'.$element_id.'" class="selectable">[Selecteer Code]</a>'; // assign unique ID aan rel attribute

        $selectcode .= '<div id="highlight'.$element_id.'" class="codeselectable" >'; // assign unique ID to div
        echo $rel.'<br />';
        echo '</div>';     
    echo $selectcode;
    }

I recognize now that this isn't working at all. Because: the rel attribute is parsed outside of the
<code class="prettyprint linenums"> code in here </code>

And i do not know how to parse it inside these code tags

The best way to make this happen is give the code tag the unique ID and not the div outside of it what i created. But i really don'nt knwo how to give that code tag an ID

R_J

I admit I haven't understood what you are trying to achieve, but maybe js could be a solution?

On document ready, get elements of class whatever the enclosing div has and add id to that.

R_J

Or try this hooks for your code insertion

if (!function_exists('FormatBody')):
function FormatBody($Object) {
   Gdn::Controller()->FireEvent('BeforeCommentBody');
   $Object->FormatBody = Gdn_Format::To($Object->Body, $Object->Format);
   Gdn::Controller()->FireEvent('AfterCommentFormat');
   return $Object->FormatBody;
}
endif;

R_J

Or BeforeCommentDisplay + AfterComment

R_J

@R_J said:
Or BeforeCommentDisplay + AfterComment

Bad advice: this would result in

< ul>
  < div>
    < li>
...

because they are fired after the ul and before the first tag / after the last closing li and before the closing ul tag...

vrijvlinder

you can use jquery to add ID or Class

so to add ID example

$('element').attr('id', 'value');

http://api.jquery.com/add/

http://api.jquery.com/attr/