We Keep Coding

say utterscroll to "scroll" even there's a linked div

Hej folk,
actually I develope a small browsergame for my personal use.
The user should do scroll with his mouse over the map (like Google Maps) which I realized with utterscroll.js.
On the second the user should can build structures, delete and upgrade them on a fixed DIV-Grid. The number of the grid is the same like the position id of the place the user can build something.
Also for the build menu I need to href the grid DIVs but when I do this utterscroll can't scroll anymore and I don't know why it does it. :/
HTML
<div class="viewport">
<div id="grid">Grid 1</div>
<div id="grid">Grid 2</div>
<div id="grid">Grid 3</div>
<div id="grid">Grid 4</div>
...
</div>
"InGame"
All grids are linked DIVs (see above)
When I try to scroll with the mouse I "drag and drop" the link instead of scrolling trough the screen/map
screenshot
I only use the default utterscroll.js.
I hope you guy's can help!
rumpetroll

Scrollmagic Show and Remove Pin on div entry

I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my code
// Sticky Share Bar
var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5,
{ bottom:-50},
{ bottom:0 }
);
var share = new ScrollMagic.Scene({
triggerElement: '.entry',
offset:60,
})
.setTween(stickyShareAnimation)
.setPin('.share-bar')
.addIndicators()
.addTo(controller)
This is the HTML
<section class="share-bar">
<div id="share-container" class="container">
<div class="row">
<div class="col-md-12">This is the content</div>
</div>
</div>
</section>
<section class="blog-content">
<div class="container">
<div class="row">
<article class="single-post">
<div class="entry">
<?php the_content();?>
</div>
</article>
</div>
</div>
</section>
<section class="Test">
Where I want sharebar to tweenout.
</section>
I know I could fade out the sharebar with another Tweenmax animation targetting the "section Test" but figured there was probably a better way to do so with my initial javascript. Is there another way or would I need to create a seperate Tween for the sharebar to hide after content (div.entry) finishes.
Codepen http://codepen.io/anon/pen/aOWBQZ

If you want scrollbound animation (scene duration > 0) then yes, you should create one scene for animating the header in and one to animate it out again.
If you want to trigger an animation and animate the same property (i.e. opacity, when fading in and out) using ScrollMagic's setTween method, there will be problems related to property overwriting.
For details see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
NOTE: The wiki was written for ScrollMagic 1.3, but the same principle applies.
The recommended solution is this (Updated for ScrollMagic 2.x):
http://jsfiddle.net/xk22Lx50/
An easier solution however might be to define a CSS class and use setClassToggle to add or remove it for a certain time.
Animation can be achieved using CSS animations.
See: http://scrollmagic.io/examples/basic/class_toggles.html
And one more thing:
If your pinned element is always pinned (as in your example) and just animates in or out, but is never part of the DOM flow, there is no reason to make it sticky (i.e. to use ScrollMagic's pin functionality).
Just set it to position: fixed in css and you're done.
You can still use ScrollMagic to animate it in and out, but have less (unnecessary) JS code.

How to make my push menu more user friendly?

My website's mobile site, (http://www.codesrce.com/thedrumcenter) has a very modern and functioning push menu. However, I am looking to make it more user friendly. Can someone please help me tweak my code so that when the user presses on the menu button the menu will open, and also when the user slides the screen to the right to open it, and then once it's open then they slide to the left to close it? Also, when the button is pressed, I would like it to turn to this color, #0099FF, and then when it is closed turn back to gray. Sorry if my wording isn't the best, but I hope you know what I mean. :) I will provide my code so far:
HTML
<div id="Mobile">
<div id="menu">
<ul>
<li>Top Brands</li>
<li>Drums</li>
<li>Hardware</li>
<li>Cymbals</li>
<li>Sticks</li>
<li>Drum Heads</li>
<li>Terms of Use</li>
<li>Affiliations</li>
</ul>
</div>
<div id="right">
<div id="Top">
<div id="menubar">
<a id="menubarheader">DrumCenter</a>
</div>
</div>
</div>
</div>
JQuery
$('#button').toggle(
function() {
$('#right').animate({ left: 275}, 'fast', function() {
$('#button');
});
},
function() {
$('#right').animate({ left: 0 }, 'fast', function() {
$('#button');
});
}
);
Any help would be appreciated, as I am a complete NOOB at Javascript and JQuery. Thank you!

Essentially there are different ways to go about this.. I inspected the CSS on your site to see how you were doing things but with 8 CSS's I gave up... too much to look at in the browser.
So.. essentially this question I believe was asked in
Swipe in the middle to open panel with jQuery Mobile?
and he gave a fiddle such http://fiddle.jshell.net/Palestinian/2B4Ht/
So I would implement that into your coding in some way. Have a top-fixed navbar that when collapsed will show your "push menu". Then just have the options if the the screen width is less than say 768pixels or something you can swipe left or right to open the pannels that will be menu's themselves..
Just my advice. I have never made a menu like the one you asked but I don't think it will be difficult.

Full Screen image slider with jquery

I have to make a demo website somewhat similar to http://issuu.com/eb_magazine/docs/ebmag_31/1. The website is coded in flash but I want to do it using javascript and jQuery.
I think I need to do this in two parts, first is a simple image slider to slides between images. I think I can use any jQuery Image slider plugin for that.
The second part where we click on the image and it opens in full screen image slider with a zoom option. I don't know which plugin can be used for that. Is that even possible to do with jQuery? Please suggest any plugins for that

I think http://www.turnjs.com/ is the best solution for your query.
Turn.js is a JavaScript library that will make your content look like
a real book or magazine using all the advantages of HTML5. The web is
getting beautiful with new user interfaces based in HTML5; turn.js is
the best fit for a magazine, book or catalog based in HTML5.
Here's a sample code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>

How a Javascript Accordion Works?

I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks

I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.

The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.

See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.