I've been trying to display a different logo on my website depending on the date (to add a christmas logo that will automatically be displayed in december).
Here's what I've got for now:
<img class="logo" id="global_logo" style="height:56%; margin-top:12px;" src="">
<script>
function initLogo(){
var GlobalDate = date.getMonth()+1;
var GlobalLogo = document.getElementById("global_logo");
if (GlobalDate == 12) {
GlobalLogo.src = "xmas_mgmods-animated.gif"
}else{
GlobalLogo.src = "logo1.png"
}
/**/
alert('Script working');
}
initLogo();
</script>
I've got two problems: first, the logo is not showing up at all (no logo is)
Second: I want to know if I can set the script to also change the style applied for each logo (the style="height:56%; margin-top:12px;"is only needed for the gif, and not for the png).
I've tried to add a line instead of changing the source depending of the ID:
function initLogo(){
var GlobalDate = date.getMonth()+1;
var content = document.getElementById("global_logo");
var GlobalIcon = "";
if (GlobalDate == 12) {
html += "<img class='logo' src='logo1.png'>";
}else{
html += "<img class='logo' style='height:56%; margin-top:12px;' src='xmas_mgmods-animated.gif'>";
}
content.innerHTML += GlobalIcon;
alert('Script working');
}
It doesn't work...
You were using date without having it defined anywhere, assuming you copied it from somewhere else; it was supposed to be an instance of Date.
function initLogo(){
const date = new Date();
var GlobalDate = date.getMonth()+1;
var GlobalLogo = document.getElementById("global_logo");
if(GlobalDate == 12) {
GlobalLogo.innerHTML = `<img class="logo" src="xmas_mgmods-animated.gif" style="height:56%; margin-top:12px;">`;
}
else {
GlobalLogo.innerHTML = `<img class="logo" src="logo1.png">`;
}
}
initLogo();
<div id="global_logo"></div>
Related
What is the best way to change images based on the last 3 characters on the URL?
I have 3 pictures but when click - needs to stay as the selected image,
but the page refreshes and goes back to original image
<script type="text/javascript">
function image_swap() {
var URLChar = $(location).attr('href').charAt($(location).attr('href').length - 3)
if (URLChar("NSW"); image.src = "../MCFILES/NSW1.jpg"
if (URLChar("VIC"); image.src = "../MCFILES/VIC1.jpg"
if (URLChar("QLD"); image.src = "../MCFILES/QLD1.jpg"
} else {
image.src = "../MCFILES/NSW1.jpg"
}
}
function newDocNSW() {
var CurrentURL = window.location.href;
var OriginalURL = CurrentURL.replace(/\&.*/, '');
window.location.assign(OriginalURL + "&St=NSW");
}
function newDocQLD() {
var CurrentURL = window.location.href;
var OriginalURL = CurrentURL.replace(/\&.*/, '');
window.location.assign(OriginalURL + "&St=QLD");
}
function newDocVIC() {
var CurrentURL = window.location.href;
var OriginalURL = CurrentURL.replace(/\&.*/, '');
window.location.assign(OriginalURL + "&St=VIC");
}
</script>
<body>
This is the images i need to change when on hover and when click
runs another script to change URL.
When the page refreshes i need the option to have change picture
when page refreshes to change the URL
<img id="image_swap" src="../MCFILES/NSWO.jpg"
onclick="newDocNSW()"
onmouseover="this.src='../MCFILES/NSW1.jpg';"
onmouseout="this.src='../MCFILES/NSWO.jpg';">
<img id="image_swap" src="../MCFILES/QLDO.jpg"
onclick="newDocQLD()"
onmouseover="this.src='../MCFILES/QLD1.jpg';"
onmouseout="this.src='../MCFILES/QLDO.jpg';">
<img id="image_swap" src="../MCFILES/VICO.jpg"
onclick="newDocVIC()"
onmouseover="this.src='../MCFILES/VIC1.jpg';"
onmouseout="this.src='../MCFILES/VICO.jpg';">
</body>
</html>
This line will only extract a single character
var URLChar = $(location).attr('href').charAt($(location).attr('href').length - 3 )
If you want the last three characters then use this:
var URLChar = $(location).attr('href').substring($(location).attr('href').length - 3, $(location).attr('href').length);
A much simpler plain/vanilla JavaScript approach would be:
var URLChar = location.href.substring(location.href.length - 3, location.href.length);
Your if conditions are also syntactically incorrect. Here's how it should be:
if (URLChar === "NSW"){
image.src = "../MCFILES/NSW1.jpg";
} else if (URLChar === "VIC"){
image.src = "../MCFILES/VIC1.jpg";
} else if (URLChar === "QLD"){
image.src = "../MCFILES/QLD1.jpg";
} else {
image.src = "../MCFILES/NSW1.jpg";
}
I think this should do if I'm understanding the problem correctly.
I have a sharepoint webpart I am printing using the script below.
The problem is I need to add a a picture to the header of the page it prints that is located at an address. I am trying to modify this but I don't have alot of javascript experience not sure what the syntax is.
Also I would like to specify the image to a specific size and center it is that possible?
I am aware the src is set to "url" I just don't want to share my actual link on here.
<center>
<input onclick="javascript:void(PrintWebPart())" type="button" value="Print Proof of Pricing"/>
</center>
<script language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "ctl00_ctl34_g_db6615a7_4c3b_4a14_9bbc_43ce9d63c24d_FormControl0";
var d= new Date();
var elem = document.createElement("img");
elem.setAttribute("src", "url");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Tag");
elem.setAttribute("align", "middle");
//Function to print Web Part
function PrintWebPart()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
//Create html to print in new window
var PrintingHTML = '<HTML>\n<HEAD>\n';
//Take data from Head Tag
if (document.getElementsByTagName != null)
{
var HeadData= document.getElementsByTagName("HEAD");
if (HeadData.length > 0)
PrintingHTML += HeadData[0].innerHTML;
}
PrintingHTML += '\n</HEAD>\n<BODY>\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML +='<div id="imageDiv">\n</div>\n'
PrintingHTML += WebPartData.innerHTML;
PrintingHTML += "Pricing Date: " +d;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n</BODY>\n</HTML>';
//Open new window to print
if (bolWebPartFound)
{
var PrintingWindow = window.open("","View Proof of Pricing",
"toolbar,width=800,height=600,scrollbars,resizable,menubar");
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
PrintingWindow.document.getElementById("imageDiv").appendChild(elem);
// Open Print Window
}
}
</script>
I believe you can set the image as background to "imageDiv" as
document.getElementById("imageDiv").style["background"]="url(***YOUR_URL***) no-repeat center center";
Note: You do need to give a height to the container as per your need, say
document.getElementById("imageDiv").style["min-height"]="300px";
Below is my script which is suppose to show the user a greeting message based on their local time. I got the script from another stack overflow answer, but am having trouble with replacing the image src. I get the following error
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8888/neil-wp/imgurl%20+%20second.jpg
$(document).ready(function () {
datetoday = new Date(); // create new Date()
timenow = datetoday.getTime(); // grabbing the time it is now
datetoday.setTime(timenow); // setting the time now to datetoday variable
hournow = datetoday.getHours(); //the hour it is
imgselector = $('#greeting-img')
imgpath = 'wp-content/themes/neil/img/'
if (hournow >= 16.5) { // if it is after 4:30pm
imgselector.attr("src","imgpath + goodevening.gif");
}
else if (hournow >= 12) { // if it is after 12pm
imgselector.attr("src","imgpath + goodafternoon.gif");
}
else if (hournow >= 0) { // if it is after midnight
imgselector.attr("src","imgpath + goodmorning.gif");
}
});
// Wait for window load
$(window).load(function() {
$(".greeting").delay(2000).fadeOut("200");
});
Here is my HTML
<div class="greeting">
<div class="greeting-inner">
<img id="greeting-img" src="">
</div>
</div>
as imgpath is variable, use:
imgselector.attr("src",imgpath + "goodmorning.gif");
I'm in the process of making a Christmas calendar, and I have an overlay which should open if the date is ex 1.12.13, otherwise it should alert the amount of days until it's available. I've tried a lot of different things but can't get it to work.
Here is what should be displayed if date is something:
<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
<img src="images/onecom.png" alt="onecom" width="496" height="496" />
<div class="details">
<h2>December 1st</h2>
<p>
Some script that does something
</p>
</div>
</div>
What I have tried
function dooropen(door) {
today=new Date();
daynow=today.getDate();
monthnow=today.getMonth();
if (monthnow!=11 && monthnow!=0) {
alert("This feature opens in December. Please come back then.");
return false;
}
if (daynow==door-1) {
alert("Come back tomorrow to see what's behind that door!");
return false;
}
if (door>daynow) {
alert("You\'ll have to wait "+(door-daynow)+" days before that door's available!");
return false;
}
}
This may work, as i can see you may have some different div for each day of the month since you are using numeric id id="photo1">, so you can try to get the dates :
var today = new Date();
var dd = today.getDate() + 1;
var mm = today.getMonth() + 1;
after that get the main parent of all divs and put it in a jquery object:
var $number_of_objects = $("#parent_div img");
once you have all those you need to put them inside a for loop to count them and match to later exit the function:
for (var i = 1; i < $number_of_objects.length; i++) {
console.log("value of i " + i);
if(i == dd){
console.log(' break');
break;
}
$("#apple img[rel='#photo"+i+"']").overlay({
effect: 'apple'
});
}
it should give you a good start point to improve it and add more feature to the script :)
happy coding
<script>
var date = new Date(),
year = date.getYear(),
month = date.getMonth()+1,
day = date.getDate();
if(day == 13){ // today is 13
code
}else{
code
}
</script>
Just show the element you want at the end of your method..
$('#photo1').show();
I have a pure html+JavaScript slideshow I am making. The slideshow is in a sidebar of the website that is loaded with php for each page that has the slideshow sidebar. The only page without the sidebar is the main page.
The slide show is working fine. However, understandably, each time I go to a new page with the sidebar, the slideshow starts over. Makes sense since the javascript reloads with each new page.
I would like to find some way to have the slideshow remember its place so that when I go to a new page the slide show just continues where it left off on the previous page. I can only think of two solutions, one seem brute force, and one I don't know how to do:
Write the current image number to a file and read it each time the
slideshow loads.
Somehow use ajax, but I haven't learned to use ajax
yet (would it work?).
Any suggestions? Oh, and please I'm learning javascript, jQuery and ajax are next, but...
Here is my code:
simpleslideshow.html:
<html>
initializeSlideShow();
<table width="100">
<tr>
<td align="left"> <div id="previous"> Previous</div></td>
<td align="right"> <div id="next">Next</div></td>
<td align="right"> <div id="auto">auto</div></td>
<td align="right"> <div id="stop">stop</div></td>
</tr>
</table>
<img src="" id="slideshow-image" width="400px" height="auto" style="display:block;"/>
simpleslideshow.js:
var inaterval_ID = 0;
var image_number = 0;
var num_images = images_with_captions.length;
function change_image(increment){
image_number = image_number + increment;
image_number = (image_number + num_images) % num_images;
var string = images_with_captions[image_number].source;
document.getElementById("slideshow-image").src = string;
}
function initializeSlideShow() {
//var string = images_with_captions[0].source;
//document.getElementById("slideshow-image").src = string;
auto();
}
function auto() {
interval_ID = setInterval("change_image(1)", 1000);
}
function stop() {
clearInterval(interval_ID);
}
image_caption_list.js:
var images_with_captions = new Array(
{
source: "http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-435833.jpg",
caption: "flower 1"
},
{
source: "http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg",
caption: "flower 2"
},
{
source: "http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg",
caption: "flower 3"
}
);
Edit: I can't get a jsfiddle to work. But here is a live version that may or may not be up for a while:
You can save the current slide value to either a cookie or localStorage each time you change to a new slide and then when you start up the slideshow on a new page, you can read the previous slide value and start from that slide number.
Here's reading the previous slide number:
function initializeSlideShow() {
// get prior slideshow num
var lastSlideNum = +readCookie("lastSlideNum");
// if there was a prior slideshow num, set that as the last one we used
if (lastSlideNum) {
image_number = lastSlideNum;
}
auto();
}
Here's saving the slideshow number each time it changes:
function change_image(increment){
image_number = (image_number + increment) % num_images;
// remember what slide we're on for subsequent page loads
createCookie("lastSlideNum", image_number);
var string = images_with_captions[image_number].source;
document.getElementById("slideshow-image").src = string;
}
And, here's a simple cookie library:
// createCookie()
// name and value are strings
// days is the number of days until cookie expiration
// path is optional and should start with a leading "/"
// and can limit which pages on your site can
// read the cookie.
// By default, all pages on the site can read
// the cookie if path is not specified
function createCookie(name, value, days, path) {
var date, expires = "";
path = path || "/";
if (days) {
date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=" + path;
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
A localStorage implementation (which would not remember the slide in IE versions before IE8) would look like this:
function initializeSlideShow() {
// get prior slideshow num
var lastSlideNum;
// localStorage requires IE8 or newer
// if no localStorage, then we just don't remember the previous slide number
if (window.localStorage) {
lastSlideNum = +localStorage["lastSlideNum"];
// if there was a prior slideshow num, set that as the last one we used
if (lastSlideNum) {
image_number = lastSlideNum;
}
auto();
}
Here's saving the slideshow number each time it changes:
function change_image(increment){
image_number = (image_number + increment) % num_images;
// remember what slide we're on for subsequent page loads
if (window.localStorage) {
localStorage["lastSlideNum"] = image_number;
}
var string = images_with_captions[image_number].source;
document.getElementById("slideshow-image").src = string;
}