In Objective-C
with Mac OSX
Cocoa
, is there any way to make a DIV
on a WebView
slightly translucent so that the desktop applications behind the window bleed through slightly, but only on that DIV
and not the rest of the WebView
?
Or perhaps I can make the whole WebView translucent, but turn it off for all DIV
s except one DIV
?
I have a WebView
loading a web page. In the web page, I have a sidebar on the left, and then an IFRAME
on the right. I click items on the sidebar and they change the IFRAME
pages on the right. It's this sidebar that I want to make slightly translucent.
In my AppDelegate.m
, I have this so far, and my HTML
and BODY
tags are set to background:none
, and my sidebar is set to background:rgba(0,0,0,0.5)
, but all I end up seeing is a grey sidebar background. It's like the webview itself wants to ensure that it's background is set to a color other than clear.
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
// note that _window and _wv are outlet properties to my window and webview widgets
[_window setBackgroundColor:[NSColor clearColor]];
[_window setOpaque:NO];
[_wv.layer setBackgroundColor:[NSColor clearColor].CGColor];
[_wv.layer setOpaque:NO];
}
Yes, just set the drawsBackground
property of your WebView
instance to NO
, then make sure to fill the parts of the page you want opaque using CSS.
Related Step by step Tutorial with examples:
http://stylekit.org/blog/2016/01/23/Chromeless-window/
Setting up translucency:
- Set the styleMask of your NSWindow subclass to
NSFullSizeContentViewWindowMask
(so that the translucency will also be visible in the titlebar area, leave this out and the titlebar area will be blank)
- Set the
self.titlebarAppearsTransparent = true
(hides the titlebar default graphics)
- Add the code bellow to your NSWindow subclass: (you should now have a translucent window)
.
let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 0, 0))//<---the width and height is set to 0, as this doesn't matter.
visualEffectView.material = NSVisualEffectMaterial.AppearanceBased//Dark,MediumLight,PopOver,UltraDark,AppearanceBased,Titlebar,Menu
visualEffectView.blendingMode = NSVisualEffectBlendingMode.BehindWindow//I think if you set this to WithinWindow you get the effect safari has in its TitleBar. It should have an Opaque background behind it or else it will not work well
visualEffectView.state = NSVisualEffectState.Active//FollowsWindowActiveState,Inactive
self.contentView = visualEffectView/*you can also add the visualEffectView to the contentview, just add some width and height to the visualEffectView, you also need to flip the view if you like to work from TopLeft, do this through subclassing*/