How to make entire <div> a link

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

1/15/2019 2:02:19 PM
Gravatar
Total Posts 18

How to make entire <div> a link

According to this article: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/ HTML 5 supports this format: 

<a href="blah.com">

<div>

anything

</div>

</a>

When I try to do this, it gets rewritten (I'm using CKEditor) as:

<div>

<a href="blah.com">

anything

</a>

</div>

Is there any way to prevent this? I have a 3 column grid, with images in the backgrounds of each column, and text over the images. I want the whole column to be clickable. I want the text for SEO so don't want to make it all into an image.

Thanks!

Julie

1/16/2019 10:58:16 AM
Gravatar
Total Posts 2125

Re: How to make entire a link

Hi Julie,

This can be done with some changes to the CKeditor js configuration. The best way to do this and ensure you don't lose your changes when you upgrade mojoPortal is to do the following:

  1. Copy the /ClientScript/ckeditor-mojoconfig.js and paste it in the same folder with a custom name, i.e. ckeditor-julie.js.
  2. Edit ckeditor-julie.js:
    1. insert config.autoParagraph = false; on line 11.
    2. insert the following on their own lines at the very bottom of the file, after the };
      CKEDITOR.dtd['a']['div'] = 1;
      CKEDITOR.dtd['a']['p'] = 1;
  3. Save the ckeditor-julie.js file.
  4. Open your user.config file and add this before the closing </appSettings>
    <add key="CKEditor:ConfigPath" value="~/ClientScript/ckeditor-julie.js" />
  5. Open your web.config file, add a space to one of the comments in the file and then save it. This causes IIS to reload the web.config, which reloads the user.config.

Thank you,
Joe