Knowledge Base support case for Likno Web Modal Windows Builder, abstracted and stripped of all user’s private info.
Initial Email From: Glenn
Initial Email Subject: Loading html pages dynamically on page load..
Support Case Month: September 2012
Hi, I have been trying to find your articles on how to dynamically change the link of the page to load into a window as the HTML page loads. At present I am using the following link
<a href='#' target='Modal_Window_1'>
<img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>How do I pass a page url to the html page to be loaded into the window in this case?
Could you direct me to the solution.
Thanks,
Glenn
Reply From: Likno Customer Support
Dear Glenn,
If you want to create a link that will load the Modal Window with a specific URL, then you just need to add the proper href like this:
<a href='mypage.html' target='Modal_Window_1'> test </a>
If you want this to automatically open on page load and the URL to be defined by JavaScript (e.g. different each time), then you need something like this:
<script>
var my_url="mypage.html";
function open_modal() {
if (typeof Modal_Window_1 == "undefined") setTimeout(open_modal, 200);
else Modal_Window_1({bodySource:"<div externalUrl='"+my_url+"'/>"});
</script>
For more information on how you can use the JavaScript API to pass more parameters (e.g. size etc.) please have a look here:
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From:Glenn
Hi Kostas,
I tried your recommendations both of the following:<a href='help01.html' target='Modal_Window_1'>
<img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>
<a href='../help01.html' target='Modal_Window_1'>
<img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>The help files are in the root directory of the site and also I placed a copy in the likno-scripts folder.
<a href='http://psychcam.tv/help01.html' target='Modal_Window_1'>
<img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>I have selected 'External' as the source and left the link field blank in your app.
Neither of these links loaded the html page when the window opens.
Thanks,
Glenn
Reply From: Likno Customer Support
Dear Glenn,
Please try setting your project to “page links”:
Then use the following code in your page:
<a href='/help01.html' target='Modal_Window_1_single'>
<img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>(note the “_single” at the end of your modal name)
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From:Glenn
Hi Kostas,
Thanks for the information.
check out psychcam.tv and click on a product in the left hand column.
The ? images should open the window.
I followed the instructions below, uploaded the likno folder and the index page which I relinked to the project, but now the windows aren't opening, just open the page in a new window.
There must be something else I don't have set properly.
Thanks,
Glenn
Reply From: Likno Customer Support
Dear Glenn,
This is because you are loading the links with Ajax, after the library has been loaded.
Modal Windows does support links loaded with Ajax, but this feature was added in the latest version (build 250 – August 13).
Please download the latest build and recompile your project to fix this problem.
Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From:Glenn
Terrific thanks Kostas,
Works now.
Glenn
Tags: ajax, code, html, JavaScript, JavaScript API, jquery, library, link, load, loads, modal, modal window, page, script, URL, version, website, window