SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post How can I change the background image of each page in the JQuery booklet plugin?

    Theoretically I think I understand it, but practically I must be doing something wrong in the syntax. I am still really new to JavaScript in general. I am assigning each of the (page) div's it's own id, I think I am getting that part right, and then I want to assign each of them a background image in the C.S.S.. But I am not sure how I should do this. does the statement start with a "." or "#", and should it go in or out of .b-loads {parameters?}

    in my C.S.S.

    Code:
     .booklet .b-load  {text-align:center; 
     .cover {background-image url(images\00c.png)}
     #genesis01n0001 {background-image url(images\00c.png)}}
    In the HTML

    Code:
    <body>
    <div id="mybook">
     <div class="b-load">
     <div id="cover">
     <h1>The Old Testament!</h1>
     </div>
     <div id="genesis01n0001"> 
     <h3>In the beginning God created the heaven and the earth.</h3>
     </div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Do you want the background image of all the pages to be the same?
    Use .b-wrap

    Do you want one image for the left page and a different image for the rght?
    Use .b-wrap-left and .b-wrap-right

    Do you want each page background to be different?
    Use .b-page-0 .b-page-1 and so on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul! and I love your "HAMster" signature!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by TurtleWolf View Post
    Thank you so much Paul!
    At this point I can try a "period" versus a "hash mark" and see which gives me the result I am looking for, but could anyone help me clarify the use difference of each?
    Those are CSS selectors. The period is for class selector, whereas the # is for an id selector.

    Quote Originally Posted by TurtleWolf View Post
    And I am wanting each page to have it's own full background.
    if each page is to have their own different background, you will want to use CSS to target each page individually so that you can give them the background they require.

    For example:

    Code css:
    .b-page-0 { background: url(images/someImage.jpg); }
    .b-page-1 { background: url(images/anotherImage.jpg); }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    RSPLAK .b!tch slapped the ignorance out of my syntax, and Paul Wilkins told me where to stick it. But I couldn't see what I was missing until I used Chris Pederick's developer bar to see the div structure being generated by Will's booklet. The left and right page wrappers were hiding my custom backgrounds.


Tags for this Thread

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
  •