Develop Reference

MooTools Fx.SmoothScroll() at min-screen width only

Is there a simple way to initialize Fx.SmoothScroll at a minimum screen width, and disable it below?
Ex, I only want the smooth scroll to happen above 400px.
Why, because a show/hide responsive menu is messing with the scroll target position, so JS is scrolling past the target.
UPDATE:
I thought it would be better to actually measure the offset of the transitioning element, and set that in smooth scroll. I tried this, but it is not working.
$$('#nav ul li a.menu')[0].addEvent('click', function(){
window.offset = $('nav').getSize().y - 32;
console.log(window.offset)
});
new Fx.SmoothScroll({
offset: {
y: -window.offset
}
});
How would I update the offset on each click?

After going the proper "responsive" route, I came up with this code.
var theScroll = new Fx.Scroll(window);
$$('#nav ul li a.menu')[0].addEvent('click', function(e){
e.preventDefault();
offset = $('nav').getSize().y - 32;
theScroll.options.offset.y = -offset;
theScroll.toElement($('menu'),'y');
});

lack of smooth expand collapse of li elements using jQuery

I am trying to slide down li elements on mouseenter of ul and on mouseleave it will slideup its li elements. When I have varying number of li elements, when one slides up it automatically causes mouseenter on other ul
How can this be prevented to ensure a smooth expand/collapse experience?
This is what i have tried so far, i am using hovering variable to have a flag so that for next 2 seconds the mouseenter doesnt cause collapsing/expanding
var hovering=0;
$("ul").mouseenter(function (e) {
console.log(hovering + " " + Math.random());
setTimeout(function(){
clearHover();
}, 1000);
if (hovering == 0) {
hovering = 1;
$(this).children("li").slideDown();
$(".nav").not(this).find("li").slideUp();
}
});
$("ul").mouseleave(function (e) {
$(this).children("li").slideUp();
hovering = 0;
});
function clearHover(){
hovering = 0;
console.log(hovering + " " + Math.random());
};
This is the fiddle

Your problem is not that it automatically opens another ul, all your ul's are 100% width. No wonder you will hover over one of them when leaving another. Try adding this in the css:
ul {width: 50px;}

If you display the ul as a table, you'll get a width that flexes with the content of the header text (where you have "1st", "2nd", etc.)
ul {display: table;}

Button on-click expands over other elements to reveal longer string of text

I am attempting to do some JS animation, but failing miserably.
Essentially I have 3 links placed next to each other.
The first two are simply links that open in a new window.
The third button when clicked needs to slide out to the left, and overlay it's neighbours, revealing a span which is hidden by default (a URL).
I've set up a basic codepen example:
http://codepen.io/anon/pen/EsojF
The idea is that the third button when pressed will fill the width of the entire UL, sitting on top of the other links or they could slide away to zero width and the URL inside the span should be then displayed (ideally the link would also copy to clipboard but not yet even considered that route).
Can anyone offer any pointers?
My client has a number of users still using IE9 so I believe javascript or jquery to be the best approach?

