Forums

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

Home Forums CSS PLease help

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #35144
    loren
    Member

    I would like to randomly turn on and off the visibility of 100 layers of the following project
    http://www.demomento.net/VARH/

    I would love to make that this piece interacts
    with a ramdom dance of opening and closing doors

    I’ve tried ou few script with no luck
    this is the last one I been using …




    #90565
    Mottie
    Member

    Hiya, right now, that code won’t work because it hides and shows the divs with each box image. So, to use it, I would do the following:

    • Rename div id of Layer-1 to “background”, or something else – the entire box image shouldn’t be included with the other random images.
    • Modify the “Layer-1.png” to include all of the box backgrounds, loading one large image is better than loading one large plus 100 small. Well, ok 200 small images since now the images inside of the box will contain different images.
    • It looks like jQuery is on that page, so wrap the above code inside of a $(document).ready(function(){ /* code goes here */ });
    • Personally, I wouldn’t use cookies anymore. HTML5 local storage is the best option now. I’m not even sure why cookies are being used above.
    • I thought you might need help with the coding, but I wasn’t sure how you would like the random image to display – on mouseover? a specific word in the box? timed? or something returned from the server?

    #90578
    loren
    Member

    thanks!
    still very lost .. .I have made few changes but … very very lost
    Entering any word I would like to randomly turn on and off those layers which contain a door
    http://www.demomento.net/VARH/

    #90655
    loren
    Member

    here it is a sample of what i like
    at the moment on over mouse the doors are closing
    I want to do same but with a random effect
    http://www.demomento.net/VARH/index2.html

    #90670
    Mottie
    Member

    Hi Loren!

    Well, I ended up with this code… I’m not sure if it is exactly what you want. but I put the entire page code here (or look at the full page view).

    $(function(){
    var i, layers = [],
    makeLayers = function(){
    for (var i = 2; i < 102; i++){
    layers.push(i);
    }
    };
    makeLayers();
    $('div.layer').mouseover(function(){
    var random = Math.floor(Math.random()*layers.length);
    $('#Layer-' + layers[random]).hide();
    layers.splice(random,1);
    });

    $('span.style2 a').click(function(){
    makeLayers();
    $('div.layer').show();
    return false;
    });

    });

    Here are some notes on what I did:

    • Updated jQuery to version 1.7.
    • All “onMouseOver” functions were removed, and the class name “layer” was added.
    • Hovering over any closed door will now randomly open a door, ignoring doors that are already open.
    • I changed the “open doors” link in the bottom right to reset all of the doors.
    • I’m not really sure what the “MM_reloadPage” function is trying to do… no one uses Netscape anymore. But I left the code there in case you had a specific purpose for it.
    • I also recommend updating the page to use HTML5, you can add a HTML5 shim if you need to make the page work in IE6-8, but since you aren’t using any HTML5 tags, you probably won’t have to.

    #90719
    loren
    Member

    hello!
    this is great!
    There is a way to activate that random script by clicking on the send link?
    And open not just one but many of those doors?
    http://www.demomento.net/VARH/index3.html

    #90729
    Mottie
    Member

    Ok, I’ve updated the code. Basically I added a temporary method to allow you to open more than one box by typing in the number and clicking on “send”. I added notes on how to remove it and once you add the method to open more than one box, just call the reveal function as follows:

    revealLayers(5);

    Where “5” is the number of boxes to open.

    Here is the updated code and demo (full screen):

    $(function(){
    var i, layers = [],
    makeLayers = function(){
    for (var i = 2; i < 102; i++){
    layers.push(i);
    }
    },
    revealLayers = function(n){
    var i, random, n = n || 1;
    for (i=0; i < n; i++) {
    random = Math.floor(Math.random()*layers.length);
    $('#Layer-' + layers[random]).hide();
    layers.splice(random,1);
    }
    };
    makeLayers();
    $('div.layer').mouseover(function(){
    revealLayers();
    });

    $('a.reset').click(function(){
    makeLayers();
    $('div.layer').show();
    return false;
    });

    $('a.send').click(function(){
    // temporarily allow entering a number in the send box to make that many panels open
    n = parseInt($('input[name=textfield]').val(),10) || 1;
    revealLayers(n);
    // remove lines above

    // Remove the above code to stop making numbers work; then remove the "//" in the next line
    // revealLayers();
    return false;
    });

    });
    #90769
    loren
    Member

    thanks!
    really appreciated!
    http://www.demomento.net/VARH/

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