CKEditor display on top of all the content flex - actionscript-3

I have found the lot and got one editor which i use in my project (Flex Web application).
I have used CKEditor from this link.
<ckeditor:CKEditor id="editor1" width="100%" height="100%">
<ckeditor:htmlText>
<![CDATA[
]]>
</ckeditor:htmlText>
</ckeditor:CKEditor>
It's working ok in my project. But, there is one issue i am facing.
Problem:
I have one alert message and Custom popup container. I want to display that both on top of the editor. But it hide behind the editor.
I want to display on top of that editor. How can i do this?
Currently look something like:
Thanks.

I don't think that will be possible because the CKEditor area is drawn over the swf. So you can do, unfortunately, nothing.
Take a look on your html page source code and you'll see what I mean.
Edit :
I agree with #fsbmain about using ExternalInterface, but to show a JavaScript alert :
if(ExternalInterface.available){
ExternalInterface.call('alert', 'some message here !');
}
Edit 2 :
To hide your CKEditor, you can use a JavaScript function which you can call via ExternalInterface :
JS :
<script type="text/javascript">
function hideCKEditor()
{
document.getElementById('ck0').style.display = 'none';
}
</script>
Then in the ActionScript side :
if(ExternalInterface.available){
ExternalInterface.call('hideCKEditor');
}
Alert.show('Your message here !', 'Alert Box', mx.controls.Alert.OK);
Hope that can help.

That editor based on html div (so it's a html element above your swf app), that means that you have only three options to show your popup "over" it:
Hide editor when popup is opened - in my mind best option by risks/time ratio
Actually all other methods are dirty cheats and require quite a lot of work with questionable result with a lot of edge cases and potential issues:
Show you popup in separate swf above that html, communicate between two swf with ExternalInterface
Improve on #1 if you really want to show editor in background - make your editor screenshot with JS (try that Using HTML5/Canvas/JavaScript to take screenshots), send data to flash via ExternalInterface and display it in Bitmap

Related

Open new page at specific size

I have rollover that when clicked opens a link (video) in a new page or tab depending on if I specify target="_blank".
Question? Can I control the width of this new (parent) page. I would like it to be ~80% smaller than the parent just to show the user that it is a separate page. Or.. How can I have this code open in a window of the existing page?
Thank you for your time
<div id="apDiv3"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></div>
As you mentioned in your own post you can use window.open read the window.open documentation for more info. You can specify many parameters about the popup. A simple popup with explicit width / height would look like this:
window.open('http://www.google.com',"My Window Name", "width=400,height=400")
I also created a plunker so you can see it in action
HOWEVER, I really advise against using this. This is the OLD way of doing things. This type of popup hasn't been popular for well over 10 years now. Outside of being annoying and unpopular it is also not dependable. Some browsers / popup blockers will totally block this window from opening.
A better alternative is to use some sort of JS modal library to load the content within the actual page (not in a new window).
One I really like is Magnific Popup they have a bunch of examples on their page.

How to implement pop up window with no status bar and address bar in HTML?

I am trying to implement popup window in web application, i found following resource very useful
http://www.scriptfx.com/windows/plain/simple.htm#7
but all the examples shown here having following
menubar/toolbar and address location.
In my html, i am calling high-chart to plot data points.
Structure of html
<html>
<body>
adding high chart plot by using div id.
<script>
script for plotting plot using high chart
</script>
</body>
I really don't don't need html only. I can simply do the same in popup window.
How can i generate a pop up window without such bars i.e. a plain html with option for closing window on clicking a button or cross on it.
You can't change the design of the Browser popup window, from your comment you just want to popup a simple html code so there is a lot of easy to use custom modals (popups) built using javascript.
try one of these (just a simple search for jquery modal window and you will find a lot)
Simple Modal
jQuery UI dialog
Thick Box
Bootstrap Modal
Edit
you can show your dialog this way ( jQuery UI )
<div id="popup" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information.</p>
</div>
<!-- button to show -->
Click to Show
javascript
$(document).ready(function(){
// show dialog on click
$('.showModal').click(function(){
$('#popup').dialog({width: 600,height: 600});
});
});
You cannot set window properties in HTML at all. All you can do in HTML to create popup windows is to use the target="_blank" attribute, but it only suggests that a link be opened in a new browsing context, which might be a new window, but these days it is more often a new tab.
What you are referring to is JavaScript code, not HTML. There are many resources, including SO questions and answers, on opening windows that way, as well on reasons for not doing so and using more advanced methods like modal dialogues.

Content Dialog template in Visual Studio C#

I'm starting to learn Windows 8.1 phone development and I am trying to get the Content Dialog template to work inside a Pivot page. Work some reason, when I try to get the Add app bar button to navigate to the ContentDialog.xaml page, it is not displaying, but I see the navigate go to the ContentDialog constructor where the this.InitializeComponent() occurs.
I am finding very little online in way of examples on this template, so I am at a loss as to what I am missing. I understand that the ContentDialog page that was created from the template is inheriting from ContentDialog and not Page, but I'm not sure if this is still supposed to be directly accessed or if this XAML is supposed to be inside another "Page" XAML file.
Can someone please help.
The code looks like this in the Pivot page when the click event is selected:
Frame.Navigate(typeof(ContentDialog1));
I really haven't even touched the ContentDialog template from it's default yet, so it is set up like a set password page.
Thanks in advance
UPDATE
I found the answer to my question above. apparently, because it is a Content control, it needs to be called like a normal dialog would need to be called in it's code behind. I think my missconseption was that I thought it being "a template", that when I called it with the navigation calls that it would already have everything needed to get fired. You can also add the Content control to an existing page if you would like.
In either scenario, you need to add a method similar to this in your XAML.CS file.
private async void OpenDialog()
{
await this.contentStuff.ShowAsync();
}
You then need to call this method in the constructor. Then, when called, your dialog will appear.
Hope this helps others just starting out.

Dynamic Elements in JSP?

I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.

How to load options.html in jQuery-colorbox, upon a context menu item click?

I am adding 'options' to my chrome extension. I wonder how can I user colorbox) from background page or content scripts, when context menu item is clicked.
I have spent more than a day on this without success. Is there anybody who has done this? Any help is appreciated.
While you certainly can't use this from a background page, since colorbox shows UI, you have a few options from a content script:
You could do an XHR to fetch the contents of the background page (chrome.extension.getURL may be helpful) and write the contents of the result into the colorbox.
You could embed an <iframe src="/path/to/options.html"> in your colorbox.
I'm assuming you know how to bind JS functions to context menus? Just in case, the contextMenu docs.
Have you tried either of these options?