Anyone know a good tutorial of how to make the status bar found in the new facebook? the one on the bottom. looks really cool
i was thinking it was written in either ajax or jquery. but not sure.
Here are some useful links/plugins that might help you:
Positioning the footer
Enable drag/drop of things (like applications)
Tooltip (when hover)
And for the interaction with the server (for new events etc.) you might use the AJAX functionality in jQuery:
In order to have it always be in the bottom, that is more of CSS than javascript.
I think you would get better answers if you were more specific. For example, I would want the answer to revolve around as to how the chatroom works on facebook. Is the javascript request being sent every second to check for new messages? or is there another protocol being used in order to have instant messages?
It's not clear what your are looking for: bar's design or it's functionality. If your are speaking about design you should look into css positioning (absolute). If it's about functionality i suppose that there is some kind of ajax javascript which checks every x seconds if there is change of state, and if there is go deeper and find out what to load.
Why not just download the Facebook source code and take a look at how they do it? They open sourced a lot of the stuff they use/created/enhanced.
Soh Tanaka just put out a great step-by-step tutorial on how to re-create the Facebook Status Bar:
Here's another good starting point: http://www.ben-griffiths.com/project/jquery-position-footer/. If I remember correctly it works in FF & IE & Safari
I looked through the jQuery plugins, and Googled the topic for you. All I could find was this which isn't exactly what you want, but it is a good place to start. With some style changes, and a little tweaking it could easily look exactly like the Facebook bar.
Not sure that this is the type of answer you were looking for, but i've been looking for the same thing and this code seems to at least show how it's done.
Related
I'm doing some research before I start a project, and I want to know what the best method of going about this project is before I begin. Any help I can get would be much appreciated, and I'd be happy to provide more information if necessary.
Basically, I'll be given a number of extremely high resolution images to display to users. I want to create an interface whereby the user can scroll around the image and zoom in, as well as hover over parts of the picture and receive some information about that specific location. Also, I would really, really like it if I could do it without using Flash in any way, both because I don't like Flash and because it wouldn't work on i-devices.
Here's an example of the zooming capability that I'm looking for, and here's an example of the hover capability that I'm looking for (sorry they're both biblical manuscripts, don't mean to get religious on y'all, these were the best examples I could find!)
Anyway, so far I've found this spiffy script for zooming, but I haven't found anything for hovering yet (another example of what I'm looking for is something like when you tag someone in a picture on Facebook - if you hover over their face, their name pops up). And to make things all the more difficult, I have to figure out how to make them play nice, so zooming in doesn't break the hovering capabilities.
So my questions are...does anyone have any experience with anything like this? Do you have any suggestions for projects (open source is far preferred) that allow for this kind of thing? I'd really appreciate any help you fine people can give me! I'll be publishing my findings and code afterwards.
I think the technology behind Google Maps (and other such technology) would be the way to go. With Google Maps API you can use your own custom tiles instead of the map tiles. You could then set boundaries on the map to stop the user navigating away from your available imagery. Lastly, you can use the API to specify the coordinates for polygons on the "map". These polygons are great as the allow you to have hover/click events which should provide you the functionality you're after.
A good article I found on something similar to what you're after can be found here: http://forevermore.net/articles/photo-zoom/
Hope this provides some direction and sounds like a fun project that you're about to embark on :)
I have a question about iframes, but i realy don't know how to start with it. I think its the best to give the url inmediatly. http://www.nielsjansen.be/project/saved.php
When you click at the body of the article, the article opens in the same window, that's good, but i want to keep my menu etc. How is this possible?
Thank you
It depends on your level of expertise in PHP and HTML, but I would not use IFRAMEs as they tend to be deprecated.
As #Aziz said, too, IFRAMEs are in the HTML and non in the PHP domain.
If you can edit your code and are able to program in PHP, a very basic technique would be to write down a function that outputs your menu ad use it in every page, including the article pages. That's the caveman solution, to get more complicated one should think about layout, content management and so on.
If you cannot program in PHP, things get a lot more difficult.
You actually are asking an HTML question here. Since I don't have a sample of your code, I'll just take a shot at it:
<a href="mylink.html" target="myframe">
<iframe name="myframe" src="mypage.html"></iframe>
That should get you started. All you need to do is give a name attribute to your iframe, and a target to your link.
NOTE: I would strongly recommend against using iframes, as they have been deprecated as of HTML5, but have always (IMHO) been bad practice. There has only been one case where I used them in a project, which, if I had really set my mind to it, could have been avoided completely.
Hope that helps.
I know this has been discussed a number of times, but the problem I'm having at the moment is finding a solution that is easy to work with and does not require much hacking around.
I want to be able to upload a file, and report on its progress. I've been playing with SWFUpload, and it seems like a bit to much messing around for my liking. Integrating it with code igniter just seems like it's going to cause headaches.
I want a visual progress indicator of some sort to show the user their upload hasn't stagnated. Even if it was just a spinner saying "Uploading. Do not close this window until upload is complete." that would be enough for me.
Security is the most important. Using something like SWFUpload is going to require passing variables to the upload form such as the user ID and other information I'd rather not give snooping noses the opportunity to sniff.
Any possible solutions. Help is much appreciated.
You should take a look at HTML5 FormData and XMLHttpRequest 2 which allow you watch the progress directly in javascript.
You must customize the tool to meet your requirement , especially when its open source .
Security is the most important. Using something like SWFUpload is
going to require passing variables to the upload form such as the user
ID and other information I'd rather not give snooping noses the
opportunity to sniff.
Why you need to pass user ID ? i think its HTTP matter not SWFUpload,so you can make it secure .
Look here : http://demo.swfupload.org/Documentation/
I'm actually on the hunt for the same thing. A few of the options I have encountered so far are:
http://www.uploadify.com
http://valums.com/ajax-upload/ (Which is now headed off by Ben Colon here - github dot com / bencolon / file-uploader )
I haven't used any of those solutions because I'm not quite sure how to customize them for my application. But it looks like so far in my research, those are links that keep popping up.
I am trying to implement tabs within one tab and I would like some help with it.
I found some codes for the upper tab and tried to implement them into the lower set of tabs. These codes are not mine. I simply put them together to display what I wanted which obviously doesn't seem to work properly...
The following is what happens:
1) If you click on the upper tab, the page doesn't refresh itself.
2) If you click on the lower tab, the page refreshes itself and changes the "id=?" on the address bar which is what I DO NOT want.
Will it be possible for this problem to be fixed?
This is a SAMPLE website so it will not be tidy
http://www.swan10.nl/stuff/testie/testie.php
The CSS were made to display classes however the PHP website only works if these codes are used class="TabView" id="TabView". I know you cannot use "id" more than once so I even made another set of CSS & Javascript for id="Tabview2" etc but it didn't work so I didn't bother uploading them to save space.
I don't know if this is the best code to use but if they aren't please give some suggestions for better codes. Or I may have just missed something tiny and silly.
Please help & thank you in advance!
I highly recommend you look at the Tabs feature of jQuery UI. It will seriously remove all the headaches of trying to figure out logic yourself, it's super easy to set up and use, and LOTS of people use it so there is plently of good information and support floating around on them.
http://jqueryui.com/demos/tabs/
I'm working on a new project, a web application, where I need to focus the user on a particular task. Therefore I want to eliminate all other "System Generated Noise", like Browser Menus, Buttons, Address Bar, OS Task Bar and so forth. I have seen implementations like Lightbox, but this modal approach is limited to the size of the browser window.
What I want to do is have the same effect but stretched out beyond de browser so it covers the WHOLE screen. Well, at least that is the effect I'm aiming for.
The application is already on its way, it is being developed with PHP5, XHTML and Javascript/AJAX.
Please, if someone can point me in the right direction I'd greatly appreciate it.
this may help you:
http://www.programmersheaven.com/2/FAQ-JavaScript-Maximize-Browser-Window-To-Screen
Don't know if it is possible in the way you are describing without using something like flash or silverlight.
With good reason, there are certain things that remote javascript can't, and just shouldn't be able to do.
Another thing to consider are what happens when people have more than one screen, are you going to obscure whats on them too?
Please don't... drives me (and many other people) nuts when a web site tries to resize the browser window, let alone try to run outside of the browser chrome and cover up my task bar.
Let us know what browser you make that work in, and I'll be sure to either cripple the functionality or uninstall it if I can't.
Silverlight has a full screen mode that you can set after the first page is rendered in the browser.
http://weblogs.asp.net/scottgu/archive/2007/05/17/tip-trick-supporting-full-screen-mode-with-silverlight.aspx
Don't know if that helps with your current stack:
PHP5, XHTML and Javascript/AJAX
Keith
OK, so I've been looking around for other options, or alternate ways I can do this. One solution I found, only works with Firefox 2.0+ or IE6+, is to toggle the browsers Full Screen mode. Maybe even do a little pro Open Source and support only Firefox and urge the user to get that browser...but hell, if I'm telling the user to get stuff why not tell it to go and grab Flash o Silverlight, right??
I think it's a thin line between what is possible, what is wanted, and what is right for the user. I've yet to find what is needed to do this. But I think it's a lot more viable option.
Let us know what browser you make that work in, and I'll be sure to either cripple the functionality or uninstall it if I can't.
Mmm WTF!? Gonna go ahead and asume that was a nice comment gone bad. Not very constructive though.