I have a problem when you open the page, i need to open loading image before open page, how can i do this
<style>
#dvLoading
{
background:#000 url(images/ajax-loading.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
</style>
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
window.load will wait for the entire contents to load, then fire it. You'd better use 'ready', that is:
<style>
#dvLoading{
background:#000 url(images/ajax-loading.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
display: none;
margin: -25px 0 0 -25px;
}
</style>
$(function(){
$('#dvLoading').css('display', 'block');
});
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
place the <div id="dvLoading"></div> just before the closing </body>
Try this:
$(window).bind("load", function() {
$('#dvLoading').hide();
});
Demo here
Related
I want to hover over an image (music album) and then a record rolls out, so I want it to move to the right and to rotate a bit. It can already move to the right but I can't get it to rotate with it.
the #cover1 is the album and the #coverrecord1 is the record that needs to roll out, i like to keep it as simple as possible as i am not a pro in coding.
Many thanks.
$(document).ready(function (){
$("#cover1").hover(
function() {
$("#coverrecord1").stop().animate({ left: '5%' });
},
function() {
$("#coverrecord1").stop().animate({ left: '0' });
}
);
});
You can also skip js if you wish :)
.album {
background-color: orange;
height: 10em;
margin: 3em auto;
position: relative;
width: 10em;
}
.album:after, .album:before {
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.album:after {
background-color: orange;
z-index: 1;
}
.album:before {
background-image: linear-gradient(to left, gray, black);
border-radius: 50%;
transition: transform 500ms;
}
.album:hover:before {
transform: translate3d(40%, 0%, 0) rotate(30deg);
}
<div class="album"></div>
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I'm using Laravel-snappy and am trying to absolutely position 6 columns so that 3 print on each page..
View
...
body {
position: relative;
}
.col1-1 {
text-align: right;
background-color: #00dd00;
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 11in;
}
.col1-2 {
text-align: right;
position: absolute;
background-color: #1c94c4;
top: 0px;
left: 270px;
width: 250px;
height: 11in;
}
.col1-3 {
text-align: right;
background-color: #46b8da;
position: absolute;
top: 0px;
left: 540px;
width: 250px;
height: 11in;
}
.col2-1 {
text-align: right;
background-color: #dd0100;
position: absolute;
top: 11in;
left: 0px;
width: 250px;
height: 11in;
}
.col2-2 {
text-align: right;
position: absolute;
background-color: #c4770b;
top: 11in;
left: 270px;
width: 250px;
height: 11in;
}
.col2-3 {
text-align: right;
background-color: #da0073;
position: absolute;
top: 11in;
left: 540px;
width: 250px;
height: 11in;
}
</style>
</head>
<body>
<div class="col1-1"></div>
<div class="col1-2"></div>
<div class="col1-3"></div>
<div class="col2-1"></div>
<div class="col2-2"></div>
<div class="col2-3"></div>
....
Controller
return $pdf->stream('page.pdf');
return view('page');
the problem is that the columns come up short, so the 2nd row start on the 1st page...
I have the pagesize set to letter
'pdf' => array(
'enabled' => true,
'binary' => 'C:\wkhtmltopdf\bin\wkhtmltopdf',
'timeout' => false,
'options' => array('page-size'=>'letter'),
So I'm not really sure what to do next...
I feel like it's a scaling issue?
If I don't use Snappy, and just display the page on the screen and print the screen as a PDF, the results are much better (just a few pixels off), but of course I need the page returned as a PDF.
Snappy uses wkhtmltopdf, which in turn uses Webkit to render the HTML. (Might help you to find more info if my suggestions can't help you as your issue is probably not specifically related to Snappy.)
I think you could solve your issue by preventing the page from breaking inside the columns.. To do that you can use the following CSS on each of the columns:
.col{
page-break-inside: avoid;
}
You might also try wrapping the 3 columns in a div and applying that css on the wrapper div.
You can also try page-break-after: avoid or page-break-before: avoidon the columns or by creating an empty div between the sets of columns and styling it with `page-break-after: always'.
I'm currently working on making my header and my footer fixed while my page content scrolls through. My body has overflow: hidden; currently. When I remove it I can scroll through the page, however, my header is no longer fixed at the top and my footer still covers the last bit of my page content. I'm pulling the content through php. How can I keep my header and footer fixed on the page, but still allow my PHP dynamic content appear completely?
My code:
CSS:
body {
margin: 0;
padding: 30px 0 40px 0;
overflow: hidden;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: red;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: white;
}
#page {
overflow: auto;
height: 100%;
}
HTML:
<head id="header">
<?php
include('incl/menuinc.php');
?>
</head>
<body>
<div id="page">
<?php
if (isset($_GET['page'])) {
switch ($_GET['page']) {
case 'example_page':
include('incl/pages/example.php');
break;
default:
include('home.php');
}
}
?>
</div>
<div id="footer">
<?php
include('footer.php')
?>
</div>
</body>
http://jsfiddle.net/q8j208eo/2/
*{ /*basic reset*/
margin: 0;
padding: 0;
}
html, body{
position: relative;
height: 100%;
min-height: 100%;
}
#header{
background-color: #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#footer{
background-color: #ddd;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
}
#page{
box-sizing: border-box;
min-height: 100%;
padding-top: 40px;
padding-bottom: 60px;
background-color: yellow;
}
I have the following CSS
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}
.jScrollPaneTrack {
position: absolute;
right: 50%;
top: 0;
height: 100%;
}
.jScrollPaneDrag {
position: absolute;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
.scroll-pane {
width: 100%;
height: 100%;
display:block;
overflow: auto;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
.jScrollPaneTrack {
background: url(/images/track.gif) repeat-y;
}
.jScrollPaneDrag {
background: url(/images/drag_middle.gif) no-repeat 0 50%;
}
.jScrollPaneDragTop {
background: url(/images/drag_top.gif) no-repeat 0 0;
height: 4px;
}
.jScrollPaneDragBottom {
background: url(/images/drag_bottom.gif) no-repeat 0 0;
height: 4px;
}
a.jScrollArrowUp {
height: 11px;
background: url(/images/arrow_up.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowUp:hover {
background-position: 0 -11px;
}
a.jScrollArrowDown {
height: 11px;
background: url(/images/arrow_down.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowDown:hover {
background-position: 0 -11px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
background-position: 0 -22px;
}
This is where I load the css stylesheet in my classic asp code which is in the head of the html:
<link href="/css/jScrollPane.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/scripts/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane1').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane3').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane4').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane5').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane6').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
});
</script>
<script>
Can someone explain to me why it takes about 50 secs to load the drag-*.gifs and the arrow up and down gifs. Im really confused on why it takes so long to load simple images. Could this be a cache issue? Here is an image for the results I got from my webpage.
Multiple HTTP requests can really slow down a web page loading time. Have a look at this CSS sprites tutorial for an idea of how you can get dramatic speed improvements.