Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

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

    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;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.
    Last edited by VIPStephan; 09-25-2012 at 05:17 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •