Friday, April 8, 2011

Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

I am trying to create a CSS layout where the page looks like it's in the middle of the forest. There is a left and right div with the background trees, some header divs that show the top of the page with various wildlife, and some footer divs that show the bottom with more wildlife that matches up with the left and right div background images, all of which is positioned using "position: fixed" in CSS.

Then there is content in the middle that is positioned normally and scrollable. That all works fine.

The problem I'm having is that the background forest layout is fixed at 1204x768 but of course some web browser windows may not be that large. Unfortunately while the content will scroll as intended, the fixed position elements will never be shown if they are outside the size of the browser window. Clearly not acceptable.

I've tried setting overflow: scroll and height: 768 on the .body and .html elements in the stylesheet but no luck.

Note that I am positioning everything with top: and left: values in the CSS. I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.

This may just not be possible in which case I'll have to rework the graphic design, but if it is possible I'd love to know how!

From stackoverflow
  • You could have two pictures: 1) a right that contains the right trees and the bottom footer image and 2) and left image with the left trees. Make the bottom footer much wider than it needs to be and the trees (left and right) much taller than they need to be.

    Then set the right picture to bottom: and right: and set the left picture to bottom: left:. This will force the pictures to always be on the outsides of the page, no matter the browser size. Then set the z-index of the right picture to be just behind the left picture. It will then always look like the page will be bordered. Or you can set a firm width and height on the parent container, and they will always be on the border of the container. You can also set a min-width and -height if you need to have a certain minimum sizes.

    As for things not being visible at a certain resolution, you're really not going to get around this. You could have two sets of pictures, one for normal resolutions, and one for smaller resolutions. Then you can get the width and height of the browser with $(window).height() and $(window).width() with jQuery, and load the appropriate pictures.

    EDIT: After looking at your site, i'm pretty sure the second part of that (setting a fixed width for a container, then putting a bottom right picture and bottom left picture) will work for what you want. That will force the page to be a certain width, and thus have the entire border visible.

  • of course some web browser windows may not be that large

    Or indeed that small! The likelihood of the browser window actually being exactly the right size to put your decorations on the edges is quite small; that's always the problem with fixed layout.

    I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.

    Yes, designing images that can alter their joins in response to page size changes is more work, but it's doable. You would have to export the ‘bird+foliage’ layer and the ‘squirrel+foliage’ layer as standalone transparent images, then lay them over the top of a longer side image.

    To make the object edges nice and smooth would require PNG's 8-bit transparency, which would necessitate a PNG-rendering hack for IE6. Not the end of the world though.

    Unfortunately while the content will scroll as intended, the fixed position elements will never be shown

    Is that a problem? They are only decorational in nature.

    I've tried setting overflow: scroll and height: 768 on the .body and .html elements

    For this approach you would need to set ‘overflow: auto; height: 768px;’ on a wrapper <div> which holds both your #sidebar-left and your #content.

How does one associate Google Analytics with a particular authenticated user?

What method would you use to associate tracking information in Google Analytics with a particular named user?

I want to be able to do custom reports, and ultimately drill down on usage by user.

EDIT
I was thinking that perhaps the EventTracking API would be able to help somehow.

Also, referring to this documentation.

From stackoverflow
  • Since Google Analytics isn't aware of users who are logged into your site you'd have to do that sort of tracking within your site's software itself. If there isn't some sort of plugin or extension out there already you'll probably have to write one yourself that keeps track of what your users do when their logged in.

  • You could add the user's username as a tracking/segmentation) variable...

    pageTracker._setVar(username);
    

    You can only use one _setVar per page, though...

    http://www.google.com/support/analytics/bin/answer.py?answer=57045

    http://groups.google.com/group/analytics-help-basics/browse_thread/thread/07e29dc610050971

    Jason : Yes, I found this too. Did you do this successfully?
    Stobor : No - I remembered seeing it when I was playing with getting GA set up for our environment, but we didn't end up wanting anything like that so I never got to try it. Seemed like it did what you wanted, though.
    ontangent : we found it more use for tracking logged in users vs not in general, they tend to use different parts of the site

