CODEWITHSUNDEEP
jquery
Kiril Trendafilov
Kiril Trendafilov

Reputation: 11

How to declare variables scrollTop

I have this function.

$(".link").click(function(){
            var page = $(this).attr("id");
            var color = $(this).attr("class");
            var height = $(this).attr("class");
            var scrolltop = 100;
            color = color.substr(5,6);
            height = height.substr(12,6);
            $('#all_pages').animate({left: (page-1)*(-650) }); 
            $("body").animate({backgroundColor: '#'+color});
            $('html, body').animate({scrollTop: scrolltop}, 'slow');
            $("#container").animate({height: height});
            $("#all_pages").animate({height: height});
            $("#menu ul li").removeClass('active');
            $(this).addClass('active'); 
        });

and these links:

<div id="menu">
            <ul>
                <li id="1" class="link 99CCCC 0620px 0000px active">Home</li>
                <li id="2" class="link FF9933 0890px 0200px">Services</li>
                <li id="3" class="link 66FFCC 1265px 0210px">Tourism</li>
                <li id="4" class="link 99FF99 1580px 0220px">Prices</li>
                <li id="5" class="link FF9999 0485px 0230px">Ask question</li>
                <li id="6" class="link 00CCFF 0450px 0240px">Partners</li>
                <li id="7" class="link EBF291 0450px 0250px">FAQ</li>   
                <li id="8" class="link FFFF66 0850px 0260px">Contact Us</li>                            
            </ul>
        </div>

From the links I get the color of the background, the height of the page. I also want to get information on the position on the page, but I can not figure out how to get the value of the variable --- var scrolltop.

Can anyone help me?

Upvotes: 1

Views: 1323

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

In the sole case you're not able to change the HTML result:
use .split(' ') to retrieve data from attr class and you don't need 'px' and leading zeros so use parseInt.

jsBin demo

$(".link").click(function(){
  
  var myClass   = $(this).attr("class").split(' '); // split class
  var color     = myClass[1];
  var height    = parseInt( myClass[2] , 10);
  var scrolltop = parseInt( myClass[3] , 10); 
  
  alert( color+' '+height+' '+scrolltop );
  
});

In all other cases use the .data() attribute as suggested by @Alexander

Upvotes: 1

Alexander
Alexander

Reputation: 23537

You can use data-* attribute to hold the values of your custom attributes.

Use

<li data-page="1" data-color="99CCCC" data-height="620" data-position="0" class="link active">Home</li>

instead of 

<li id="1" class="link 99CCCC 0620px 0000px active">Home</li>

Use .data() to get the properties from JavaScript.

$(".link").click(function() {
    /* cache the selector */
    var $this = $(this);
    /* Get the properties */
    var page = $this.data("page");
    var color = $this.data("color");
    var height = $this.data("height");
    /* I suppose this is what you wanted */
    var scrolltop = $this.data("position");
    ...
});​

If by clicking in each <li> is supposed to scroll the viewport to a certain position in the page where another element resides. Then you could get the position of that element and scroll there instead of hardcoding the values.

For example,

You want to scroll to an element with id set to home.

<div id="home">

Set the data-position attribute to the selector for it, #home.

<li data-page="1" data-color="99CCCC" data-height="620" data-position="#home" class="link active">Home</li>

Get the element using the selector, get the position of it using .offset() and scroll to it.

var $target = $($this.data("position"));
var scrolltop = $target.offset().top;
$('html, body').animate({ scrollTop: scrolltop }, 'slow');

Upvotes: 2

Ahmed Assaf
Ahmed Assaf

Reputation: 601

You can get the position , by using this code

$(this).offset().top;

you can find more about this function on this link

http://api.jquery.com/offset/

I hope this could be useful.

Upvotes: 1

Related Questions