I'm trying to get a web page in a window within a web page, so basily what I want is something like a standed os,
you have a exe it opens with in a window, well I want that but in HTML5
Would I use Ajax?
Anything would be helpful at this stage!
Thanks jrop
For your problem you don't need HTML5. You can solve it by using jQuery.
jQuert window plugin (You can choose one of them depending on your need):
http://fstoke.me/jquery/window/
http://hernan.amiune.com/labs/jQuery-Windows-Engine-Plugin/jQuery-Windows-Engine-Plugin.html
http://swip.codylindley.com/DOMWindowDemo.html
http://pierrebertet.net/projects/jquery_superbox/
If you want an actual window then you would use open. If you want a pseudo-window inside a page, then you would use <iframe>. If you don't want an actual page, but just a chunk of HTML then you would use DOM manipulation to create the elements in the page (and possibly Ajax techniques to get the data over HTTP if you don't have it in the page already).
Related
I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
I am not trying to track clicks or anything like other people - I just want to put a browser within a browser that can go back, forward, refresh, accept user-entered URLs, and store bookmarks. Can flash/silverlight/ajax/whatever do this? If so, how?
How about:
Solution 1:
Create or use an existing ActiveX Web Browser control.
And let your web/page host that ActiveX, or host multiple controls.
Solution 2:
Put an iframe inside a UserControl, a textbox and a go button.
Get the user provided url from textbox.
Change the src of the iframe when user clicks the go button.
_
<iframe id="iFrame" name="myFrame" src="http://bing.com"
width="100%" height="300" frameborder="0">
<p>Does your browser support iframes?</p>
</iframe>
--EDIT--
This is in response to your comment; you posed 3 questions:
For 1, thats correct, ActiveX works for IE, more specifically for Windows; there are ways you can install ActiveX for different browsers, but it(the ActiveX) would require windows OS. See this.
For 2, try handling that using JavaScript; something like following within iframe block.
<p>Back</p>
Checkout these examples.
For the third one, if I understand you correctly then you can always parse the url when user clicks onto the Go button; and respond accordingly before rendering the page.
flash can do basic html (AFAIK) not sure about silverlight.
you will struggle to do it with javascript/iframes. Especially back/forward/refresh buttons. If you are on the same domain you have some control over the iframe, but once it leaves your domain, you lose control
Would using an iframe or an object with type="text/html" be useful to you in terms of being able to embed a page within a page? Either method effectively permits loading a separate page within a page with little side-effect.
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?
I thought I would ask here about how to develop a wiazrd like control
in ajax for MVC before I started it.
The control will have pages that have data entry controls and
on each page submission insert data into a database.
Any ideas how to go about this?
Malcolm
Are you using a JavaScript library? I know dojo has a wizard in dojox namespace, and I'm pretty sure there are wizards for jquery. If not, I'd do a wizard just like I would tabs, without the tab bar, and each view contains a form and next, previous, cancel and or restart buttons, all of which would handle the ajax calls/state management and change the view.
If it's a wizard you probably actually should use separate web pages rather than having a single page that's updated through ajax calls, that way the forward and back buttons can work as nature intended in the browser for moving forward and back through the wizard.
Of course you can use fragment tricks to get forward / back working in a single page but in my experience this is tricky.