im trying to open a popup with nothing but the content using javascript in html.
no status bar, no toolbar, no scrollbars, ..., and NO TITLE BAR.
The code must work with Internet Explorer, but the more the better in this case...
i know there are some properties sushi as toolbar=no status=no.. but what about title=no?
It isn't really necessary to use window.open, but i must work with javascript.
Thanks in advance!
Why would you want a popup without any way for the user to control that popup (moving the window, minimizing, closing, etc)? This goes against all usability guidelines on the web.
If you still want to do something like this, I would recommend an inline lightbox. This would allow you to control the styling of the popup, however it wouldn't ever leave your site's main window.
A popular solution for this that has a lot of work already completed would be colorbox.
If you don't need all of the power or functionality of colorbox, it would be pretty easy to roll your own since you have no desire to show any controls.
$("a").click(function() {
$(document).append('<iframe id="chromelessPopup" src="popup_src.html"></iframe>');
}
And then some CSS to style your popup:
#chromelessPopup {
height: 400px;
width: 340px;
border: 2px solid #000;
position: absolute;
top: 10%;
left: 35%
}
IE has Kiosk Mode (F11 or -k on the command line) but this mode cannot be invoked by webpages for obvious security reasons. Hiding everything (taskbar, etc) from the user's view by a website is clearly not desirable. All popups opened by webpages have a title bar.
I've got some documentation that says there is a titlebar=no option to window.open() and that IE also supports fullscreen=yes.
Note that I haven't tried these.
Related
I'm working on a little project, and have attempted to "embed" (or otherwise) the mChat plugin from phpBB into the entirety of my website. After trying and failing to get the chat onto an external PHP page that I could simply include into my index, I settled for an iFrame with the following properties. The page mchat is hosted locally and is a page with my forums background, and the mchat module on it, afaik everything is served with https using letsencrypt (I don't receive any SSL errors anyway)...
<div id="mchatdiv">
<iframe scrolling="no" id="mchatframe" src="/path/to/forum/app.php/mchat">
</iframe>
</div>
CSS
#mchatdiv {box-sizing: border-box; border: 1px solid rgb(5, 180, 1); overflow: hidden; max-width: 100%;}
#mchatframe {transform: scale(1.052); border: 0px none; margin-top: -80px; margin-bottom: -125px; width: 100%; height: 500px;}
It took a long long time of modifying the mchat_body.html file, and modifying the iFrame CSS to get it right, but now it sits in my page "perfectly" on Firefox, Chrome and IE11.
Here's the issue, I started researching how to include a "Chat loading" section into the div while the frame is loading, and found a lot of scary pages about iFrames, and the vulnerabilities they open you up to, and how they should never used. I then tried to find everything I could about iFrames. And no matter where you look, there doesn't seem to be anything concrete.
Here on stackoverflow alone, you can find multiple examples of top-rated answers ranging from "if the content of the iFrame is locally hosted then you're not any more or less secure than you would be" to "iframes always increase your risks of XSS(?) attacks and..."
I'm sorry if it's not as simple a question as it seems to me, but am I opening my site up to any more vulnerabilities by using an iframe sourced to locally-hosted content? And if yes, can somebody please explain to me how so, and how I should go about retrieving this content for use on my page instead? I looked into jquery, but am hesitant to include the library for 'one task' - Is javascript capable of somehow doing the task more securely than an iFrame?
Thank you all very much for your time.
I am trying to use toastr js in SharePoint 2013 to show notifications. Everything looks great until I add closebutton:true in toastr option. Close button appears though the alignment gets distorted for the title, message and the close button. Any idea what is going wrong with the implementation?
With closed button
without closed button
It occurs since SharePoint (core15.css) declares min-width property for button:
input[type=button], input[type=reset], input[type=submit], button {
min-width: 6em;
}
Solutions
CSS:
button.toast-close-button {
min-width: 0;
}
jQuery:
$('button.toast-close-button').css('min-width',0);
Result
This is likely a CSS issue. My guess is that some style on your site is interfering with the styles in toastr. You should be able to fix it by checking the styles in the Chrome Dev Tools (or whatever browser tools you use) to inspect the CSS, find the style that is causing the issue (toggle them on and off to help), and then create a new style to override the problem.
I'm doing some after-the-fact accessibility testing on a pretty simple web page. It uses Php, basic javascript and css.
What happens is when VoiceOver is turned on, this web page flashes for a second, then goes completely blank. A solid grey page.
It's clearly not a problem with the screen curtain. This is solely happening in Safari, and only this web page. Something must be wrong with my markup, styles or javascript. I've googled like mad to no avail.
I've begun to pull it apart line-by-line, has anyone come across this?
I found the problem/solution, as strange as it is.
One line of css broke the entire page. I had an present for the sake of accessibility which I didn't want to actually display on the page. I set it to position:absolute, and top: -999em.
Apparently this breaks a webpage with iPad VoiceOver enabled:
top: -999em;
However, this is fine (and what I typically do anyway):
left: -999em;
On one of my fake domains I've been working on a menu for fun. The menu works as expected here:
-Removed-
However, that page doesn't use any PHP.
-Removed-
This page does use PHP to fill the links in the menu from a database full of fake links. The problem is that it works as expected in IE9 but chrome for some reason adds a left:40px to the div that holds the links the first time you load the page. Afterwords, the script looks and acts as it is supposed to. I validated the html and CSS as XHTML 1.0 Strict and CSS3. I have not been able to test this in Firefox or opera because this computer cannot have those browsers installed.
The only difference HTML wise is that in the php version, the links are actually tagged as links were as the homepage version, they are simply text. The CSS does contain styles for the element in the .LinkDiv class that sets margins and padding to 0px.
If anyone is able to shine some light on this issue, that would be great.
I added:
.LinkDiv {
height: 100px;
width: 175px;
display: none;
position: relative;
left: 0; /* This */
background-color: rgb(217,217,217);
}
and constantly hit refresh, sometimes in chrome it loaded correctly, others it loaded with the div 40px to the left.
add this to you css file
.LinkDiv:nth-child(1){left:0 !important;}
I am updating a wordpress website for a client so am unfamiliar with the structure of the whole site.
On the blog page (http://shoreditchradio.co.uk/blog/) , posts are displayed in a wrapper #blogleft, which is defined in the css file as follows:
#blogleft {
float: left;
width: 580px;
}
however via the inspector I can see that the width is being over-ridden to be 100%
element.style {
width: 100%;
}
My question is - what is the easiest way to determine where this is being injected from? As far as I know it can only be from a javascript file somewhere in the site.
I have been poking around in the inspector for some time now. Is there a simple way to identify the source of an injected inline style like this? Any help much appreciated!
That width:100%; is hard coded on the HTML, you can see this by checking the style attribute on the div tag in the HTML.
The easiest way for CSS and HTML debugging is by using the developer tools/web inspector tools (integrated in firefox and chrome or by plugin such as Firebug). The element.style CSS selector means it is hard coded on the selected element.
"hard coded", in this case, means it is directly injected through the HTML. Through the developer tools/web inspector tools you should be able to determine the origin of the CSS in question.
If you want to troubleshoot "injected stylesheet" in Chrome
Open develop console -> Network
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page