I am currently trying to get rounded corners on an Electron application I'm making. I have tried nearly every solution available on-line at the moment, but none of them make any difference.
How can I round the corners of my Electron app?
Make a frameless transparent window
const myWindow = new BrowserWindow({
transparent: true,
frame: false
})
And have something like this in the renderer, or apply the style directly to the body tag
<div style="width: 500px; height: 500px; border-radius: 5px">My window content</div>
Just make sure to also add a custom window titlebar that has -webkit-app-region: dragin order to make the window dragable from this element.
Check out the Electron Docs for further informations ;)
https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#transparent-window
Related
I have many icons svg, I could use them as fonts if that is helpful and I would like to use ng-click(basically any kinda of click you know) the way that when i click on svg1 and svg2 wont be clicked. Till now i have tried allot of icons and many ways of doing it without success. I have upload to codepen small example, each region of that country have it's own svg which cover other svg's and make click on them impossible. Basic use of svg is below:
<svg>
<use xlink:href="#icon-region"></use>
</svg>
Since all <svg> elements in your page are absolute positioned and have both width and height of 100%, it's possible to only catch elements from the last element. That behavior comes from the way elements are rendered, within layers, like the example bellow:
+-<svg>--+
|+-<svg>--+
||+-<svg>--+
||| |
+|| |
+| |
+--------+
If all those elements have the same width, height and position you can only catch events from the last one, on the top of all.
To avoid this behavior you can do the following, with CSS:
.regionPosition {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
}
.regionPosition > * {
pointer-events: all;
}
This way you disable the event listening from <svg> elements – with regionPosition class – and catch only the events from their immediate children.
Since you're using <use> inside your SVG to get the actually graphics, you can't rely only on Angular to bind the event, because the elements are not yet there when you load the script. You'll need to attach the event listener to the document and then check the target before call the function you want. This can be easily done with jQuery, as follows:
jQuery(document).on('click', '.regionPosition > *', function () {
// Call your function.
});
I changed your code a bit to show how to do it, here: http://codepen.io/anon/pen/waLwrm. I'm using a simple window.console.log() call to just log the clicked element. You can change it to another logic in your final code.
Reference:
jQuery hover problem due to z-index
I would like to be able to add picture that always shows at the top part of the screen. I want a bar that stays at the top of it all the time. I do not know how to do it but I believe YouTube has something like it. Except I want it without the content on the side because that is a little annoying.
In order to do this, you have to use absolute positioning. This requires you to use CSS with your HTML (if you are talking about web design).
Here is the CSS
img {
position: fixed;
left: 0px;
top: 0px;
}
Here is the HTML:
<img src="YOURIMAGE.jpg" height="100" width="100">
Not to be disrespectful, but it seems as though you are not familiar with web design. I would recommend looking at W3 schools and try to grasp some of the concepts there before you continue.
I am just starting with AngularJS, which I know is meant to be an SPA. For the app we are building, all of the pages--except the index page--will have a two-column layout. We'd like the index page, however, to be a one-column, fullwidth page. Is this functionality possible with AngularJS?
I'd suggest posting a plunkr or jsfiddle, since I'm not sure I'm actually answering your question, or if there's more to your question I'm missing.
If you're doing all the pages via routing (ng-view), then just apply classes to differentiate the style for that one-column version. Something like:
.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }
and then in the html (on that firstpage only), wrap everything in div id="firstpage". Don't include that div in the routed pages, and the style will only apply for the first page. Or if you have some other set up, you can always use styles around the ng-view, too:
<div class="classname">
<div ng-view></div>
</div>
If you've got a side-column that's sitting outside your ng-view and that's what you want to turn off/on, then I'd suggest including the class on the first page (to make it go full-width), and at the same time use some kind of logic with ng-hide/ng-show on that first column.
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
I'm new to fluid grids, btw i'v started learning about diferent types and now trying to build page in cs6 (maybe not the right choice). I have a problem which I didn't have when building pages that are not fluid. I need to create different background images for header and footer that are 100% width and as wide as the screen, not just as wide as media-query, and also to setup the page to be 960 centered.
Are you trying to make the header wider than the rest of the page?
To do so, create different div's in the document. For example, I normally work all of my divs inside a master div, so that my entire page is affected. For example, a page with a main div, header, body, and footer:
#main #header #body #footer. The header, body, and footer are all create inside of the main div. To make everything float in the center of the page at a width of 960px, then you'd simply apply the attribute to the #main div like so:
#main {
width: 960px;
margin: 0;
}
The margin will cause the div to float in the center. It does not have to be any specific value, but you do need a margin to the left and right of the page.
To only float the remainder of the page, create everything else inside of the main div but the header and footer, and set the width of the header to 100%. So you would have the following overall snippet:
#header, #footer{
width: 100%;
margin: 0;
}
#main {
width: 960px;
margin: 0;
}
If you don't already do so, it'd be wise to add some padding on either side so that the images and text don't appear to run into the side of the page (which makes it difficult to read or view). 5px is usually all I add.