Cannot find any answers on this particular scenario.
CMS: Joomla
I am use jquery on page that will be iframed to suppress the logo, menu items, etc that are contained in the central index.php header class.
the following code on the page to be iframed works okayish, but flickers (common problem right):
jQuery(function() {
jQuery('.help').remove();
jQuery('.dropdown').remove();
jQuery("header").css("height", " 0px");
jQuery("header").css("width", "0px");
jQuery(":header").css({
width: "0px",
height: "0px"
});
I have seen some solutions around document.write, which may work, however please note i cannot change the html in the index.php file, i have to find some way of only changing during or before page load (for the page load iframe)
any help greatly appreciated!
Here is sample of the page that will be used for iframing (sometimes the classes do not load, i think this is due to the flickering/jolting of when the jquery kicks in : link
If you can change the CSS code of your document, add the following style properties to it:
.help,
.dropdown {
display: none;
}
header,
:header {
height: 0px;
width: 0px;
}
If you cannot change the CSS of your page, use the following snippet to handle your problem (the files need to be included in the head, before the elements are loaded):
<head>
<script type="text/javascript" src="jquery.js"></script">
<script type="text/javascript" src="file.js"></script>
</head>
file.js (not within $(document).ready()):
$('<style type="text/css">.help, .dropdown { display: none; } header, :header { height: 0px; width: 0px; }</style>').appendTo('head');
Related
I have a site that where some pages run a number of php routines that can sometimes take some time. For example, from one page there is a form:
<form action ="showdata.php">
<input type="submit">
</form>
Assume that the target page is:
connecting to a MySQL database
performing a series of select queries to establish the data to display
preparing the resulting page with data displayed.
I have tried putting a loading gif on the target page but it only loads briefly once I suspect the queries have completed. To do this I have the following on the target page:
CSS
.loader {
top: 50%;
left: 50%;
width:6em;
height:6em;
margin-top: -3em;
margin-left: -3em;
border: 0px solid #ccc;
background-color: #f3f3f3;
position:fixed;
background: url('../images/page-loader.gif') no-repeat;
}
SCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
HTML
<div class="loader"></div>
How can I get the loading gif to be displayed correctly? IE as soon as the page is chosen. I seem to remember reading that you can get around this problem using an intervening page that displays the gif and then redirects to the target page. Is this the good way to solve this problem or is there a better way?
What you're going to want to do is add a loading gif to your page with the form and show it when the button is clicked. The target page will only load as soon as the server-side php stuff has been handled, so showing a loading bar as soon as you click will probably give the result you are looking for.
For example:
<script type="text/javascript">
$('.submit').on('click', function() {
$(".loader").fadeIn("slow");
})
</script>
I kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.
I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.
Would you please help me?
Thank you.
<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;
<?php $screen_height = "<script>document.write(y)</script>";?>
</script>
<style type="text/css">
#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
My solution was:
#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
Thank you for your help.
Best regards.
Try to use:
<?php echo $screen_height; ?>
instead of:
<?php $screen_height = "<script>document.write(y)</script>";?>
you cannot use JS in CSS!
Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.
javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable
<script type="text/javascript">
function myfun()
{
var w=100;
var h=200;
document.body.innerHTML = '<div style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
}
</script>
<body>
<div id="d1">hello this is div 1</div>
<button id="b1" onclick="myfun();">click</button>
</body>
you can use the javascript itself to load the div and assign the css properties.
create a file like style.css.php
Start the file with
and then treat it like a normal CSS file, but you will be able to use php values in it.
You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.
Ideally though it would be better to simply use javascript to alter a class, or use media queries.
what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.
I am stacked at one issue that drives me crazy. I made a left floating file tree view and I include my website. But When I include my web site my file treeview, My treeview does not be clickable[at chrome] also, int IE 9 my thumbnail part for viewing pdf document doesn not opened. Chrome is most important than my other my troubles.
Let me give me codes
item id is my left menu.
<div id="item" style="float:left">
<?php include("leftmenu.php"); ?>
</div>
sample include method.
also sidebarOpenfile is file treeview show button.
<script type="text/javascript">
$(document).ready(function(){
$('#sidebarOpenfile').click(function()
{
if ($('#item').css("height")=='0px')
{
$('#item').animate({height:"700px"});
}
else
{
$('#item').animate({height:"0px"});
}
});
});
Above 2 codes is in my main page (.php file).
Also my main page php file's css (#item part):
#item {
position:relative;
margin-left:0px;
float:left;
top: 10px;
width: 200px;
height:0px;
bottom: 0px;
background-color: hsla(0,0%,0%,.1);
overflow:auto;
display:inline-block;
}
Finally my leftmenu.php files codes
$(document).ready( function() {
$('#leftmenu').fileTree({ root: '../', script: 'fileview/connectors/jqueryFileTree.php', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) {
alert(file);
});
});
Thats all. And All file that is includes is valid and its working. My problem is
Thanks for helping..
Terrible Mistake :)
I cant believe how I can miss.
You're right putvande.
All I need only changing z-index property.
If anyone who have similar problem, they can solving with adding z-index property to their css file.
I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:
Then
How to hide whole loading process of page, or is there any other solution for this issue?
hide it in css,
#loading {
display: block;
background: url(loading.gif) no-repeat center center;
}
#container {
display: none;
}
and, in javascript show it again (this code uses jquery)
$(function(){
$('#loading').fadeOut(250, function(){
$('#container').show();
});
});
of course you can do this like anyhow you want, hide and show anything in css,
then on document ready, switch it over to the content. by hiding the loading div, and showing the content.
Set the style on display:none; until your page is completely loaded.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.
There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.
Your code might look like this, using vanilla javascript:
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
Update, in jQuery:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
Related documents: Events/ready, Events/load, CSS/css & Core/$
If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.
But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.
(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)
Best way
function ajax(){
$('#wapal').html('path to image');
$.ajax({
url:'somfile.php',
method:'get',
success:function(data){
if(data =='') return;
$('#wapal').html(data);
}
});
}
I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.
You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.
This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.
You can do it with jquery easily.
SCRIPT
$(window).load(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.
You can do it with jquery easily.
SCRIPT
$(document).ready(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"