›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

How to change background images more than once in harlowe 2.0

KhaloodxpKhaloodxp
in Help! with 2.0
a feature I want to include in the rpg game I making is that the background images will change more than just once for e.g this is what I pasted in my stylesheet: 
}
html { 
  background: url(https://www.dropbox.com/s/kvxpbdwoyowgln8/mayor's house.jpg?dl=1) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main {
 background-image:url("https://www.dropbox.com/s/sbphbzii7rq5g9q/Mayor.jpg?dl=1";);
 background-size:cover;
}
.Shop {
 background-image:url("https://www.dropbox.com/s/msr2m1kl6bqp7ia/LindblumWeaponShop.png?dl=1";);
 background-size:cover;
}
now when I start the game I have the bg image I add this to the main to make it change image 
<script>$('html').removeClass().addClass('main')</script>
but I want when I enter shop that the image changes once again but it doesn't seem to work can you guys please tell me what should I do

Comments

  • greyelfgreyelf
    First a couple of general suggestions:

    a. It is generally a good idea to be case consistent in the naming of you classes (eg. main and Shop), I wound change .Shop to be .shop

    b. Currently your .main and .Shop CSS selectors are very non-specific (you could apply them to any element) I would change them to be specific to the html element only. eg. html.main and html.shop

    c. It is good practice to specifically remove your known class names instead of doing a general remove all classes, as you don't know if the developer of Harlowe has any plans to add they own classes to the html element. 
    <script>$('html').removeClass('main shop').addClass('main')</script>

    Each time the Reader visits a Passage that displays a different background image to whichever one is currently being shown you need to use your script to update the class on the html element. So when the Reader visits the shop you need to do the following: 
    <script>$('html').removeClass('main shop').addClass('shop')</script>

    The Basic Harlowe Passage Tag Based Styling thread explains how to use Passage Tags to control which background image is shown for a set of Passages. If you use the code in that thread I suggest changing the first line in first example to also be more specific on which class names are removed. Something like the following: 
    (print: "<script>$('html').removeClass('main shop')</script>")
  • KhaloodxpKhaloodxp
    greyelf wrote: »
    First a couple of general suggestions:

    a. It is generally a good idea to be case consistent in the naming of you classes (eg. main and Shop), I wound change .Shop to be .shop

    b. Currently your .main and .Shop CSS selectors are very non-specific (you could apply them to any element) I would change them to be specific to the html element only. eg. html.main and html.shop

    c. It is good practice to specifically remove your known class names instead of doing a general remove all classes, as you don't know if the developer of Harlowe has any plans to add they own classes to the html element. 
    <script>$('html').removeClass('main shop').addClass('main')</script>

    Each time the Reader visits a Passage that displays a different background image to whichever one is currently being shown you need to use your script to update the class on the html element. So when the Reader visits the shop you need to do the following: 
    <script>$('html').removeClass('main shop').addClass('shop')</script>

    The Basic Harlowe Passage Tag Based Styling thread explains how to use Passage Tags to control which background image is shown for a set of Passages. If you use the code in that thread I suggest changing the first line in first example to also be more specific on which class names are removed. Something like the following: 
    (print: "<script>$('html').removeClass('main shop')</script>")
    I'll try that thanks

  • KhaloodxpKhaloodxp
    greyelf wrote: »
    First a couple of general suggestions:

    a. It is generally a good idea to be case consistent in the naming of you classes (eg. main and Shop), I wound change .Shop to be .shop

    b. Currently your .main and .Shop CSS selectors are very non-specific (you could apply them to any element) I would change them to be specific to the html element only. eg. html.main and html.shop

    c. It is good practice to specifically remove your known class names instead of doing a general remove all classes, as you don't know if the developer of Harlowe has any plans to add they own classes to the html element. 
    <script>$('html').removeClass('main shop').addClass('main')</script>

    Each time the Reader visits a Passage that displays a different background image to whichever one is currently being shown you need to use your script to update the class on the html element. So when the Reader visits the shop you need to do the following: 
    <script>$('html').removeClass('main shop').addClass('shop')</script>

    The Basic Harlowe Passage Tag Based Styling thread explains how to use Passage Tags to control which background image is shown for a set of Passages. If you use the code in that thread I suggest changing the first line in first example to also be more specific on which class names are removed. Something like the following: 
    (print: "<script>$('html').removeClass('main shop')</script>")
    yep works perfectly :smiley:
Sign In or Register to comment.