My OSX-style RandomQuotomator machine

One of the users here on fCC posted his random quote generator as a Windows MS-DOS console screen. I thought that was pretty neat.

They say imitation is the sincerest form of flattery, and since I haven’t made my random quote generator project yet, so here’s my OSX desktop version… with quotes by Steve Jobs, of course. :slight_smile:

http://randomquote-owel.surge.sh

You can drag the window, and it will also snap on the top menu bar, or the bottom dock. It can also go behind it. I don’t have the Twitter functionality implemented yet…

// yup, that’s my actual desktop. Don’t judge me with all the icons I frequently use docked on the toolbar, hahaha.

1 Like

I played with it for a while and it’s super neat! Particularly the snapping! :slight_smile: Thank you very much for sharing!

1 Like

Thanks for checking it out!

awesome! the os window is a perfect match and nice to add a theme to the project.

also wish system windows were slightly transparent as in your design

1 Like

You are welcome! :slight_smile: I was a bit too excited about the snapping and forgot to mention that you may want to have a quick look at it with different screen sizes—the menu bar and the dock are not centered on both my smaller screen and larger screen.

background-position: center; seems to do the trick for the menu bar. The dock is absolutely positioned though! :slight_smile:

1 Like

Hi, @owel.

Looks great! But now, your page isn’t fully responsive. Wish you fix this)

Good luck!

1 Like

Thanks all @honmanyau, @anon28782659, for the feedback… fully noted!

Now, it’s kinda responsive… the dock will always appear at the bottom of your browser screen, no matter what size your browser is. Also, as you resize your browser, the dock will re-position itself again.

http://randomquote-owel.surge.sh/

Much better now, thanks to y’all suggestions.

For the curious, here’s the code to automatically move the dock to be always at bottom of screen.

    // position dock at bottom of browser screen, depending on user's browser height
    $(window).resize(function() {
      var y = $(window).height() - 409;
      // alert(y);
        $('#dock').css('top', y); // position dock at bottom of browser window 
        $('#screen').css('height', $(window).height() );  // change height of 'screen' to be equal to browser window height, then hide the overflow
        $('#main').css('top', ($(window).height() - 354 - 35 )/2);  // position quote window on center of screen. 
    });

    $(window).trigger('resize');