Page loading GIF - Could someone please explain the answer below? - php

I found what I was looking for on this link How to show ajax loading gif animation while the page is loading? but I dont know how to implement this on my website.
I want a loading GIF to appear while the page loads and disappears by itself once the page is completely loaded with PHP results.
On the website I use one page template (index.php) and I have all data loaded in that page dynamically according to the user's query.
Thank you in advance.

You will find everything you need here
http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html

When the page is completely loaded, the first thing that happens is the <body>'s onload event fires. This is where you make the image disappear.
For example, make the <body> tag look like this:
<body onload="makeLoadingGifDisappear()">
Somewhere in the page body give your GIF an ID:
<img src="loadinggif.gif" id="myLoadingGif">
Then in the page's JavaScript, make the makeLoadingGifDisappear function hide the GIF:
function makeLoadingGifDisappear() {
document.getElementById('myLoadingGif').style.display = 'none';
}

Well, this is my solution.
1) CSS part
#loadgif {
padding-top:2px;
font: 10px #000;
text-align:center;
vertical-align:text-top;
height: 80px;
width: 130px;
/* Centering the div to fit any screen resolution */
top: 50%;
left: 50%;
margin-top: -41px; /* Div height divided by 2 including top padding */
margin-left: -65px; /* Div width divided by 2 */
position: absolute;
display: none; /* JS will change it to block display */
position: fixed;
z-index: 1000;
/* Loading GIF set as background of the div */
background: #FFF url('../img/loader.gif') 50% 75% no-repeat;
/* Misc decoration */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border:#7580a8 solid 1px;
}
2) HTML part
Place div tag within body tag anywhere.
<!-- With or without text -->
<div id="loadgif">Loading...</div>
3) Javascript part
I made two functions, one to show and another to hide the div.
<script type="text/javascript">
// Hide function by changing <div> style display attribute back to none
function hideloadgif() {
document.getElementById('loadgif').style.display = 'none';
}
// Show function by changing <div> style display attribute from none to block.
function showloadgif() {
document.getElementById('loadgif').style.display = 'block';
}
// Making sure that any other event running in the background isn't affected
if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', WindowLoad, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', WindowLoad);
}
// Call the hideloadgif() function on click event,
// with interval time set to 3 seconds to hide the <div>
function WindowLoad(click) {
setInterval("hideloadgif()",3000)
}
</script>
4) Showing the div.
Call function showloadgif() using onlick="" event anywhere.
For example
<img src="abc/def.jpg" onlick="showloadgif()">
Once the image is clicked, the div will appear and at the same time, hideloadgif() will trigger and hides the div within 3 seconds.
function WindowLoad(click) {
setInterval("hideloadgif()",3000)
}

Related

Show partial page and then insert output from a function that takes a while to finish

