Random Header image on Page Refresh, CSS jquery javascript? - javascript

I need help finding code for my web page. I have a "customize.css" page which has code for loading the header image. But the header loads on a "header.asp", which is then loaded on the index page "default.asp". I guess my question is what can I use to generate, one of four of the header images I have created, randomly on each page reload/refresh for a header?
This code is from my "customize.css" file. After I get the code, what do I put in the "background-image:" for it to load to the page?
#header {
color: #FFF;
height: 350px;
background-color: transparent;
background-image: WHAT DO I PUT IN HERE?;
background-position: left top;
background-repeat: no-repeat;
}
I have searched the net forum after forum for the past week in search of an answer but have yet to get one. Anyone have any ideas? Thanks

I'd go simple. Define 4 different classes, each with a different background image. In your header ASP script, select one of the 4 classes at random, and output that class into your code. It's simple, the images will cache as they are displayed, and because you avoid JavaScript, it works for 100% of browsers/users. For a small project, it's easy to maintain.
Now, if you get into 100 different background images, you would want to do something different.

If it were me, I would create a separate web service to serve a random image. I would use PHP, but I assume you can do it in ASP).
#header {
background-image: url(/yourWebService.asp);
}
Have the service select one of the images at random, and return it accordingly.

The only way of doing that in the css is by calling a URL that returns the random image. Something like:
#header { color: #FFF; height: 350px; background-color: transparent; background-image: "/loadimage"; background-position: left top; background-repeat: no-repeat; }
But then you must code a service at /loadimage that returns the image.
It will be much more easy change the image at the page load via javascript. Assuming you have the images img0.jpg, img1.jpg, img2.jpg and img3.jpg at the images directory, you could do:
You can do:
<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />

See the random image header of this page
I am using a specify class for change the background-position css property.

Related

How can I display an image on top of a generated heatmap?

I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?
All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :
But I want to display an image on top of the heatmap, so a foreground image instead of a background image.
I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.
To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:
So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:
All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html
Is there any easy way to do this using HTML/CSS/JavaScript?
I don't know heatmap so cannot test this, but from the info given in the question if the placing of a background image works as shown then the placing of a foreground image should be possible.
What we do is style an after pseudo element on #heatmap, give it the correct dimensions, put it above the heatmap element using z-index and give it the required image as its background. The image should then appear to be sitting above the heatmap element - I assume obscuring part of it.
You need to make sure that the heatmap element is positioned so its after pseudo element knows where to position itself in relation.
#heatmap {
width: as you want
height: as you want
background-image: if you still want it to have one
any other styling you want heatmap to have
position: relative;
}
#heatmap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
background-image: url(the image you want to be in the foreground);
background-size: cover; /* or contain depending on what you want */
background-repeat: no-repeat;
background-position: center center; /*or wherever you want it */
}
}

add_image_size crop position not working

I'm trying to hard crop images (315px by 600px) on my custom theme WordPress site so that the left top of the image appears on my main page (and the full image is used on the individual post pages). However, the images still appear centered. In my functions file I am using:
function invadingholland_setup() {
add_theme_support('post-thumbnails');
add_image_size('post-cartoon', 200, 200, array('left', 'top'));
}
add_action('after_setup_theme', 'invadingholland_setup');
...and in my loop I am using:
<div class="post-thumbnail">
<?php the_post_thumbnail('thumbnail-cartoon'); ?>
</div>
... and then this CSS around it:
.post-thumbnail {
margin: 0px 10px 0px 0px;
width: 200px;
height: 200px;
float: left;
text-align: left;
border: 1px;
border-style: solid;
border-color: #000;
}
...and I've tried regenerating all my images. If I play around with the sizes in my add_image_size code I do see a change but noting changes if I put different values into the array. I've also confirmed with my hoster that I have php-gd.
And just to make things even stranger it works as it should on my local test server on my laptop but not on the real site.
I'm stomped as to why it is not working. Am I missing a java script? Is it a wordpress setting? Can anyone help? An example of the problem can be seen here: http://www.invadingholland.com in my top two posts.
Thanks
Try hooking it through a function to the after_setup_theme hook.
function mkwilson_setup_theme() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-cartoon', 200, 200, array('left', 'top') );
}
add_action( 'after_setup_theme', 'mkwilson_setup_theme' );
Also check that you are calling your post thumbnail correctly in the loop.
One More note:
add_image_size('post-cartoon', 200, 200, array('left', 'top'), true);
The true in the end is not necessary because when you have mentioned the array with left and top it means the image will be hard cropped 200px wide and 200px tall
It took a while but I found out what it was. The Photon module that is part of Jetpack was somehow forcing things to crop from the center. As soon as I turned it off the image was cropped from the left as it is supposed to be.

Is there a way to achieve smoother transitions between images using lightbox2?

I'm using Lightbox2: http://lokeshdhakar.com/projects/lightbox2/.
The plugin seems to have been written in a way that produces a 'flash' effect when navigating to a new image in a collection. I believe this is because the old image simply disappears, rather than fading out first or crossfading (this would be ideal) with the new image that is fading in.
For a demo of this flaw, just view the example on the Lightbox2 link above.
Is there a way to add some sort of fade out transition when the user advances to the next image? As a developer rather unskilled in JS, what could I add to the lightbox.js script that would allow me to achieve 100% smooth transitions between images?
I can't work out a way to fade out the image like you suggested, but I think this really helps to avoid the white flash between images.
In the lightbox.css file between lines 43 and 51, simply change the background colour to black, or something similar, basically meaning you'll get a black flash instead of white. If you still want a white border around the image, just add one here (You'll also need to remove lines 59 to 61). So you'll end up with this:
.lb-outerContainer {
position: relative;
background-color: black;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
border: 4px solid white;
}
Also, if you're not happy with the fade in speed, take a look at line 313 in the lightbox.js file.
Specifically on line 316, change ('slow') to a numerical value e.g. (800).
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};

Is it possible to make a see-through window using HTML/JS/CSS?

I need to make a see-through window when user click in a given position of the screen, something like this:
It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.
I have two options:
Use a plugin to take screenshots (like these).
Create 4 grayed boxes.
I don't like none of these options for different reasons:
The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
Manage these boxes may be complex in a future and browser compatibility may be an issue.
So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.
I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:
Create a div in the location you want, set height and width (for window effect);
position the div in the place you wish and then just add outline to it.
body {
background-image: url(http://lorempixel.com/800/800/nature/5/);
background-size: cover;
}
.windowDiv {
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 300px;
outline: 4000px solid rgba(0, 0, 0, 0.5);
}
<div class="windowDiv"></div>
EDIT: use background-color rather than opacity.
2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.

CSS: Making Background Image fade slowly

I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.
I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.
The sample CSS code that I have is:
.acceptValue {
background-image: url('../../images/accept.gif');
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
}
I want the above CSS property to be applied for 'n' seconds and then it should disappear.
Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.
Please let me know.

Categories

Resources