How do people do this: http://mysite.com/#/page-name - hash

I want to use deep linking on my site using this url method, but I'm not sure how it works. When I set my links to work like this:
stuff
the browser doesn't put it in the window location bar. Ideas?

This technique is sometimes used for flash and ajax-based navigation to keep back/forward buttons and bookmarks functional. Check this for further reading http://tim.oreilly.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html
Or you could use jQuery and a plugin that does most of the hard stuff for you: https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin

Related

Opening URI in overlay, not main page

On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)

iPhone dev: Creating sliding drawers like Path and Facebook apps

The new Facebook app seem to have done away with the grid-icon layout, with a more interesting custom navigation layout where the bottom-most view shows all the options (like Profile, News Feed, Messages etc for Facebook) and clicking on one of them brings another view sliding over the top. You can press the 3-lines button to then expose the bottom-view again, but the current view is partially visible. The Path app also recently updated to match this scheme.
What's the best way to recreate this? I've searched for any open-source options but haven't found them. Three20 doesn't seem to support this either.
Another option that I wrote: ECSlidingViewController
It has support for orientation changes like Facebook and sliding to the left like Path.
Video demo: http://vimeo.com/35959384
Code: https://github.com/edgecase/ECSlidingViewController
Try These from Cocoa Controls:
JTRevealSidebar http://cocoacontrols.com/platforms/ios/controls/jtrevealsidebar
clcascade http://cocoacontrols.com/platforms/ios/controls/clcascade
StackScrollView http://cocoacontrols.com/platforms/ios/controls/stackscrollview
Many more on the same site like:
http://cocoacontrols.com/platforms/ios/controls/mfslidingnavigationcontroller
http://cocoacontrols.com/platforms/ios/controls/psstackedview
I found a really nice project on github:
https://github.com/devindoty/DDMenuController
Everything I've seen on the internet and those recommended by Yosi Taguri are all way too complicated. Drawers can be achieved by a very simple category to UINavigationController with no graphics asset whatsoever and no class extension needed, and backwards compatible with iOS 3.0!
Take a look a this:
http://code.google.com/p/drawer-navigation-controller/
Here is a video http://www.youtube.com/watch?v=5T-1-_pFbG0
This project (not mentioned above) looks like the most mature and polished to me: https://github.com/gotosleep/JASidePanels
Also, seems to still be active.
Edit: I have since transitioned to: https://github.com/mutualmobile/MMDrawerController which IMO is an almost perfect implementation.
Check my answer here - SplitView like Facebook app on iPhone - which contains a list of open-source codes.
if anyone's wondering which one to choose among JTReveal and DDMenu, I'd suggest DDMenucontroller over JTRevealSidebar (haven't used the other options listed by #Yosi). Its a lot simpler, lighter and works exactly the way the Path app works (and it is easier to modify to suit your requirements). Havent seen the issue of black background mentioned by #Henning
My project FRLayeredNavigationController on GitHub goes in about the same direction.
(The spacing between the layers is easily configurable and it supports rotation of course).
Have a look at the demo videos/screenshots:
http://youtu.be/v_tXD_mL05E
http://youtu.be/q66HX2td_uc
https://github.com/weissi/FRLayeredNavigationController/raw/master/FRLayeredNavigationControllerScreenshot1.png
https://github.com/weissi/FRLayeredNavigationController/raw/master/FRLayeredNavigationControllerScreenshot2.png
Here's another one: PPSlideDrawer.
http://www.localwisdom.com/blog/2013/05/simple-sliding-drawer-implementation-for-ios/
I checked out #Ephraim's answer (http://code.google.com/p/drawer-navigation-controller/) because it seems pretty easy to work with. The problem, it seems, with drawer-navigation-controller is that the swiping animation does not follow the user's finger--it is automated. PPSlideDrawer aims to solve that. I'm about to try it out in my project and will post some updates.
Might be a dealbreaker for some that the following are still under "TODO:"
Implement auto open functionality.
Implement swipe from edge functionality(rather than just detect panning gesture).
Landscape support.
Here is one thats very easy to implement and use with storyboards. It has control for shrinking, show hide animations, and direction.
https://github.com/HelloMihai/HMSideDrawerDirectional

Create springboard like main view

Is there some sample code, or an easy way, to implement an application with as its first view something like Springboard?
What I am looking for is just a view with basic icons which after a tab on an icon tells the view-controller to push the view associated with the selected icon.
This in itself is not that difficult off-course (just putting images on a view), but is there an easy way to implement all the extra functionality as well (as e.g. moving the icons around (start 'vibrating' when when you push hold them), multiple pages etc.). The Facebook App seems to have this. It is probably not worth my while to write it myself, but it would be nice if there is something 'out of the box' to give the App a bit more of an iPhone feel.
Thanks in advance!
Facebook uses the Three20 library for its UI. The specific view used for the SpringBoard-like interface is known as TTLauncherView.
This is not an endorsement (I have yet to really check this out, and I may be too entrenched in using Three20 at this point to even bother), but here is another project that implements the springboard functionality: myLauncher on Github
You can use UICollectionView to create this
Look at this example
https://github.com/tularovbeslan/Springboard

avoid chrome popup extension to close

Is there a function that allow me to select text when the extension
stays open. Normally when I Use the extension popup and I Click outside the
extension the extension close. Is there a wat to avoid this.
Thank you so much
Unfortunately there is currently no way to keep the popup open once you focus out of it. This is by design.
If you would like to always show something while interacting with the page, perhaps the experimental Info bars or even Desktop Notifications would work?
Hope that helped!
The only way to keep it open is to right click over the extension icon (button) and select "Inspect popup" the extension popup then show up and remain open but of course the debugger window show and this not a fix obviously still it will maybe inspire a hack... if someone is skilled enough and share the solution with all of us.
I encountered the same problem and I've thought of a possible solution (though not tested it):
Use your background.html to store the content of the popup action and upon loading the popup, you fetch the content via the default messaging for chrome extensions.
When doing all kinds of other stuff, like XHR's or something, I think you should do that in background.html too, so the requests won't abort if you close and you can do something with the result. Then when a user re-opens the popup, he'll see the result of his previous action instead of the default screen.
Anyone tried something like did already?
As far as I know you can't persist a pop up menu but my workaround has been using a content script to append a menu on page load. After the menu is appended you can toggle the menu via messaging between the background script and the content script.
If you want to encapsulate the menu from the page it's deployed on you could wrap your menu in an iframe. This could add complexity to your project since you would have to deal with cross origin issues and permissions.
There is an alternative hack for this. You can make use of chrome local storage to store the metadata as needed. Upon restart you can read that metadata and render the desired content. You will also probably clear that metadata after you have completed performing the operations based on that.

How do some AppStore browser apps implement features such as "Open in new tab" menu, loading progress, etc?

There are web browser apps in the store which do many things that seem like they use private API calls to me. Things such as:
Override the context menu for a link to add a menu item for "Open in new tab" (How to add an option to the popup actionsheet of iphone safari?)
Reporting loading progress.
Catching new "popup" windows (where link target is not '_self') and opening in a new tab (requires subclassing UIWebView and overriding private methods.)
Does anyone have an idea if these are done in some clever way that I dont know about, or have they just managed to sneak these in past app reviewers? This would surprise me since they have the whole automated-api-use scanner thing, unless it only scans more important api calls...
No real reason I'm asking this other than academics. Was just playing around with UIWebView and noticed the functionality is very limited compared to what some people have managed to do with it...
Any thoughts? Would love some insight!
Cheers
The first one can probably be achieved with Javascript - that's just a guess on my part; you use JS to communicate back to the Obj-C code to show a custom UIActionSheet.
The second is probably possible if you look deep enough:
UIWebView has an NSURLRequest object. NSURLRequest has valueForHTTPHeaderField:, which enables you to get the total content size of the request. NSURLRequest also has HTTPBodyStream, which is an NSInputStream, which should give you the total number of bytes read.
Finally, for catching "popup" windows, my guess is that they are using the delegate callbacks of UIWebView to accomplish this, with some clever string-fu to determine if it's a pop-up or not (evaluating Javascript and such).