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.
Related
Guys!
I feel really lost because I would like to replicate the Microsoft Azure Navigation and I don't know how to start on it or If I could make it with plugins.
If you haven't seen yet it is kind of sliding or blade navigation. Every time you press an option, displays the information on the side.
Here are a few screenshots:
I really appreciate any suggestion you could provide me :)
Having re-implemented a layout similar to Azure's, you might look at how the Start Screen demo is implemented in the Metro UI CSS Framework.
Some of the background ideas from this blog and the video at the bottom also lent some additional insight into how the Azure design concept came into being as well.
Ultimately, I made mine similar to how Azure's works in that I have a set of navigation "blades" that stay on the left side and extend out based on options and have a state management system in Angular that largely handles the rest of the blades being rendered horizontally as li elements within a ul. Within each blade is a set of vertically rendered groups that are handled by a position manager to determine placement from top to bottom within the cell.
Similar to Azure, I wrote mine in TypeScript and AngularJS and uses LESS for all the styling. The trickiest part was probably in "genericizing" so much of it so that you don't keep re-writing the wheel but can rather have specific "types" of the blade content you wish to show, then have each dynamically render and retrieve content as they're navigated to.
I've got a number of div elements that effectively keep the height at 100%, then put the navbar at the top. My left-side navigation bar is more the exception since it's usually minimized and just provides routing between the key "portals" of the site. I've got the ul that has an absolute position in the top left, again with a 100% height and each li within it has a size based on several templated sizes (just as Azure has some really narrow blades for settings and larger ones when selecting data from a table). The blade itself is relatively positioned, set to the top-left and has 100% height as well.
Unfortunately, mine doesn't exist on a public-facing site, so I'd be unable to share it for inspiration.
I am trying to adjust the soundcloud embed widget but am having some difficulty. I would like to do two things:
1) Override the CSS for the div.sc-truncate ( overflow: hidden; white-space: nowrap ) which contains the text "Wanderlust Basement Tapes" but will currently not display the entire text due to the aforementioned text. I have added my own style to the site stylesheet with !important but they seem to have no effect which I think has to do with the widget being an iframe.
2) Force the widget layout proportions to show full song list by default. Normally this requires scrolling to the bottom of the list. Ex:
vs
I'm guessing that the proportions change after scrolling via some javascript but all the javascript being used by the widget is minified as far as I can tell and is thus difficult to analyze and/or modify. For this reason I am hoping that a developer of the widget will be able to recommend a possible method.
Thanks!
It's not possible to modify the styles of any page in an iframe from the containing document (including the SoundCloud widget).
Having it spread over two lines does look pretty fine in this case, but obviously title lengths of all sizes also need to be considered. I will pass on the request to investigate removing the truncation.
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.
I need to create an area of the page that has it's own scroll bar, just like the Facebook messenger in the image below.
Stack overflow has the same system at the answers with large pieces of code, but that scroll bar is not styled.
Note at the picture and you will see the normal scroll bar and the styled scroll bar in the Messenger DIV. Anyone knows how to do it?
I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
This should help: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Another one here: http://dotroe.com/subpage.html
Those are jquery plugins that you can use on your pages.
Use j scroll pane. It's great, very customisable, lots of demos here: http://jscrollpane.kelvinluck.com/#examples
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