I'm trying to get Fancybox (http://fancybox.net/howto) to work for the dailyimg div (see the HTML snippet below) to enlarge the image. The div contains a single image that is rotated daily (see the JavaScript that follows). I'm not sure how to get the Fancybox working. Any help would be much appreciated. -M
<div id="emma2011_left">
<h2>Image of the Day</h2>
<div id="dImg">
<a id="inline" href="#dailyimg"><div id="dailyimg" class="feature"></div></a>
<div id="title" class="feature"></div>
<div id="caption" class="feature"></div>
</div>
</div>
<script type="text/javascript">
oImages = [
{time: '2011-8-28', img: 'images/rotation_pics/test_pic.jpg', title: "testpic title", caption: "my caption" },
time: '2011-8-29', img: 'images/rotation_pics/test_pic2.jpg', title: "testpic title", caption: "my caption" }
];
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var today = year + "-" + month + "-" + day;
window.onload = function(){
for(var i in oImages){
if(oImages[i].time == today) oTodayImage = oImages[i];
}
oImg = document.createElement("img");
oImg.setAttribute("title", oTodayImage.title);
oImg.setAttribute("src", oTodayImage.img);
var e = document.getElementById("dailyimg");
e.appendChild(oImg);
var title=document.createTextNode(oTodayImage.title);
var f = document.getElementById("title");
f.appendChild(title);
var capt=document.createTextNode(oTodayImage.caption);
var g = document.getElementById("caption");
g.appendChild(capt);
$("a#inline").fancybox({
'overlayShow': false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
};
</script>
Only basic debugging is required to fix this problem. If you use Internet Explorer you can press F12 and then the "Console" tab to see javascript errors. If you use Firefox install the "Firebug" add-on and click the little bug icon to get started.
The 13th line of code is missing a brace - put it in front of the second array element just before the word "time:" like "{time:".
The last line of code before the </script> tag has an extra semi-colon and should be "}" instead of "};".
Later: Full code added below. I recommend trying to get this working using the exact syntax and file versions below, only then should you try to incorporate into your code. Sorry about the HTML formatting, best I could do in the stackoverflow editor. For the sample your root folder (2 files, 1 folder) for the sample should have three items in it and look like this:
/default.htm
/jquery-1.4.4.min.js
/fancybox/[all the remaining files should be in this folder]
<html><head>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript">
oImages = [{ time: '2011-8-28', img: 'images/rotation_pics/test_pic.jpg', title: "testpic title", caption: "my caption" }, { time: '2011-8-29', img: 'images/rotation_pics/test_pic2.jpg', title: "testpic title", caption: "my caption" }
];
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var today = year + "-" + month + "-" + day;
window.onload = function () {
for (var i in oImages) {
if (oImages[i].time == today) oTodayImage = oImages[i];
}
oImg = document.createElement("img");
oImg.setAttribute("title", oTodayImage.title);
oImg.setAttribute("src", oTodayImage.img);
var e = document.getElementById("dailyimg");
e.appendChild(oImg);
var title = document.createTextNode(oTodayImage.title);
var f = document.getElementById("title");
f.appendChild(title);
var capt = document.createTextNode(oTodayImage.caption);
var g = document.getElementById("caption");
g.appendChild(capt);
$("a#inline").fancybox({
'overlayShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
}
</script>
</head>
<body>
<div id="emma2011_left">
<h2>
Image of the Day</h2>
<div id="dImg">
<a id="inline" href="#dailyimg">
<div id="dailyimg" class="feature">
</div>
</a>
<div id="title" class="feature">
</div>
<div id="caption" class="feature">
</div>
</div>
</div>
</body>
</html>
Related
I am working with a script to change images in an HTML site when the user clicks on it. the script works a treat to have this kind of slideshow without the menu.
but now I want (from a design point of view) to have the image number and some image description underneath the image and they should (of course) as well change when somebody clicks to the image.
here is the script I used so far for having the image change. can somebody quickly help me with the text changing? ideally, it would get the text out of a list of string variables I define or it could also work to read the text from an external TXT file etc.
here is the code I use so far!
<div id="content">
<img src= "testbild01.jpg" width="100%" height="auto" style="float:left" id="imageisabutton" />
<script type="text/javascript">
var images = ['testbild01.jpg', 'testbild02.jpg', 'testbild02.jpg'],
i = 0;
// preload
for (var j=images.length; j--;) {
var img = new Image();
img.src = images[j];
}
// event handler
document.getElementById('imageisabutton').addEventListener('click', function() {
this.src = images[i >= images.length - 1 ? i = 0 : ++i];
}, false);
</script>
Add another array for description, such as
var descriptions = ['description 1', 'description 2', 'description 3'],
Add a new element for the description, below the image, such as
<div id="mydescription"></div>
Add the following code after this.src = ...
document.getElementById('mydescription').innerHTML = i + ' ' + descriptions[i];
like this it works! thx
<div id="content">
<center>
<c id='numbers'>image 1/3</c>
<br />
<img src= "testbild01.jpg" width="100%" height="auto" style="float:left" id="myButton" />
<script type="text/javascript">
var images = [
'testbild01.jpg',
'testbild02.jpg',
'testbild03.jpg'
],
i = 0;
var mydescriptions = [
'text 1,
'text 2,
'text 2'
],
i = 0;
// preload
for (var j=images.length; j--;) {
var img = new Image();
img.src = images[j];
}
// event handler
document.getElementById('myButton').addEventListener('click', function() {
this.src =
images[i >= images.length - 1 ? i = 0 : ++i];
document.getElementById('mydescriptions').innerHTML = mydescriptions[i];
document.getElementById('numbers').innerHTML = 'image ' + (i+1) + '/' + (j+4);
}, false);
</script>
<br />
<c id='mydescriptions'>click image to move through slideshow</c>
</center>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
The goal I am trying to achieve is to make it so that when I click on a user and it is able to see only their tweets.
For some reason I keep getting these weird characters when I run the code. Here is a photo of the weird characters in chrome dev tools:
The characters I am referring to are the ones after div class="
I believe it has something to do with this line:
var $tweet = $('<div class=“user" data-user="' + tweet.user + '"></div>');
Here is my code:
<script>
$(document).ready(function(){
var globalVar;
var makeTweets = function(){
var $body = $('.tweet-display');
$body.html('');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class=“user" data-user="' + tweet.user + '"></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
if (globalVar === undefined) {
$tweet.appendTo($body);
} else if(globalVar===tweet.user){
$tweet.appendTo($body);
}
index -= 1;
}
}
makeTweets();
setInterval(function() {
makeTweets();
}, 1000);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery.js"></script>
<script src="data_generator.js"></script>
</head>
<body>
<div class="navbar">
<div id="navbar-text">
Twittler Project
<!-- <div class="button new-tweet">New Tweet</div>
<div class="button refresh">Refresh</div>
<div class="button ">Button</div> -->
</div>
<div id="twittler-bird">
<img src="http://i.imgur.com/zuTfb54.png" title="source: imgur.com" style="height:100px;" />
</div>
</div>
<!-- <div class="tweet-inside">test</div> -->
<div class="tweet-container">
<div class="tweet-display">
</div>
</div>
<div class="sidebar-right">
<div class="button tweet-new"></div>
<div class="button"></div>
</div>
Just in case this is needed, here is some javascript that it is paired with and linked with:
// set up data structures
window.streams = {};
streams.home = [];
streams.users = {};
streams.users.shawndrost = [];
streams.users.sharksforcheap = [];
streams.users.mracus = [];
streams.users.douglascalhoun = [];
window.users = Object.keys(streams.users);
// utility function for adding tweets to our data structures
var addTweet = function(newTweet){
var username = newTweet.user;
streams.users[username].push(newTweet);
streams.home.push(newTweet);
};
// utility function
var randomElement = function(array){
var randomIndex = Math.floor(Math.random() * array.length);
return array[randomIndex];
};
// random tweet generator
var opening = ['just', '', '', '', '', 'ask me how i', 'completely', 'nearly', 'productively', 'efficiently', 'last night i', 'the president', 'that wizard', 'a ninja', 'a seedy old man'];
var verbs = ['drank', 'drunk', 'deployed', 'got', 'developed', 'built', 'invented', 'experienced', 'fought off', 'hardened', 'enjoyed', 'developed', 'consumed', 'debunked', 'drugged', 'doped', 'made', 'wrote', 'saw'];
var objects = ['my', 'your', 'the', 'a', 'my', 'an entire', 'this', 'that', 'the', 'the big', 'a new form of'];
var nouns = ['cat', 'koolaid', 'system', 'city', 'worm', 'cloud', 'potato', 'money', 'way of life', 'belief system', 'security system', 'bad decision', 'future', 'life', 'pony', 'mind'];
var tags = ['#techlife', '#burningman', '#sf', 'but only i know how', 'for real', '#sxsw', '#ballin', '#omg', '#yolo', '#magic', '', '', '', ''];
var randomMessage = function(){
return [randomElement(opening), randomElement(verbs), randomElement(objects), randomElement(nouns), randomElement(tags)].join(' ');
};
// generate random tweets on a random schedule
var generateRandomTweet = function(){
var tweet = {};
tweet.user = randomElement(users);
tweet.message = randomMessage();
tweet.created_at = new Date();
addTweet(tweet);
};
for(var i = 0; i < 10; i++){
generateRandomTweet();
}
var scheduleNextTweet = function(){
generateRandomTweet();
setTimeout(scheduleNextTweet, Math.random() * 1500);
};
scheduleNextTweet();
// utility function for letting students add "write a tweet" functionality
// (note: not used by the rest of this file.)
var writeTweet = function(message){
if(!visitor){
throw new Error('set the global visitor property!');
}
var tweet = {};
tweet.user = visitor;
tweet.message = message;
addTweet(tweet);
};
You have a wrong quotation mark (“ instead of ") in this line before user:
var $tweet = $('<div class=“user" data-user="' + tweet.user + '"></div>');
I think this might be the problem.
UTF8 is being treated as Ascii or Latin1, and it is probably that inverted double-quote in class=“user", which is unicode character 201c, which will encode into three bytes in utf-8, and if you decode that in latin1 (or a relative) gives you strange characters.
I need to update my Header (h1) according to the current time. For example at 7:45am to 8:00am 'Current Event' should change to 'Event1', at 8:00am to 8:15am it should change to 'Event2' and so on.
<html>
<head>
<title>ShriTeq 2015</title>
</head>
<body>
<center>
<img src = "image.png" width = "25%" height = "auto"/>
<h1 id = "ce" style="font-weight:lighter; font-family: 'Raleway', sans-serif; font-size:70px;">Current Event</h1>
</center>
</body>
</html>
Something like that ?
// All events :
// Event 1 start 2015-10-09 at 00:00:00 to 06:00:00, Event 2 from 06:00:01 to 12:00:00. If out of dates, Default message is shown.
var eventTimes = [
{
name: "Event 1",
from: new Date('2015-10-09T00:00:00').getTime(),
to: new Date('2015-10-09T06:00:00').getTime()
},
{
name: "Event 2",
from: new Date('2015-10-09T06:00:01').getTime(),
to: new Date('2015-10-09T12:00:00').getTime()
}
]
function updateEventName() {
var now = new Date().getTime();
var name = "Default message";
for (var i = 0; i < eventTimes.length; i++) {
if (now >= eventTimes[i].from && now <= eventTimes[i].to) {
name = eventTimes[i].name;
break;
}
}
document.getElementById("ce").innerHTML = name;
}
// Execute the function every second
setInterval(updateEventName, 1000);
updateEventName();
<!--<html>
<head>
<title>ShriTeq 2015</title>
</head>
<body> -->
<center>
<img alt = 'Missing Img' src = "image.png" width = "25%" height = "auto"/>
<h1 id = "ce" style="font-weight:lighter; font-family: 'Raleway', sans-serif; font-size:70px;">Current Event</h1>
</center>
<!--
</body>
</html>
-->
Try;
function headerChange(){
var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if(h == 7 && m>=45){
$("#ce").html("Event1");
}else if(h == 8 && m<=15){
$("#ce").html("Event2");
}
}
headerChange();
setTimeout(headerChange, 1000);
Hope this helps
I am making a simple Goal-traking completely offline HTML5 app using localStorage.
The problem that I am facing is, that, Retrieving JSON data is working completely fine in a separate file but not when put together as a part of a bigger system.
I would have kept it in a seperate file and would have stopped worrying about it, but I can't do that because of same-origin policy.
Here is the code that's working fine as a seperate file:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
window.onload = function(){
// setup
var goal = "CN";
var date2 = new Date();
var diff = 0;
var active = true;http://jsfiddle.net/#save
var data = '{"goals": [{"goal":"' + goal + '","duedate":"'
+ date2 + '","noofdays":"' + diff + '","active":"'
+ active + '"}]}';
localStorage.setItem("goals",data);
// test
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr);
for (i=0; i<goalsObj.goals.length; i++) {
if(goal==goalsObj.goals[i].goal) {
document.body.appendChild(document.createTextNode(
"The goal is " + JSON.stringify(goalsObj.goals[i])));
}
}
}
</script>
</BODY>
</HTML>
and now here is the code that is supposed to work, as all of it's different parts are working fine, all the syntax is correct, but still it is giving absolutely no output:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
function save()
{
//Get data from the form
var goal = document.getElementById("goal").value; //Get 'goal' from form
var date2 = document.getElementById("date2").value; //Get 'duedate' from the form
var active = document.getElementById("active").value; //Get 'active' from form
//Calculating the number of days remaining
var date1 = new Date(); //Current Date and Time
var dd = date1.getDate(); //Current Date
var mm = date1.getMonth()+1; //January is 0!
var yyyy = date1.getFullYear(); //Current Year
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} date1 = mm+'/'+dd+'/'+yyyy; //Parsing the date to the required format
var diff = Math.floor(( Date.parse(date2) - Date.parse(date1) ) / 86400000); //Calculate no. of days remaining
if (localStorage.getItem('gcount') === null) {
localStorage.setItem('gcount', "1");
var data = '{"goals":[{"goal":"'+goal+'","duedate":"'+date2+'","noofdays":"'+diff+'","active":"'+active+'"}]}';
localStorage.setItem("goals",data);
//document.getElementById("temp").innerHTML="first";
}
else{
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr);
var goal = "CN"
var data = { "goal": goal, "duedate": date2, "noofdays": diff, "active": active};
goalsObj.goals.push(data);
localStorage.setItem("goals", JSON.stringify(goalsObj));
}
}
function load(){
/* // setup
var goal = "CN";
var date2 = new Date();
var diff = 0;
var active = true;http://jsfiddle.net/#save
var data = '{"goals": [{"goal":"' + goal + '","duedate":"'
+ date2 + '","noofdays":"' + diff + '","active":"'
+ active + '"}]}';
localStorage.setItem("goals",data); */
// test
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr);
for (i=0; i<goalsObj.goals.length; i++) {
if(goal==goalsObj.goals[i].goal) {
document.getElementById("duedate").innerHTML=goalsObj.goals[i].duedate;
document.getElementById("noofdays").innerHTML=goalsObj.goals[i].noofdays;
document.getElementById("active").innerHTML=goalsObj.goals[i].active;
// document.body.appendChild(document.createTextNode("The goal is " + JSON.stringify(goalsObj.goals[i])));
}
}
}
</script>
<form name="input" onsubmit="save(); return false;">
<label>Goal: </label> <input type="text" name="goal" id="goal"><br>
<label>Due Date: </label> <input type="date" name="date2" id="date2"></span><br>
<label>Active: </label><br>
<input type="radio" name="active" id="active" value="Future">Future <br>
<input type="radio" name="active" id="active" value="Present">Present <br> <br>
<!-- Submit button to submit the form -->
<input type="submit" value="submit">
</form>
<form name="load" onsubmit="load(); return false;">
<label>Goal: </label> <input type="text" name="goal" id="goal"><br>
<input type="submit" value="submit">
<p id="temp"></p>
<p id="temp1"></p>
<p id="temp2"></p>
<p id="temp3"></p>
<p id="temp4"></p>
<p id="temp5"></p>
<p id="temp6"></p>
<p id="temp7"></p>
<p id="temp8"></p>
<p id="duedate"></p>
<p id="noofdays"></p>
<p id="active"></p>
</BODY>
</HTML>
I am getting the error that object is not a function. I have tried all other similar questions on StackOverflow and nothing worked.
What's wrong? What should I do?
You are using the same id for multiple different elements.
Also, try using IndexedDB instead of localStorage.
I want a button to be visible on given date and month with javascript.
Javascript:
<script type="text/javascript">
function today()
{
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
if(month==1 && day==1)
{
document.getElementById('xx').style.visibility='visible';
}
else
{
document.getElementById('xx').style.visibility='hidden';
}
}
</script>
HTML:
<input type="image" SRC="/Patankar/PNH/images/click_anim.gif" id="xx" id="return1" onClick='today();' ALT="Submit Form" style="visibility:hidden;display:none" >
I tried this code but nothing happened. Please tell me my mistake.
You have two id tags on one element:
id="xx" id="return1"
Remove one of them. From your code example, you should remove id="return1".