I need to display most of a page's content before outputting the content from a function. The function takes a while to execute, and returns some content for the page. I need the rest of the page to display first, then run the function, and then 'insert' the function output.
It would seem that I'd need to use ob_start at the beginning of the function, then store that data in a variable with ob_get_content(). But I'd also need to run the function after the rest of the page displays.
Here's some code I have tried without success (this is the content area inside the body tag):
<div id='part1'>
<p>here is part 1 of the content</p>
</div>
<div id='part2'> // this is where the function output will be inserted after processing it
<p>part 2</p>
<?php echo long_function();?>
</div>
<div id='part3'>
<p>this is part 3 of the content
</div>
<?php
function long_function() {
// some process that takes a long time to get data
// and stores it in the $part2_content
return $part2_content;
}
The result should be that the part1 and part3 div content should be displayed. And then, when the long_function() finishes with gathering up it's data, that data should be output in the 'part2' section.
I've tried to put an ob_start() at the beginning of long_function(), then $part2_content = ob_get_contents() to store that output data (without an ob_flush).
I think that I may need to add some sort of DOM 'write' to the 'part2' ID, but not sure of the right combination to accomplish.
I believe you can't do the server side rendering.
php is back-end language, that run the hole script file, then last thin print the output
for example:
in a function:
you cant return then call code after
function sayHi(){
$word = 'hi';
return "bye";
echo $word; // this code will never work :)
}
sloution ?
so you need to use Clint side rendering
for example use ajax
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.
Based on this answer which is completely acceptable:
https://stackoverflow.com/a/46871956/17292588
PHP is a server-side programming language. It gets executed when you
request a page. So you cannot execute it after the page has been
loaded. If you need to check if something has loaded on the client
side, you'll have to use a client-side programming language like
JavaScript.
I suggest you to putting this long_function in a another route and request it with Ajax during (or after) loading page.
Based on the answers provided and links (as well as remembering the PHP is server-side so can't change things after the page is rendered), I came up with this code which worked for my purposes. Change the <some-page-on-your-site> to the page you want to get as needed.
I included a CSS-only spinner so you can watch something while the Ajax request is working.
<!DOCTYPE html>
<html>
<head>
<style>
/* for the loading spinner */
#spinner {
display:none;
position: fixed;
margin: auto;
width: 30%;
background-color: white;
top:40%;
left:30%;
border:thin solid darkblue;
}
.spinner {
border: 8px solid gray;
border-radius: 50%;
border-top: 8px solid green;
border-right: 8px solid lightgreen;
border-bottom: 8px solid green;
border-left: 8px solid lightgreen;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.spinner_book {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body onload='loadDoc()'>
<div>
<div id='ajax_results'>
<div align='center'>
<p align='center' class='spinner'></p>
<p align='center'>Please wait we get the data ...</p>
</div>
</div>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("ajax_results").innerHTML = this.responseText;
}
xhttp.open("GET", "<some-page-on-your-site>");
xhttp.send();
}
</script>
</body>
</html>
You can add query parameters to the <some-page-on-your-site> .
Note that the initial text in the 'ajax_results' div (the spinner and message) will be replaced by the contents of the request. So nothing needed to remove the spinner after the request is completed.
Thanks for the answers which helped me get to my solution. I hope this helps others who wander here.

Wordpress post display in different pages separate by section H1

