John K.
New Member
Posts:13
 |
| 04 Mar 2010 07:18 AM |
|
Hi,
Firstly let me just say a big thanks to you guys for this free module. It's brilliant.
Now, I'm new to writing dnn modules, but I'm quite experienced in ajaxcontrol toolkit, modal popup etc. I've been thinking of modifying your expandable html module's behaviour such that instead of just expanding the hidden html, it displays it, in a modalpopup.
How difficult would this be to achieve? I assume, the core code would probably not be touched, only some additions such as a modalpopupextender to wrap the ascx and some javascript to launch the modalpopup on click.
Or even, a plain old school html based modal popup that will only use javascript to show the popup and hence not need any server side modifications?
How feasible is this in your view of the project as it is right now?
As I said, I'm very new to dnn. Never written even 1 module, but this sounds like a nice project to get my feet wet.
Thanks
John |
|
|
|
|
Mitchel Sellers
Site Moderator
Basic Member
Posts:328
|
| 04 Mar 2010 07:26 AM |
|
I think it could be done, but there will be a bit involved in doing this.
The module now is just a straight HTML dump of content. |
|
-Mitchel Sellers, Microsoft C# MVP, MCITP
CEO
IowaComputerGurus Inc!
Visit my blog for helpful technical articles
For recommended products and services view the links to the right. |
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 07:32 AM |
|
Thanks for the quick reply.
I've got a hack of it working by putting together some javascript code to overwrite the ShowOrHideContent function.
Just started so i'm still trying to get it to work just right.
Best part is that it doesn't need any modification of the server side code. |
|
|
|
|
Mitchel Sellers
Site Moderator
Basic Member
Posts:328
|
| 04 Mar 2010 07:53 AM |
|
| Awesome! Yes, since all that the code does is write out the HTML, it is fairly easy to modify the styling etc. |
|
-Mitchel Sellers, Microsoft C# MVP, MCITP
CEO
IowaComputerGurus Inc!
Visit my blog for helpful technical articles
For recommended products and services view the links to the right. |
|
|
khankins
New Member
Posts:8
|
| 04 Mar 2010 08:18 AM |
|
| John K - Will you make that version of the module available when you get it working? |
|
|
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 08:26 AM |
|
Here is the horrible, horrible hack that works. It's a cut, paste and edit of some script I found.
First I added this script to ETH_Jscript.js (thanks from stackoverflow)
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(msgtxt) {
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = msgtxt;
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "X";
closebtn.style.right = "5px";
closebtn.style.top = "5px";
closebtn.style.position = "relative";
closebtn.style.float = "right";
closebtn.style.textAlign = "right";
this.square.appendChild(closebtn);
this.square.appendChild(msg);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
Then overwote ShowOrHideContent()'s body with this
var stext = listing.innerHTML;
var pop = new myPop();
pop.popOut(stext);
And finally modified my portal's css by adding these classes (again from stack overflow)
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square
{
position: absolute;
top: 200px;
width: 50%;
left: 0;
right: 0;
background-color:White;
margin-left: auto;
margin-right: auto;
border: 1px solid #333333;
height: 400px;
width : 450px;
overflow: auto;
}
div.square div.msg
{
color: #3e6bc2;
font-size: 15px;
padding: 15px;
}
Let me state again, its a bad hack, but it works. There's still the matter of the expand image next to the link so obviously the image would need to be hidden.
I was just trying to see how easy it would be to get it working.
Next I'll see if I can get it to work with SimpleModal which adds some bells and whistles.
See demo's of his jquery based modal at
http://www.ericmmartin.com/projects/simplemodal-demos/#
Thanks
John
|
|
|
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 08:30 AM |
|
Posted By khankins on 04 Mar 2010 08:18 AM
John K - Will you make that version of the module available when you get it working?
Sorry but I'm not part of the dev team. Just regular folk like you.
I downloaded the source of the module and had thought of getting it to show the html using a modal popup instead of just a show/hide effect.
It's for a website I'm currently doing for a client. They want their details to be 'floating with an X at the corner' as they put it.
John |
|
|
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 09:22 AM |
|
Well this day has been productive.
Gotten it to work with SimpleModal. Had to change the css so that the backgrounds are not black, but otherwise, its worked ok.
Its' even easier than with the other handcrafted code.
Download simplemodal basic
copy all the code from jquery.simplemodal.js to ETH_Jscript
Change the ShowOrHideContent() to have this line
jQuery('#' + idOfElement).modal();
just after the collapse variable, you can comment out the rest.
Add these css blocks to the portal.css file
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container
{
height: 320px;
width: 600px;
border: 4px solid #444;
padding: 12px;
background-color: #FFFFFF;
}
#simplemodal-container code
{
background-position: #FFFFFF;
background: #FFFFFF;
border-left: 3px solid #65B43D;
color: #000000;
display: block;
margin-bottom: 12px;
padding: 4px 6px 6px;
}
#simplemodal-container a {color:#ddled;}
#simplemodal-container a.modalCloseImg {background:url(x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container #basic-modal-content {padding:8px;}
There is a file called x.png that comes with the script, that I just moved to the root of the portal and voila, it works.
It's a hack, but it works pretty fine. Tested with
Chrome
IE 7
FF 3
I hope it can enter the features list. It would be awesome to just have it as an option in settings.
Cheers
John
|
|
|
|
|
Mitchel Sellers
Site Moderator
Basic Member
Posts:328
|
| 04 Mar 2010 09:27 AM |
|
John,
Great work. Would you see this as a different "presentation type" for the existing module? I personally almost think a quick fork of the module, "Modal Text/HTML" or something similar would make a bit more sense. I can then work on ways of making sure that if users don't have Javascript etc that it gracefully degrades in functionality. |
|
-Mitchel Sellers, Microsoft C# MVP, MCITP
CEO
IowaComputerGurus Inc!
Visit my blog for helpful technical articles
For recommended products and services view the links to the right. |
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 09:42 AM |
|
Great idea.
Though I would have thought of it kind of like a third option next to 'Use JQuery to render effects' in the settings! But having it as a separate module isn't a bad idea either, only downside would be maintaining both codebases.
Funny, I hadn't thought of clients that don't have javascript, was kinda excited at getting it to work so fast. Older browsers may preset an interesting problem!
I'd think for the older browser, maybe just render the text inline and disable the client side script? or something along those lines?
Anyways, as it is right now, my clients will be happy, I've tested it and it handles overflowing nicely when the html is long, and pictures are displayed ok.
I'll keep tweaking with it (increasing the modal size, changing colors etc). If I notice something not quite right, I'll post it here.
Thanks
John
|
|
|
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 09:46 AM |
|
I have a quick question. Is there a way I can change the default image for expand/collapse?
As it is right now, I'd have to make the image a transparent gif or hide it using css or javascript!
Thanks
John |
|
|
|
|
Mitchel Sellers
Site Moderator
Basic Member
Posts:328
|
| 04 Mar 2010 10:01 AM |
|
John,
You could possibly use Javscript/jQuery to hide it., but right now there is not a method to do it.
|
|
-Mitchel Sellers, Microsoft C# MVP, MCITP
CEO
IowaComputerGurus Inc!
Visit my blog for helpful technical articles
For recommended products and services view the links to the right. |
|
|
John K.
New Member
Posts:13
|
| 04 Mar 2010 10:08 AM |
|
No problem, I'll find a work-around.
Again, thanks for this great free module.
John |
|
|
|
|
John K.
New Member
Posts:13
|
| 05 Mar 2010 07:20 AM |
|
Hi Mitch,
I added a column named UseModalEffect to the module settings table for this module. I then made sure it was in the stored proc for Fetching and Saving. I added a few checks here and there (all similar to the flag for useJQuery), and it's working now. I can see the bit column being updated in the table just fine and the rendering works ok. In order to keep things kinda the same, I added it as the last parameter to ALL methods (saving, fetch etc)
Only one problem, for some reason the column ContentCss is being set to the ConnectionString???? Very puzzling.
I'm running windows 7 and despite my best efforts can't seem to be able to debug the iis process, I just get the usual (no symbols loaded message).
If I could debug it I'm sure i'd have sorted it out by now! Very frustrating. Anyways in the meantime I thought I'd post here in case anyone has an idea as I keep trying to get debugging to work on my pc.
Any thoughts as to why ContentCss gets set to the connection string?
Cheers
John |
|
|
|
|
Mitchel Sellers
Site Moderator
Basic Member
Posts:328
|
| 05 Mar 2010 07:38 AM |
|
John,
Sorry about that, version 4.00 source has a bug, and it looks like I do not have the 4.01 source posted.
Open the SqlDataProvider.cs file, go to line 146, you will see in the list of parameters being passed to SqlHelper that instead of "ContentCss" the value "connectionstring" is passed. |
|
-Mitchel Sellers, Microsoft C# MVP, MCITP
CEO
IowaComputerGurus Inc!
Visit my blog for helpful technical articles
For recommended products and services view the links to the right. |
|
|
John K.
New Member
Posts:13
|
| 05 Mar 2010 07:49 AM |
|
Phew! Thanks for the pointer. Thought I was doing something wrong, it's cool though, I've fixed it now.
I actually didn't change much of your code, I just added else if's to your JQuery checks and moved the script to it's own .js file in order to keep things clean.
Works great now since the option is a module setting.
Cheers
John |
|
|
|
|
John K.
New Member
Posts:13
|
| 05 Mar 2010 07:52 AM |
|
On another note, the only source I see in the downloads page is the 4.0.0 source.
The most recent is * Version 4.0.1 Installation (DNN 4.6.0 and Later) which is the setup I assume, not the source.
John |
|
|
|
|
Mitchel Sellers
Site Moderator
Basic Member
Posts:328
|
| 05 Mar 2010 07:57 AM |
|
Yes I just noticed that. Version 4.01 ONLY has the change that I just mentioned, nothing else.
If you want to share your modifications, I could get them incorporated into the next release of the module and provide you credit for the creation of them. |
|
-Mitchel Sellers, Microsoft C# MVP, MCITP
CEO
IowaComputerGurus Inc!
Visit my blog for helpful technical articles
For recommended products and services view the links to the right. |
|
|
John K.
New Member
Posts:13
|
| 05 Mar 2010 08:18 AM |
|
The changes aren't that many and I'd be happy to either mail them to you or post them here, whichever is easier.
There are some things I'm still working on as shown
1. The default 'Show Expanded' option should be disabled for items or fixed/tweaked to work with the modal popup.
2. Hiding of the expand/collapse icon.
3. Proper handling of the CSS requirements (the Close icon etc) for the SimpleModal dialog.
I'll work on these over the weekend and post here if I think I've found nice work-arounds for the current issues.
Thanks
John |
|
|
|
|
John K.
New Member
Posts:13
|
| 11 Mar 2010 05:30 AM |
|
I've managed to address the 1 and 2 above by hiding them if the modal effect has been enabled. I'm now stumped as to what to do about the CSS!
If I hard-code the CSS into the module then the style will be the same for all portals. I don't think it can be a per instance since a page can have multiple instances of the control and the css behaviour may be unpredictable. As it is now, if you install the module then you'd have to also add the default SimpleModal CSS definitions to the portal.css file so that the effect shows as expected.
Got any suggestions on how I can get the CSS to work as expected?
Here's the default simplemodal css:
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container
{
height: 420px;
width: 700px;
border: 4px solid #333333;
padding: 12px;
background-color: #FFFFFF;
}
#simplemodal-container a.modalCloseImg {background:url(x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container #basic-modal-content {padding:8px;} |
|
|
|
|