We Keep Coding

jQuery animation doesn't work for my navbar

I have a navigation menu on top of my page made out of list items. I want to apply jQuery code to make the list items to slide down one by one when my page loads...Can't get it work.
index.html
<div class="container">
<ul>
<li id="goFirst">Projects</li>
<li id="goSecond">Contact</li>
<li id="goThird">Blog</li>
</ul>
</div>
script.js
$(document).ready(function() {
$('#goFirst').animate({top: '+=75px'}, 1000);
$('#goSecond').delay(1000).animate({top: '+=75px'}, 1000);
$('#goThird').delay(2000).animate({top: '+=75px'}, 1000);
});

Use marginTop instead of top.
$(document).ready(function() {
$('#goFirst').animate({
marginTop: '+=75px'
}, 1000);
$('#goSecond').delay(1000).animate({
marginTop: '+=75px'
}, 1000);
$('#goThird').delay(2000).animate({
marginTop: '+=75px'
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<ul>
<li id="goFirst">
Projects
</li>
<li id="goSecond">
Contact
</li>
<li id="goThird">
Blog
</li>
</ul>
</div>

JQuery LightSlider inside Bootstrap pills

I'm using jQuery lightSlider as image slider. I want to have sliders inside bootstrap pills (one slider per pill). Nevertheless, I have found the following situation: In the first pill the slider is OK. In the second pill the slider content is not displayed (resizing the window brings up the slider content!). I don't see how to solve this problem. Any help will be sincerely appreciated.
My (simplified) html:
<div>
<ul class="nav nav-pills">
<li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>
</li>
<li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-12 tab-pane fade in active" id="s1">
<ul id="slider-1">
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>tree</p>
</li>
</ul>
</div>
<div class="col-md-12 tab-pane fade active" id="s2">
<ul id="slider-2">
<li>
<p>uno</p>
</li>
<li>
<p>dos</p>
</li>
<li>
<p>tres</p>
</li>
</ul>
</div>
</div>
The javascript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1');
initSlider('slider-2');
And the Jsfiddle reproducing the problem: https://jsfiddle.net/sedtjchs/4/
Thank you for your help!

Problem: You are trying to call lightSlider on the content(#s2) which was already hidden so plugin can not calculate height, width(and etc) on that element.
Add active class to the second .panel-pane.
Jsfiddle

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});

I have the same problem, but the Alex's solution doesn't work for me as my tab wrapper doesn't have a fixed height so it will show blank gap under the 1st tab at the first load.
The Thành Nguyễn's solution is working for me. Basically it's refreshing the slider everytime you click on the tab navigation, so then LightSlider will be able to calculate the active container height.
Here's the complete script :
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
});

How do I hide a div that has a ul with a certain id using jQuery?

I am trying to hide any <div>'s that do not have a <ul> with a certain id. I have a fiddle where I am trying this but it isn't working the way I expected. I can get all of them to hide but the one I want to continue showing isn't working.
HTML
<ul id="accordion">
<li>
<div style="background-color: rgb(109, 129, 27);" class="expand" title="Click to Expand">Zoos</div>
<ul class="sortCat1" id="zoo">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Attractions</div>
<ul class="sortCat2" id="attractions">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Dining & Shopping</div>
<ul class="sortCat3" id="dinShop">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</li>
</ul>
Javascript
if($('.expand ul').id == 'attractions'){
$(this).css({'display': 'block'});
}else{
$('.expand').css({'display': 'none'});
}
JSFiddle
http://jsfiddle.net/27Wmm/

Discussions of the non-merits of numeric ids aside...
Reading between the lines I think you wanted something like this (toggles open the UL associated with a labelled div):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/1/
$(function () {
$('#accordion').on('click', '.expand', function () {
var $this = $(this);
// Show the sibling of the clicked div
$this.next().css({
'display': 'inherit'
});
// Now hide all others sibling of the non-clicked divs
$('.expand').not($this).next().css({
'display': 'none'
});
});
});
With any type of menu, you would normally want to avoid any hard-coding of selections and have it operate on the item clicked (and other related items not clicked).
You would also probably want to start only one (if any) not-collapsed which just means an initial style on them. e.g. in CSS
#accordion ul {
display: none;
}
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/3/
Update
If you want it to have specific startup behaviour, you can factor out the bit that does the work and call it on startup as well.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/4/
var showThis = function ($this) {
// Show the sibling of the clicked div
$this.next().css({
'display': 'inherit'
});
// Now hide all others
$('.expand').not($this).next().css({
'display': 'none'
});
}
$(function () {
$('#accordion').on('click', '.expand', function () {
showThis($(this));
});
showThis($('#attractions').prev());
});
Yet another update
According to the comments, the desired behaviour is to simply show the attraction DIV and associated UL. If that were the case (I still have my doubts) you would change the above to this:
var showThis = function ($this) {
// Show the div, then show the sibling of the clicked div
$this.css({
'display': 'inherit'
}).next().css({
'display': 'inherit'
});
// Now hide all other divs and ULs
$('.expand').not($this).css({
'display': 'none'
}).next().css({
'display': 'none'
});
}
$(function () {
showThis($('#attractions').prev());
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/27Wmm/5/
This should be plenty to play with.

I'm not sure how you're expecting it to work, but I modified your HTML and JS to get something that I think works how you want:
<ul id="accordion">
<li>
<div style="background-color: rgb(109, 129, 27);" class="expand" title="Click to Expand">Zoos
<ul class="sortCat1" id="zoo">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Attractions
<ul class="sortCat2" id="attractions">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
</li>
<li>
<div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Dining & Shopping
<ul class="sortCat3" id="dinShop">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
</li>
$(".expand").each(function()
{
if($('ul', this).attr('id') != "attractions")
{
$(this).css({'display': 'none'});
}
});

Try something like this:
if($('.sortCat2').attr('id') == 'attractions'){
$('.sortCat2').css({'display': 'none'});
}
Working fiddle: http://jsfiddle.net/robertrozas/27Wmm/2/

Jquery Sidebar/Panel Close Issue

I Create one Sidebar/Panel, You can view demo Here (JsFiddle)
Issue is that on Side-panel whenever I click, It Close. My need is Side-panel close only when we click on box which we use to open side panel.
Here is my code.
HTML
<ul id="dock">
<li id="files">
<ul class="free">
<li class="header"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock" style = "padding-top: 12px;"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="" style = "padding-top: 12px;"><H5 ID="colorgreen">DISCOVER </h4></li>
<div id="accordion">
<h3>Section 1</h3>
<div class = "accordionheight">
<p>
accordion 1 content
</p>
</div>
<h3>Section 2</h3>
<div class = "accordionheight">
<p>
accordion 2 content
</p>
</div>
<h3>Section 3</h3>
<div class = "accordionheight">
<p>
accordion 3 content
</p>
</div>
</div>
</ul>
</li>
<li id="tools">
<ul class="free">
<li class="header"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Undock"><H5 ID="colorgreen">FACT FILE</H5></li>
<li>This is one item</li>
<li>This is one item</li>
<li>This is one item</li>
<li>This is one item</li>
<li>This is one item</li>
</ul>
</li>
</ul>
Jquery
$(document).ready(function () {
var docked = 0;
$("#dock li ul").height($(window).height());
$("#dock li").click(function () {
var test = $(this).find("ul").css('width');
if (test == "0px") {
$(".docked").addClass("free").removeClass("docked").animate({
right: "-40px",
width: '0px'
}, 200);
$(this).find("ul").addClass("docked").removeClass("free").animate({
right: "40px",
width: '180px'
}, 200);
} else {
$(this).find("ul").addClass("free").removeClass("docked").animate({
right: "-40px",
width: '0px'
}, 200);
}
});
});

The problem is, that, because your panels (ul.free) are inside the li#files/li#tools, these elements also receive a click event, when your panels are clicked (because the click event goes up to all parents until stopPropagation() is called).
You can work around this, by simply adding an additional element in the sidebar list items like this:
<ul id="dock">
<li id="files">
<div class="handler"></div>
<ul class="free">...</ul>
</li>
<li id="tools">
<div class="handler"></div>
<ul class="free">...</ul>
</li>
</ul>
Than bind the click event to this handler div:
$(document).ready(function(){
$("#dock .handle").click(function(){
var test = $(this).next("ul").css('width');
if (test=="0px") {
$(".docked").addClass("free")
.removeClass("docked")
.animate({right:"-40px",width:'0px'}, 200);
$(this).next("ul").addClass("docked")
.removeClass("free")
.animate({right:"40px",width:'180px'}, 200);
} else {
$(this).next("ul").addClass("free")
.removeClass("docked")
.animate({right:"-40px",width:'0px'}, 200);
}
});
});
I also updated your jsFiddle.

Please try this.
The nested ul which is inside #files li will also respond to the click
in your code. But we can prevent that by using stopPropagate() which
will prevent the handler to be associated with the parent elements.
Jquery
$(document).ready(function(){
var docked = 0;
$("#dock li ul").height($(window).height());
$("#dock li").click(function(event){
var test = $(this).find("ul").css('width');
if (test=="0px"){
$(".docked").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200); $(this).find("ul").addClass("docked").removeClass("free").animate({right:"40px",width:'180px'}, 200);
}else{
$(this).find("ul").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);
}
});
$("#dock li ul").click(function(event)
{
event.stopPropagation();
});
});

