We Keep Coding

Keep navigation element highlighted when clicked

I have been trying to use the following code to get my nav element to stay highlighted once clicked. My page will not reload, but will display all content on one page - show this should work. Do I have a problem with selectors? Or is something else wrong? It looks like it should be working to me...
HTML:
<div class="admin-main-area">
<div class="admin-left-nav">
<ul id="admin-left-links">
<li><a class="link" href="#">Orders</a></li>
<li><a class="link" href="#">Reports</a></li>
<li><a class="link" href="#">Add Product</a></li>
<li><a class="link" href="#">Update Products</a></li>
<li><a class="link" href="#">Update Stock</a></li>
<li><a class="link" href="#">Update Pricing</a></li>
</ul>
</div>
<div class="admin-content-area">
<p>this is some content</p>
</div>
</div>
Javascript:
<script>
$('a.link').click(function(){
$('a.link').removeClass("active");
$(this).addClass("active");
});
</script>
CSS:
.active {
background-color: #f43333;
}

At the time you setup the click event handlers the links are not yet loaded in the DOM.
Try this (it will setup the handlers when the DOM is loaded):
$(window).ready(function() {
$('a.link').click(function() {
$('a.link').removeClass("active");
$(this).addClass("active");
});
})
Of course, you will also need to include jQuery before the <script> snippet
Here's a working fiddle:
https://jsfiddle.net/nsjfe5g1/

I don't understand what you need , but for my understandings you can simply do this with css :focus selector
a:focus {
background-color: #f43333;
}
Try with demo https://jsfiddle.net/nsjfe5g1/2/

Check link click happen within a div

I would like the Javascript returning true when users click on the links within specific div
For example:
When users click on links in div having class="span1", it will return true
<div class="span1">
<h3>Title 3</h3>
<ul class="stages" dir="ltr">
<li><a href="http://www.example.com" >Example 1</a></li>
<li><a href="http://www.example.com" >Example 2</a></li>
</ul>
</div>
<div class="span2">
<h3>Title 4</h3>
<ul class="stages" dir="ltr">
<li><a href="http://www.example.com" >Example 1</a></li>
<li><a href="http://www.example.com" >Example 2</a></li>
</ul>
</div>
Thanks a lot!!

Simply use an if statement for .hasClass:
$("div").click(function(){
if($(this).hasClass("span1")){
alert("SPAN 1 CLICKED");
return true;
}
});
FIDDLE
UPDATE: I read your question too quick, here is a new fiddle which targets your a's instead of the div
NEW FIDDLE
should be this instead:
if($(this).closest("div").hasClass("span1")){

Here in pure Javascript: http://jsfiddle.net/xxx96bta/5/
var links = document.getElementsByTagName('a'); //collect your elements
for (i = 0; i < links.length; i++) {
(function () {
links[i].addEventListener('click', whatSpan, false);
})();
}
function whatSpan() {
var parentspan = this.parentNode.parentNode.parentNode.className;
if (parentspan == "span1") {
alert("you clicked span 1");
} else {
alert("you clicked span 2");
}
}

why just the first element in <ul> could responded to query function?

guys.I am now using web.py +jQuery to finish a small website.However I encountered a problem.The example code as blow.When I created a group of li elements,the jQuery event only responded to the first element.But others never call the jQuery function.Why it happened?Many thinks:)
html&python
<ul id="products" style="list-style:none;">
$for item in data.response["Galleries"]:
<li style="float:left" id="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div id="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
</ul>
jQuery
<script type="text/javascript">
$$(document).ready(function(){
$$("#photoLink").mouseenter(function(){
$$("#img_menu").css("margin-top","-20px");
});
$$("#photoLink").mouseleave(function(){
$$("#img_menu").css("margin-top","0px");
});
});
</script>

In HTML IDs must be unique, use class instead like
<ul id="products" style="list-style:none;">
$for item in data.response["Galleries"]:
<li style="float:left" class="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
</ul>
jQuery
<script type="text/javascript">
$$(document).ready(function(){
$$(".photoLink").mouseenter(function(){
$$(this).find(".img_menu").css("margin-top","-20px");
});
$$(".photoLink").mouseleave(function(){
$$(this).find(".img_menu").css("margin-top","0px");
});
});
</script>
Additionally You can use .hover()
<script type="text/javascript">
$$(document).ready(function(){
$$(".photoLink").hover(function(){
$$(this).find(".img_menu").css("margin-top","-20px");
}, function(){
$$(this).find(".img_menu").css("margin-top","0px");
});
});
</script>

Id can't no be duplicate on the page. They must be unique. If there are same multiple Ids presents on the page, selector selects only the first one. So you need to use class selector instead of Id.
<li style="float:left" class ="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
jQuery
<script type="text/javascript">
$$(document).ready(function(){
$$(".photoLink").mouseenter(function(){
$$(this).find(".img_menu").css("margin-top","-20px");
});
$$("#photoLink").mouseleave(function(){
$$(this).find(".img_menu").css("margin-top","0px");
});
});
</script>

Because ID of ane element mus be unique, use class instead
<ul id="products" style="list-style:none;">
$for item in data.response["Galleries"]:
<li style="float:left" class="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
</ul>
then you need to target the img_menu element which is inside the current li
$$(function ($) {
$(".photoLink").hover(function () {
$(this).find(".img_menu").css("margin-top", "-20px");
}, function () {
$(this).find(".img_menu").css("margin-top", "0px");
});
});

Left animation on click li

