4

I'm wondering if I can set the value of an HTML object's attribute as a string that contains # character ?

The reason I want to do this is the page will have a lot of items that should scroll the page to specified elements, and I want to store the data ' which item should it scroll to? ' as a data-scrollto attribute.

So my JavaScript code -will- look like this:

function ScrollToElement(lm)
{
    var theTop  = lm.offset().top;
    $("html,body").animate({
        scrollTop: theTop/*,
        scrollLeft: 1000*/
    });
}

// .. and add click event to all such objects : 
$('.scroller').click(function(){
        var theSelector = $(this).attr('data-scrollto');
        ScrollToElement($(theSelector));
    });

so the html elements will look like :

<a class='scroller' data-scrollto='p#p-to-scroll'>Click to scroll to p</a>

is it safe ?

And as a side question, why does

$(element).data('scrollto');

does not work but

$(element).attr('data-scrollto'); 

works ?

9
  • 3
    Yes, it's safe. Maybe not really elegant though, as you mix logic and presentation a little too much. Sep 3, 2013 at 17:06
  • 1
    Why p#p-to-scroll? Just #p-to-scroll isn't enough?
    – u_mulder
    Sep 3, 2013 at 17:07
  • @dystroy you are right, I'm creating a portfolio for myself, and I want an easy navigation. Adding all the click()'s one by one seemed too much to me, and I would like to keep the javascript constant, whereas changing html elements. Do you think of a better way for it?
    – jeff
    Sep 3, 2013 at 17:08
  • @u_mulder of course, but if it works, it works both ways, right?
    – jeff
    Sep 3, 2013 at 17:08
  • 2
    I'm with @dystroy on this . . . I'd recommend using ScrollToElement($("#" + theSelector)); instead of ScrollToElement($(theSelector)); and have the data-scrollto value simply be the target element's id attribute. That would separate the data from the logic.
    – talemyn
    Sep 3, 2013 at 17:18

2 Answers 2

3

According to the W3C specs, yes, it is safe to use the U+0023 NUMBER SIGN characters (#) and the U+002E FULL STOP characters (.).

The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal space characters, any U+0022 QUOTATION MARK characters ("), U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN characters (=), U+003C LESS-THAN SIGN characters (<), U+003E GREATER-THAN SIGN characters (>), or U+0060 GRAVE ACCENT characters (`), and must not be the empty string.

Read http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#attributes-0.

0

Yes, you can store a hash # and . in the data attributes. You should use the proper data methods. http://api.jquery.com/jQuery.data/

var theSelector = $(this).data('scrollto');

If you can't seem to use the data method, check the version of jQuery you are using, it was introduced in version 1.2.3

8
  • The OP seems to have some problem getting $.data to work, and can only get the data using $.attr. @Cengiz: Here is a jsfiddle showing both in action: jsfiddle.net/sS9eF but you should really use $.data. If it's not working, there may be a problem with your HTML, or some browser compatibility issue. Sep 3, 2013 at 17:20
  • Wondering if the OP is using an outdates version of jQuery? Sep 3, 2013 at 17:23
  • The $.data method stores the data without actually changing the DOM node, so you wouldn't see the change in the DOM inspector. $.attr does change the node; I wonder if that's what OP is seeing?
    – Evan Davis
    Sep 3, 2013 at 17:37
  • @JustinBicknell maybe , [@]Mathletics maybe :) I just remember something were not working about $.data, but $.attr always worked, so I never used $.data :) is it wrong ?
    – jeff
    Sep 3, 2013 at 18:54
  • @CengizFrostclaw - I'd have to know more about the problem you were having with data, but anytime you are storing and retrieving data, then it makes more sense to use it then attr. Plus, you can reference in memory objects, not just strings using data. Sep 3, 2013 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.