So I set a background img with background-size: cover. Works so far.
But when I add a blur it will lose it's hard egde obviously. How could I remove the blurred edge? Maybe the background has to be scaled up and then cut off with some overflow:hidden?
I would have used a wrapping div with overflow:hidden around an img, but then I can't use background-size:cover, right?
This is how it looks: http://jsfiddle.net/RyQRY/
And this is how it should look: http://cl.ly/image/0B2f191p2m0i
HTML
<div id="background"></div>
CSS
#background {
position: absolute;
z-index: -999;
top: 0px;
height: 546px;
width: 100%;
background-image: url(../img/background.jpg);
background-size: cover;
-webkit-filter: blur(50px);
}
Second link is dead, so I don't know how it should be.
However you can hide blured edges:
position: absolute;
top: -25px;
bottom: -25px;
left: -25px;
right: -25px;
But you can NOT use overflow:hidden after that, because it will crop bluring-area.
And you find yourself in the same place where you were ))
Use :after.
It is not very beautyfull solution, but...
You can look here:
http://jsfiddle.net/RyQRY/10/
May be it will be usefull for you...
Related
look i'm using the gallery function on iframes to show PDF files, but my problem here is the area to tap prev/next is big, how i can modify this space to make it thinner.
I'm using a touch screen and i need modify this area.
well i find it looking in css files,
int the file /fancybox/source/jquery.fancybox.css i find this block:
fancybox-nav {
position: absolute;
top: 0;
width: 5%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
and modify width property reducing the %
First of all I have to say:
what a phantastic piece of software!
Well designed, implemented and documented, and many, many cool features.
Tanks a lot for giving that away as Open Source!
Now I have made a slider implementation for the "Gambio GX"-shopsystem (a very advanced osCommerce fork.)
You can see it here in action: http://marmorkamin-shop.de/Test/
I have used all image transformations (377) and caption animations (438) available, both are randomly selected for each slide...
(Resulting in 163,618(!) different ways to change slides....)
The slider is dynamically generated with PHP, based on slide-information in the shops database....
As inline-styles are very inflexible in such an environment, I have moved the styling to a stylesheet.
It already works like a charm, almost....
Two problems I am encountering:
The caption area is sometimes clipped
(see 1st caption in this picture: screenshot)
Only bullets 1, 2 and 3 in the bullet navigator are active, the others do not respond.
Any idea what could be the reason for this??
Thx again for this great software!
Edit:
The caption area is sometimes clipped (see 1st caption in this
picture: screenshot)
Found a quick and dirty solution for this meanwhile:
Assign a clip: auto !important; CSS direktice for the caption elements...
But I am sure there must be a better solution :-)
Re: caption clipped
Please always specify width and height for caption.
You can specify width and height in css file,
.slide_caption_1 {
left: 100px; top: 200px; width: 110px; height: 29px;
}
.slide_caption_2 {
left: 150px; top: 250px; width: 110px; height: 29px;
}
.slide_caption_3 {
left: 200px; top: 300px; width: 110px; height: 29px;
}
And you can specify inline style as well,
<div class="jssor_slide_caption slide_caption_1" data-u="caption" t="*" style="width: 110px; height: 30px;"></div>
Re: bullet problem
Style for 'mousedown' of bullet navigator not specified.
Given class of navigator item prototype is 'jssor_navigator_entry', the class name for 'active' state is 'jssor_navigator_entryav', the class name for 'mousedown' state is 'jssor_navigator_entrydn'
So, please add following css code in slideshow.css file.
.jssor_navigator_entrydn {
padding: 5px 0px 0px; border: currentColor; border-image: none; width: 27px; height: 24px; text-align: center; color: white !important; font-weight: bold !important; text-decoration: none; margin-right: 0px; float: left; display: block; position: relative !important; z-index: 9; cursor: pointer; background-color: rgb(50, 22, 1);
}
Here is an example to define bullet navigator in a simple way,
<script>
var jssor_options={
...
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
...
$SpacingX: 5, //[Optional] Horizontal space between each item in pixel, default value is 0
...
}
...
};
<script>
<!-- Bullet Navigator Begin -->
<style>
.the_navigator{
position: absolute;
bottom: 0px;
}
.the_navigator_item, .the_navigator_itemdn, .the_navigator_itemav {
position: absolute;
width: 27px;
height: 24px;
line-height: 24px;
color: #fff;
font-weight: bold;
background-color: #321601;
text-align: center;
cursor: pointer;
}
.the_navigator_item:hover, .the_navigator_itemav {
background-color: #d1013f;
}
</style>
<!-- bullet navigator container -->
<div class="the_navigator" data-u="navigator">
<!-- bullet navigator item prototype -->
<div class="the_navigator_item" data-u="prototype"><numbertemplate></numbertemplate></div>
</div>
<!-- Bullet Navigator End -->
I have worked and searched on finding a solution to this iPhone issue for almost a week. I need some help please. I have never done any programming for a smart phone. This is a first. This web page works great on all browsers but not on smart phones. Can you give me some advice on how to fix it or convert it?
I want to update this page so that it works on the iPhone\androdes devices. http://www.westernagencyinc.com/contact_us.html. I have a test page setup http://www.westernagencyinc.com/test.html to work on it and not effect the real page.
The way the "Contact Us" page\map works is it has an map in its top and another html file called location_info.html embeded in an IFRAME below it. The location_info.html file is a list of location with each having a unique anchor name for a city\pin on the map.
The map has pins on each city that are clickable areas with its target being the IFrame and the code look like this:
You can see that When you press on a button/pin on the map a variable anchor is set for that pin (city name) which matches one of the anchors in the location_info.html and that is sent to the IFrame html file so it will move\scroll to the correct location.
The IFRAME that holds the location currently has no scroll bars on it.
<area shape="rect" coords="145,-6,200,48" href="locations_infotest.html#kenmare" alt="Kenmare" target="location_content">
<div id="apDiv10" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;" >
<iframe scrolling="no" name="location_content" src="locations_infotest.html" width="625" height="190"></iframe>
</dov>
#apDiv8
{
position: absolute;
left: 30px;
top: 255px;
width: 627px;
height: 18px;
z-index: 8;
text-align: left;
}
#apDiv9
{
position: absolute;
left: 30px;
top: 20px;
width: 625px;
height: 409px;
z-index: 9;
text-align: left;
}
#apDiv10
{
position: absolute;
left: 30px;
top: 448px;
width: 625px;
height: 190px;
z-index: 10;
text-align: left;
}
This one is messing with my head. The following HTML/CSS looks fine on every browser, expect when I read it on an iPhone. The text in the a tag(SITE DESIGN SOME COMPANY) is noticeably smaller by about 25%. I have gone up through the DOM and made sure no other styles are computing on my desktop.
<footer>
COPYRIGHT 2012 / <a href="http://somesite.com">
SITE DESIGN SOME COMPANY</a> / ALL RIGHTS RESERVED
</footer>
footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 75%;
}
I've experienced this, too. iPhone renders % font sizes differently than other browsers. Especially if nested inside multiple elements with multiple % changes (if your <footer> for example is inside another element with another 75% font size declaration).
If you change 75% to 0.75em (or use something other than a percentage), you should be back in business.
footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 0.75em; /* or 10pt, or... */
}
On the GWT developer site there is an example showing a panel that is in the middle of a page. Is this possible to have a fixed with panel in the middle of a page using the GWT layoutpanels?
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels
There's a good old CSS trick for centering fixed-size, absolute boxes, using automatic CSS layouting (no JavaScript required):
First center the top left corner of the box by using top: 50%; left: 50%;
Of course, the box will be too far to the bottom/right now.
Then subtract half of the box's height/width by using margins. (It's fixed-size, so you can calculate "half of the height/width" with pen and paper :-)
Example:
<!doctype html>
<html>
<head>
<style type="text/css">
.box {
position: absolute;
background-color: red;
height: 300px; width: 400px; /* Using "px" here, but you */
/* can also use "em" etc. */
top: 50%; left: 50%;
margin-top: -150px; margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Apply this style to your LayoutPanel - I don't have a full code example for that, but I think it should be possible.
You can achieve the effect with simple css. For example:
<html><head>
<style>
.outer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: blue;
}
.inner {
position: absolute;
top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>
Once the basic effect is created in plain CSS using absolutely-positioned objects, you can recreate it with the LayoutPanels, since they're essentially a CSS constraint system.
I don't think you can make a fixed-width layer center itself automatically in a LayoutPanel. However, you can insert the layer into the DOM to get its size, and then calculate the proper offsets yourself. You can see how Google does this (not in a LayoutPanel) in the code for DialogBox.center();