Develop Reference

Move an item to top of list with "shooting up" animation

I'm looking for some way (javascript, jQuery, CSS3) to move a list item to the top of an unordered list when clicked and animate while doing it to show the item shooting up the list to its place at the top of the list.
Something a bit like this: http://www.sarasoueidan.com/demos/creative-list-effects but in reverse and using a set list of items like this:
Is this even possible?
Here is the code I have so far:
.value {
cursor:pointer;
position: relative;
}
<ul class="list">
<li class="value">Value 1</li>
<li class="value">Value 2</li>
<li class="value">Value 3</li>
<li class="value">Value 4</li>
<li class="value">Value 5</li>
<li class="value">Value 6</li>
<li class="value">Value 7</li>
<li class="value">Value 8</li>
<li class="value">Value 9</li>
<li class="value">Value 10</li>
</ul>
$(".value").on("click", function() {
$(this).animate({
opacity: 0.5,
top: "-=200"
//}, {
//step: function (now, fx) {
// if ($()) $(this).stop();
// if(fx.prop === 'top' && Math.abs(now) >= Math.abs(parseInt($(".list").css("height"), 10))) {
// $(this).stop();
// }
//}
}, 1000, function() {
$(".list").prepend($(this));
$(this).css("top", 0);
$(this).animate({
opacity: 1
}, 500 );
});
});
http://jsfiddle.net/xpvt214o/779771/
It shoots the item up the screen, but I want it to settle into the top position, whereas now it keeps going. I thought adding a step where it stops when it gets to the height of the container, but it still shoots past it.

Figured it out. I need to set the minus top value to the offset of each list item, like so:
$(".value").on("click", function() {
var position = $( this ).position();
event.stopPropagation();
$(this).animate({
opacity: 0.5,
top: "-="+position.top
}, 800, function() {
$(".list").prepend($(this));
$(this).css("top", 0);
$(this).animate({
opacity: 1
}, 500 );
});
});
And remove the margins so it stops in the first position:
body {
margin: 0;
}
.list {
margin: 0;
}

togggle menu need to open on click and close itself when click the other menu

