I need to make a background animation for a Phonegap project. How can I make this happen? I do have some beginner Kineticjs skills but I just cannot figure it out.
Thanks.
#canvas {
width:100%;
height:100%;
z-index:-1;
position:fixed;
top:0;
left:0;
}
.content {
z-index:1;
overflow:scroll;
height:100%;
}
With two css I able to do that. Thanks :D
Related
I am using mPDF(v7.0) to create a PDF from my HTML. I want to create a PDF that contains an image, within a div (.container-sizing). I have to be able to have the ability to position the image within .container-sizing using CSS and zoom and flip the image.
I have tried the below:
CSS
.container-sizing {
overflow: hidden;
position: relative;
width:600px;
height:430px;
}
.img {
max-height: 100%;
position: absolute;
top: -100px;
left: -100px;
right: 0;
bottom: 0;
margin: auto;
transform:scale(1, -1);
}
HTML
<div class='container-sizing'>
<img src='images/my-image.jpg' alt='' class='img'/>
</div>
This doesn't work as it ignores overflow:hidden on the containing div - which is pretty essential when positioning the image. Instead, I tried styling the image as a background image, which works great but then I have run into problems with transform: scale(1, -1). Despite mPDF's documentation saying that this is supported, it doesn't seem to work when applied to a background image.
CSS:
.container-sizing {
width:600px;
height:430px;
overflow: hidden;
}
.img {
background-image: url('images/my-image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width:600px;
height:430px;
transform:scale(1, -1) ;
}
HTML:
<div class='container-sizing'>
<div class='img'></div>
</div>
Does anyone have any ideas how I can get this working to produce a pdf that shows the image how it is declared in the css?
Thank you!
After spending ages trying to figure this out, I ended up dropping mPDF and using domPDF instead as this supports the overflow: hidden property I needed. Just posting in case anyone else runs into a similar issue!
How do I make it so that when I scroll down my sidebar stays in the same place
I have looked around but still can't find anything.
This is my code
<div class="example">
//stuff goes here
</div>
<style>
.example {
float: left;
background: blue;
width: 100px;
height: 100px;
}
</style>
Thanks in advance
.sidebar{
position:fixed;
right:0;
top:0;
}
I presume you want it to follow while scrolling?
I am making a banner where people can upload an image.
Before the upload it you see the image. With just a standard html code
<div id="box"><img src="blah blah" /></div>
The CSS:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
The image will fit in the div id="box" succesfull. If you can see i use border-top-left-radius and right-radius: That works perfect in firefox and Chrome. But in safari it doesnt work.
Example:
This is Chrome and Firefox. You can see the image will fit with the screen and got a nice border-radius on the top.
This is Safari. You see that the image dont have a border-radius on the top. I dont know the problem.
For that i also tried to use:
-webkit-
But that also didnt work. Anybody know how to fix that for safari?
please Update Below css and Check .....And make necessary changes as per your requirmnet..
hope this will solve your problem
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #D9D9D9;
}
Please Mark answer if your problem is solved...
This is all you need:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}
Keep it simple. :-)
for the reference: Check this:
http://jsfiddle.net/blackvibes/mVYwd/
I'm creating a website for mobile (it's pretty sure not the best way to do it.. but anyway) I'm using percentages all the way, since it should be relatively equal in size on any mobile (portrait) screen.
I've tried numberous things, such as:
#header img {
vertical-align:middle;
padding-top: auto;
padding-bottom: auto;
margin-top: auto;
margin-bottom: auto;
}
But I still can't get it working.
The only thing that will be in that div is that single image, which presents the school logo.
Thanks in advance!
Use your image as the background of your #header id:
#header img {
background:url(your_image.jpg) center center no-repeat;
}
remove width and height from img tag and
#header{text-align:center;}
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';