MVC Widget, jquery and popup content block

Posted by Community Admin on 31-Aug-2012 00:00

Hello all.

Here's my scenario.

I currently have an MVC web app that I am bringing under SF. At present I have the following markup:

<script type="text/javascript">

$(document).ready(function ()

SetupPopupHelpDiv(new Array(

source: 'popup1', target: 'PopupContent1', height: 100

));

);

</script>

@using (Html.BeginFormSitefinity())

<div class="popupHelp">

</div>

<ul class="areaHighlight">

<li>

<div class="editor-label">

<label for="NuisanceSolutions">

Have appropriate <span class="PopupHighlight popup1">noise abatement solutions

</span>been implemented?</label>

</div>

</li>

</ul>

<div class="PopupContent1" style="display: none">

<h1>Helper here</h1>

<h2>Content To Go Here

</h2>

</div>

With the following jquery:

//Popup help div support.

function SetupPopupHelpDiv(links)

//Insert the inner section of the popup help div, just the placeholder required in the page itself.

var template = ['<div class="popupHelp-Outer">',

'<div class="popupHelp-Close"></div>',

'<p class="PopupHelp-Title">Popup window title</p>',

'<div class="popupHelp-Inner">',

'<p class="popupHelp-Content">Content to go here</p>',

'</div>',

'</div>'].join('');

$('.popupHelp').html(template);

$('.popupHelp-Close').click(function () $('.popupHelp').hide("fast"); );

$.each(links, function (index, value)

// alert(index + " " + value.source + " : " + value.target);

var showFunc = function ()

$('.PopupHelp-Title').html($('.' + value.target + ' H1').html());

$('.popupHelp-Content').html($('.' + value.target + ' H2').html());

$('.popupHelp-Inner').css('height', value.height);

$('.popupHelp').show("fast");

;

$('.' + value.source).hoverIntent(showFunc, HidePopup);

);

function HidePopup()

//Do nothing, hoverIntent requires an 'out' function to be provided.

Now I can use this within SF and it works as normal.

What I would like to do is extend this further.

Rather than a div held within the widget itself, the aim is for sitefinity users to be able to add and amend this content themselves.

As such, my thinking would be to have a 75/25 layout, the 75% being the MVC widget, the 25% the a content block that SF users can change accordingly.

However, I don't seem to be able to get his to work.

Any ideas how I can achieve this? I have tried the follwing

<script type="text/javascript">

$(document).ready(function ()

SetupPopupHelpDiv(new Array(

source: 'popup1', target: 'PopupContent1', height: 100

,

source: 'popup1', target: 'PopupContent2', height: 100

));

);

</script>

And then setting up a div class="PopupContent2" in SF but it doesn't seem to want to play ball.

Any ideas anyone?

Posted by Community Admin on 31-Aug-2012 00:00

I was being a tool.

Just needed the following



<div class="popupHelp"></div>
<p style="display: none;">SHOW ME&nbsp; SHOW ME!!! </p>



Where the content block CSSClass is PopupContent1

Posted by Community Admin on 04-Sep-2012 00:00

Rather than using the 75/25 layout, it might be better to place the editable popup widget part under the rest. That way, it wouldn't take up any layout space when the popup is closed, it should just collapse. Yet, it would remain editable.

Posted by Community Admin on 05-Sep-2012 00:00

Hi Dan.
We're actually running with that idea. Works well and looks really good.

This thread is closed

All Replies