A client has asked for a page loader, something "attractive" to let the visitor know that the content is on its way. This is for standard html content - text, images, etc.
I have seen a few on the web, but many of them are dated and rather clunky. I am looking for something that is not a pain to implement but still looks decent.
Thanks in advance.
It wouldn't be hard to build your own. You could have a page that shows an animated gif and then loads the page using AJAX. You can get some great loading gifs just by searching for something like "AJAX loading image". This may or may not seem easy to you, but it doesn't sound too hard to me if you were using jQuery and PHP.
Example
Say you have two files: test1.htm and test2.htm. You want to show the contents of test2 (which take a bit to load) on test1 (which should have the parts of the page that load quickly). Here's the two files I made (this uses jQuery):
test1.htm
<head>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('test2.htm', function(data) {
$('#Content').html(data);
});
});
</script>
</head>
<body>
<div id="Content" >
<img src="ajax-loader-image.gif" />
</div>
</body>
</html>
test2.htm
<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>
So this should work for what you're planning to do. The important thing is that you try to divide up your page into parts that load quickly and parts that load slowly.
If you want to create attractive loader, then you should go through nice animated image. But I suggest you to use combination of animated image and jQuery, Because in jQuery there is a lot of animation available. You can checkout following link for more details,
jQuery Animation API
How to add loader
Your HTML like -
<div class="loader"></div>
Your CSS like
.loader {
position: absolute;
margin: 0 auto;
z-index: 9999;
background: url('icon-loader.gif') no-repeat;
top: 50 px;
cursor: wait;
}
Your javascript code like -
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function(){
$('div.loading').fadeOut(1000);
});
</script>
Related
I have a client who hired me to make them a single page website. I designed and programmed it in node and such. They then informed me that they had a wix account.
Since they already paid wix for a year I would like to try to make this work for them. Since you cannot upload files to wix I have it hosted on a different domain and have an iframe pointing to that domain within the page.
The only problem is the size of the iframe. Is there a way to make the iframe 100% height and 100% width? Obviously, this is not the idea way to put up a website, but I need to work with what I have so they don't waste money.
I've tried many different ways to make this work.
I have tried embedding a link to a css file using the 'embed' feature with this code in it. And the code is there, but I get iframe-ception.
wix-iframe {
width: 100% !important;
}
I have also tried added the css to the 'custom code' section under the settings, just very basic
<style>
wix-iframe {
width: 100% !important;
}
iframe {
width: 100% !important;
}
</style>
I've also tried other 'hacks' but I can't seem to get anything to work. Any help would be much appreciated.
You can adjust iframe height according to its content
Initialize your iframe like this
<iframe src="..." frameborder="0" scrolling="no" onload="loadIframe(this);" />
add the snippet below in your <head> or <footer>
<script>
function loadIframe(elem) {
elem.style.height =
elem.contentWindow.document.body.scrollHeight + 'px';
}
</script>
i have a pdf form that i need to be able to import as a background then use Dompdf to overlay html/text.
can this be done?
thanks
Dompdf is a library for converting HTML -> PDF. I'm no expert on that particular library but as far as I can tell it doesn't do things like overlaying html/text.
PDF cannot be imported into HTML because it isn't an HTML format and it isn't an image. There might be a parser library somewhere (e.g. http://www.pdfonline.com/easyconverter/sdk/pdf-to-html/), but without your own fairly extensive work you wont get that PDF document to be displayed in HTML.
HOWEVER, you CAN use something like this, it'll show your PDF document as the background, create a div that covers the screen just above the PDF document to make it non-interactive, then you can put all your contents above that. Note that there will be controls showing on the sides which as far as I know can't be prevented since they're provided by the browser when displaying a PDF file (you could use some fancy JS/CSS to prevent it I'm guessing but I don't know exactly how off the top of my head).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF as background</title>
</head>
<body>
<iframe src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" style="width: 100vw; height: 100vh;position:absolute;top:0;z-index:0;"></iframe>
<div style="position:fixed;width:100%;height:100%;z-index:1"></div>
<div id="content" style="position: absolute;top:50%;left: calc(50% - 4cm);z-index:2">
<h1 style="font-size:20px;background:#00ff00;">I am on top of the PDF document!</h1>
</div>
</body>
</html>
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
I am trying to make a blur image change on mouseover. Something like camera zooming in and out with certain things get blurred when other is zoomed in. Best way to understand what I want is to see it here:
http://berger.co.rs/test/test.html
And I have only one problem. The mouseover image is always behind the active image. I need to have only active image and when mouseover is applied, then to change images. Also, I don't want active image to disappear in total, and then to load mouseover image. I need it like on example above, just not to have mouseover image shown behind all the time.
You can see whole code I have inside of the page source.
Can you please help me?
First welcome to Stackoverflow, as a new user, please read this guide so you can ask better and get better and quicker answers:
https://stackoverflow.com/help/how-to-ask
please avoid code on comments. If someone ask you for additional code, include it in the question.
Now the answer:
The problem is just that you didn't provide Jquery for $() commands to work. "alturl.com/bcfhv" isn't correct.
here, put this on file, it's working:
<html>
<body>
<style>
div{
position:relative;
width:714px;
height:420;
overflow:hidden;
}
span {
position:absolute;
top:0px;
left:-0px;
}
</style>
<div>
<img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/>
<span>
<img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/>
</span>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ok')
$("div").hover(function() {
$("span").fadeIn();
}, function() {
$("span").fadeOut();
});
})
</script>
</body>
</html>
Or see it working here
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options