Embedding a side bar in explorer - embed

How do I embed a side bar in explorer like the bar on the right? It's a dropbox-clone in Chinese
After fiddling with SP++, I'm guessing it is finding the HWND, resizing the SHELLDLL_DefView and adding a window to CabinetWClass. Or is there a shell extension that does this? The right window can change depending on the context (which file is selected on the left).

This is Explorer Bar
http://msdn.microsoft.com/en-us/library/windows/desktop/cc144099%28v=vs.85%29.aspx.

Related

How do I prevent Google Chrome Developer Tools from resizing the browser viewport?

Basically, I want Chrome Webtools to overlap my browser viewport instead of resizing it.
I tried undocking the tools window, however this splits it into another window which is undesirable. I want both the console and the viewport in the same window, just overlapping.
Current behavior:
Desired behavior:
Thanks!
You can click here and select Undock to seperate windows.
I think you have to Dock Side from the three Dots at the side of console and ... have to manually frame it to the location you want

How do you write media queries for a larger screen than you own?

If I am limited to say a 1920 x 1080 screen, how do I create media queries for a larger screen size without being able to test it?
You can set any resolution in Chrome. Just click "Toggle device mode" in Inspector and set any resolution.
In Chrome Developer Tools, you can use Device Mode to emulate any resolution, not just mobile breakpoints.
If you are using Google Chrome, you can open the web inspector Ctrl-Shift-I, then toggle Device Mode using Ctrl-Shift-M. It's mainly used for smaller devices, but you should be able to select 'Responsive' in the menu that comes up at the top of the screen, and enter any resolution you wish, along with a zoom level so that you can view it on your screen, albeit scaled.
If you are using Safari, you can do this relatively easily.
If you aren't using Safari, you probably should get it, at least for website testing. As you can see on step 6, Safari has LOTS of VERY helpful dev tools (i.e. disable JS, disable CSS, etc.).
Here is some instructions with pictures!
Go to the Safari menu (in upper left hand corner).
On that menu click Preferences, this should open up a pop-up box.
On the pop-up box, click the Advanced tab.
At the very bottom of that tab you should see a checkbox that says Show Develop menu in menu bar, check that box.
Now load your website in Safari.
When your website has loaded (for this example I'm using SO), click on the Develop dropdown menu.
Click Enter Responsive Design Mode, and that will now show your website in a window smaller than your browser window.
In that window, click on the window looking thing on the far left.
There are little gray bars on all sides of that smaller window, if you drag these you can make the size whatever you want.
As a side note, when you drag the gray bars (as shown in step 9), you should see the width and height resolution (pixels) change (see screenshot below), this is VERY helpful (and I use it all the time), as it will tell you the exact resolution (pixels) when your website breaks. P.S. you can go to ANY screen resolution - big and small - that you want to with this tool, which is really cool! (I've done 2500 x 1500, 100 x 100, etc.)
Hope this helps you!

Content of iframe (ionic app) doesn't scroll on Internet Explorer using touch

I'm working on a couple of ionic apps that are communicating with each other. In order to demo them I run them side by side on a webpage embedded in iframes.
When displaying that webpage in Chrome it works just fine. However when showing it in IE on a touchscreen I can't scroll vertically inside those iframes. I debugged it a little bit and it seems that touch events that have vertical movements just don't get passed into the ionic app, whereas horizontal swipes and taps get passed down just fine. It seems like the vertical scrolling of the entire webpage absorbs those events without passing them down.
Has anyone encountered an issue like this before and can tell me if there is a way to fix this?
Thanks #Captn_Hammer for pointing me in the right direction. The fix is similar on IE. All I had to do was add this to the body of the webpage:
style="-ms-touch-action: none;"

How to set browser window size larger than the screen resolution in Windows XP?

I would like to set browser size (mainly width) larger than the screen resolution in Windows XP. It looks like there is no easy way of dragging the browser window and resizing it. It resizes to maximum width and height of the actual screen, but no larger.
I need to check and test some webpages on large screens, but I have only a small notebook of my own. Is there a way how to accomplish a larger browser window? Preferrably in Chrome, but any browser in Windows will do.
This problem can be solved in two ways: -
1. Universal browser solution
Create a dummy html page
Add an iframe to its body with the width and height attributes set to the desired dimension
Set the iframe's src attribute to the page you want to test
2. Individual browser's developer tools
Chrome
Open the developer tools using Ctrl + Shift + i
Click the second button top left that looks like a mobile phone
Drag the width to the desired width and refresh the page (F5)
Internet Explorer
Press F12
Go to the emulation tab
Change the resolution dropdown to the desired resolution
Reduce the height of the developer tools bar until the horizontal scrollbars appear
Firefox
Open the developer tools using Ctrl + Shift + i
Press the third icon in the icons on the top right of the developer tools called "Responsive Design Mode"
Choose the resolution in the top left dropdown selector on the top left of the webpage viewport.
I am testing another resolution by zoom out - every browser supports ctrl + and ctrl -
This is possible. First 'restore' (i.e. unmaximize) the window. Then you can simply adjust the width and height of the browser by using the edges of that particular window as you like.
This applies to any browser and application windows including google-chrome.
It seems like this doesn't work for every user. There's a tool called uuspy to do this as suggested in here. I haven't try on how to do this. But, since the ui of uuspy looks not that user-friendly here's quick tip.
Open uuspy.
There, in the main window, you'll see a search box. Type the first few letters of the current 'title' of the browser there (like 'test - Google Search'), and then click refresh.
It'll show a list of windows and child-windows of processes containing the searched partial title in the title-bar.
Click on the relevant one (the root/parent is the one most likely.) Then, click GetInfo.
There's two text panes there. On the left pane, there's WS_THICKFRAME. unselect it and then click setStyle.
That will freeze the resizing. I think you'll have to read the original SO answer to know exactly what needs to be done.
simple! "restore" the window to any size, drag the window so that bottom/left corner is off-screen, then resize using top and right sides to make the window ever bigger. if you need it even bigger, just drag the window again so that bottom/left corner is even further off screen.
I managed to resize the Chrome window using ScreenSpace from dandeware.com (no affiliation). There's a free lite version as well as a paid version.
After you install Screenspace, select the Chrome window and press Ctrl-Alt-R. The software then shows a virtual window and lets you resize the Chrome window in any direction beyond the virtual window. Click on the green checkmark and the Chrome window will have the same size on your physical screen.
You can change zoom of the browser or do something like this:
var desiredWidth = 1368;
document.querySelector('html').style.width = desiredWidth+'px';
In Firefox Responsive Design Mode
Menu -> Developer -> Responsive Design Mode (Ctrl-Shift-M)
gives you a drop-down to select the window size.
copy of answer to https://superuser.com/questions/1263519/how-to-create-a-1280x800-screenshot-of-a-chrome-browser-viewport/1263523
Here's another solution.
Under Linux you can freely resize the windows without any hindrance. It also has Mozilla Firefox and Google Chrome, and are almost equal in functionality to the Windows versions more or less. So, my suggestion is try this with a Linux flavor such as Ubuntu or Linux Mint. May be you can try this via the LiveCD as well. That way, you don't have to worry about installing a new OS! I can help with that if you need.
And, I found this handy bookmarklet that resizes the browser to standard screen sizes such as 800x600 etc.
if you have a dual moniter setup and set the resolution higher on one, then you can drag the size of the window on the smaller screen to the size of the larger so it will get bigger than the smaller screen -this is haw i do it with windows 7

Google Chrome Web Inspector taking up the full screen

I'm not sure how I did it, but when I right click on the page and choose Inspect Element in Google Chrome, it's taking up the entire page. I think it's supposed to be a split screen like Firebug.
Q: How do I split the Web Inspector page?
You need to click on the icon "Dock to main window" on the right top corner.
Can you drag the window down to resize, split it into its own window, or maybe it already is in its oown window? There is an option to dock it in the page.
This is really annoying. The bar which allows you to minimize or maximize or window-ize is not there at all. This is the only program that has ever done this to me on mac.