Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Simulate the dropdown alert bar & noise of "flash update required"

    Hi,

    I want to recreate the effect of the drop-down bar that appears at the top of your browser when prompted to download an updated version of flash. Its for a proprietory plugin, but can't seem to get anywhere with it... Anyone have any ideas?

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    What do you have so far? Let's start with the HTML/CSS even, if you don't have any javascript written yet...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    thegreatescape (01-23-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    What do you have so far? Let's start with the HTML/CSS even, if you don't have any javascript written yet...
    Hi thanks for responding.

    https://shopplugin.net/ so essentially I would like to have:

    this:

  • #4
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by thegreatescape View Post
    Hi,

    I want to recreate the effect of the drop-down bar that appears at the top of your browser when prompted to download an updated version of flash. Its for a proprietory plugin, but can't seem to get anywhere with it... Anyone have any ideas?
    Here ya go....

    Code:
    /**
     * creates an info bar at the top of the browser
     **/
    function infoBar(text) {
        var b = document.body;
        var d = document.createElement('div');
        var p = viewPortInfo();
        d.style.width = String(p.width + 'px');
        d.style.height = '16px';
        d.style.color = '#000000';
        d.style.backgroundColor = '#ffffe1';
        d.style.border = '1px solid #666666';
        d.style.position = 'absolute';
        d.style.top = '0px';
        d.style.left = '0px';
        d.style.padding = '6px';
        d.innerHTML = text;
        b.appendChild(d);
    }
    
    /***
     * get client browser window size and position
     * returns a number (no 'px' suffix).
     **/
    function viewPortInfo () {
        if (document.documentElement) {
            return {
                height : Math.round(document.documentElement.clientHeight),
                width : Math.round(document.documentElement.clientWidth),
                top : Math.round(document.documentElement.scrollTop),
                left : Math.round(document.documentElement.scrollLeft)
            }
        } else {
            return false;
        }
    };
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • Users who have thanked Krupski for this post:

    thegreatescape (01-29-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Krupski View Post
    Here ya go....

    Code:
    /**
     * creates an info bar at the top of the browser
     **/
    function infoBar(text) {
        var b = document.body;
        var d = document.createElement('div');
        var p = viewPortInfo();
        d.style.width = String(p.width + 'px');
        d.style.height = '16px';
        d.style.color = '#000000';
        d.style.backgroundColor = '#ffffe1';
        d.style.border = '1px solid #666666';
        d.style.position = 'absolute';
        d.style.top = '0px';
        d.style.left = '0px';
        d.style.padding = '6px';
        d.innerHTML = text;
        b.appendChild(d);
    }
    
    /***
     * get client browser window size and position
     * returns a number (no 'px' suffix).
     **/
    function viewPortInfo () {
        if (document.documentElement) {
            return {
                height : Math.round(document.documentElement.clientHeight),
                width : Math.round(document.documentElement.clientWidth),
                top : Math.round(document.documentElement.scrollTop),
                left : Math.round(document.documentElement.scrollLeft)
            }
        } else {
            return false;
        }
    };
    Hi sorry about the delay in responding. I tried using this within script tags, but literraly nothing happens??

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,035
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    You need to call the script.

    Code:
    <body onload = "infoBar('Put your desired text here ')">
    Suggest replace
    d.style.width = String(p.width + 'px'); // returns 0
    with
    d.style.width = '200px'; // or however many pixels suit your message
    Last edited by Philip M; 01-30-2012 at 07:54 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    thegreatescape (01-30-2012)


  •  

    Posting Permissions

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