I have a menu structure:
<ul id="creamenu" class="menuHolder">
<li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
<li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
<li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
</ul>
<ul id="mainmenu" class="menuHolder">
<li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
<li><a id="about2-menu" href="#/haberler">about 2</a></li>
<li><a id="about3-menu" href="#/galeri">about 3</a></li>
<li><a id="about4-menu" href="#/referanslar">about 4</a></li>
<li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>
I have a content structure in same HTML file:
<div id='news-1'>
<!-- content -->
<!-- content -->
</div>
<div id='news-2'>
<!-- content -->
<!-- content -->
</div>
I want, when i click a item e.g. creamenu item, go to div. E.G.
click news-1 item, go to news-1 div. Like this: http://codecanyon.net/item/fancyscroll/full_screen_preview/370241
Is it possible it with pure jQuery?

It's absolutely possible. Try this:
$('#creamenu a').click(function(e) {
var splitId = $(this).attr('id').split('-'),
contentId = splitId[0] + '-' + splitId[1];
e.preventDefault();
$('html, body').animate({
scrollTop: $('#' + contentId).offset().top
}, 'slow');
});
Using this specific approach, you will need to ensure that the id of your link in the #creamenu is prefaced with the id of its corresponding content (as you are doing now).
It would also be more robust to just put the id of your content in the href of the #creamenu link. That way, if the user doesn't have JS active, it would still jump to the content, albeit without an animation. For example:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
Then, your JS would be as follows:
$('#creamenu a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 'slow');
});

<li><a id="news-1-menu" href="#news-1">news 1</a></li>
With the id as href the page just jumps to the target box. Use a plugin like scrollTo to make it scroll smooth.

You can, but you need some minor changes to your code.
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('href') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And change link structure, so href is and id of an element you would like to scroll to.
You could also make a links looks like this:
<li><a id="news-1-menu" href="#/creative-events" rel="#news-1">news 1</a></li>
And use rel atribute to find an element, You would like to scroll to:
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('rel') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And if you are looking for a parallax effect: http://jessandruss.us/, checkout tutorial here: http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/ or here: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

Yes, just change your href attributes to the ID of the element:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
To scroll smoothly, try:
$('a[href^=#]').on('click',function(e) {
e.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('html,body').animate({'scrollTop':top}, function() {
window.location = id;
});
});

duplicate functions, how may I combine them?

I have a function that remains pretty much constant except for the changing class names. I was hoping to make the code a little less text heavy. How may I go about making it just a small function instead of repeating it n times. My concern is also about removing the active class for the last li that was clicked. I've provided only 2 instances here, but this code is repeated n number of times.Any ideas would be much appreciated.
$('a.app1-preview').click(function() {
//remove last active classes
$(".app2").removeClass('active');
$(".app2-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-2').fadeOut("slow", function () {
$('.app-preview-1').fadeIn("slow");
});
});
$('a.app2-preview').click(function() {
//remove last active classes
$(".app1").removeClass('active');
$(".app1-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-1').fadeOut("slow", function () {
$('.app-preview-2').fadeIn("slow");
});
});
HTML code:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>

Try to exploit the fact that you have .active class. ;) Preview - http://jsfiddle.net/evSqF/1/
js:
<script>
$('a.blocklink').click(function() {
var self = $(this);
$('.active').fadeOut('slow', function(){
$(this).removeClass('active');
self.fadeIn('slow');
self.addClass('active');
});
});
</script>
html:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
<div class="app-preview active">App1 preview</div>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
<div class="app-preview">App2 preview</div>
</li>
</ul>
</div>

Edit: After I got some caffeine, I noticed the problems with the setup. I've created a demo at JSFiddle. The markup will display a "header" for an app which will display the child description when clicked on, and hide the descriptions of other sibling's descriptions.
In this case, you can show the current element, and hide the siblings, which would be a cleaner solution as it scales as you at more app elements.
$(".app").click(function() {
var $self = $(this);
var $apps = $self.closest(".apps");
var $selfSiblings = $apps.children(".app").not($self);
$self.addClass(".active");
$self.find(".app-preview").addClass("active");
$selfSiblings.removeClass(".active");
$selfSiblings.find(".app-preview").removeClass("active").fadeOut("slow", function() {
$self.find(".app-preview").fadeIn("slow");
});
});​
I would also recommend rewriting your HTML as such:
<div class="app-container">
<ul class="apps">
<li class="app">
App 1<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 1</span>
</a>
</li>
<li class="app">
App 2<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 2</span>
</a>
</li>
<li class="app">
App 3<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 3</span>
</a>
</li>
</div>​

Write a function to make the functions for you:
function makeHandler(deactivate, fadeOut, fadeIn) {
return function() {
//remove last active classes
$(deactivate).removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$(fadeOut).fadeOut("slow", function () {
$(fadeIn).fadeIn("slow");
});
});
Then:
$('a.app1-preview').click(makeHandler('.app2, .app2-preview', '.app-preview-2', '.app-preview-1'));
$('a.app2-preview').click(makeHandler('.app1, .app1-preview', '.app-preview-1', '.app-preview-2'));
You could probably simplify things further by re-thinking the naming conventions you've got.

I would suggest to define a single function:
function single(index_main, index_aux) {
// Does all your magic
}
$('a.app1-preview').click(function() {
single("1", "2");
});
$('a.app2-preview').click(function() {
single("2", "1");
});
And that does the trick.

I made a jsfiddle example for you. Have a look at it here, it uses as much code that you wrote as possible, so nothing that should surprise you will be there :)
http://jsfiddle.net/2ZPxx/
Basically I ended up with this HTML:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink" id="app1">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink" id="app2">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>
<div class="app-preview-app1 app-preview">App1 preview</div>
<div class="app-preview-app2 app-preview">App2 preview</div>
And this javascript:
$('.apps li a').click(function() {
var id = $(this).attr('id');
$('.apps li').removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview').fadeOut("slow", function () {
$('.app-preview-'+id).fadeIn("slow");
});
});