Simple Accordion syntax

I am trying to figure why the nav links wont open the accordion. I am sure there is just some jquery that is not in proper syntax. I changed the selectors in the jquery code and now it wont work.
Im sure to a trained eye this should be a quick fix.
Can anyone help?
////////////////////////////
// http://www.adipalaz.com/experiments/jquery/accordion.html
///////////////////////////
(function($) {
//http://www.mail-archive.com/jquery-en#googlegroups.com/msg43851.html
$.fn.orphans = function(){
var txt = [];
this.each(function(){$.each(this.childNodes, function() {
if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)
})});
return $(txt);
};
//http://www.learningjquery.com/2008/02/simple-effects-plugins:
$.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
})(jQuery);
////////////////////////////
$(function() {
$('.collapse').hide();
$('.expand').orphans().wrap('');
//demo 4 - div.demo:eq(3) - queued slide effects:
$('div.demo .expand').click(function() {
var $thisCllps = $(this).next('.collapse');
var $cllpsVisible = $(this).ul('.expand').next('.collapse:visible');
($cllpsVisible.length) ? $(this).toggleClass('open').siblings('.expand').removeClass('open')
.next('.collapse:visible').slideUp(400, function() {
$thisCllps.slideDown();
}) : $thisCllps.slideToggle().prev('.expand').toggleClass('open');
return false;
});
});
<div class="demo">
<ul class="collapse" class="ul" style="display: none; ">
<li>Item 1.1.</li>
<li>Item 1.2.</li>
</ul>
<ul class="collapse" class="ul" style="display: none; ">
<li>Item 2.1.</li>
<li>Item 2.2.</li>
</ul>
<ul class="collapse" class="ul" style="display: none; ">
<li>Item 3.1.</li>
<li>Item 3.2.</li>
</ul>
</div>
<ul>
<li>
<h4 class="expand">Slide Up/Down UL 1</h4>
</li>
<li>
<h4 class="expand">Slide Up/Down UL 2</h4>
</li>
<li>
<h4 class="expand">Slide Up/Down UL 3</h4>
</li>
</ul>

Why not just use the Jquery accordion function?
http://docs.jquery.com/UI/Accordion