Edit, Updated
Try (v2)
jQuery(document).ready(function () {
jQuery('.get-url a').click(function (e) {
// cache selector
var elem = jQuery(this);
// `elem` parent sibling `li` elements
var parents = elem.parent("li").siblings();
// set `width` of `elem` parent `li`
var width = parseInt(elem.parents("ul").css("width")) * .6;
// toggle `parents` ,
// set `width` of `elem` parent `li`
// toggle `url-reveal` `span`
if (elem.find(".url-reveal").css("display") === "none") {
// added minimal slide effect
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(200)
, elem.parent("li").animate({width: width }, -200));
} else {
// reverse toggle
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(-2000, "linear")
, elem.parent("li").animate({width: "100"}, -1000, "linear"))
}
e.preventDefault();
});
});
jQuery(document).ready(function () {
jQuery('.get-url a').click(function (e) {
// cache selector
var elem = jQuery(this);
// `elem` parent sibling `li` elements
var parents = elem.parent("li").siblings();
// set `width` of `elem` parent `li`
var width = parseInt(elem.parents("ul").css("width")) * .6;
// toggle `parents` ,
// set `width` of `elem` parent `li`
// toggle `url-reveal` `span`
if (elem.find(".url-reveal").css("display") === "none") {
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(200)
, elem.parent("li").animate({width: width }, -200));
} else {
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(-2000, "linear")
, elem.parent("li").animate({width: "100"}, -1000, "linear"))
}
e.preventDefault();
});
});
.url-reveal {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
ul li {
width: 100px;
padding: 10px;
display: inline-block;
background: #c50000;
margin: 0;
}
ul li a {
color: #fff;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Google
</li>
<li>Facebook
</li>
<li class="get-url"><span class="label">Get URL</span> <span class="url-reveal">http://www.longURLGoeshere.com</span>
</li>
</ul>

If you remember the by making something relative you can move it's position on the screen without moving it in the DOM, then remembering that by default overflow is visible you can work out the parents offset and make the span grow outside of it's parent.
I have amended your codepen to make it work: http://codepen.io/anon/pen/Czwlk
However my real answer would be to recode and take another viewpoint, instead of making the link grow why don't you cover all three links with a new temporary link:
jQuery('<span>Long Url</span>').insertAfter(this);
Assuming you aren't injecting a link but rather a plain text url for the user to manually share with.
Answer 2!
The way I would code it is as follows. Firstly I would set the parent UL to display inline-block so it wraps the links tightly, and then give it position relative. Then when the link is clicked I inject an input field into after the link with position absolute - this way I can make it fill the UL and completely cover all the links. As you can see for extra sugar I also focus and select the input so the user can copy and paste it where they want. All you would need to finish the code is decide how you want to close the tooltip afterwards. The easiest way would be to add a close icon to the tooltip which .remove() the tooltip on click. As it doesn't affect the link it would still work and inject a new div if required.
Demo here: http://codepen.io/anon/pen/dkGAy
Full animated demo here: http://codepen.io/anon/pen/iFmeu

Insert inline element and animate shift to left

I've been trying to solve this problem for a week now and it seems basic, so maybe I'm missing something.
I want to have a div centered on the screen (or its container), and then insert a second div to the right of it, so that afterwards the two of them are centered (space on each side is equal).
Inserting the second div is not a problem, but I need the first block to slide over to where its going to be after the new block is inserted.
http://jsfiddle.net/rdbLbnw1/
.container {
width:100%;
text-align:center;
}
.inside {
border:solid 1px black;
width:100px;
height:100px;
display:inline-block;
}
$(document).ready(function() {
$("#add").click(function() {
$(".container").append("<div class='inside'></div>");
});
});
<div class="container">
<div class="inside"></div>
</div>
<input id="add" type="button" value="add"/>
Do I need to explicitly calculate where the original box is going to end up and then animate that, or is there a better way to do it?

I like your question so decide to write this:
$(document).ready(function() {
var isInAction = false;
var intNumOfBoxes = 1;
var intMargin = 10;
$containerWidth = $(".container").width();
$insideWidth = $(".inside").width();
$(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px');
$("#add").click(function() {
if (!isInAction){
isInAction = true;
intNumOfBoxes +=1;
$(".current").removeClass("current");
$(".container").append("<div class='inside current'></div>");
$('.inside').animate({
'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px'
}, 300, function () {
$(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px');
$(".current").fadeIn(500,function(){
isInAction = false;
});
});
}
});
});
Also add this class in CSS:
.current {
display:none;
}
You don't need to change variables in JS code except intMargin. you can change this var to set margin between boxes.
Note: This code works fine on older browsers too and not need to support CSS3 features like transition.
Update: Some bugs like repeated clicks fixed.
Check JSFiddle Demo

First, we can animate only things that have explicit numerical values such as width, left or margin. We can't animate things like alignment (which actually use the same margin property but implicitly, never mind). So if we know width of inserted div let's just add it to our container.
1) Let's centre container itself and add transition to it
.container {
width: 102px; /* set explicit width; 102 - because of borders */
margin: auto; /* set margin to 'auto' - that will centre the div */
transition: width 0.5s;
}
2) Then increase the width when add div
$(".container").width($(".container").width() + 102);
3) But wait! If we add div to too narrow container it will be added to bottom not to right. So we need another container set to appropriate width before.
See final example on JSFiddle.
BTW, remove all line breaks and tabs from your code when you use inline-block, because it will cause spaces between your blocks.

CSS: Making Horizontal scrollable Menu

I want to add a menu to my application screens. The menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed. Based on the menu screen the menu should be scrolled to that menu icon for that menu screen.
Ex.:
< menu1 | menu2 | menu3 >
Say there are 6 menu icons and 3 are visible at a time. on press of right arrow, it should scroll one item at a time.
and if my screen is related to menu 4, the menu4 has to be positioned.
< menu4 | menu5 | menu6 >
And also each menu item should be clickable.
Please let me know, How I can achieve this.
Update
Have js for MouseOver
<script type="text/javascript">
$(function () {
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 15;
var divWidth = div.width();
div.css({ overflow: 'hidden' });
var lastLi = ul.find('li:last-child');
div.mousemove(function (e) {
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
div.scrollLeft(left);
});
});
</script>
JSFiddle
Check here
Update3
Update 4
This is dynamic menu retreived from db build with ul & li's. If there is more Li than screen width, I simply want an arrow to left & right side to scroll extra li's, if any.

See this fiddle:
http://jsfiddle.net/kzQFQ/49/
$(document).ready(function () {
$('.right').click(function () {
var position = $('.container').position();
var r=position.left-$(window).width()
$('.container').animate({
'left': ''+r+'px'
});
});
$('.left').click(function () {
var position = $('.container').position();
var l=position.left+$(window).width()
if(l<=0)
{
$('.container').animate({
'left': ''+l+'px'
});
}
});
});

Good article about horizontal scrollable menu here
And DEMO (Note: Reduce the size of the browser)

hop this should be help you see link
http://jquery.malsup.com/cycle/int2.html
see Non-Image Content at the last of page
see this fiddle: http://fiddle.jshell.net/vac9x/1/