I have a web application with a split screen. On one side there is a specific functionality which is linked to the functionality on the right side of the screen.
I need to 'undock' the right side of the screen so the undocked div can be moved (even outside of the browser). This will be a functionality which users with dual screens will largely benefit from.
I managed to do this using a popup window. However, I am not liking the solution. The primary reason is that the popup window is not linked to the main application.
What I mean by not linked is that whenever I click on something from the left pane, its respective page must be popped out in this popup window. However, When I do this, the popup window is closing and opening another one (because of the same ID). This way, I cannot set a boolean variable to set it as false when the popup is closed, because it will be set to false whenever another popup is opened.
Is there a way of knowing when the popup's close button has been clicked from the parent window? That would solve me problems!
Is there a better solution of achieving this without using popup windows. I don't think its possible since when you use modals or functionalities of this sort, the modal will be a child of the parent container and therefore, is an instance in the same browser.
As a side note, this system is implementing with PHP/jQuery
Please let me know your ideas.
whenever I click on something from the
left pane, its respective page must be
popped out in this popup window
It obviously depends on your technical solution. You can handle clicks in the main window and access the DOM in your "undocked" window, so you can get the DIV too and handle it just the way you handled the DIV when it was in your original document.
Related
I was asked to create several websites that essentially mirror a specific live website. With the difference between the live site and the new sites being that there is a floating header that displays at the top of the page no matter how far you scroll down. This is the same technique that sites like StumbleUpon use. My initial thought was to use an Iframe, for the view portal and a absolute div for the header. However I was then asked to make it so that when someone clicks on a link within the iframe that they be taken to the actual site, in a new window. This is the part that has me thrown. Is there a way to tell the I frame to open all links in a new target? If not what would you recommend?
See attached image for clarification:
Targeting blank in the anchor should work just fine here.
<a target="_blank" href="http://google.com">google</a>
With some cross browser hacks you may be able to tell when the iframe src changes, on that basis you could then reload the page in a new window. It isn't possible though to tell what the new URL is, so it won't be the best user experience as you'll be sending them back to the page that you loaded originally.
http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/
I have a login form that opens in a fancybox. My problem is that when the user just clicks on the link nothing wrong happens, but when he opens it in a new tab, the style is messed up, because the page is designed to be minimal (only login form with forgot password link).
How can I make the link on fancybox, not the same as when opened in a new tab?
Can I detect it in PHP (server side)?
Or can I set fancybox to open a different location on clicking on the link ?
I suggest you pass a variable to the login window when the user clicks normally that indicates the page was loaded normally and then server side you decide which CSS to load based on the presence of the variable. That way you can accommodate both cases.
I am building a system where users can edit content inline, however a requirement of the project is:
No Javascript!
Is there a way using just php, html and css to maintain the scrollbar position on a page refresh so when an edit button is clicked the page doesn't jump up to the top?
any suggestions?
This sounds like the perfect place for progressive enhancement. If there is no javascript, then use the named anchor tag (as Olli mentions) and a hash on the URL to get it close (but it won't be exact).
If there is javascript, then save the scroll position to a cookie or URL parameter and restore the scroll position exactly when the page reloads.
There should be no harm in offering the best experience you can without javascript, but offering a better one when javascript is available (progressive enhancement).
Another possibility is to use a paged or tabbed interface (to position the edit field near the top of the window) so it's a lot less likely that there is any scrolling when the field is edited.
Do it so:
<a name="jumphere"></a>
and when you have edited
http://yourUrlHere.com/somepage.php#jumphere
I have four pages on the main part of the website I am working on, with tabs to switch between them. I want the switching between the 4 tabs to be a fading transition (using jQuery). That's all fine and dandy, but I also want SEO to think of each as a separate page. I also want to be able to link to a URL and for it to pull up the right content, even though it is technically the same page.
Facebook does this (facebook.com/#!/another-string-here), and you can switch between pictures and so on, so it kind of acts as a javascript querystring.
This allows switching immediately, the ability to link to it, and yet each acts as its own page.
Is there a recommended method for how to do this?
UPDATE the best I've found is SammyJS -- haven't implemented but it looks to be the best answer:
http://sammyjs.org/
Let's say you have a base page, called services, and that page has two tabs: design and development (just for simplification). So if your domain was example.com, your hash URL upon clicking on the "Design" tab would look something like http://example.com/services#!/design, and similar for development. I'm assuming you know how to do that.
To make search engines recognize the tabs, what you do is make a static version of each page. So you'd have one at http://example.com/services/design and one at http://example.com/services/development. The href attribute of each tab would actually point to these static pages, but you would attach an onclick handler to each tab to make it go to the hash version.
This way, JavaScript-enabled clients would get the Ajaxy version of your page with the hash tags and the fading effects, while clients without JavaScript enabled (including web crawlers) would see normal, static links, and everybody wins.
For the record, this is similar to what Facebook does. They go a step further and use HTML5's new history.pushState() function in browsers that support it, in order to remove the need for the hash tag entirely. (See this question for more info.)
Well to have it both ways is impossible (facebook method and SEO), because the server doesn't get sent the hash tag, and most search engines (google etc.) don't run javascript.
Now if you simply want the fading effect, you can set it up so that if there is a hash tag in the url, for example #fade, jquery will set the opacity to 0, wait for load and fade in. To get the fade out you set event listeners on the links, e.preventDefault() or return false in that function, and fade out the opacity. Once it is done fading you would have javascript change to a new page location.href="site" with the hash #fade
Edit: example: http://fiddle.jshell.net/msm595/u5Eg2/3/show/light/
I am hoping for some advice, imagine if you will will you are on a website and you are greeted solely with navigation menu, on click the navigation menu that is situated within the left hand side of the screen you can add various content to the right side of the screen that is loaded in individual ‘divs’ then collapsed in accordions(this effectively makes a one page site(Yes I am aware of poor SEO, Accesibility and Usability). Now this raises some questions from me.
1) What would be the best way to load in the data for each of these ‘modules’ as they are clicked. How would I load the codeigniter views in with leaving the index page?
2)The user can also remove ‘modules’ how could this be achieved without leaving the page?
3)If there are 3 pages that are loaded in from 3 different views all in an accordion how can i make it so only one accordion can be open?
4)If the ‘module’ has further links within it, it should load in another view to left of it, how could I control this?
I know I am asking alot of advice but I have never seen anything on the web that is like this and would really appreciate some feedback on the best way to approach this.
This really is a question on jQuery, and jQuery's Ajax methods. You're not asking about anything too difficult here. Just a menu that makes asynchronous calls to the server for content, and loads the respose HTML into a particular DIV.
$("a.homePage").click(function(){
showLoadingAnimation(); // Indicate ajax-loading
$("div.Container").load("/home", {}, function(){
hideLoadingAnimation(); // Hide indicator after content is loaded
});
});
This would load in your home view. Just be sure that it doesn't bring a template along with it. Once you get started on the actual development, return here to ask more specific questions to get quicker and more thorough responses.