I use fancybox plugin on my website and I want to display an iframe in fullscreen.
I use this This goes to iframe, and the problem is that the iframe is not displayed full screen.
Check this and click on details to see what I'm talking about.
Why is not working ?
I believe the link is incorrect, here's one that I'm using now and it works.
<p><a class="fancy fancybox.iframe" href="http://www.youtube.com">Link name</a></p>
In your case "fancy" might need to be changed to fancybox fancybox.iframe. Haven't quite figured out the full screen. It looks like it needs to be done using javascript.
Related
I have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).
Today i updated my firefox to the latest version and one big feature is the reader view for desktop. We launched a webshop two weeks ago and now there is this tiny "reader view" icon. When i click on it i get an error-message. My team-leader wants me to remove this feature when visiting this site.
is it possible to remove or hide the "reader view" feature from firefox when visiting my site?
There is currently no legit way of disabling Reader View for your website. Reader View is supposed to automatically detect on what pages it should be available and on what pages it should not.
If there is an issue with your website, your best option is probably to report it there: https://github.com/mozilla/readability/issues
You can also find more info about the issues affecting Reader View in Firefox there: https://wiki.mozilla.org/QA/Reader_view
Although I would not recommend it, there might be a way to fool Reader View into thinking it should not parse your website, if you really need to. A quick look at the source code reveals that it will not parse certain type of documents, certain URIs and malformed URLs. You would need to dig in the source to understand how/if your site can safely be adapted to avoid being parsed. The Reader View source code can be found here: https://mxr.mozilla.org/mozilla-release/source/toolkit/components/reader/ReaderMode.jsm or
https://dxr.mozilla.org/mozilla-release/source/toolkit/components/reader/ReaderMode.jsm
This Question shows how to Optimize website to show reader view in Firefox. So you have to ensure that your site is not optimized for the Reader View.
Don't use formatting options that are favoured for the Reader View and so on.
I guess this will suffice:
Don't use the <p> Tag
write all Textblocks in small portions
Here are some more details about the mechanism
Replace p tags with div tags in your page. It worked for me, even when I have div tags with pre tags (preformatted text) on the same page.
There is no way of forcing disabling the Reader View to the user, But if it is important to your site, you can notify the user to disable or not use the reader feature of firefox.
This would be the way to Disable the Reader on the users browser
in the Enter about:config in browser address bar
click the "I'll be careful I promise" box
search for reader.parse-on-load.enabled
toggle preference to false (right click > toggle to false )
close the about:config page > refresh browser > reader view icon has gone
put this code on your css code and you are done !
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,
audio,video,adnav,adheader{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.
I write in .NET and in classic ASP.
I want to create a modal popup in ASP, like in .NET how the parent page can be disabled and turned a different color.
Is this possible in ASP?
Or is there no easy solution to get this done?
If possible...how?
You're going to use Javascript to make something like that, I'd recommend you use jQuery. There is a lot of prebuilt libraries to help you do that.
For the modal box, you might start with the jQuery Dialog.
Just use a javascript library to do this. jQuery is a popular choice and there a number of plugins to do this.
jqModal
thickbox
Yes, of course, but if you are writing the Javascript yourself, you can just create a hidden DIV tag that has the same exact page rendered, but with a 15% gray - transparent .gif file that sits on top of what is displayed. Then you change that DIV tag to visable when the Modal dialog is launched, and change it back when it's closed. Simple.
There are some great JS libraries out there that can help you.
I like jQuery and YUI for their ease of use.
Try this link and look around at some of their Panel offerings.. all of which have a Modal setting that will grey out the background.
http://developer.yahoo.com/yui/examples/container/panel-loading.html
Good Luck~
" how the parent page can be disabled and turned a different color"
You can use the ibox javascript, I have used it with good results.
http://www.ibegin.com/labs/ibox/
I'd put a vote in for stickywin from the clientcide site. Its all Mootools bases and very sweet to use.
By default in Firefox every time you open an image it will re-size to fit within the browser window, now if you view a lot of images this can become annoying having to click on the image every time it loads to see it full size.
There is a way to switch off that in about:config, but this is not a solution for a broader public.
Is there a way to switch that off by some JavaScript function, or CSS, or something else?
If you would like to switch off auto-resizing images in your browser, then you can
type about:config
search for property browser.enable_automatic_image_resizing
and set it to false
If you want it for your visitors, I just can repeat what Jeremy Sydik writes in Design Accessible Web Sites,
it’s just their web, we’re building on it.
And in this case, you really shouldn't decide whether your users want Firefox's auto-resizing feature or not. You can always choose a solution that gives better user experience to your visitors. For instance, you may install a Lightbox variant as Daniel A. White already mentioned.
There is also great_llama's solution to open images inside a HTML page.
Point to a dynamic page that uses an IMG tag with the appropriate source, rather than pointing to the raw image. Use the querystring or something similar to pass the image name to the page.
<html><body><img src="yourimage.jpg"></body></html>
I dont think there is anyway to change that behavior, at least using javascript or css.
Why not use a jQuery Lightbox?
http://leandrovieira.com/projects/jquery/lightbox/
Though I have not tried it, I don't see why it would autosize if you wrapped it in html and not link directly to the image.
if that is an option, just wrap it in html:
<style type="text/css">
* { margin:0; }
</style>
<img src="whatever.jpg" />
If you are the owner of the image, embed the image in an HTML document. Firefox resizes an image only if you open it directly in the browser.
If you are talking from a Firefox user's point of view, I think about:config is the appropriate place to disable this functionality.