JS, jQuery - How to move a specific element to original location

m2244 · 09-25-2012, 03:42 PM

Hello,

I am using jQuery to set a style on a <li> making it move up 3px. I have several of these <li> and each time a user clicks on one of them it moves up, giving the user an idication of which one they are on (they represent pages). Anyway, now I need to move the previous tick mark back down when the user clicks a new one. Can I simply use a JS variable to store a reference to the previous tick mark?

Code:

<ul>
			<li class="left"><span id="First Search Button" class="scrubberBtn">'</span></li>
			<li><span id="youtubeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="wikiSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="BenelliSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button" class="scrubberBtn">'</span></li>
			<li><span id="DrudgeSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="TownHallSearch Button" class="scrubberBtn">'</span></li>
			<li><span id="Home Search Button Last" class="scrubberBtn">'</span></li>
			
		</ul>

Code:

/* This function creates listeners on the tick marks in the console page scrubber. MH */
function createListeners(){
	$('.scrubberBtn').click(function(){
	
	$(this).removeClass("scrubberBtn");
	$(this).addClass("scrubberBtnSelected");

	});
	
	$(".scrubberBtn").mouseenter(function () {$('#page_display').html(this.id);});
	
	$(".scrubberBtn").mouseleave(function () {$('#page_display').html("");});
}

Code:

.scrubberBtn{
	position:absolute;
	cursor:default;
	font-size:1.8em;
}

.scrubberBtnSelected{
	position:absolute;
	cursor:default;
	font-size:1.8em;
	top:-3px;
}

VIPStephan · 09-25-2012, 05:08 PM

You just need to change the class back to the original one. Also, while doing that you can optimize your JS by chaining the functions:

PHP Code:


			
/* This function creates listeners on the tick marks in the console page scrubber. MH */
function createListeners(){
    $('.scrubberBtn')
        .click(function(){
            $(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
        })
        .mouseenter(function () {$('#page_display').html(this.id);})
        .mouseleave(function () {$('#page_display').html("");});
}

Edit: Oh, by the way: I just noticed that you are using the ID attribute in a wrong way. An ID must be unique and can’t contain space characters. You should move these additional values like “Button” to the class attribute or, even better, remove them altogether. All these “scrubberBtn” classes are redundant, too, as you could put one ID or class to the ul element and address your spans that way without a class on each element.

m2244 · 09-25-2012, 05:34 PM

Quote:

Originally Posted by VIPStephan

You just need to change the class back to the original one. Also, while doing that you can optimize your JS by chaining the functions:

Thanks, that did it.