I am building an extension which give user notifications using the createHTMLNotification call, but I am having some trouble figuring out the relevant size restrictions to avoid getting ugly black horizontal and vertical scrollbars (On Ubuntu 12.04 Linux at least).
Does anybody have any pointers to documentation giving some hints about what maximum sizes I should be aiming for, hopefully cross-platform?
maximum size on Windows Version 20.0.1132.47 (stable 144678) is 300 by 160 pixels.
Experiments on my own laptop running Chrome on Linux Version 21.0.1145.0 dev give me a maximum size of 284 by 144 pixels before scrollbars appear. I have no idea whether this is system specific or not, but assuming Chrome supports native notifications for at least some platforms that have them, I guess putting too much effort into pixel perfect notifications may not guarantee nice results.
As for making sure the scrollbars do not appear inside the notification, there is another small challenge as well (which maybe is not be related to the notification API at all); setting the height and max-height (and similarily for the width) does not cut it on it's own.
In my case I needed to style a list of items in a notification, and what I ended up doing was using the following html code:
<html>
<head>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .73em;
}
div#note {
overflow: hidden;
height: 144px;
max-height: 144px;
width: 284px;
}
div.noteline {
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2em;
}
</style>
</head>
<body>
<div id=\"note\">#{params.html}</div>
</body>
</html>
My template references (#{params.html}) is basically populated with rows containing :
<div class="noteline">Some possibly large line that would overflow item 123</div>
Related
Some data processing takes a few seconds once the server has received the client's request...
How can we display an advertisement while the client waits for the payload ?
Same question with and without AJAX
We may not use a library or framework on top of Sails, unless necessary
You can do a simple loading graphic, and just replace it with whatever image you want:
HTML
<div class="loader"></div>
CSS
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
A simple jQuery function:
$(window).load(function() {
$(".loader").fadeOut("slow");
})
Demo
Source: Display Loading Image While Page Loads
If you need to do it without jQuery, it is slightly more involved, but you can get more information in this thread:
$(document).ready equivalent without jQuery
I'am actually working on a responsive design and i'm quite stuck:
I need to set image-type children position to absolute in their div parent, and keep the lower section under this parent. But actually, the only solution i have is to set a fixed height for this parent (in that case, a relative margin for the lower section wouldn't work in a dynamic structure). The problem is that the images, set to max-width: 100%; to keep their dimensions flexible, expand with the page, and the lower section is no more well positioned on resize:
<div id='page'>
<div id='b0'><img /><img /></div>
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section>
</div>
And the CSS:
#page{max-width:1024px; margin: 0 auto;}
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */
#b0 img{position: absolute;}
Does anyone have a solution for that ?
Thank's in advance
Simplier solution :
Consists in setting each image to position: absolute; except the last one :
#b0 img:last-child{position: relative;
keeping an element in the "flood" provides its parent the needed height value.
Ok, I now have a very simple mixed solution using Both CSS and Javascript:
As the primary need is "mobile first" design, i've introduced un min-height for the images container in a smartphoine targeted media query css file:
In the head tag:
<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' />
Then the CSS:
#b0{position: relative; min-height:82px;}
And a little bit of Javascript:
$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :( this.innerWidth * .25)+'px'})}});
So this mixed solution needs Javascript activated, a min-height to be set up for each media query step, and a percentage for the container height calculated with global and maximum page dimensions: in my case:
#page{max-width: 1024px;}
and a container height at about 280px;
Hope this can help someone someday ;-)
I'm using PrimaFaces with Mojarra implementation for my JSF applications. When I put together the application I use company/app logos and the primefaces widgets (the widgets themselves look great!) which have the jQuery look and feel. The issue is that the applications end up looking very similar with a somewhat box type appearance - text boxes, datatables etc., The look and feel is nowhere compared to a handcoded by a html/css designer/developer.
When you develop enterprise JSF applications what are some of the best practices you use to ensure a user-friendly good looking ui?
I'm not exactly sure what you are looking for but there is a tradeoff between speed of development and appearance. That said, in our shop we use PrimeFaces and have developers who make the page "work". They are then followed on by xhtml/css designers who clean up the appearance of the page and controls. If you haven't already, check out the styling section. There is quite a bit of flexibility in changing the appearance of controls. Of course they are still layered, pre-defined controls.
Edit: You can style individual parts of your controls using css. So for example here we change the appearance of the title bar:
.bottomViewItem .ui-panel-titlebar{
background: none;
border: none;
box-shadow: none;
padding: 5px;
margin: 0.1em 16px 0.2em 0;
}
And here we change the title appearance:
.bottomViewItem .ui-panel-titlebar span.ui-panel-title{
color: #E27C4C !important;
font-family: Rockwell, Georgia, Arial !important;
font-size: 18px !important;
margin: 0.1em 16px 0.2em 0;
text-shadow: none;
}
I have a page in DW that has a black background. In Design View of the page the page shows as white instead of black. I am not sure why this is. I can add inline styles to the entire page as follows to get the page black:
<body>
<div style="background-color:#000" class="wrap_fullwidth">
<div style="background-color:#000" class="center">
<div style="background-color:#000" class="img-center">
<img src="image.jpg" alt="Image" />
</div>
<p style="background-color:#000"> </p>
</div>
</div>
</div>
</body>
Here is the CSS for the page and the way it normally is:
html, body{
font-size:16px;
font-family:"Lucida Grande", Helvetica, Arial, sans-serif;
line-height:23px;
color:#f3f3f3;
background:#000;
}
.wrap_fullwidth {width:100%; position:relative; float:left;
clear:both; padding-top:20px; }
.center{width:940px; position:relative; margin:0 auto;
clear:both; padding:0px 10px; display:block;}
p{ margin-bottom:20px; text-align:justify;}
.img-center{ text-align: center; }
The design view should show the page as it appears with css etc. I do not understand why the white is showing when the css clearly shows black as a background. The good thing is the page in the browser shows correctly but this makes things a pain if I work in Design View. (Which I do use)
Ideas or thoughts as to how to fix this?
Note: CS5 and CS5.5 did not have this behavior. Only CS6.
It turned out that my Reset for the CSS was causing DW to show a transparent background (thus white) instead of black.
The reset contained this property: background:transparent;
Once I removed that from the reset all worked fine.
Update: I had wondered if the way DW CS6 was reading the CSS if there was a bug or not, after filing a bug report I received this reply:
I was able to reproduce as per your steps and have logged a backlog item for the same. It will be fixed in future release.
Im having issues with a drop down menu system in IE7 and 8.
It works flawlessly in Chrome and FF, however in IE7 and 8 for some reason it doesn't apply some of the styling and ends up being misplaced in the browser.
You can view it here:
http://www.gardensandhomesdirect.co.uk/menutest
As said, it works fine in Chrome, however I am struggling to get it to work properly, or even just BETTER in IE7.
Any help is appreciated!!
You need to set an explicit width on .side_nav ul li:
.side_nav ul li {
float: left;
position: relative;
width: 173px;
display: block;
text-align: left;
clear: both;
}
For extra protection, you might want to add a clear: both and a text-align: left property (shown in the above example).
Try adding
display: block;
to your
.side_nav ul li