flash AS3 how do I remove stage event listeners

hello,

I'm building an animation in flash and as3, I have a function in which I add a stage eventListener, stage.addEventListener(Event.ENTER_FRAME, setScrollPercent, false, 0, true);

Since this event is set inside a function of a function, "two functions deep," How can I reset all stage event listeners from outside of the functions without getting an error?

From stackoverflow
  • What errors are you seeing? The nesting level shouldn't have anything to do with it, since the listeners are just registered by the parameters, so as long you call remove with the same three key parameters you used for add, you should be fine.

    Is your real question how to get a reference to the listener object to the outside scope? If so, there are several possible solutions and the best way to do it depends on the structure of your code.

    -- MarkusQ

  • Best practices with AS eventlisteners are:

    • Make it weak (as you've done, the last parameter of addEventListener)
    • Set the event listener to null after handling (strictly speaking not required if you have set it to be weak)

    Flex does not give you destructors. It has its own Garbage Collector running behind the scenes managing memory. It cleans up a piece of memory once there are no references to it. Well, strong references. All objects by default have a strong reference. Event handlers, since they tend to be a performance bottleneck, have this special ability of declaring themselves weak -- a weak reference. This is of course possible only when you are attaching the event handlers using the addEventHandler() function. Weak references are not taken into account by the GC and hence, when all strong references are gone, they'll be automagically garbage collected, freeing you from the tension of having to do a =null manually. Which is what you'd otherwise do when you don't specify the parameter. By default, even handlers are created as strong references.

    However, marking them weak has a side-effect. They can vanish into thin air without you ever knowing about it. Eventually, you will know, but in terms of a nasty bug. Is that what's causing your problems? Maybe, may be not. You'll have to experiment. Also, it'll help if you can provide us with some more detail like the exact error code, some source.

    Hope this helps. Happy flexing :)

    Ole Media : can you add an example? I'm new to AS3 and I really don't know what does weak mean.
  • The answer to your question, and I realize you had a problem with scope, because I just answered a question you had on scope, is that you are working with stage. Consider the stage global as it is the canvas in which all of your display objects are drawn.

    The following will work anywhere!!!

    stage.addEventListener(Event.ENTER_FRAME, setScrollPercent, false, 0, true);
    

    Now, the error that your talking about, IM GUESSING, is that you merely set the above to removeEventListener when you were ready which will not work.

    The removeEventListener function DOES NOT accept five parameters like its sibling addEventListener, it only allows three ignoring priority and weak-reference, as the following shows.

    //The following removes YOUR stage Event.ENTER_FRAME listener from any scope.
    stage.removeEventListener(Event.ENTER_FRAME, setScrollPercent, false);
    

    hope this helps, remember that stage is the global root in a sense, and be careful of root, it actually works how it is supposed to now in the fact that calling root is now relative to the swf you call it from, not the stage, unless the stage is the root of the current scope.

    Brian Hodge
    hodgedev.com blog.hodgedev.com

Differences in the Mac system_profiler

I am using system_profiler to view the USB hardware details connected to a Mac, however there are some differences between running this on Mac OS X 10.4 and 10.5. For example, in 10.5 the keys for various attributes have an alphabet letter prefix. More importantly, I can't get the location_id attribute (in the SPUSBDataType dataType) in 10.4. Any ideas on why this difference exists and ways to work around it?

From stackoverflow
  • Have you tried using ioreg? I don't have access to 10.4 but since ioreg is lower level, it might be a better approach for what you're trying to achieve.

    ioreg -l -n IOSerialBSDClient
    

How do I scroll the text on my div with limited height?

Hi guys,

So I have blocks of paragraphs that doesnt fit on my page, my solution is to have a scrolling method so when the user hovers on the down arrow, it will scroll down the paragraph and reveal more text.

