SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery / Javascript Conditional Statement

    Hi

    I am learning jQuery and I have a function which adds an image to a link depending on the file type.

    $("document").ready(function(){

    $('#content a[href$="pdf"]').addClass("pdf");
    $('#content a[href$="xls"]').addClass("xls");
    $('#content a[href$="doc"]').addClass("word");
    $('#content a[href$="ppt"]').addClass("ppt");
    });


    Straightforward enough.

    I need help with how to write a statement that says....if there is no file extension - leave the default styling, if not add file extension. At the moment I have dots and images...see here http://www.theoldcourthousesurgery.n..._us/index.shtm

    Thanks
    Last edited by Mittineague; Mar 8, 2011 at 10:51. Reason: fixing link

  2. #2
    SitePoint Member Yi.Sage's Avatar
    Join Date
    Nov 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not define a default css on the link?

    like

    <a href="#" class="file">link</a>
    #content a.file { background-image:url(xxx);}

    and define the special css class.
    #context a.pdf { background-image:url(xxx) !important;}
    #context a.xls{ background-image:url(xxx) !important;}

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks , I appreciate it can be done soley in CSS but I am learning jQuery I would like to apply the techniques.

    Using jQuery means that I don't have to apply a class to the links, if I could get the syntax correct for a conditional statement, then I am sure I have the answer

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by FootieJonesy View Post
    I need help with how to write a statement that says....if there is no file extension - leave the default styling, if not add file extension. At the moment I have dots and images...
    Would it be more correct to that that you want to replace the existing bulletpoint with an image instead?

    Here's a picture of what I think you are wanting.



    Is that correct?

    To achieve that, you need to update the list item bulletpoint itself. That's done with the list-style-image property of CSS.

    The way to do that is to use a class name on the LI element, which allows you to affect the bulletpoint of that list item.

    Code css:
    #content li.pdf {
    	list-style-image: url(/i/symbols/pdf.gif);
    }

    Apply the desired style to the list item, and you're all set.

    Code javascript:
    $('#content a[href$="pdf"]').parent('li').addClass('pdf');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    You could do it without any class, then let that be overridden with each one.

    So, you just do something for "#content a". No need for a class.

    For jQuery though, what you'd want to do is something like:
    Code:
    $('#content a').addClass('default');
    $('#content a[href$='pdf']).removeClass('default').addClass('pdf');
    // etc
    That'd be the most jQuery specific approach for that.

  6. #6
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    @paul_wilkins your example works although I am not entirely sure why!

    @samanime - I understand why your example should work but it doesn't!!!

  7. #7
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @samanime - just solved the problem..thanks!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by FootieJonesy View Post
    @paul_wilkins your example works although I am not entirely sure why!
    Bullet points are produced by the list items. If you don't want bullet points to be shown, or you want to replace them with something else such as an image, the target of your attention has to be on the list items themself.

    Does that help somewhat?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @paul_wilkins - yes it does help, I just needed to fully understand how the parent selector works and after a bit of reading I do now. Thanks


Bookmarks

Posting Permissions

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