How can make it make
1- open toggle menu when on click menu (not opened by default)
2- close itself - if click other parent menu
trying to make it work for the project
and i copied from cssdesk
$('.inbox li').click(function(e) {
$('.inbox li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
$(document).ready(function () {
$('.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
});
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" class="cssdeck">
<ul class="inbox-nav nav" style="border-top: 1px solid #eef1f5; margin-top:10px;" >
<li class="">
<a href="javascript:;" id="fldr3">menu 1
</li>
<li class="">
<a data-title="Inbox" data-type="important" href="javascript:;">2nd Menu</a>
</li>
<li class="">
<a data-title="Sent" data-type="sent" href="javascript:;">menu2</a>
</li>
<li class="divider"></li>
<li class="active tree-toggler">
Toggle menu</li>
<ul class="nav nav-list tree">
<li class="">Link</li>
<li class="">Link</li>
</ul>
</li>
</ul>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

If user click is not neccesary you can do it by CSS, this is an example the 4th menu item has sub menu items
.menu,
.menu-item {
display: inline;
cursor: default;
}
.menu-item.has-subItem {
position: absolute;
}
.menu-item ul {
display: none;
position: absolute;
top: 15px;
left: 0;
padding: 0;
}
.menu-item:hover ul {
display: inline;
}
<ul class='menu'>
<li class='menu-item'>Item 1</li>
<li class='menu-item'>Item 2</li>
<li class='menu-item'>Item 3</li>
<li class='menu-item has-subItem'>Item 4
<ul>
<li class='sub-item'>sub 1</li>
<li class='sub-item'>sub 2</li>
<li class='sub-item'>sub 3</li>
</ul>
</li>
</ul>

In your $('.inbox li').click() function use jquery's .hide() function on the ul.tree element. Since .hide() won't do anything if the element is already hidden, you don't need to check if it needs to be hidden.
(Similarly, you can pull the $this.addClass('active'); statement out of the if, since it simply won't do anything if the class is already added!)

how to remove slidetoggle hidden div when window width reaches certain size

I have this irritating problem when I toggle a menu in smartphone view the menu stays hidden when resized to desktop view.
So when the window reaches width of about 905px I want to remove the effect of the toggle and show the navigation from hidden to shown.
I am not sure how to fix this as I've no knowledge of JQuery
Here is my code
<div id="menu">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About us</li>
<li class="remove-margin">Contact us</li>
</ul>
</nav>
</div>
<script type="text/javascript">
$(window).resize(function(){
if ($(window).width() >= 905){
}
})
$("#menu").addClass("responsive").before('<div id="three-lines"><i class="material-icons">menu</i></div>');
$("#three-lines").click(function(){
$("#menu").slideToggle('fast');
})
</script>

Just show the element when the condition is reached.
$(function() {
$("#menu").addClass("responsive")
.before('<div id="three-lines"><i class="material-icons">menu</i></div>');
$("#three-lines").click(function() {
$("#menu").slideToggle('fast');
})
addEventListener("resize", function() {
if (innerWidth >= 905) {
$("#menu").show();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<nav>
<ul>
<li>Home
</li>
<li>Services
</li>
<li>About us
</li>
<li class="remove-margin">Contact us
</li>
</ul>
</nav>
</div>
UPDATE
Using media queries
#media screen and (min-width: 905px) {
#menu{
display: block;
}
}

Can't get sticky navbar to work

First, why isn't http://jsfiddle.net/s4eMT/ working?
Second, the js-code that I put in jsfiddle is working in my project but I have a some kind of browser-support issue.
When I run the website in Chrome it works as expected, it gets fixed when you scroll down to the navbar, when I run it in Safari and Firefox it sets the navbar fixed but also shrinks the navbar way smaller and floating left. I can't figure out what it is that's not supported by the last mentioned browsers.
Here's my code:
HTML
<div id="navbar-wrapper">
<div class="navbar">
<div class="navbar-inner hidden-phone">
<ul class="nav">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
<li class="logo hidden-phone"><img src="#routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></li>
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div class="navbar-inner visible-phone">
<ul class="nav phone-only">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
</ul>
<ul class="nav phone-only">
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div id="language" class="hidden-phone">
<img src="#routes.Assets.at("images/gb.png")" />
<img src="#routes.Assets.at("images/se.png")" />
</div>
</div>
</div>
CSS
#navbar-wrapper {
position: relative;
min-width: 100%;
border:1px solid red;
}
JAVASCRIPT
$(document).ready(function () {
var stickyNavTop = $('#navbar-wrapper').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navbar-wrapper').css({
'position': 'fixed',
'top': '0'
});
alert('afa');
} else {
$('#navbar-wrapper').css({
'position': 'relative'
});
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
What am I missing?
regards,

DropDown Menu Display Issue

What I want to do in my website is to have the following code displayed just like its appears but with a timeout for closing the menu when hovering over a menu section (at the bottom is the problematic code).
This is what I achieved without having any troubles (but without the timeout when hovering over the menu sections)
CSS:
.menu
{
list-style:none;
position:relative;
}
ul.menu ul
{
list-style:none;
display:none;
position:absolute; /* To be the position relative to <li> that contains the <ul> */
left:5em; /* So there is no overlaping over <li> */
top:-1em;
}
ul.menu li:hover > ul
{
display:block;
}
HTML:
<ul class="menu">
<li>Equipos
<ul>
<li>Masculinos
<ul>
<li>Aguilas</li>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios 1</li>
<li>Indios 2</li>
<li>Isotopos</li>
</ul>
</li>
<li>Femeninos
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Facdef</li>
<li>Indias</li>
<li>Isotopos</li>
<li>Parque Sur</li>
</ul>
</li>
</ul>
</li>
<li>Categorias
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</li>
<li>Torneos
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</li>
<li>Canchas
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</li>
<li>Resultados</li>
<li>Posiciones</li>
<li>Estadisticas</li>
<li>Boletines ATS</li>
<li>Arbitros y Designaciones</li>
</ul>
And the problem:
CSS:
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto;}
#navigation_horiz ul {height:50px; display:block;background:blue}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
#navigation_horiz ul li #dropdown_style {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_style a {color:red}
HTML:
<div id="navigation_horiz">
<ul>
<li>
Equipos
<div class="dropdown" id="dropdown_style">
Masculinos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Aguilas</li>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios 1</li>
<li>Indios 2</li>
<li>Isotopos</li>
</ul>
</div>
Femeninos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Facdef</li>
<li>Indias</li>
<li>Isotopos</li>
<li>Parque Sur</li>
</ul>
</div>
</div><!-- .dropdown_menu -->
</li>
<li>
Categorias
<div class="dropdown" id="dropdown_style">
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Torneos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Canchas
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Resultados
</li>
<li>
Posiciones
</li>
<li>
Estadisticas
</li>
<li>
Boletines
</li>
<li>
Arbitros y Designaciones
</li>
</ul>
</div><!-- #navigation_horiz -->
JavaScript:
(function($)
{
$.fn.naviDropDown = function(options)
{
//set up default options
var defaults={
dropDownClass: 'dropdown', //the class name for your drop down
dropDownWidth: 'auto', //the default width of drop down elements
slideDownEasing: 'easeInOutCirc', //easing method for slideDown
slideUpEasing: 'easeInOutCirc', //easing method for slideUp
slideDownDuration: 500, //easing duration for slideDown
slideUpDuration: 1000, //easing duration for slideUp
orientation: 'vertical' //orientation - either 'horizontal' or 'vertical'
};
var opts = $.extend({}, defaults, options);
return this.each(function()
{
var $this = $(this);
$this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
if(opts.orientation == 'horizontal')
{
$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
}
if(opts.orientation == 'vertical')
{
$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
}
$this.find('ul').hoverIntent(function() {}, hideDropDown);
$this.find('li').hoverIntent(getDropDown, function() {});
});
var activeNav = null;
function getDropDown()
{
var newActiveNav = $(this);
if (activeNav && activeNav.get(0) !== newActiveNav.get(0))
{
hideDropDown();
}
if (!activeNav)
{
showDropDown(newActiveNav);
}
activeNav = newActiveNav;
}
function showDropDown(newActiveNav)
{ newActiveNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
}
function hideDropDown()
{
if (activeNav)
{ activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
activeNav = null;
}
}
};
})(jQuery);
$(document).ready(function()
{
$('#navigation_horiz').naviDropDown({dropDownWidth: '300px'});
});
Were am I messing up the code and how could I make it work or how to fix it?

At last I only got closed the threat and they told me a lot of stuff I made wrong by posting but still no help. To many days past through and I managed to help other people and myself with problems we all have and with my tiny easy problem nobody got even interested...
I suggest the community and the administrators of this site to clarify yourselves how to improve this in order to get it working the way it should, otherwise do not be so harsh on the people that post things like I did or change the theme of the website from "Stack Overflow is a question and answer site for professional and enthusiast programmers." to "Stack Overflow is a question and answer site for professional" since you give not even a clue to some easy topics.
Sincerely, Martin
P.S.: I post this to generate self conscience of the real problem of the site in order to improve it, do not mean to get anyone furious.