Code Food Travel repeat!

Twitter Bootstrap ScrollSpy SideNav Smooth Scrolling Plugin

To hook in Ariel Flesler’s jquery.scrollTo-min.js plugin to your Twitter Bootstrap SideNav Bar, and give your menu some smooth scrolling instead of jumpiness:

[See demo:]

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
<script>
$(function() {

            $('.bs-docs-sidenav').affix({
                offset: {
                    top: function () { return $window.width() <= 980 ? 90 : 10 }
                    , bottom: 270
                }
            });

		    $('ul.bs-docs-sidenav li a').bind('click', function(e) {
		        e.preventDefault();
		        target = this.hash;
		        console.log(target);
		        $.scrollTo(target, 1000);
		   });

});
</script>

If smooth scrolling doesn’t work, make sure you CHECK THE PATH you are specifying and that you got it down correctly and that it exists. I made a small mistake and listed the path with my classes in the wrong order of ul > li > a. For twitter bootstrap, it’s the above path, else it can be any generic one as below:
$(‘**.your-class-here** li a’).bind

Twitter Bootstrap Scrollspy SideNav SideBar Not Working SOLUTION

If you’ve added in all the html code, and javascript calls and it’s still not working

            $('.bs-docs-sidenav').affix({
                offset: {
                    top: function () { return $window.width() <= 980 ? 90 : 10 }
                    , bottom: 270
                }
            });

    <div class="bs-docs-sidebar">
      <ul class="nav nav-list bs-docs-sidenav belowmast affix">
        <li><a href="#buy"><i class="icon-chevron-right"></i>&uarr;&nbsp;&nbsp;&nbsp; Home</a></li>
        <li><a href="#letscreate"><i class="icon-chevron-right"></i> Let's Create</a></li>
        <li><a href="#ourjournals"><i class="icon-chevron-right"></i> Our Journals</a></li>
        <li><a href="#yourideas"><i class="icon-chevron-right"></i> Your Ideas In KLINE</a></li>
        <li><a href="#gallery"><i class="icon-chevron-right"></i> Gallery</a></li>
        <li><a href="#components"><i class="icon-chevron-right"></i> Components</a></li>
      </ul>
    </div>

The answer could be simple!

Does your body tag include the required data attributes?

<body data-spy="scroll" data-target=".bs-docs-sidebar" >

Substitute .bs-docs-sidebar for whatever your scrollspy sidebar is called!

For an extra tip today, learn how to Add SMOOTH SCROLLING to your sidenav HERE!

RECIPE: Chinese Fried (Rice) Quinoa & Southeast Asian Sides [Vegetarian]

Tonight has been a cooking breakthrough. This experiment is one of the most amazing meals I’ve ever cooked, and pretty nourishing for you too! I swapped out rice for quinoa, and it really worked out amazingly- I had no idea you could do that with quinoa. How versatile it is! This meal is completely vegetarian!

The Recipe

chinese_fried_rice_quinoa_stevenchu2

Main: Chinese Fried (Rice) Quinoa – garlic, butter, mushrooms, carrots, ginger, beaten egg, quinoa, and minced green onion

chinese_fried_rice_quinoa_stevenchu

Serves 2.

Preparation:

  • 3 cloves of garlic diced
  • 1 handful chopped brown babybella mushrooms
  • 1/2 handful of chopped carrots
  • 1-2 tablespoons of sliced and diced ginger
  • 1 jumbo egg beaten, or 2 small eggs
  • 1 tablespoon minced green onion
  • Quinoa to make 2 large servings
  • 1 tbsp butter

Cooking:

Preheat large saucepan to medium heat. Add diced garlic and quinoa to toast for 3-4 minutes. Add 1 tbsp butter while browning.

Add sufficient water to quinoa in saucepan. Now add in the chopped mushrooms, carrots, and diced ginger. Cover and let cook for 7-10 minutes.

When quinoa looks almost done (fluffy and not dried out), pour beaten egg over quinoa and add minced green onions.

Turn off heat and turn quinoa to fluff egg. When egg is cooked, chinese fried quinoa is done.

Side 1: Southern Chinese Vegetables – Mushrooms, fried tofu, lots of bean sprouts and green onion in a light sweetened oyster sauce

chinese_fried_rice_quinoa_stevenchu1

Serves 1.

Preparation:

  • 1 cup sliced babybella mushrooms
  • 1 cup sliced fried firm tofu
  • 1/2 – 2/3 cup coarsely cut green onion (~1-2 inches length)
  • 2 cups white bean sprout (or 1.5 handfuls.. easier to grab)

Sauce : 1 tbsp oyster sauce diluted in 3 tbsp water, add 1 tsp sugar & mix (You can buy vegetarian oyster sauce from any Chinese grocery, or use mushroom sauce as a substitute)

Cooking:

Heat 2 tablespoons olive oil in saucepan on medium heat.

Add mushrooms and tofu, cook for 5-7 minutes. When almost cooked, add green onions to sear altogether for additional 4 minutes.

In last 2 minutes add sauce.
In final minute add bean sprouts, turn off heat, and mix all together.

Side 2: Chinese Salad (the right way)

The salad is baby greens with dumpling sauce as dressing. I’m using Sorrento mix and dumpling sauce both from Trader Joe’s. However, you can easily make the sauce on your own:

How to make Dumpling Sauce: 1 part soy sauce, 1/2 part rice vinegar, 1/8 part sesame oil, 1/16 part chili oil

Tutorial: Divide Circle into Slices / Pie Chart in Illustrator

This is a tutorial on how to split up a circle into perfect pie slices vectors. It was taught to me by a past coworker Ruth, thank you so much! I am surprised I remember it after 5 months since I last used it, very handy.

1. First, draw a circle in illustrator.

divide_circle_into_slices_pie_chart_1

2. Draw a line through the center using the line tool. If you don’t have snap to object enabled, you can always check if it’s aligned by using the ALIGN CENTER ALIGN MIDDLE tool.

divide_circle_into_slices_pie_chart_2

3. Right click on the line, go to TRANFORM -> ROTATE. Put in the angle you want… an angle that is divisible evenly by 360 degrees. Here I choose 15. THE KEY IS TO CLICK “COPY”divide_circle_into_slices_pie_chart_3

4. To repeat this action automatically hit COMMAND+D on Mac, or CNTL+D on PC to Duplicate the action. Keep hitting it until you have made all the slices you need.

divide_circle_into_slices_pie_chart_4

5. Now highlight all the line segments with the circle, open PATHFINDER, and click DIVIDE.divide_circle_into_slices_pie_chart_5

6. Presto, individual Pie slices ready to go!

7 of 27
34567891011
%d bloggers like this: