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.
Related
I want to use some popup/alert window that contains a URL.
Something like:
alert(localhost:2828\index.html);
I am sure I have seen it before.
If there is some bootstrap, then it will be even better.
If you mean that you want to display a website as a pop-up, you should try this library.
This question already has answers here:
How do I modify the URL without reloading the page?
(20 answers)
Closed 9 years ago.
I've found a lot of questions about changing the url (without reloading).
Some answers were - use plugins, use location.hash ..., or with reloading
But none of them worked for me.
On website I have a dropdown menu, and on its change the url parameter should have changed.
So what I'm trying to do is:
I want to change: www.foo.com?country=Germany into www.foo.com?country=Slovenia without reload.
Is what I am trying to achieve even possible?
You can in newer browsers; in older ones, you can only change the hash. This seems like a good article on the topic:
http://html5doctor.com/history-api/
What you are looking for is the History API HTML5 provides. It comes with functionality like history.pushState(...), history.popState(...), which lets you dynamically change the URL without having to assign a new URL altogether.
It is used by many sites, including, I suspect, Facebook itself, where if you open a chat box, and navigate between pages, the chat box doesn't reload. It means that all new content are being fetched through Ajax, but then the URL won't change, would it? But it does. I think they do it through history.pushState(...), where you just push a new state into the History stack, and it changes only a certain part of the page. You will find an excellent tutorial here.
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/
Sorry for the title.....bit difficult to word what I really want to ask.
Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.
If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.
I really like this, but my question is:
I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?
For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?
Would the best way be to use a modal window library which is not very popular?
Thanks very much. Hope that makes sense!
EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.
You can dynamically load jQuery only if it is needed.
First check for the existance of the jQuery object. If not add the script tag.
There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.
There is an article on how to do this:
http://www.squidoo.com/load-jQuery-dynamically
You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.
jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:
http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?
EDIT:
I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.
I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
How does Google achieve the fading effect on the home page?
Hi All,
If you visit Google, notice that when the page loads it is very sterile. Upon moving the mouse many elements of the web page now appear in front of you.
How is this done? I think that it is pretty neat.
Is it AJAX?
No it's not AJAX. It is regular JavaScript.
You may want to check the following post:
How does Google achieve the fading effect on the home page?
Technically, no, it's not AJAX.
AJAX officially stands for Asynchronous Javascript And XML, and colloquially refers to any communication between the browser and the web server without a full page load. Those elements are already on the page from the initial page load, and are simply revealed via Javascript (not retrieved from the server).
Any major Javascript effects library can achieve the effect you describe. See e.g. jQuery and Scriptaculous.
It's not AJAX. Ajax is this.
What you're seeing is probably a mix of CSS/Javascript animation techniques. One example can be found on this CSS Animation page from the webkit site
Have a look at jQuery, they have a function called fadeIn.
That is not what Google is using, but it is (probably) the simplest way you can recreate it.
Also, AJAX stands for Asynchronous JavaScript And XML, which is just another (friendlier) name for XMLHttpRequest. XMLHttpRequest is a way of sending data to and from the server without refreshing the entire page. When you view images in an album on Facebook and click on it, it loads the new image witohut refreshing the page. That is AJAX. Google (and jQuery's fadeIn) are what used to be called DHTML (Dynamic HTML), that is, clever JavaScript programming.
This is done using regular Javascript.
Google uses the mousemove event to find out when the mouse moves, and the setTimeout function to create a timer that gradually fades in the content.
This can be done by using CSS+Javascript, changing the value of opacity (for non-IE browsers) or the opacity level of the DXImageTransform.Alpha filter (IE only), through a setInterval().
Please try to understand what AJAX is before making questions like this!
If you knew what ajax was you would know that the fade in of the options in google has nothing to do with AJAX