I am having a wierd problem with this code... It is working fine on my PC, but on my iPhone the time is +2 hours... Can someone please have a look at my code example here...
I have been trying for hours to get it working, but everything I try seems to end up in the same way...
<html lang="en">
<head>
<title>Value is right on my PC, but not on my iPhone...?</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript">
window.onload = function () { date() }, setInterval(function () { date() }, 1000);
window.onload = function () { calculateTimlon() }, setInterval(function () { calculateTimlon() }, 1000);
var secondsDifference;
var minutesDifference;
var hoursDifference;
var totalTimeDifference;
var startTime;
var timeRightNow;
function date() {
timeRightNow = new Date();
$('#MyDateInput').datebox({ 'overrideDateFormat': '%A %d-%B-%Y' });
$('#MyTimeInput').datebox({ 'overrideDateFormat': '%H:%M:%S' });
startTime = new Date($('#MyDateInput').datebox('callFormat', '%Y-%m-%d', $('#MyDateInput').datebox('getTheDate')) + "T" + $('#MyTimeInput').datebox('callFormat', '%H:%M:%S', $('#MyTimeInput').datebox('getTheDate')));
totalTimeDifference = Math.abs(new Date(timeRightNow) - new Date(startTime));
secondsDifference = Math.floor(totalTimeDifference / 1000);
minutesDifference = Math.floor(secondsDifference / 60);
secondsDifference = secondsDifference % 60;
hoursDifference = Math.floor(minutesDifference / 60);
minutesDifference = minutesDifference % 60;
$("#hoursValue").html(hoursDifference);
$("#minutesValue").html(minutesDifference);
$("#secondsValue").html(secondsDifference);
$("#MyTimeValue").html(startTime);
$("#timeRightNowValue").html(timeRightNow);
}
function calculateTimlon() {
var timlon = 100;
var skatt = 0;
var semersat = 0;
var lonForeSkatt = ((semersat / 100) + 1) * timlon;
var timskatt = (lonForeSkatt * (skatt / 100));
var lonEfterSkatt = lonForeSkatt - timskatt;
var minutlonEfterSkatt = lonEfterSkatt / 60;
var sekundlonEfterSkatt = minutlonEfterSkatt / 60;
var minutlonForeSkatt = lonForeSkatt / 60;
var sekundlonForeSkatt = minutlonForeSkatt / 60;
var sekundCounterEfterSkatt = (sekundlonEfterSkatt * totalTimeDifference) / 1000;
var krEarnedFromStartEfterSkatt = sekundCounterEfterSkatt.toFixed(2);
var sekundCounterForeSkatt = (sekundlonForeSkatt * totalTimeDifference) / 1000;
var krEarnedFromStartForeSkatt = sekundCounterForeSkatt.toFixed(2);
if (krEarnedFromStartEfterSkatt >= 0) {
$("#earnedFromStartValue").html(krEarnedFromStartEfterSkatt + "kr");
}
}
</script>
</head>
<body>
<div data-role="page" id="MyPage">
<div data-role="content" id="MyPageContent" name="MyPageContent" data-position="fixed">
<div class="ui-field-contain">
<div id="MyStartTime">
<input name="MyDateInput" id="MyDateInput" type="date" data-role="datebox" data-options='{"mode": "datebox", "overrideHeaderFormat":"%A %d-%B-%Y","useNewStyle":true, "useFocus":true,"overrideTimeFormat": 24, "closeCallback": "$(\"#MyTimeInput\").datebox(\"open\");"}' />
<input name="MyTimeInput" id="MyTimeInput" type="time" data-role="datebox" data-options='{"mode": "timebox", "useNewStyle":true, "useFocus":true,"overrideTimeFormat": 24}' />
</div>
</div>
<div id="timeRightNowText">My choosen startTime: <div id="MyTimeValue"></div></div>
<div id="hoursText">Hours: <div id="hoursValue"></div></div>
<div id="minutesText">Minutes: <div id="minutesValue"></div></div>
<div id="secondsText">Seconds: <div id="secondsValue"></div></div>
<div id="timeRightNowText">Time right now: <div id="timeRightNowValue"></div></div>
<div class="ui-block-b" id="valueFromStartTime">This value should start ticking from 0 if the time right now is the same as the time i choose above..<div id="earnedFromStartValue"></div></div>
</div>
</div>
</body>
</html>
I did change my timeRightNow like the example below, and now it's working! It seems like the iPhone needed both the startTime and timeRightNow to look exactly the same way to make the right calculation. I did also add + "+02:00" at the end of my startTime, to make the right Time Zone calculation.
var datetimeRightNow = new Date();
timeRightNow = new Date(datetimeRightNow.getFullYear() + '-' + (('' + (datetimeRightNow.getMonth() + 1)).length < 2 ? '0' : '') + (datetimeRightNow.getMonth() + 1) + '-' + (('' + datetimeRightNow.getDate()).length < 2 ? '0' : '') + datetimeRightNow.getDate() + "T" + (('' + datetimeRightNow.getHours()).length < 2 ? '0' : '') + datetimeRightNow.getHours() + ":" + (('' + datetimeRightNow.getMinutes()).length < 2 ? '0' : '') + datetimeRightNow.getMinutes() + ":" + (('' + datetimeRightNow.getSeconds()).length < 2 ? '0' : '') + datetimeRightNow.getSeconds() + "+02:00");
Related
In popup, bootstrap calender is working in firefox but not in chrome
My html is as follows:
<label for="text-input">Birth Date</label>
<div id="txtBirthDate" class=" input-group date dp-ex-4" data-date="12-02-2012" data-date-format="dd.mm.yyyy" data-date-autoclose="true" data-date-start-view="2">
<input class="form-control" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
Can any one help?
#User3724793 Do You use javascript for BootStarp Calender if not please use this one..
$.extend($.fn.datepicker.defaults, {
parse: function (string) {
var matches;
if ((matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/))) {
return new Date(matches[3], matches[1] - 1, matches[2]);
} else {
return null;
}
},
format: function (date) {
var
month = (date.getMonth() + 1).toString(),
dom = date.getDate().toString();
if (month.length === 1) {
month = "0" + month;
}
if (dom.length === 1) {
dom = "0" + dom;
}
return month + "/" + dom + "/" + date.getFullYear();
}
});
</script>
try adding this style to your html page
<style>
.datepicker{z-index:1151;}
I've got a fairly simple jquery-ui autocomplete box on my page. The HTML is simple and looks like this:
<div class="control-group">
<label for="addCampaignUser"></label>
<div class="controls">
<input id="addCampaignUser" />
<button id="addCampaignUserButton">Add User</button>
</div>
</div>
The JavaScript is a bit more complex, but still not too bad:
$('#addCampaignUser').autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.post("#Url.Action("ForCampaignAutoComplete", "CustomerUser")", { "searchTerm": request.term })
.done(function (data) {
console.log('{request: ' + JSON.stringify(request) + "}");
console.log('{data: ' + JSON.stringify(data) + "}");
cache[request.term] = data;
response(data);
})
.fail(function (err) {
console.error(err);
});
},
select: function (event, ui) {
console.log(ui.item ? "Selected: " + ui.item.Name : "Nothing selected, input was " + this.value);
},
close: function(event, ui) {
console.log("closed: " + event);
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append("<a>" + item.Name + " (" + item.CustomerName + ")</a>").appendTo(ul);
};
Everything seems to work as expected:
The problem is that as soon as I mouse over any of the items in the list, or if I try to select one of the items via up/down arrow, the list closes, without anything being selected (or the select or focus events firing).
I've tried removing the <a> tags around the item.Name in the .data("ui-autocomplete") handler, like so:
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append(item.Name + " (" + item.CustomerName + ")").appendTo(ul);
};
That fixes the auto-close problem, but then nothing ever gets selected.
I've tried disabling all the various add-ons and libraries that might be interfering, but nothing so far. I'm using jquery-2.0.3.js and jquery-ui-1.10.3.js.
Am I doing something obviously wrong?
[Edit: Including code for entire page, as requested]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/bootstrap?v=j_-_1Zyowtnxf-sjdU3kRasY7Qp7ZP_jWGqEkV333nA1" rel="stylesheet"/>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Payboard</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Customers</li><li>Campaigns</li><li>Integrations</li><li>Account</li><li>Logout</li><li>Test</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2>AutoComplete</h2>
<h4>End users assigned to the campaign</h4>
<div class="control-group">
<label for="addCampaignUser"></label>
<div class="controls">
<input id="addCampaignUser" />
<button id="addCampaignUserButton">Add User</button>
</div>
</div>
<hr>
<footer>
<p>© Payboard 2013</p>
</footer>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/flot/jquery.flot.js"></script>
<script src="/Scripts/flot/jquery.flot.time.js"></script>
<script src="/Scripts/flot/jquery.flot.stack.js"></script>
<script src="/Scripts/flot/jquery.flot.categories.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- Payboard JS bundle -->
<script src="/Scripts/knockout-2.3.0.debug.js"></script>
<script src="/Scripts/jquery.event.drag.js"></script>
<script src="/Scripts/SlickGrid/slick.core.js"></script>
<script src="/Scripts/SlickGrid/slick.formatters.js"></script>
<script src="/Scripts/SlickGrid/slick.grid.js"></script>
<script src="/Scripts/require.js"></script>
<script src="/Scripts/jquery.signalR-1.1.3.js"></script>
<script src="/Scripts/linq.js"></script>
<script src="/Scripts/Payboard/Main.js"></script>
<script src="/Scripts/dateformat.js"></script>
<script type="text/javascript">
// Payboard.ready(function () {
$(function () {
var cache = {};
$('#addCampaignUser').autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.post("/CustomerUser/ForCampaignAutoComplete", { "searchTerm": request.term })
.done(function (data) {
console.log('request: ' + JSON.stringify(request));
console.log('data: ' + JSON.stringify(data));
cache[request.term] = data;
response(data);
})
.fail(function (err) {
console.error(err);
});
},
select: function (event, ui) {
console.log(ui.item ? "Selected: " + ui.item.Name : "Nothing selected, input was " + this.value);
},
focus: function (event, ui) {
console.log(ui.item ? "Focused: " + ui.item.Name : "Nothing focused, input was " + this.value);
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append("<a>" + item.Name + " (" + item.CustomerName + ")</a>").appendTo(ul);
// return $("<li>").append(item.Name + " (" + item.CustomerName + ")").appendTo(ul);
};
});
</script>
</body>
</html>
Looks like you're including jQueryUI twice. Once here:
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
and again here:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
This could be causing your problem--remove one of the references.
I've a problem with Jquery Mobile. Buttons that I add from JS are not displayed properly, and lacks CSS. On the other hand, hitting a button calls that function, but if another button is clicked, because of on off tap, problem occurs. "addExerciseButton" lacks CSS, and the problem occurs within addExerciseButton
<div data-role="page" id="addprogram">
<div data-role="header" data-position="fixed">
<h1>Add Program</h1>
Back
Save
</div><!-- /header -->
<div data-role="content" class='addprogramcontent'>
<div data-role="fieldcontain" class='addprogramlist'>
</div>
</div>
</div><!-- /page -->
JS:
$(document).off("tap").on('tap', '.addExerciseButton', function(event){
//alert(1);
var container = $(this).attr('id');
alert(container);
});
JS page:
eArray.sort();
var container = $("#addprogram").find(".addprogramlist");
container.empty();
// alert(eArray);
for(var i = 1; i <=7; i++)
{
var day = getDay(i);
container.append("<label for='day-" + i + "' class='select'>" + day + "</label>");
var select = $("<select name='day-" + i + "' id='day-" + i + "'></select>");
for (var j = 0; j < eArray.length; j++)
{
select.append("<option value='" + eArray[j] + "'>" + eArray[j] + "</option>");
}
container.append(select);
var addExerciseButton = "<input type='button' value='Add Exercise' class='addExerciseButton' data-role='button' data-theme='b' id='day-" + i + "'/>"
container.append(addExerciseButton);
}
$("select").selectmenu();
$("#day-1").change(function() {
// alert(value);
$("#day-1 option:selected").each(function () {
// alert(1);
var value = $(this).val();
$(this).parent().selectmenu('disable');
alert(value);
});
});
});
you have to refresh buttons after you append em to the dom:
working example: http://jsfiddle.net/PG2bV/55/
CODE
$(":button").button();
Using
container.trigger('create');
solved my problem with no CSS on buttons.
I am setting a click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). This approach works fine if I use a string or an integer as the function parameter but if I try to input an instance of an object (as illustrated below) it doesn't work. Any advice on what I may be doing wrong would be greatly appreciated.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
</body>
did you tryied with the .live() function
when you add dynamically elements to the dom they dont have events so I suggest you to
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
var temp = "'" + testInstance + "'";
html += '<li>click test1</li>';
}
/*** jQuery code ****/
$(".new").live("click",function(){
// your code here
aler("it working");
});
I usually do this when a button dont work for me hope that works for you!
i think it works
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
$(document).ready(function() {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
//var temp = "'" + testInstance+ "'";
/// Chaged into
var temp = "'" + testInstance.param1 + "'";
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
I think you can achive your oal using this ..
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
// Create global object array ..
var testInstanc = [];
$(document).ready(function() {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
// var temp = "'" + testInstance + "'";
// set array to object
testInstanc[i] = maketestObject("test param" + i);
pass clickhandler function to your array index
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(i) {
// access object attribute using testInstance array
alert(testInstanc[i].param1);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
</body>
</html>
I am making a website in which people put in a twitter username. Now I want to load the twitterimage of the name that is put in. I have searched on the internet already but can't find a good easy way to implement this. Do i need to use some fancy twitter api or something? Any simple API's? (it is only for a simple site) or URL's with name as variable in it?
this works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function GetImage(){
var txtBox = document.getElementById("twit");
var imgTwitter = document.getElementById("imgTwitter");
imgTwitter.src = "http://api.twitter.com/1/users/profile_image/" + txtBox.value;
}
</script>
</head>
<body>
<input name="twit" id="twit" type="text">Get Image
<img id="imgTwitter" >
</body>
</html>
From this question:
https://stackoverflow.com/a/30322178/6539400
https://twitter.com/[screen_name]/profile_image?size=mini
https://twitter.com/[screen_name]/profile_image?size=normal
https://twitter.com/[screen_name]/profile_image?size=bigger
https://twitter.com/[screen_name]/profile_image?size=original
function ClickFunction() {
document.getElementById("content").innerHTML = "";
var frag = document.createDocumentFragment();
var uname = document.getElementById("name").value;
var SRCmini = "https://twitter.com/" + uname + "/profile_image?size=mini";
var SRCnormal = "https://twitter.com/" + uname + "/profile_image?size=normal";
var SRCbigger = "https://twitter.com/" + uname + "/profile_image?size=bigger";
var SRCoriginal = "https://twitter.com/" + uname + "/profile_image?size=original";
frag.appendChild(document.createTextNode(SRCmini));
frag.appendChild(document.createElement("br"));
var IMGmini = frag.appendChild(document.createElement("img"));
IMGmini.src = SRCmini;
frag.appendChild(document.createElement("br"));
frag.appendChild(document.createTextNode(SRCnormal));
frag.appendChild(document.createElement("br"));
var IMGnormal = frag.appendChild(document.createElement("img"));
IMGnormal.src = SRCnormal;
frag.appendChild(document.createElement("br"));
frag.appendChild(document.createTextNode(SRCbigger));
frag.appendChild(document.createElement("br"));
var IMGbigger = frag.appendChild(document.createElement("img"));
IMGbigger.src = SRCbigger;
frag.appendChild(document.createElement("br"));
frag.appendChild(document.createTextNode(SRCoriginal));
frag.appendChild(document.createElement("br"));
var IMGoriginal = frag.appendChild(document.createElement("img"));
IMGoriginal.src = SRCoriginal;
frag.appendChild(document.createElement("br"));
document.getElementById("content").appendChild(frag);
}
<input id="name" value="wikipedia" /><br />
<button onclick="ClickFunction()">Click here!</button><br /><br />
<div id="content"></div>