Is there some way to hide the browser toolbar / statusbar etc in current window via javascript? I know I can do it in a popup with window.open() but I need to do it this way. Is it possible at all?
As per the previous answer, this isn't possible to my knowledge and is best avoided anyway. Even if a solution can be found, bear in mind that most browsers these days allow the user to prevent Javascript from interfering with their browser settings and window chrome, even when using window.open. So you've got absolutely no way of guarenteeing the behaviour that you're looking for and consequently you're best off forgetting about it altogether. Let the user decide how they want their window configured.
I believe this is not possible. And anyway, just don't do it. Your page can do what it wants with the rendering area, but the rest of the browser belongs to the user and websites have no business messing with it.
Marijn: ok thanks. This is for an intranet site and we display InfoPath forms as separate, no-toolbar, no-statusbar windows. This is a client requirement, I'm not trying to do evil ;)
To Martin Meredith, Luke, Marijn: thanks for your quick reply. It is now settled that it's not possible.
I agree with you all about this being an undesirable behavior, but as i stated before, this is for a bank intranet application where all users are running a tightly controlled, centrally-configured, customized and hacked to death browser they have no control over anyway, and the client actually wants this behavior for the application. It would be dumb and annoying to do this in a public facing/general website, of course. But sometimes we just have to get the job done :(
No. This would be a massive security hole if it were possible... not to mention annoying.
My browser wont even let you do this in popups... which can be annoying aswell!
You may want to investigate using an HTA (HTML Application).
It will render HTML pages with zero browser chrome, a custom icon can be shown on the task bar, and the entire "caption" can be removed. The last option yields a floating window without eve a close button.
For how I imagine your needs to be, you would want to start with something like:
<html>
<head>
<title>HTA Demonstration</title>
<hta:application innerborder="no" icon="magnify.exe" />
</head>
<body style="overflow: hidden; margin: 0;">
<iframe src="http://www.yahoo.com" style="width: 100%; height: 100%;"></iframe>
</body>
</html>
Save the above HTML into a file and give it "example.hta" as the file name. You'll then have a generic icon on your desktop which you can double click on to start.
<hta:application innerborder="no" caption="no" icon="magnify.exe" />
This change will remove the title bar when running the script. Press Alt-F4 to exit the script if you do this.
This will also only work with IE, however that should not be an issue on an intranet.
Related
I have an annoying white space below footer problem, and no matter how long I have searched for the answer I cannot find it, because it doesn't seem to be anything I can do in CSS to solve the problem. Also, the problem is not on every page... it arbitrarily selects (seemingly) random pages within the website, which made me think that perhaps it is happening as a result of some javascript code that I cannot seem to locate as being the offending party.
Anyway, after hours of scrolling through websites, I decided to load the website without javascript and sure enough the white space disappeared. As a somewhat novice programmer, I'm not really sure what to do next. I put
<div class="clear"></div>
right before in my header, and voila, it worked... no more white space on any of the pages. So technically, I guess this resolves my problem, at least visually, but since I'm a novice, I have no idea what the potential repercussions are for this? Is it okay to leave it? Could I try something else? Does this problem sound familiar to anyone? Many thanks in advance for your help! I don't know if you'll need more info than this.
Just to be clear, I'm developing a child theme in Wordpress off of someone else's theme. The website is a multisite, and the other site on the multisite doesn't seem to be broken at all, despite having nearly all the same elements. One of the few differences is a Contact Form 7 form where they each have their own instance of a CF7 form. When I attempted to add some javascript to the CF7 form, I believe that's when it broke. Since I only added it to one website (within the form itself), I think that's why only one website broke with the white space underneath. Simply removing the code wasn't enough.
By the way, I should add I have had this problem with this website before, and my (weird) solution at that time was to rename the links of the pages where the white gap was showing up... and sure enough, it worked. Obviously, as my site grows backlinks I don't want to keep doing that.
So, is my rudimentary fix enough?
As APAD1 said, the <!DOCTYPE> declaration must always be the very first element in the HTML document, otherwise it will have no effect! The fact that placing <div class="clear"></div> before the <!DOCTYPE> declaration seemed to fix your problem indicates that the white-space was somehow the related to or caused by the browser defaults for that particular HTML rendering mode.
Also, what browser are you using? You're not using Internet Explorer, are you? Different browsers or even different versions of the same browser may render your page differently.
As for the <!DOCTYPE> declaration, it is needed to indicate a particular layout mode the browser should enter.
In Internet Explorer, for example, the omission of a <!DOCTYPE> declaration may cause the browser to enter Quirks mode, as opposed to a Standards-Compliance mode. Note that <!DOCTYPE html> is used for HTML5 documents, whereas something like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`
...is used for HTML4. The (X)HTML doctype declaration is used to put the browser into a particular layout/rendering mode. Different rendering modes result in different CSS default styles. It is likely that some combination of CSS rules are resulting in the unexpected white-space.
I suggest you become familiar with (or at least play around with) Firebug (a FireFox extension), the Webkit Inspector ("Developer Tools") that comes in Google Chrome and Safari, and/or the IE Developer Tools. All of these tools allow you to "inspect" elements in the Document Object Model (DOM) for your webpage. These tools will even let you view and modify the HTML source code and CSS rules for elements in the DOM. (Please be aware any changes you make with these tools will not be saved and therefore are not persistent!) This means that using one of these tools, you can select your footer element and view its applied ("computed") CSS styles. This is especially helpful in not only troubleshooting your webpage or WordPress theme, but also in developing it.
So, to sum up:
If you don't place the <!DOCTYPE> declaration as the first element, then you might as well omit it altogether.
The <!DOCTYPE> declaration places the browser in a particular layout mode that has certain CSS defaults.
A combination of CSS rules is likely resulting in the unexpected white-space.
You may use browser "developer tools" such as FireBug to inspect (and modify) your webpage.
Okay, this is resolved (as of right now). The problem was a plugin conflict that was writing javascript to the footer. It only caused a problem when I added javascript to the Contact Form 7 plugin.
To resolve the issue, I edited the HTML in firebug as you suggested, Alex. Once I found out the offending plugin I disabled the conflicting scripts.
Thanks for all your help, guys. This is resolved.
I recently found out that in Internet Explorer (v9 at least), the "Pin it" button for Pinterest is breaking 'back' functionality in the browser. Right-clicking on it shows an entry like 'http://assets.pinterest.com/pidget.html' as the previous page.
Looks like Pinterest is adding an iFrame and IE is adding its address to the history. Clicking 'back' doesn't do anything. Is this a known issue and is there a fix for this?
well, as a temporary solution (other than removing the 'pin it' button), from reading their code, I believe (not tested) that you could add a part to the <script> call to disable logging, like this ...
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-do-not-log="true"></script>
This works but doesn't apply for me because I load the script asynchronously and I use a load command, so what I did was I copied the pinit.js file locally to the server, and changed the part that says
if(a.v.config["do-not-log"]||a.a.doNotLog===true)
to
if(a.v.config["do-not-log"]||a.a.doNotLog===true||true)
looks like it's doing some sort of log in an iframe.
I was having the same problem. I added the website to my list of restricted sites by going to "Tools", then "Internet options", then "Security". It seems to have solved the problem.
I've raised it with PInterest here https://help.pinterest.com/requests/884162
Thier response. Pretty much a brush off.
Hi ,
Information on how to add the Pin It button to your website or product pages is available here:
http://pinterest.com/about/goodies/
More advanced documentation is available here:
https://help.pinterest.com/entries/21101982
We regret that we're unable to provide coding support. Because issues with adding the Pin It button can be caused by conflicts with different parts of your setup it is usually best when someone that is familiar with your setup troubleshoots it. You may also want to try searching the web to see if others have had similar issues especially people that are using a similar site platform or language.
We request that you use our help articles to get the information you need as quickly as possible. If there’s additional information you’d like our team to know, you can reply to this message.
Thanks for writing and happy pinning!
The Pinterest Team
This was a temporary bug when we first pushed the new Pin It button and should no longer be an issue, since we removed the logging frame shortly after it was reported. Sorry for the trouble!
I'm a complete beginner in the development side of things and would greatly appreciate any help.
I have the following code that refreshes an entire page when the browser is resized:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.
Again, thank you in advance for any help.
Use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
And consider using classes instead of IDs if you have multiple iFrames.
I am having issues with the Facebook social widget and I was hoping this would fix it. Your code was helpful (a good start).
That said, it did not work.
I will post a solution if I find one. Facebook really needs to update their widget. It really is problematic with responsive sites (mobile devices). Considering they created React code, it really is not very well written.
jQuery seems a better solution since I did not have an id to target) but the problem is deeper within the iframe.
// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
$('.fb iframe')[0].contentDocument.location.reload(true);
});
//--- other ways to reload iframes---
//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);
//reload all iFrames
$('iframe').each(function() {
this.contentWindow.location.reload(true);
});
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));
Update...
I found these two well-written pages on the subject. Hopefully, it works.
How to make the Facebook Page Plugin fully responsive
Making The Facebook Page Plugin Responsive
UPDATE
The code above is nice, but they did not have it ready to rock and roll. The showed examples for their site and I almost got it working, but there is still a bug in my code.
so...
This is totally cheating, but I was looking at the source code and opened the iframe location from Facebook and it actually worked (it seems allowed). So far it seems to work with other profiles too (so long as you grant permission first).
I just hardcoded the iframe vs using their JavaScript code. It also works 1000x times better/faster this way and it is already responsive. It is nuts I had spent so much time with trying to fix Facebook's code. Using a straight URL link in the iframe loads way faster (geezzz).
Here is an example of what I used for the final URL (I cleaned up the unneeded parameters.
https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500
Again, keep in mind for this to work, you need to create a social box at Facebook first, so that you can grant permission. I tried to do it with my personal username and since I have never created one before, it did not work. Again, this is theory, but that makes sense.My actual site is using another client and I also tested other clients. It seems to work fine.
No promises it will work on a live site. It is possible Facbook blocks users that do not use it via the script, but we will see. I am guessing Facebook may use scripts in the code to check for location source, so this way may fail over time (don't know yet). Also, it is possible I am missing a needed key that Facebook genarates from the script thatI failed to notice (or removed). I was careful when I cleaned it up, and I did not want to include more than needed. We will see.
Anyways, try your own tests via the source code please. I need to work on other more important stuff, and this works and seems to be a simple very effective solution. I will have more time later if it fails. The client wont know and again, it is faster and seem to work better.
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
ONE MORE UPDATE.
It seems to be working, but I still need to send a refresh to the URL in the paramaters for the width. Also, note the maxium width for the social widget is 500px (so if you have a need for one bigger, it wont go more unless you use some kind of transform in CSS).
Here is the final code.
Funny about all this, I am back full circle. I am using some of the code we talked about above and some new code I figured out and wrote.
:)
Also noteworthy, I noticed the StackOverflow console is giving me an error.
Please ignore it. The error has something to do with the iframe reference calling Facebook which StackOverflow does not like. As far as I can tell, there is no error.
If I am wrong, let me know.
// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
$('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Disable browser's back button
How can I disable a browsers back button, in an asp.net mvc project. Can I use java script for this ? or is there any other ways to do this ?
This has often been discussed on countless threads, the most exhaustive article is here and why it always will not work.
A website should not try to cripple the browser, but instead should work inside the browser-page system of the web. There are good reason for not wanting the user to click back (re-POSTing data, especially financial transactions and the like), but rather than forcing them not to, your website should handle these gracefully. Using a good framework like .NET leaves you a lot of great options for keeping your site stateful even amid the stateless web. Write your code to fit the browser, don't make the browser fit your code (like the ridiculous no-right-click javascripts of yesteryear).
That said, thankfully there is no way to do this, and even if there were, it could always be disabled on the client side.
I would have to assume it is impossible. That would be a big security issue on most browsers. I don't even remember in IE4 when the most extreme things were allows, you being able to do it.
I don't think that you can disable the back button, althought there are some "techniques" like those described in this site: http://www.htmlgoodies.com/tutorials/buttons/article.php/3478911/Disabling-the-Back-Button.htm
It is not possible to the disable the BACK button of the browser, but if you don't want the user to go back to a previous page then you can add this javascript function to your page:
<script language="javascript">
function DisableBackButton()
{
history.forward();
}
</script>
And call this function in body only..
Like
<form id="form1" runat="server">
<script language="javascript">DisableBackButton();</script>
---your page design----------
</form>
I guess this is possible, but I don't know how.
<a rel="width[640];height[480];autostart[true];loop[true];title[Google]" class="jcepopup" href="http://www.google.nl">Aanbieding</a>
Can it be done linke this?
<body onload="javascript: laden()">
<script type="text/javascript">
function laden()
{
window.open('http://www.google.nl rel="width[640];height[480];autostart[true];loop[true];title[Google]" class="jcepopup"', 'blablabla', 'width=720', 'heigt=500');
}
Most browsers these days block pop-ups because of this very use. There are a couple of generally accepted ways to get around this (I hope lightning does not strike me down).
Open the pop-up after the user clicks on something
Embed some Flash and use ActionScript to open it
The Flash method is renowned enough that you can find several links about it online. If you can shove some Javascript into some container, you can essentially bypass the restrictions (if you get creative). Windows Media files, for instance. Movies are great for opening pop-ups.
I'm going to leave this intentionally vague, as I don't want to be responsible for the proliferation of more pop-ups.
Yes, but you don't need the javascript: in your onload, you can just do:
<body onload="laden();">