Twitter Bootstrap Navigation without the framework - javascript

I want to achieve the twitter bootstrap navigation without using the twitter bootstrap framework. Here is my code pen http://www.codepen.io/anon/pen/Kedzl. Below is the image I want to achieve once the width of the .wrap reaches a certain specified width.
I have been searching for the JavaScript code to replicate this effect, but I haven't found it. The example can be found on and it's supporting documentation on http://webdesigntutsplus.s3.amazonaws.com/tuts/312_bs/My-Bootstrap-Site-NAVBAR/navbar-examples.html

http://getbootstrap.com/customize/
you could go here and just grab the nav

Related

How can I create a menu that will appear from the corner of the screen when a menu button is clicked?

to be clear, I want to add a hamburger menu in an HTML web app that will open a menu screen when clicked. I want the menu to animate from the corner of the screen (where the menu button is located). I would like to accomplish this using HTML, CSS, or javascript because those are the languages I'm currently studying. If someone could recommend a beginner-friendly method to accomplish the above-stated goal, I would be extremely grateful. Thank you for your time.
To add on to #Paul's answer - definitely use Bootstrap, and if you are going to use Bootstrap, don't forget to link the Bootstrap library to your HTML file in your header and reference jquery and javascript near the end of your code. More complete instructions can be found here: http://getbootstrap.com/docs/4.0/getting-started/introduction/
If you are looking for an easy way to do it, I would reccomend Bootstrap as it is a great resource and CSS framework for creating lots of components. I suggest looking at its dropdowns library for creating a hamburger menu.
Cheers.

adding bullets to a slider on "customizr" wordpress theme

I have very little experience with the jquery libraries. I need to remove the arrows from the main slider and add bullets at the bottom(bullets to navigate the slides). Any one proficient with java script please guide me how to do it. Customizr is a free theme in wordpress.
Customizr has been build on Twitter's Bootstrap 2. Also the slider is based on a Bootstrap's component, see: http://getbootstrap.com/2.3.2/javascript.html#carousel.
In Bootstrap 2.x the carsousel does not offer support for indication of the total number of items in the carousel and the current position of the carousel. See also: Bootstrap carousel. Add pagination dots to bottom.
This function is add in Twitter's Bootstrap 3.x, see: http://getbootstrap.com/javascript/#carousel.
So to fix your problem, use the solution described here: https://github.com/twbs/bootstrap/issues/1993 or find a Theme ready for Twitter's Bootstrap 3 like Roots or JBST. The Twitter Bootstrap Slider also provides Bootstrap's carousel function to WordPress.

Scroll multiple DIVs using Javascript Scrollbars

I have the following setting: http://jsfiddle.net/dobbylan/DnmvR/5/
In this example, scrolling the maindiv also scrolls the upper/left div.
However I'd like to exchange the native Scrollbars for Javascript Scrollbars.
I have been searching the web for some simple Javascript code that provides a minimalistic Scrollbar AND allows for scrolling multiple DIVs.
Any hints on a simple JS code snippet that provides a simple Scrollbar and can scroll multiple DIVs?
If you are willing to use jQuery, I found a nifty plugin that will do it for you. It can be styled with CSS, so it can fit the look of your site as well. Check out the demo to see for yourself...
A quick look at the source of the demo page also shows you how to use it:
$("selector").mCustomScrollbar(
[direction],
[easing],
[easing type],
[bottom scrolling space],
[scrollbar adjust],
[mouse-wheel support],
[button-scroll support],
[button-scroll speed]
);

An automatically scrolling live ticker (like the "Top Tweets" of Twitter)

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.

Fixed position sidebar with jQuery

How do I incorporate the following sidebar menu feature using jQuery where the menu on the left re-appears as the user scrolls down the page?
Here's an example sidebar menu.
There's a really good tutorial over at Nettuts about this exact thing:
Creating a Floating HTML Menu Using jQuery and CSS
Jquery CSS Control:
http://css-tricks.com/scrollfollow-sidebar/
and tutorial is also nice,
if you are using bootstrap then you can use affix control of bootstrap, that is also good

Categories

Resources