Show fullscreen popup with addressbar in javascript - javascript

I want to show a popup window in full screen with only the address bar visible on Top. The minimize and Close button should also be not visible. Currently I am using the following code which enables me to go in full screen mode in IE 9 but does not show the address bar even though location=1
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=no,scrollbars=no,toolbar=1,menubar=1,location=0,directories=1,status=0,channelmode=0,fullscreen=1')
}

I don't think there's a way to only show the navigation bar in full screen as of yet - or at least not from what I can find.
If this is the case, you'll want to recreate the address bar programmatically, and then reset your location through JavaScript when you use the address bar. You can use CSS styles to make this look more or less like the standard bar depending on your needs.
I've fleshed out the JS more in the following example; on the form's submit event you can use window.location.href to cause a redirect within the browser. The input will likely need to be heavily manipulated to get it to be a working url (e.g. making sure that it's a valid address before you reset their location).
I would also consider adding the kind of functionality we find in common browsers where a query not treated as a URL is instead treated as a search. You can use the Google Web API for this: https://developers.google.com/web-search/docs/
You won't have access to browser history for autocomplete, which could possibly be solved by keeping a library of commonly visited sites and using an autocomplete library to assist you.
Though this doesn't directly answer your question, I hope that it can be of some help to you.
HTML
<div class="modal">
<form>
<input type="text"></input>
</form>
</div>
JS
(function(){
document.getElementById("nav-form").addEventListener("submit", function(e){
var val = document.getElementById("nav-bar").value;
//parse and execute the navigation command
//in here, we would check to make sure it's valid, etc.
//and format it to make sure it's a working url
//and keep a case for if it's not a valid url,
//in which case you can leverage the google search api
window.location.href = val;
});
}(window));
JS Fiddle showing bare bones of above: http://jsfiddle.net/x8heK/2/

Related

How do I modify a browser tab's text styling with Javascript?

I am trying to write a bit of code in a script that changes the color and/or text formatting of a browser's tab--any tab, not just the currently selected one--when a given process completes, so that I can tell, without tabbing back to said tab, if the process is finished or not.
What I'm looking for is the specific bit of code or call to make that accesses the tab's style (or whatever); something where I could go
tabWhereScriptFinishedExecution.style.color("#77ffa5");
tabWhereScriptFinishedExecution.style.fontWeight("bold");
or something. Tab Mix Plus and its different effects on the tabs reflecting various states and whatnot were what got me thinking about this.
I'm using Firefox, and working this into a Greasemonkey script, so I'd like to avoid using JQuery if possible.
As far as I know it is not possible to do the way you are trying to achieve it. You cannot style the tab text. It is part of the browser. Tab Mix Plus you are referring to is a plug in for Firefox.

Best way to detect field value change that was caused by chrome content script

I am writing a chrome plugin that makes use of a website (which I am also writing myself) to interact with the user.
A content script in the plugin changes certain field values in the website using jQueries .val() method.
The website needs to be able to detect such a change via its own javascript in order to update other stuff accordingly.
However, the value change does not fire a onchange event and since the website js and the content script are independent, the element.change() function in the websites jQuery does not react when the event is fired from code in the content script.
What is the best way to make the website js detect a change in the value of the field?
PS: In case you consider this a design problem (communication between extension and website is mixed with display functionality) I would also be interested in your suggestion.
This is how I finally solved it:
inputChanged = function(inputElement,callback){
oldInput = inputElement.val();
setInterval(function(){
if (oldInput!=inputElement.val()){
oldInput = inputElement.val();
callback();
}
},200);
}
It's not elegant, but it works.

How do I get the search results from a search engine?

I've been trying to figure out how to let a Greasemonkey user script open up a search engine page in the background and fetch search results. I've tried to look up examples to open up HTML pages, but afaik all examples of requests handle ajax calls instead of html calls.
Any hints would be grateful.
The standard Greasmonkey GM_xmlhttpRequest function (link to API) can handle any type of request, not just JSON. Under examples, check out the GET request code snippet.
Watch out though. Search engines like Google will not appreciate the screen scrapping (and will probably block you if you grab too many results too quickly).
Haven't done this in GreaseMonkey (don't know really in fact if you can do it);
though if you really want to do it by opening a new tab, and if you're not using any GM-specific stuff in your code (and don't want to run the code automatically, well, this can be an obstacle), you can take a look at Custom Buttons extension.
With it, you can create buttons that have access to Firefox internals and invoke stuff like gBrowser.addTab().
But working with CB is a bit more tricky than in GM.
These posts may help if you're interested:
JavaScript alert not working in Firefox 6
Mozilla: Tabbed browser / Manipulating content of a new tab
Code sample copied from Mozilla:
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
newTabBrowser.addEventListener("load", function () {
newTabBrowser.contentDocument.body.innerHTML = "<div>hello world</div>";
}, true);
I've done something similar.
All you have to do is save the GM_xmlhttpRequest response in a DIV.
With this DIV you can do whatever you want (show, hide, display only some of the content, etc)
Just take a look at my script source code.
I'm positive it will help you.
I know you don't need, Mr. 14k rep, but i'll break it down for you anyway :)
function conectar() calls GM_xmlhttpRequest [GET] and stores only the part of the content that i want to use in #divtempora, which is a dummy div that the user never sees (hidden).
Then function resp_dxlegacy() walks through the dummy div, save the info i want in a variable and calls conectar() again passing this parameter and storing the content in another div, which is, finally, displayed to the user.