So I attached an image of my project, as you can see I have scroll down and scroll up buttons.

Here's the HTML file of my project:

<div id="content1" class="scrolling-content">
                <div>
                    <div id="story" style="overflow:hidden; width:40%;">
                        <h2 style="font-size:30px;">Quirino's Story</h2>
                            <p>Elpidio Quirino was a Filipino politician, and the sixth President    of the Philippines.</p>
                            <p>He was born in Vigan, Ilocos Sur to Mariano Quirino and Gregoria Rivera, Quirino spent his early years in Aringay, La Union. He received secondary education at Vigan High School, then went to Manila where he worked as junior computer in the Bureau of Lands and as property clerk in the Manila police department. He graduated from Manila High School in 1911 and also passed the civil service examination, first-grade.</p>

                            <p>Quirino attended the University of the Philippines. In 1915, he earned his law degree from the university's College of Law, and was admitted to the bar later that year. He was engaged in the private practice of law until he was elected as member of the Philippine House of Representatives from 1919 to 1925, then as Senator from 1925 to 1931. He then served as Secretary of Finance and Secretary of the Interior in the Commonwealth government.</p>

                            <p>In 1934, Quirino was a member of the Philippine Independence mission to Washington D.C., headed by Manuel L. Quezon that secured the passage in the United States Congress of the Tydings-McDuffie Act. This legislation set the date for Philippine independence by 1945. Official declaration came on July 4, 1946.</p>

                            <p>During the Battle of Manila in World War II, his wife, Alicia Syquia, and three of his five children were killed as they were fleeing their home.</p>

                            <p>After the war, Quirino continued public service, becoming president pro tempore of the Senate. In 1946, he was elected first vice president of the independent Republic of the Philippines, serving under Manuel Roxas. He also served as secretary of state.</p>

                            <span onmouseover = "start_scroll_up()"; onmouseout="stopscrolling";  id="up"><img src="images/arrow_up.png" /></span>
                    <span id="down" onmouseover="start_scroll_down()"; onmouseout="stopscrolling"; ><img src="images/arrow_down.png" /></span>
                    </div>
                </div>
            </div>

And here's the Javascript file:

var UpdateInterval = 20;
var PixelPerInterval = 2;
var scrollInterval;

function startScrollUp() {
    scrollInterval = setInterval(scrollUp, UpdateInterval);
}

