I am trying to get a random background image to load on my wordpress site home page every time the page is loaded or refreshed. Here is the code I have so far:
This is the code I have in my style sheet.
style.css
body.home {
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
height: 100%;
width: 100%;}
This is the code I have on my home.php file.
home.php
<script>
var randomImage = {
paths: [
"images/home-bg/website-background1.jpg",
"images/home-bg/website-background2.jpg",
"images/home-bg/website-background3.jpg",
"images/home-bg/website-background4.jpg",
"images/home-bg/website-background5.jpg",
"images/home-bg/website-background6.jpg",
"images/home-bg/website-background7.jpg",
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
var img = new Image();
img.src = path;
$("body.home").html(img);
$("body.home").attr("href", path);
}
}
randomImage.generate();
</script>
If you would like to check out the website its http://americasfinestlighting.com/
Thanks,
William
Just change body background like below:
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<body>
</body>
<script>
var randomImage = {
paths: [
"https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg",
"http://www.riscon.co.uk/wp-content/uploads/2015/08/sample3.jpg",
"http://cdn6.fonearena.com/i/SonyXperiaZ2CameraSamples/sony-xperia-z2-camera-sample-macro-6.jpg",
"https://cdn.photographylife.com/wp-content/uploads/2012/10/Nikon-D600-Sample-4.jpg",
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
$('body').css('background', 'url('+path+') no-repeat');
}
}
randomImage.generate();
</script>
DEMO
I was able to accomplish this by adding a snip-it of php to my functions.php file.
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 7.
$background_class = 'background_' . rand(1,7);
$classes[] = $background_class;
return $classes;
}
Then I changed my CSS to the following:
body.home.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
body.home.background_2 {
background-image: url("images/home-bg/website-background2.jpg");
}
body.home.background_3 {
background-image: url("images/home-bg/website-background3.jpg");
}
body.home.background_4 {
background-image: url("images/home-bg/website-background4.jpg");
}
body.home.background_5 {
background-image: url("images/home-bg/website-background5.jpg");
}
body.home.background_6 {
background-image: url("images/home-bg/website-background6.jpg");
}
body.home.background_7 {
background-image: url("images/home-bg/website-background7.jpg");
}
If you want the background to change on all pages not just the home page remove the .home from the CSS Example:
body.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
Hope this helps anyone else who is looking :-)
Wrap the randomImage Object and the randomImage.generate invocation, inside jQuery .ready() method to execute when the DOM is fully loaded.
Also space out ".home" from "body" this queries for "home class" in body
<script>
$( document ).ready(function() {
var randomImage = {
paths: [
"images/home-bg/website-background1.jpg",
"images/home-bg/website-background2.jpg",
"images/home-bg/website-background3.jpg",
"images/home-bg/website-background4.jpg",
"images/home-bg/website-background5.jpg",
"images/home-bg/website-background6.jpg",
"images/home-bg/website-background7.jpg",
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
var img = $('<img id="img-responsive">'); // This is Equivalent to $(document.createElement('img'))
img.attr('src', path);
img.appendTo('#imagediv'); // The div ID you want to append to
}
}
randomImage.generate();
});
</script>
View on CODEPEN
Related
I'm working on Highchart and it's working fine but now when the page load. I want the png (image file) automatically downloaded. How can I do this?
<?php
$xcat = array('0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 +');
$unit = "age";
$data1 = array("0"=>array("Seriesname"=>"Male","data"=>array("-1746181", "-1884428", "-2089758", "-2222362", "-2537431", "-2507081", "-2443179",
"-2664537", "-3556505", "-3680231", "-3143062", "-2721122", "-2229181", "-2227768",
"-2176300", "-1329968", "-836804", "-354784", "-90569", "28367", "-3878")),
"1"=>array("Seriesname"=>"Female","data"=>array("1656154", "1787564", "1981671", "2108575", "2403438", "2366003", "2301402", "2519874",
"3360596", "3493473", "3050775", "2759560", "2304444", "2426504", "2568938", "1785638",
"1447162", "1005011", "330870", "130632", "21208"))
);
echo NegativeBarChart("container2","Testing","Test",$xcat,$unit,$data1);
?>
<div id="container2" style="min-width: 400px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I advice to familair with exporting options: http://api.highcharts.com/highcharts#exporting.buttons.contextButton.onclick and example http://jsfiddle.net/72E6v/ which introduce how to download chart automatically.
exporting: {
buttons: {
contextButton: {
menuItems: null,
onclick: function() {
this.exportChart();
}
}
}
EDIT:
Automatically downloading http://jsfiddle.net/8uDdb/1/
chart: {
events: {
load: function () {
var ch = this;
setTimeout(function(){
ch.exportChart();
},1);
}
}
},
I want to take print out of a webpage. I have written code for this and this work.The code is:
function printPage(){
var tableData = '<table border="1">'+document.getElementsByTagName('table')[0].innerHTML+'</table>';
var data = '<button onclick="window.print()">Print this page</button><br/>'+tableData;
myWindow=window.open('','','width=500,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
};
But I don't want 'Print this page' button in print out.
You can use the #media css style method:
#media print {
/* css here to take out the "print this */
}
This will only apply the css styles when you print.
For example, you can give your button a class, say class="printbtn"
then:
#media print {
.printbtn { display: none; }
}
Simply use css for print defined area as....
<style type="text/css">
#printit { display: block; }
#media print
{
#dont-printit { display: none; }
#printit { display: block; }
}
</style>
and use <div id="printit"> to print the part of web area......
I use the following jquery code to load a page...
$(function() {
$('#stats').load('statsto.php');
var visibleInterval = 60000;
var invisibleInterval = 120000;
$(function() {
setTimer();
$(document).bind('visibilitychange'), function() {
clearTimeout(timer);
setTimer();
};
});
function displayStats() {
$('#stats').load('statsto.php');
$.ajaxSetup({ cache: false });
}
function setTimer() {
timer = setInterval(displayStats, (document.hidden) ? invisibleInterval : visibleInterval);
}
});
and here is the style from statsto.php...
body {
font-family: Verdana;
font-size: 7px;
color: #FFFFFF;
background-color: #000000;
background-image: url("grad.png");
}
But the background image is not showing in internet explorer. I have tried using background: black url("grad.png"); but that also doesn't work. I have also tried including the style in the same page as the JQuery code, but still no luck.
Hmm.. Your issue may be with the .load() function itself (in Internet Explorer). I seem to remember encountering an issue with that a while back...
Try this
$.get('statso.php', function() {
$('#stats').html();
});
Is there a way that I can change a css style sheet's data from a html form and php and/or JQuery. So if I have the following
widths.css
#main #section1 {
width: 25%;
}
#main #section2 {
width: 50%;
}
#main #section3 {
width: 25%;
}
So I want to have 3 text boxes S1, S2 and S3 and then a user can place values into each text box. It will check they add up to 100% or less and then it will write them to the css in place of 25%, 50% and 25%. How would I achieve this using php and/or JQuery.
Thanks
well there is a dirty but solution to this. use php to write javascript to the the html possibly after ending of body tag.
so the code goes like this
..
...
</body>
<?php echo <<< code
<script type="text/javascript">
document.getElementById("section1").style.width="$_POST['s1']";
// and then for each section u can do this
code;
?>
you will have to set the CSS dynamically on the page it self. Once the user entered the data, you can use little bit of AJAX to change the styles. So something like below would be your PHP and styles on the page. if you want this to be a permenant change make sure to put the settings in a DB against the user's profile. This can be added to your AJAX script as well.
<style type="text/css">
#main #section1 {
width: <?php echo $s1; ?>%;
}
#main #section2 {
width: <?php echo $s2; ?>%;
}
#main #section3 {
width: <?php echo $s3; ?>%;
}
</style>
HTH
You can use the jQuery addClass() to add a specific CSS class with the style you require.
To use PHP, you could use CSS internally on the page:
<style type="text/css">
<?php echo "width: 100px;" //for example ?>
</style>
But I wouldn't necessarily recommend that.
something basic but which should work
$(".validate").click(function(){
//I've assumed your text inputs were children of an element with id section$i
var w1 = Number($("#section1 input").val());
var w2 = Number($("#section2 input").val());
var w3 = Number($("#section3 input").val());
if(w1+w2+w3 == 100){
//here you change css rules for #section$i elements
$("#section1").css("width",w1+"%")
$("#section2").css("width",w2+"%")
$("#section3").css("width",w3+"%")
}
else{
alert("sum of values must equals 100%")
}
});
assuming that you have a clickable area with class validate
You can use this script i just made for you:
var merge = function(objectCollections){
var array = new Array();
foreach(objectCollections,function(objectCollection){
foreach(objectCollection,function(object){
array.push(object);
});
});
return array;
}
var foreach = function(object,loop){
for (var key in object) {
if (object.hasOwnProperty(key)) {
loop(object[key],key);
}
}
}
var changeCSS =function(value){
var links = document.getElementsByTagName('link');
var styles = document.getElementsByTagName('style');
var sheets = merge([links,styles]);
var rules = value.split(/[(\ *{)(\})]/g);
for(var i in sheets){
if(typeof sheets[i] == 'object'){
var sheet = sheets[i].sheet ? sheets[i].sheet : sheets[i].styleSheet;
for(var j in sheet.cssRules){
if(typeof sheet.cssRules[j].selectorText != 'undefined'){
if(sheet.cssRules[j].selectorText == rules[0]){
sheet.cssRules[j].cssText = value;
console.debug(sheet.cssRules[j].cssText);
}
}
}
}
}
}
usage example:
changeCSS('#main #section1 {width: 25%;}');
this will change the css (not set a style on a tag or something)
I have a PHP Image that I use like this:
<img src="image.php">
Sometimes it takes up to 10 seconds to render (there are some heavy dataloads coming in from an API). It works great but there's no way of telling whether anything is happening, I was wondering if there was a way I could show a Loading message while its doing its business, either in Javascript or PHP.
Thanks!
<img src="image.php" style="background: url(loading.gif) no-repeat center center;" />
Where loading.gif could be something like an ajax spinner animation.
I use this technique all the time.
Check out this example
HTML
<ul id="portfolio">
<li class="loading"></li>
<li class="loading"></li>
<li class="loading"></li>
</ul>
Javascript
// DOM ready
$(function () {
// image source
var images = new Array();
images[0] = 'http://farm4.static.flickr.com/3293/2805001285_4164179461_m.jpg';
images[1] = 'http://farm4.static.flickr.com/3103/2801920553_656406f2dd_m.jpg';
images[2] = 'http://farm41.static.flickr.com/3248/2802705514_b7a0ba55c9_m.jpg';
// loop through matching element
$("ul#portfolio li").each(function(index,el){
// new image object
var img = new Image();
// image onload
$(img).load(function () {
// hide first
$(this).css('display','none'); // since .hide() failed in safari
//
$(el).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
$(el).remove();
}).attr('src', images[index]);
});
});
CSS
ul#portfolio { margin:0; padding:0; }
ul#portfolio li { float:left; margin:0 5px 0 0; width:250px; height:250px; list-style:none; }
ul#portfolio li.loading { background: url(http://www.codedigest.com/img/loading.gif) no-repeat center center; width:50px;height:50px}
Check out the DEMO
The Code:
/*
overlay function:
-------------------------
Shows fancy ajax loading message. To remove this message box,
simply call this from your code:
$('#overlay').remove();
*/
function overlay()
{
if (!$('#overlay').is(':visible'))
{
$('<div id="overlay">Working, please wait...</div>').css({
width:'300px',
height: '80px',
//position: 'fixed', /* this is not suppported in IE6 :( */
position: 'absolute',
top: '50%',
left: '50%',
background:'url(images/spinner.gif) no-repeat 50% 50px #999999',
textAlign:'center',
padding:'10px',
border:'12px solid #cccccc',
marginLeft: '-150px',
//marginTop: '-40px',
marginTop: -40 + $(window).scrollTop() + "px",
zIndex:'99',
overflow: 'auto',
color:'#ffffff',
fontWeight:'bold',
fontSize:'17px',
opacity:0.8,
MozBorderRadius:'10px',
WebkitBorderRadius:'10px',
borderRadius:'10px'
}).appendTo($('body'));
}
}
You can edit background: property above to specify loading image too. You need to call overlay() function when you want to show the loading message. Later, you can use $('#overlay').remove(); to remove the loading message any time.
Why not try caching the image object? Would reduce the load? Or is this something that is always updating? Your JavaScript approach would simply be a image pre-loader or handler function that would replace the 'img' with a loading indicator. Look # jQuery for a simple way of doing this.
<img src="image.php">loading...</img>