How to create Facebook style fixed Status bar? - css

I want to create fixed status bar in by web form to display various status/messages/notification to user , i can used fixed CSS property but i want to implement in i.e 6/7 and in Firefox. and all the browsers.

Here's a quick and easy solution on how to fix element/bar on the bottom page:
jixedbar - Fixed bottom bar like Facebook
Now all you have to do next is to find an AJAX framework (prototype, jquery, etc) and start coding your custom menu (application, notification, slider, etc.) or similar to the one in Facebook.

Dean Edwards' "IE7" JavaScript library may help. It fixes position: fixed in IE6.

I think you want a sticky footer.

There are several out there. For instance, take a look at the tickbar, which seems quite configurable: http://www.ticketmy.com/bumpin/socialbar/index.php

Here's a pretty simple notification bar

I wonder if there's a quick and dirty way to save the state of something in that bar across a site...

view this post Facebook Style Footer Admin Panel

Related

How to fix extra buttons on a Wordpress Video playlist

I have recently begun assisting updating my company's website. We have a few video playlists that I noticed have a ton of extra navigation buttons. I have an attached screenshot with the navigation circled.
I cannot figure out where the extra buttons are coming from, so I am unfortunately not even sure what the best questions are to ask here. The best I can find from digging around in the CSS are that there are references to mejs and aria. For all of my toying around. I have not been able to isolate one set of the buttons to go away and still show standard navigation buttons.
Thank you!
Check CSS Styling for input[type='button'] or button in your CSS.

Make a iOS WebView behave like a ebook reader

Normally within a webview, when your page is too long, you can scroll vertically like a browser, that is the default.
I want to make this webview behave like a ebook reader, say when you need 3 pages to display the whole content, instead of scrolling vertically, you can slide to the next page which like a ebook reader (e.g. iOS Kindle app).
Any thoughts on how to implement this? Or any existing components I can use?
Cheer.
Very much depends on how much control you (want to) have on the html...
For complete layout control (magazine like) there's baker framework.
Or if you need a quick and dirty script auto generate html file with pagination (instapaper like), I'd use css3 multi-column layout, with some js to calculate the column needed. And use something like SwipeView to manage the scrolling.
This is not trivial, and there are a couple of HTML projects having to do with pagination. The ubiquitous jQuery also includes support for paginating HTML content.
Have look at this S.O. post for more details.
You can use UISwipeGestureRecognizer on UIWebView and move to the Page programmatically
Good Luck
To do this, you could start with a UIPageViewController and populate each page with a UIWebView, each scrolled down to a certain offset and disable scrolling of the underlying scroll view.

Bootstrap CSS How To: Create a ContentBox with a Title Bar

I would like to know how to make a "ContentBox" with a title bar similar to this login box:
https://github.com/login?return_to=%2Fjshint%2Fjshint%2Farchives%2Fmaster
Is there a simple way using bootstrap css or do I just need to come up with my own way?
The page you linked does not show the login for anyone who is already logged into GitHub, so you may want to be a little more specific next time or post a screenshot.
That being said, I assume you just want the blue gradient header over a box of some kind. It's very simple to do, but there are no components of that nature built in to Bootstrap.
If you want to see what GitHub (or any other site) has done to create the effect you're looking, many tools are available to inspect the source. Here is a screenshot of Chrome's built in debugger (F12).
Edit: That image is being zoomed out a bit too much, here's a closer look.

How to Autocalculate CSS of an element

I'm not so good at css, so I would like to if this is possible.
Let's say I am not happy with the position of an element, I want to move it from left to right; however I want to use drag and drop so the stylesheet automatically updates.
I am using Google Chrome, and would like to know if this is possible via Google Chrome Developer tools, or Firefox Web Developer toolbar.
Thank you.
You might wanna try dreamweaver, in the design tab, you can drap items from one place to another and it'll update the html and css code by it self
The developer tools available through the "Control the current page" icon are to analyze a page, not to change the design of a page.
You can find out which CSS rules apply at certain positions of the source, you can measure loading and processing times, etc, etc but you cannot change anything.
For your kind of problem you would need to look for a (graphical) design tool
Hope that helps - good luck

Need UserVoice feedback page functionality

I like the feedback link that's static while the page scrolls and I want to add something similar to my site. See www.bind.pt, right side, for example. However I don't want to use UserVoice. I want to use a popup window with a form-to-email functionality.
Is there a similar sample asp.net component or Javascript that's available for a lazy developer like me for re-use?
There's an excellent solution to this problem here - the poster's own answer.
Enjoy!

Resources