Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Change background of div according to hash url

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #36084
    Carlos56
    Member

    Hello all,

    I’m a novice when it comes to CSS/jQuery but trying my best to pick it up fast..

    I am using a slider as my main content box. I have 3 sections, each of which is accessible with a hash URL.

    I was then wondering if it’s at all possible to change the background of a random div (my logo), according to which hashURL (section) is selected?

    Thank you

    #94525
    Carlos56
    Member

    Anyone?

    Would really appreciate some help on this!

    Thanks

    #94526
    Mottie
    Member

    Yes, it is possible, but it would make it easier for us to help you if you shared, or better yet provided a demo (using jsFiddle.net) with some example code.

    #94528
    jamygolden
    Member

    Try something like this.

    function cssChangeBasedOnHash() {

    switch ( window.location.hash ) {
    case '#random-hash':
    var backgroundColor = '#333'
    break;

    case '#another-hash':
    var backgroundColor = '#222'
    break;

    case '#chicken':
    var backgroundColor = '#f1f1f1'
    break;

    default: // fallback
    var backgroundColor = '#fff'
    break;
    };

    $('#something').css('backgroundColor', backgroundColor);

    }; // cssChangeBasedOnHash()

    $(document).ready(function() {

    cssChangeBasedOnHash();


    $(window).bind( 'hashchange', function(){

    cssChangeBasedOnHash();

    }); // window.bind.hashchange

    }); // dom.ready

    The switch/case detects the hash names. Change those to your desired hash names. I’ve set variables depending on what hash is detected. You can place any javascript in there. Functions, objects, whatever.

    #94542
    Carlos56
    Member

    Thanks guys.

    Jamy, really appreciate your help – however could I have some more information – Where would that code go? Where do I reference the background images?

    Mottie, you’re right.

    I’ve uploaded my progress so far to http://www.carlosrios.co.uk

    Like I said before I’m a novice so apologies for what is probably a mess of a code.

    As I explained before I would basically like to have the yellow circle change colour as the user scrolls through the navigation menu. I figure the best way to do this would probably be to make use of a sprite with 3 different coloured circles.

    Thank you so much!

    #94545
    sheepysheep60
    Participant

    jamy_sa has given you some javascript, so it would [usually] go inside the

    tags of your page, inside their own script tags. Like this:



    #94546
    Carlos56
    Member

    I get that bit, but I don’t understand how I would link all of that code so that the picture I use for my logo changes between 3 different ones?

    thanks!

    #94552
    sheepysheep60
    Participant

    here you are, have a look at this:

    http://jsfiddle.net/jFyZ8/1/

    using a sprite like you mentioned and jquery

    #94556
    jamygolden
    Member

    I updated that slightly to look more like the example I supplied previously:

    http://jsfiddle.net/jFyZ8/3/

    #94558
    Carlos56
    Member

    Thank You so much. You guys are amazing will check out what you guys have posted when I get home. Thank you once again!

    #94577
    jamygolden
    Member

    @Hompimpa why dont you create a separate thread for that and explain a little more with an example.

    as for using :target – It isn’t well enough supported to use for something that is ‘required’ on a web page. Also the javascript works on hash change – so its not necessary to click on an anchor link to change the hash, you can type it in yourself into the url bar, hit enter and it will change correctly. You could link someone with a custom hash and it will load with that hash ‘enabled’.

    #94598
    Carlos56
    Member

    Hey guys.

    Massive thanks to you both jamy_za and sheepysheep60, it’s worked!

    edit: I think i was a bit premature in my celebrations.

    I’ve uploaded my progress to http://www.carlosrios.co.uk once again.

    if you type in the address bar, #contact and press enter, you’re taken to the contact page, but the logo div doesn’t change.

    Can this be fixed?

    One more little thing… (sorry :| )

    I’m using ‘transify’ to fade in the bottom-borders below my navigation. Could a similar solution be applied to my logo div so it fades as it flicks through the different colours!?!?

    Thanking you muchly!

    #94618
    Carlos56
    Member

    I’ve tried it on chrome, safari and internet explorer.

    If I have the ‘contact’ item selected in the menu. If I refresh the page, the content displayed will still be the ‘contact’ page but the logo flicks back to the first image used. I’ve changed the order of the images on the sprite and it keeps happening. Whatever the first image is, it’s what automatically gets selected if the page is refreshed, or a page is accessed through the hash link.

    I understand you guys have already helped me loads, but would really like to get this fixed. Really appreciate your efforts.

    Carlos

    #94620
    Mottie
    Member

    Hi Carlos56!

    Try this (demo):

    $(document).ready(function() {

    var updateLogo = function(id) {
    var backgroundPosition = '0 0';
    switch (id.substring(1)) {
    case 'about':
    backgroundPosition = '-80px -75px';
    break;
    case 'contact':
    backgroundPosition = '160px -75px';
    break;
    }
    $(".logo").css("backgroundPosition", backgroundPosition);
    };

    $(".menu-item").click(function(e) {
    e.preventDefault(); // prevent default link behaviour
    updateLogo(this.hash);
    });
    // update logo on page load
    updateLogo(window.location.hash);

    });
    #94621
    Carlos56
    Member

    Hi Mottie,

    Thanks for your help.

    That fixes the revert to the first image when refreshing the page. It doesn’t however update the logo when an item is accessed via a hash link. Is this not possible?

Viewing 15 posts - 1 through 15 (of 28 total)
  • The forum ‘CSS’ is closed to new topics and replies.