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.

This thread is closed to new posts. You must sign in to post in the forums.
1/15/2019 2:02:19 PM
Gravatar
Total Posts 21

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 2254

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 

You must sign in to post in the forums. This thread is closed to new posts.