Simulate browser address bar with Javascript

I need a control in html that simulates the address bar of a browser.
For example, if I type "www.google.com" I want to automatically put the prefix "http://"
or suggest the suffix .com. Also, to be able to control the history of it.
Do you know a jQuery plugin for this ? or how can be this done using css and javascript ?
It can be done using html/css/js
I would suggest using jQuery to get the value of a html form field. Checking if there's a http:// or not/adding it is really not a big deal with Javascript.
I guess, you want to send the request with Ajax? Be aware that you can't just easily load any page external pahes you want in display them e.g. in a iframe. see here
Last but not least, jQuery this plugin could help you with your history.
Don't be afraid to try it on your own, instead of wasting to much time of looking for the perfect plugin you want to have. The internet is full of examples how to get the value of an element using JS or changing it's value. It's shouldn't be a big deal to simulate an address bar.

How to hide javascript window.open address bar / location bar? [duplicate]

This question already has answers here:
Hiding the address bar of a browser (popup)
(11 answers)
Closed 4 years ago.
How can I hide the location/address bar of popup window created using JS ? am attaching a image where I marked the place wanted to be hidden.
Is it possible ? I use the below script for this.
var ctr=0;
function openpopup(popurl){
var winName = "New_"+(ctr++);
winpops=window.open(popurl,winName,"height=300,width=500,top=300,left=500,scrollbars=yes,resizable")
}
and used this to call onClick='openpopup(this.href);return false;'
Please help me for the same.
You cannot hide the address bar in modern browsers. That is a security measure. The user must always know on what page he is.
Also in that address bar is shown what type of page he is in (HTTP or HTTPS) and information of that webpage if it is secure.
So, sorry, but you cannot do that.
you can use a modal dialog. Not exactly a pop up, but it will open another container. Like an overlay. You see people doing this a lot with images, but you can also use this for html. There are a ton of plugins for jquery.
Heres one with some examples though:
http://jquery.com/demo/thickbox/
I personally like http://fancybox.net/
Only problem is you can't use ajax to call another website, but you can create a page in php or whatever and get the contents of another page and then return that in ajax.
you would want to use something like curl for this.
Forget window.open(). Use jquery ui or jquery tools overlay instead.
A js popup window will work.
You could have a generic page that has an embedded iframe to hide the actual page. Would be a little tricky to pass the right data though. Not really worth it imo.

Categories