I am trying to create a web page with a tab menu. I want to be able to dynamically add and delete tabs (and other content). There is a perfect example of what I want here: http://www.dhtmlgoodies.com/index.html?whichScript=tab-view . I want the newly created tabs to be persistent through page loads. So basically if I add a tab and refresh I want the tab to still be there. If I close the browser and reload the page a month later I would like the tab and any content to still be there. This page is for personal use and will be hosted on my computer and accessed through the browser alone, not any kind of web server. Although I'm not against using a web server if I need to.
Looking at the code it seems that the 'add tab' functions just add HTML to the page in memory but I need it to permanently change the HTML of the page. Is there a way to write dynamic changes to the DOM back to disk? I'm not quite sure where to go with this and searching for a week has left me with too many language and implementation options to look into. I am not an experienced web developer and there is so many different ways to create web pages and so many new terms that I'm a little overloaded now.
I do realize that this is a little outside the realm of a typical web-site. It is generally not a good idea to let the client-side make changes to data on the server-side. But since I am the only person who will be using this and it will not be accessible from the internet security is not an issue.
I'm not apposed to any particular scripting language, but I would like to keep it as simple as possible. I.e.: one HTML page, one CSS, and maybe a script file. Whatever is necessary. I am not apposed to reading and learning on my own either so being pointed down the right path is fine for me.
If you need a rock solid method, then you would need some record of having those tabs existing. That means having a database that knows that the tab exists, which tab it was, and what content it contained. Html5's local browser storage (not to be confused with cookies though) could also be a viable solution but browser compatibility is an issue (for now).
You also need some sort of "user accounts system" so you know who among your users had this set of tabs open. Otherwise, if you had a single "tabs list" for everyone, everyone would open the same tabs!
For dynamic html and js for the "tab adding", you are on the right spot. You need PHP to interact with the database that is MySQL. What PHP does it it recieves data in the server from the browser about what happened like:
know which user is logged in
what action did he choose (add or remove tab)
add to the database or delete a record
reply with a success or error, whichever happened
For MySQL, you need to create a database with a table for your "tab list". This list must have:
User id (to know which user did what among the ones in the list)
Tab id (know which tab is which among the ones in the list)
Tab content (it may be a link for an iframe, actual html, text etc.)
Friend, when you talk of closing the browser and not losing the data, then you are talking about data persistence or data durability. In other words, you have to save your data somewhere, and load it next time.
For storage you can use a flat file (a simple text file), a database, an XML file, etc. However, you need to learn a lot to save the information and content of the new tab somewhere, and next time load it.
Related
Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.
Is it possible to take a screenshot of the visible part of the website directly as it is seen by user (rendered by by the browser), including any changes made by user (e.g. moved divs, text typed in forms etc.)?
So you open a website, where you can make changes to its content. And there's a button (on the website of course), when you click it, the actual visible part of the website with all the changes you made is saved as an image and for example there goes a popup window where you can type in an email to send this image to, or something like that. Javascript, php, html5 or anything else? Old browsers and ie doesn't matter.
I've searched a lot for the answer, read lots of related articles, but I couldn't find the solution, cause what I need is not the script that would re-render the page like html2canvas, but capture the actual content displayed on the screen.
Any ideas and comments are much appreciated!
This is something that can be extremely tricky.
Essentially your only option of doing this in browser with no extensions or such is to try rendering HTML into the <canvas> tag.
There are several projects which do that, most reliable choices are noted in this SO question's answers: Render HTML in Canvas/WebGL
Note that none of the projects are 100% accurate, but a canvas can be rendered into an image and thus could be saved or emailed by the user like you asked.
Are there any potentiall pitfalls with the following idea:
...I want to have one container page, index.php. The header and outlines will be constant but in the middle I want one big panel, which loads its content from external php files, one for each "slide". When a user click a link, the central div will update with the new content, the outer edge will remain unchanged.
Will I be able to use session variables, etc correctly with the set-up. I realise it will certainly break the browser history but other than some possible UI issues, are there any techincal barriers.
This is a common thing, as Jared stated. Session variables are always available through ajax or frames, so it shouldn't affect anything there, and if browser history is something you would like to continue to use, you could always change your location.hash when you load new content so that you can load previously rendered content with some javascript if someone uses the back or forward buttons.
The session should not be lost.
The browser history does not need to be lost also - please read about onPopState (and history.pushState) and onHashChange JS events. The AJAX-heavy sites can determine the content to be loaded that way.
One of the pitfails is, if you are using a lot of JS, that the events for the newly loaded content will need to be re-attached, but they can also be delegated from the container which is not replaced.
jQuery's .load() function may be also useful to you to get started.
I have a large, PHP-based CMS that manages web pages.
All items are organized in a tree structure.
When I edit an item, the "back" button usually points to its parent item.
So, the usual workflow is navigating through the tree.
Now every now and then, the need arises for a workflow that "jumps" to other items without regard for the structure.
For example, when a user is editing a web page, they may want to open the template the page is attached to (another item in a completely different branch), make a change there, and when clicking "save" expect to come back to the page they were editing.
At the moment, I solve this using
domain.com/admin/template/edit?from=/frontpage/edit
where the "from" variable determines the target URLs of the "save" and "cancel" buttons.
This works up to a certain point when the path becomes too long and complex. For example, what if the user
edits a page
opens the attached template
previews that template in the front-end view
and then expects to be seamlessly taken back to the page they were editing?
Right now, the "history" ends at the last item so that when the user returns from the front-end view, the link to the original page is lost, and they have to search it by hand.
Another problem that can happen quickly is that the GET URL containing all the "from" values becomes too long, or totally chaotic:
domain.com/admin/template/edit?from=/frontpage/edit&from=/somepage/edit
&from=/template/preview&/from=template/edit&/from=template_preview ...
(you get the drift)
I have solved this elegantly by opening separate windows in the past, but I really want to implement a seamless one-window workflow that works universally, mainly because multiple windows tend to confuse users.
How do you solve this?
Have you implemented a robust "unstructured" navigation that works well with multiple windows open (=one user doing multiple different things with different navigation paths)?
How do you go about this on the user interface side?
The best approach I can think of is passing on a "from" value that points to a temporary record in a database or session. That record contains all the information about the current path, and can thus always provide the right "back to page x" value.
What I would like to hear most is experiences from people who have successfully implemented this, and how they did it.
Just a couple suggestions
Preview Problem: preview in an IFRAME, so the history doean't get lost?
Cluttered URL problem: If you have some sort of key for each page, other than the URL path
(i.e. /frontpage/edit = 952,
/frontpage/edit&from=/somepage/edit = 763,
/template/preview = 651,
template/edit = 612,
template_preview = 866 etc.)
you could string them together in the PATH_INFO like so:
domain.com/admin/template/edit/952/763/651/612/866
You could build a stack of visited pages for the session as the user clicks around, pushing on a new page each time the open it, popping off when they click back. Store it as a session variable.
The trick then is to always check their referrer string, since they may also use their browser's back and forward buttons. If their referrer string isn't at the top of their stack, you'll have to scan the stack for it to see if they manually backed up to a previous page.
As long as you're only needing to backstep once, why not pass in whatever linkback page IDs you want whenever you produce the page you're jumping to?
I'm working on a site where we need "dynamic" breadcrumb generation.
Pages within this application are not specific children of the other, so when the user is browsing one of them, I can't simply retrace steps back up.
I could have the following breadcrumbs-like lists: (updated)
* inbox > message > user profile
* search results > user profile
* search results > user profile > new message
( FYI; there will be a few dedicated parent pages that will reset the whole stack. Also there will be a check that prevents recursion. )
So... To accomplish this, I have to remember where the user has been, and in what order. I reckon the most elegant and reliable way to do is, is write a mechanism that remembers the user's history in the session.
If I do that though, the whole thing will break when a user opens a new browser window or tab.
To fix that, I could store this data in the querystring. Though different browsers/proxies have different limits of data that can be transferred that way. So, one day, this will probably break as well.
Does anyone have an idea on how to implement this?
Or;
Does anyone know how to reliably identify different browsers windows?
(I'd rather not rely on javascript for this, unless it's my only workable option. I use dojo toolkit for the frontend)
thanks in advance!
On HTML5 compatible browsers I would save these on the local storage.
You can detect a new tab open like this:
on page load set a cookie by javascript
use the onbeforeunload event to clear the cookie
When the visitor will open your site, it will set a cookie eg session=1, if they click on a new link on your site, when they leave the site the cookie will be eg session=0 but as soon as they arrive again on your site it will be session=1.
When the visitor will open a new tab, it will encounter a session=1 so probably will do that session=2. You got the point?
window.name survives a new document load. So you can write a history string to window.name and then read it back from the next page, or use a generated name as a key for storing window-specific cookies/sessions.
I don't think this is a good idea though. “Breadcrumbs” are traditionally a hierarchical navigation device, not a history list. The browser already provides a perfectly good history list on the back/forward buttons that it is not useful to reproduce on the page; presenting an on-page history list, especially in a format that is normally a hierarchical place marker, is more likely to confuse users than to be of any help.
I asked a similar question a few months ago. The top answer - which I will am planning to go with - suggested building a path, and parsing that using a combination of mod_rewrite and PHP:
www.mysite.com/inbox/message/user_profile/12345/new_message
Up to a certain point (the request URL should never grow larger than 1024 bytes), that can be quite a good solution. An additional advantage is that the breadcrumb path can even survive sessions, and works in links forwarded to others (if that is desirable in your scenario).
Another thing, looking at your examples, I can't really see the need to reset the history when the user opens a new page, or to take different browser windows into consideration at all. There is a logical hierarchy (not a history) and why should the system start changing then hierarchy just because I choose to open the new message editor in a new tab?