function startScrollDown() {
    scrollInterval = setInterval(scrollDown, UpdateInterval);

function scrollDown() {
    document.getElementById('story').scrollHeight += PixelPerInterval;
}

function scrollUp() {
    document.getElementById('story').scrollHeight -= PixelPerInterval;
}

function stop_scrolling() {
    clearInterval(scrollInterval);
}

Thanks guys!!

From stackoverflow
  • I have amended your code and produced a working example. This is a complete html page.

    <html><head>
    <title></title>
    </head>
    <body>
    <div id="content1" class="scrolling-content" style="height:100px;overflow-y:auto;">
    
                            <h2 style="font-size:30px;">Quirino's Story</h2>
                                <p>Elpidio Quirino was a Filipino politician, and the sixth President                       of the Philippines.</p>
                                <p>He was born in Vigan, Ilocos Sur to Mariano Quirino and Gregoria Rivera, Quirino spent his early years in 
    
    Aringay, La Union. He received secondary education at Vigan High School, then went to Manila where he worked as junior computer in the Bureau 
    
    of Lands and as property clerk in the Manila police department. He graduated from Manila High School in 1911 and also passed the civil service 
    
    examination, first-grade.</p>
    
                                <p>Quirino attended the University of the Philippines. In 1915, he earned his law degree from the university's 
    
    College of Law, and was admitted to the bar later that year. He was engaged in the private practice of law until he was elected as member of 
    
    the Philippine House of Representatives from 1919 to 1925, then as Senator from 1925 to 1931. He then served as Secretary of Finance and 
    
    Secretary of the Interior in the Commonwealth government.</p>
    
                                <p>In 1934, Quirino was a member of the Philippine Independence mission to Washington D.C., headed by Manuel L. 
    
    Quezon that secured the passage in the United States Congress of the Tydings-McDuffie Act. This legislation set the date for Philippine 
    
    independence by 1945. Official declaration came on July 4, 1946.</p>
    
                                <p>During the Battle of Manila in World War II, his wife, Alicia Syquia, and three of his five children were killed 
    
    as they were fleeing their home.</p>
    
                                <p>After the war, Quirino continued public service, becoming president pro tempore of the Senate. In 1946, he was 
    
    elected first vice president of the independent Republic of the Philippines, serving under Manuel Roxas. He also served as secretary of 
    
    state.</p>
    
                </div>
                                <span onmouseover = "startScrollUp();" onmouseout="stop_scrolling();";  id="up"><img src="images/arrow_up.png" 
    
    /></span>
                        <span id="down" onmouseover="startScrollDown();" onmouseout="stop_scrolling();" ><img src="images/arrow_down.png" /></span>
    
    <script type="text/javascript">
    var UpdateInterval = 20;
    var PixelPerInterval = 2;
    var scrollInterval;
    
    function startScrollUp() {
        scrollInterval = setInterval(function(){scrollUp()}, UpdateInterval);
    }
    
    function startScrollDown() {
        scrollInterval = setInterval(function(){scrollDown()}, UpdateInterval);
    }
    function scrollDown() {
        document.getElementById('content1').scrollTop += PixelPerInterval;
    }
    
    function scrollUp() {
        document.getElementById('content1').scrollTop -= PixelPerInterval;
    }
    
    function stop_scrolling() {
        clearInterval(scrollInterval);
    }
    </script>
    </body>
    

    You were close though.

    Cheers,

    Andrew :-)

    REA_ANDREW : Glad I could be of some help. :-)

How to programatically pass arguments to OnStart method of a windows service ?

Hi All, How do i programatically pass in arguments to OnStart method of a Service, which I further need to propagate to the Elapsed event of the Timer inside the service.

  • Amit
From stackoverflow
  • You could consider having the OnStart method read the arguments from a configuration file and programatically update that, using either a separate application.

  • At the simplest level: when you call ServiceBase.Run, you get to give it the service instances to execute. Simply declare this as a public property on your service, and assign prior to calling Run:

            Service1 myService = new Service1();
            myService.SomeProp = 1;
            ServiceBase.Run(myService);
    

    Then read SomeProp in your service:

        public int SomeProp { get; set;}
        protected override void OnStart(string[] args)
        {
            int prop = SomeProp;
        }
    

    You can also use the service args, but that is from the external caller (service registration) - not programatically (per the question).

Rounding to nearest 100

First number needs to be rounded to nearest second number. There are many ways of doing this, but whats the best and shortest algorithm? Anyone up for a challenge :-)

1244->1200
1254->1300
123->100
178->200
1576->1600
1449->1400
123456->123500
654321->654300
23->00
83->100

From stackoverflow
  • Is this homework?

    Generally, mod 100, then if >50 add else subtract.

    Senthoor : No its not home work :-)
    John Leidegren : What the hell Brian! mod and if-then-else that's gonna be really slow. If you're using integers check David's answer. It's a branch-less common way to solve this problem. It works with floating-point numbers as well.
    Senthoor : I myself came up with this answer in Ruby. numbers.each {|number| puts number + '->' + number.gsub(/\d\d\d$/,(number[number.size-3,1].to_i + number[number.size-2,1].to_i / 5).to_s+'00')}
  • For input n:

    (n + 50) / 100 * 100
    

    using integer division.

    Note that many languages/libraries already have functions to do this.

  • This will do it, given you're using integer math:

    n = (n + 50) / 100 * 100
    

    Of course, you didn't specify the behavior of e.g., 1350 and 1450, so I've elected to round up. If you need round-to-even, that'll not work.

  • 100 * round(n/100.0)