i want to display the following Post in 3 different sections. The first section is the table of content. The second is the summary and the third is the theory. Is like a multipage post but each page has a section, as I don't want to show all the information in a single page.
Thanks in advance
The way I have come up with this is this way.
I'm only posting these because I have it all setup so I can basically copy and paste it in. Next time I want to see more effort on your part.
Create a new JS file. well call it mytabs.js in that file put this:
;( function( $, window, document, undefined ) {
"use strict";
$( document ).ready( function() {
var loadTabOrder = function(id){
// Define friendly data store name
var dataStore = window.sessionStorage;
var oldIndex = 0;
// Start magic!
try {
// getter: Fetch previous value
oldIndex = dataStore.getItem(id);
} catch(e) {}
return oldIndex;
};
var saveTabOrder = function(id, currentIndex){
// Define friendly data store name
var dataStore = window.sessionStorage;
// Start magic!
try {
dataStore.setItem( id, currentIndex );
} catch(e) {}
};
$('.ui-tabs-vertical').each(function(){
var id = $(this).prop('id');
if(!id) $.error('.ui-tabs-vertical requires an id');
var element = $( "#"+id );
var options = {
active: loadTabOrder(id),
activate: function(event, ui) {
saveTabOrder(id, ui.newTab.parent().children().index(ui.newTab));
}
};
element.tabs(options).addClass( "ui-helper-clearfix" );
var nav = element.find('> .ui-tabs-nav > li');
nav.removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
var height = 0;
nav.each(function(){
height += $(this).outerHeight();
});
element.find('> .ui-tabs-panel').css(
'min-height',
height+'px'
);
});
} );
} ) ( jQuery, window, document );
Somewhere in your theme/pllugin put this:
//ui css
wp_enqueue_style('jquery-ui');
//jquery
wp_enqueue_script('jquery');
//jquery-ui
wp_enqueue_script('jquery-ui');
//you only need to do the above it you dont have them included already
//add our JS page.
wp_enqueue_script('mytabs', plugin_dir_url(__FILE__).'mytabs.php', ['juery-ui']);
//in my case this is in a plugin file, obviously use your path to your JS file
In your CSS file add these, make sure your CSS loads after jQuery UI
.ui-tabs.ui-tabs-vertical {
padding: 0;
height: 100%;
width: calc(100% - 15px);
position: relative;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
float: left;
width: 10em;
background: #EEE;
border-radius: 4px 0 0 4px;
border-right: 1px solid gray;
position: absolute;
top : 0;
bottom: 0;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
margin: 0.2em 0;
border: 1px solid gray;
border-width: 1px 0 1px 1px;
border-radius: 4px 0 0 4px;
overflow: hidden;
position: relative;
right: -2px;
z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
width: 100%;
padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
padding-bottom: 0;
border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
float: left;
margin-left: 150px;
width: calc(100% - 200px);
min-width: 600px;
border-radius: 0;
position: relative;
left: -1px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel .panel-title{
padding: 0px;
margin: 0px;
margin-bottom: 10px;
font-size: 22px;
}
In your HTML add something like this
<div id="myttabs" class="ui-tabs-vertical">
<ul>
<li>General</li>
<li>Foo</li>
</ul>
<div id="settings-panel">
<p>Here is some settings</p>
</div>
<div id="foo-panel">
<p>Here is some foo</p>
</div>
</div>
Overview
How it works. In the above HTML you will notice ui-tabs-vertical class. Then in our mytabs.js we do this:
$('.ui-tabs-vertical').each(function(){ ... }
In short what this does is any element that has the ui-tabs-vertical class will get the ui-tabs added automagially. This is especially nice for wordpress as we can get into a real mess trying to put JS in a post (for example). So we want it as clean an free as possible. This trick with some variation can be used on any of the UI elements that create similar stuff, same type of popup, or anything we can normalize to a common format, so we don't have too many arguments.
Pass options -via- data attributes
One way to pass options to the JS, that I didn't need here is to simply put them in a data- attribute on the main element or any element that makes sense. For example you can set .tabs({hide:true}) to hide the tabs.
So if I wanted to do that I would do something like this:
//in our HTML add the data attribute to the main element
<div id="myttabs" class="ui-tabs-vertical" data-hide="true" >
//in myscript.js - change the options object.
var element = $( "#"+id )
var options = {
hide: element.data('hide') | false,
active: loadTabOrder(id),
activate: function(event, ui) {
window.saveTabOrder(id, ui.newTab.parent().children().index(ui.newTab));
}
};
The active tag will be remembered by the users browser by making use of some simple Session Storage stuff in there. These are keyed off the ID of the main HTML element for the tabs. This makes that ID required, so there is a bit of code to issue an error to the console, for development purposes. Its important to use the tabs ID, because that way each tab will have it's own settings remembered. If we mixed them we would probably get some errors for missing tab indexes etc..
There are also some modifications to the vertical CSS to expand the area behind the Tabs. I probably spent the most time on this piece and its a relatively minor visual issue. But I cant have that in my work. This is actually quite tricky to do, as you will see below. It looks way better with the full width background.
You can see this issue even on the jQuery example page.
The way I fixed it was
position:absolute on the navigation box with a top:0 and bottom:0, the parent element should be position:relative. This alone basally solves the 100% height issue, now we have to deal with the side effects of absolute positioning.
A few tricks like this width: calc(100% - 200px); to dynamically get the width set up. Absolute elements are not part of the Box Model of the DOM, so it's very hard to account for them with just CSS as they don't hold any space in the container.
Now all we need to do is set the min-height. The only reason we need to do this is everything goes janky if you have a lot of menu item (absolute) but no content in the tab (height is smaller then the nav). Which will bust it out of the bottom of the ui-tabs container because its absolute positioned. This is because with the top:0 and bottom:0 we are tying the width of the navigation menu to the main ui-tabs container. When the panel is empty that container will be shorter then the menu, which is a problem with many menu items and tiny panels. It can also cause some issues if you load content -via- AJAX, as you may see this error for second while the request goes.
4 So with the last bit of JS we just need to set min-height to apx the same height as the navigation's height. Because the navigation is absolute and tied to the parent container (as I said above, its height is dependent on .ui-tabs), so we can't simply get the height of that. The only option I saw was to sum the height of it's contents, the li elements themselves. This is a bit harder but we only need to do it one time for each ui-tabs.
The absolute position stuff will dynamically adjust the height (with just CSS) if the tab height changes, such as loading content via AJAX or other dynamic stuff.
The .ui-tabs-panel are set to float:left with a margin apx the width of the tab navigation. This accounts for the horizontal space the navigation takes up. Then to get something resembling a proper 100% width, we can use width: calc(100% - 200px); again because the nav is absolute we are sort of stuck manually offsetting for it. So This has 150px for the menus width offset, (or the left-margin on the panel, about the same width as the nav) and an extra 50 for things like the margin on the right and some other padding etc. We could have used negative margins for some of these (but I didn't think about that tell now)
Now having the panel width dynamic and like a real 100% width, all we need to do to make the panel smaller is adjust the width of the container around the main UI-Tabs element. This way we can adjust it without sending any arguments to .tabs() or changing any thing with JS.
As I said that menu thing is a hard problem to solve, this is mainly due to the fact were limited in what we can do structure wise, or we will just break the ui-tabs. So we cant really change that, and that leave only JS and CSS. CSS is preferable because then we don't have to write yet more JS, and we would need to keep watch on the contents changing to resize it. Even then there would be some lag in the change. For example using an setInterval to keep an eye on it, this is something we want to avoid as it can affect performance too, and is more of a headache then the minor visual problem that this is.
Summery
I basically just pasted this from my own plugin, so I can't grantee that I covered everything. I cant stand little quirky things like the images above so I always fix that stuff. And I try to make my life easier later so now we just make the HTML and add the ui-tabs-vertical and mytabs.js takes care of the rest. Lastly we should never have to mess with mytabs.js and anytime we want a tab setup we just add the HTML with that class.
There is probably a tiny performance penalty to this (maybe) but in Wordpress it can be really hard to call JS from posts or other content in a "clean" way. So this just encapsulates all that code and make it a lot cleaner and easier to maintain IMO because, you are not mixing HTML and JS and CSS etc.
Hope it helps:
PS if the way I start my JS looks funny please see this question:
What advantages does using (function(window, document, undefined) { ... })(window, document) confer?
And this one:
How does this JavaScript/JQuery Syntax work: (function( window, undefined ) { })(window)?
Basically its a self executing function that keeps our global JS space clean, so we don't get any conflicts from other plugins, or scripts that may use the same variable names as we are.
I do a fair amount of plugin development, so its a bit more common to use it for that, but I just basically copy and paste it now, so... Also I feel I should mention this is part of a much larger script that dynamically adds a bunch of UI stuff for me. That way when I'm working on HTML, I can just work on HTML etc...
For the final result check this out:
;( function( $, window, document, undefined ) {
"use strict";
$( document ).ready( function() {
var loadTabOrder = function(id){
/*// Define friendly data store name
var dataStore = window.sessionStorage;
var oldIndex = 0;
// Start magic!
try {
// getter: Fetch previous value
oldIndex = dataStore.getItem(id);
} catch(e) {}
return oldIndex;*/
};
var saveTabOrder = function(id, currentIndex){
/*// Define friendly data store name
var dataStore = window.sessionStorage;
// Start magic!
try {
dataStore.setItem( id, currentIndex );
} catch(e) {}*/
};
$('.ui-tabs-vertical').each(function(){
var id = $(this).prop('id');
if(!id) $.error('.ui-tabs-vertical requires an id');
var element = $( "#"+id );
var options = {
active: loadTabOrder(id),
activate: function(event, ui) {
saveTabOrder(id, ui.newTab.parent().children().index(ui.newTab));
}
};
element.tabs(options).addClass( "ui-helper-clearfix" );
var nav = element.find('> .ui-tabs-nav > li');
nav.removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
var height = 0;
nav.each(function(){
height += $(this).outerHeight();
});
element.find('> .ui-tabs-panel').css(
'min-height',
height+'px'
);
});
$('#expand').click(function(){
$('#'+$( "#mytabs li.ui-tabs-active" ).attr('aria-controls')+' p').css({"height":'300px'});
});
$('#shrink').click(function(){
$('#'+$( "#mytabs li.ui-tabs-active" ).attr('aria-controls')+' p').css({"height":''});
});
} );
} ) ( jQuery, window, document );
.ui-tabs.ui-tabs-vertical {
padding: 0;
height: 100%;
width: calc(100% - 15px);
position: relative;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
float: left;
width: 10em;
background: #EEE;
border-radius: 4px 0 0 4px;
border-right: 1px solid gray;
position: absolute;
top : 0;
bottom: 0;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
margin: 0.2em 0;
border: 1px solid gray;
border-width: 1px 0 1px 1px;
border-radius: 4px 0 0 4px;
overflow: hidden;
position: relative;
right: -2px;
z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
width: 100%;
padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
padding-bottom: 0;
border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
float: left;
margin-left: 150px;
width: calc(100% - 200px);
min-width: 600px;
border-radius: 0;
position: relative;
left: -1px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel .panel-title{
padding: 0px;
margin: 0px;
margin-bottom: 10px;
font-size: 22px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="mytabs" class="ui-tabs-vertical">
<ul>
<li>General</li>
<li>Foo</li>
</ul>
<div id="settings-panel">
<p>Here is some settings</p>
</div>
<div id="foo-panel">
<p>Here is some foo</p>
</div>
</div>
<div style="margin-top: 20px">
<button id="expand" >Click here to expand the panel</button>
<button id="shrink" >Click here to shrink the panel</button>
</div>
The only notes here, is I added the buttons to showcase how the gray nav background resizes automatically and Stack Overflow wont let me use the sessionStorge here. So I had no choice but to comment it out.
Sense there is so much code, most of it is pretty simple stuff really, I didn't want it all in the snip-it windows, as its a bit harder to read there. So forgive the lengthy post, but I wanted it to all make sense.
Enjoy!

Echo Javascript function in PHP to display modal not displaying properly

i have a code here which is intended to show a Javascript modal when a textbox is not filled (when send button is clicked it will check for unfilled textboxes and checkbox AND SHOW THE MODAL, if everything is fine, it will send an email...Im working on the textbox first). But I have some problem displaying the modal properly. It seems like when i use display: block it will be shown along with other objects in the form. but when i set it to display: none, nothing is being displayed even after the send button is clicked.
Here's the CSS for modal:
#overlay {
display: block;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 800;
}
#overlay div {
width:800px;
margin: 100px auto;
background-color: none;
border:none;
padding:15px;
text-align:center;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow:auto;
}
HTML:
<div id="overlay">
<div>
<img src="images/NoUsername.png" alt="module" style="width:469px; height:345px;">
<p>[<a href='#' onclick='overlay()'>close</a>]</p>
</div>
I got these codes from http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
Here is the PHP code for checking the textbox:
if ($username == "") {
echo
"<script type=\"text/javascript\">
function overlay() {
el = document.getElementById(\"overlay\");
el.style.visibility = (el.style.visibility == \"visible\") ? \"hidden\" : \"visible\";
}</script>";
}
I tried using double and single quotations here but nothing happens. I think the problem is in my CSS. Please feel free to edit my code. Thanks in advance for your help guys!
As I commented, you should study a little more CSS and HTML before going straight through programming like PHP and JavaScript. Your question will probably be flagged as low quality before you can really learn something meaningful from it.
I think the visibility attribute isn't suitable for your needs, as it allocates space in the DOM for the element even though it's hidden. I also think you should choose between showing the modal by PHP (server-side) or by JavaScript (client-side) as what you're doing now is becoming very confuse, even more for a novice.
I would modify your CSS to:
#overlay {
display: none; /* hidden if not overwritten by style="" attribute or javascript */
position: fixed; /* fixed makes more sense here as it doesn't depend on the element's parents, search for it */
...
IF you choose to show or hide the modal by php, it would be something like
<div id="overlay" <?php if ($username == "") echo 'style="display: block;"' ?>>
<div>
<img src="images/NoUsername.png" alt="module" style="width:469px; height:345px;">
...
OR, in my opinion the best approach, making it entirely in JavaScript (client-side), without relying on php:
<script type="text/javascript">
function show_modal() {
el = document.getElementById("overlay");
el.style.display="block";
}
function hide_modal() { // You'll want to use this for the close button
el = document.getElementById("overlay");
el.style.display="none";
}
function verify_elements() {
el = document.getElementById("username");
if (el.value == '') {
show_modal(); // if the username is '', show'em the modal
return false; // returning false makes sure the form isn't submited
}
}
</script>
<form action="" method="post" onsubmit="verify_elements()">
<input name="username" id="username" value="" />
...
I hope it helps to put you in right path. But you should really go step-by-step into this if you really want to learn instead of copy-and-paste forever :D
Best Regards!
I think that you missed to call the function added to the page:
if ($username == "") {
echo
"<script type=\"text/javascript\">
function overlay() {
el = document.getElementById(\"overlay\");
el.style.visibility = (el.style.visibility == \"visible\") ? \"hidden\" : \"visible\";
}
overlay();
</script>";
}
Also, I believe that the overlay should be hidden by default:
#overlay {
display: block;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 800;
visiblity: hidden;
}

Uniqiue background on every page

I'm using Drupal 7. My bg image in page.tpl.php file and image get to css.
My html:
<div class="mainimage" id="mainimg" class="clearfix"></div>
And CSS:
#mainimg {
background: url("../img/mainimg.jpg") repeat scroll 0 0 transparent;
height: 500px;
left: 50%;
margin-left: -640px;
position: absolute;
width: 1280px;
z-index: 1;
top:0;
}
My bg image seen all pages. It's normally. But i want, change my bg image on every page.
E.G.
...
mysite.com/index.php -bg image: mainimg.jpg
mysite.com/news -bg image:news.jpg
mysite.com/about -bg image: about.jpg
...
How can i solve this?
You can use the built-in Drupal functions to add a unique identifier to the body, so you can target each page individually in your CSS.
For example, if the body had id="news", you could change the background image by adding this to your CSS:
#news #mainimg {
background-image: url("../img/news.jpg");
}
Use a different class per each page.
mysite.com/news
HTML
<div class="mainimage news-bg" id="mainimg" class="clearfix"></div>
CSS
.news-bg {
background: url("../img/news-bg.jpg") repeat scroll 0 0 transparent;
}
mysite.com/about
HTML
<div class="mainimage about-bg" id="mainimg" class="clearfix"></div>
CSS
.about-bg {
background: url("../img/about-bg.jpg") repeat scroll 0 0 transparent;
}
make the image php generated.
1) set header("content-type: image/jpg");
2) check from which page the request came and choose image
3) echo the binary data of your image.
Say this is in the file bg.php, you have to set background-image:url('bg.php');
Example:
function currentPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
if(currentPageName() == "news.html")
$imagedata = file_get_contents('path/to/news.jpg');
//etc
header('Content-type: image/jpg');
echo $imagedata;

Random chance for an event to trigger HTML5 audio in PHP and unhide an image in CSS

I've done a bit of searching but so far I am confused as to what the best way to show a hidden image in CSS that only pops up if a random chance trigger in PHP happens, and during that random chance being successful, to play audio using html5.
If this is not possible, please let me know as I am trying all sorts of things.
As for right now I am using CSS to hide the image offscreen manually by a few thousand pixels, and then on a mouseover to bring it back. What I am trying to figure out is, how can you make php execute this if certain criteria are met? I want it to have a random chance of happening when an input button is clicked, this input button also loads another php document into a frame on the page, if that is of any help.
#hideme a img
{
height: 0;
width: 0;
border-width: 0;
}
#hideme a:hover img
{
position: absolute;
top:-60px;
left:40px;
height: 60px;
width: auto;
}
#hideme ul
{
list-style:none;
position:absolute;
left:-9999px;
}
#hideme ul li
{
padding-top:0px;
float:none;
margin:0px;
}
#hideme li:hover ul
{
left:-40px;
}
Is there a reason the random chance has to be with PHP? If you could use Javascript then on the onclick event of the button you could do
function onclick(e) {
if(Math.random()>.5)
$('#hideme').show();
}
And the changed css
#hideme ul
{
list-style:none;
position:absolute;
display:none;
}

Categories