I'm trying to find out how to recreate Chrome's new tab homepage with all it's features.
I've tried plugins like isotope, however I've met a lot problems with sorting using the jQuery sortable class.
I've tried just using good`ol css with floats to create a grid, but it's nowhere close to as good as what Chrome has.
Is there a tutorial out there that covers this?
Any pointers in the right direction would be helpful
If your using chrome it'll be easier to use the inspect element function of the right click context menu. This brings up the developer console showing the elements tab. It should also take you to the meat of the layout straight away, without having to scroll through lots of lines! :)
If you haven't seen the developer tools in chrome before, it's well worth getting into! The elements panel will be of particular use:
https://developers.google.com/chrome-developer-tools/docs/elements
In short, the elements panel will give you a live view of the HTML DOM, including a view of the CSS classes that are present on any given element.
Update
From a quick look at the source myself though, it looks like a lot of it is generated in JavaScript first, i.e. the margins and widths of icons etc are set using JavaScript when you manually resize the page. I pretty sure their layout isn't just pure CSS.
Related
I'm trying to set up a Github page and I'm using the Tactile Theme template by Jason Long. I'd like to add a vertical sidebar like the one shown in this page.*
I'm 100% new to HTML, Javascript, CSS and everything related with page development but I know my way around python (a bit) so I'm not completely code illiterate.
All I'd need is to be pointed to the snippets of code and files I must add to the template mentioned above to display such a vertical bar and with some luck I can take it from there.
*In that page the vertical bar is not static, ie: it hides when one scrolls down the page (perhaps I'm using static wrong, forgive me if I am and please do correct me) and I'd also like it to always show if possible.
You're looking for the position:fixed property.
I'm taking a look to this website http://planetshine.net/demo/regolith-wp/ trying to understand how the horizontal layout is obtained.
I'm just trying to disable the javascript libraries one by one (I want to identify those essential fot the layout and those less important). And beginning to disable only the "buttons.js" library the layout already changes (for example, the vertical scroll bar appears). I would understand why this script "buttons.js" is so influential for the layout.
Some CSS styles may be added by javascript after a page is loaded. This often occurs in plugins: sliders, custom scrollbars etc. You need to inspect places, where this happens and find out, which classes or html elements disappear. Then you can recreate them manually and the whole page will work as expected.
Very cool JS components: http://www.msnbc.msn.com/id/40664031/ns/us_news-crime_and_courts/
Check out the icons next to the vertical scrollbar in your browser, and the expanding 'sharing' toolbar at the bottom.
Does anybody know if these are publicly available components? Has anybody seen these before?
Edit: I'm talking about:
The way the sections in the bottom bar expand into tabs to show more controls. Try clicking on "Login and settings", for example.
The way the links near the scrollbar take you to the respective sections. Very cool tool to aid user discovery in a long page.
I was intrigued by the scroll markers used for jumping around the page so I made a start at replicating the functionality in a plugin:
https://github.com/sj26/jquery.scrollmarkers
It's definitely not pretty yet, but it's a start.
Its a private library built by Krux Digital, Inc.
I dug into the source of http://cdn.krxd.net/krux.js
Its ajax tabs..
Also, you can have a bar fixed at bottom of page simply by using
position:fixed
property in css, then in the div at bottom, impliment jQuery.tabs, and for each tab load data via ajax. Wont be that difficult. and if MSN has implemented it, they would have surely spent a lot of time on it
Is there a good Javascript library for generating an automatically scrolling list like the "Top Tweets" on the Twitter homepage? Preferable as jQuery plugin. It should also support AJAX functionality (to add new list items dynamically).
As we were not really satisfied with the existing solutions we implemented one from scratch. Our solution is a fully jQuery UI compatible ticker plugin (also compatible with their theming framework) and fully unit tested. We didn't yet have the time to test it under every browser, so feedback is welcome (for problems please open issues on the below Github project site).
A special styled demo (Twitter like) is available here.
The main main repository can be found here (ticker branch). There are several options to customize the ticker (documentation at the above mentioned Github repository).
Screenshot:
Here is a nice solution: Scrolling List
Try http://www.htmldrive.net/items/demo/38/Multi-purpose-slideshowtext-scrollerimages-scroller-jquery-plugin
That is the best solution I was able to find:
Scrolling List
If you want to write your own, make a div of fixed width/height, with overflow: hidden, then create another div inside it, with the position: relative property, filled with content from your feed (twitter posts, or similar, etc). Then, when the page loads just make the inner div's top: CSS value change (if you want the list to scroll up, the top value should decrement from zero).
I doubt this helps, but it is quite a good, simple way to get a scrolling without using a jQuery plugin.
In IE 6 select control(combo box) is displaying on top of menus. I checked some Javascript menus, mmmenu, but all are getting under select control. It's not fixable by assigning Z-Index. Is there any other solution.
This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls.
There are workarounds involving iframe shims, but there is no good answer. The iframe shim answer is to place an iframe underneath whatever div you're trying to place above a select, with the iframe being the same size. Unfortunately, this is a huge pain in the ass.
I suggest using a javascript menu system which already uses iframe shims, such as YUI menus (and I assume jQuery).
Most of the major javascript libraries have easy to implement solutions to this problem. We use jQuery, and the bgiframe plugin is very easy-to-use and solves the problem.
Daniel is definitely right. This is an ugly issue.
However, there may be another solution. If you are using multi-tiered menus that pop open and closed, it is possible to write JavaScript code that literally hides the problematic SELECT elements when the popup is opened (style the element to have a visibility of hidden). Then when the menu closes you can unhide that same SELECT control.
Then you just have to write code that detects which SELECT objects get in the way of a particular menu before it opens. It's not trivial code, but it's definitely possible to write. Then I'd just wrap the entire chunk of code in a conditional that checks to see if the user is on IE as there's no need to run this on Firefox or Safari.
The problem is that SELECT are "windowed" elements in IE6, and their z-index is above all the other non-"windowed" components. If you absolutely must have something above a combox, you might want to put it inside another windowed compnent, such as an IFRAME, and set the component's z-index to be higher than that of the combobox.
I must admit, this isn't a pretty solution.