Javascript/jQuery/jQuery Mobile
The codes below work fine but when I reload/F5 several times of this page, the currentDate and currentTime values are disappear. Then when I reload several times again, its work fine. Does anyone know what is the cause and how to solve it?
<%# include file="/common/taglibs.jsp"%>
<%# include file="/common/jquery-mobile-javascript-css.jspf"%>
<%# include file="/common/jquery-mobile-javascript.jspf"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
function DisplayTime(){
if (!document.all && !document.getElementById)
return
var timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2;
var CurrentDate=new Date();
var hours=CurrentDate.getHours();
var minutes=CurrentDate.getMinutes();
var seconds=CurrentDate.getSeconds();
var year=CurrentDate.getYear();
if (hours<=9) {
hours="0"+hours;
}
if (minutes<=9) {
minutes="0"+minutes;
}
if (seconds<=9) {
seconds="0"+seconds;
}
if(year < 1000){
year += 1900;
}
var currentTime=hours+":"+minutes+":"+seconds;
var currentDate=dayNames[CurrentDate.getDay()]+' '+monthNames[CurrentDate.getMonth()]+' '+CurrentDate.getDate()+', '+year;
document.getElementById('curDate').innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentDate+" </b>";
timeElement.innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentTime+"</b>";
setTimeout(DisplayTime,1000);
}
window.onload=DisplayTime;
</script>
</head>
Html
<body>
<div id="page" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<p class="ui-li-aside"><span id=curDate></span><span id=curTime></span></p>
</div>
</div>
</body>
Finally, i have replaced window.onload=DisplayTime; with using flag eg:
if(flag==true){
DisplayTime();
flag=false;
}
I think window.onload is response earlier before the Displaytime fully loaded and that is why it wont display on the page after reload/refresh page several times
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
I have a local non server webpage called DisplayItems.html which pulls a list from another webpage called items.html. I currently had it set up where DisplayItems refreshes its body every x seconds in case items.html got updated. I am trying to lean towards checking if the input has changed every few seconds. If so, refresh the body of DisplayItems, if not, don't refresh. How could I go along of doing this?
DisplayItems.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="Scroll.css">
<script src="jquery1.min.js"></script>
<script type="text/javascript" src="jquery.marquee.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var jQuery_1_12_4 = $.noConflict(true);
var currentvar;
var oldvar = jQuery_1_12_4('#text').load("items.html");
<!--
function Refresh() {
setTimeout("location.reload(true);");
}
window.setInterval(function Checkforchange(){
currentvar = jQuery_1_12_4('#text').load("items.html");
if (currentvar != oldvar)
currentvar = oldvar;
Refresh();
}, 5000);
// -->
</script>
</head>
<body onload="JavaScript:Refresh();">
<ul class='marquee' id="text">
</ul>
<script type="text/javascript">
jQuery_1_12_4('#text').load("items.html");
</script>
</body>
</html>
Items.html
<li>new item1</li>
<li>senario2</li>
<li>senario3</li>
Maybe something like this? Using your html (get rid of the refresh in the body though, and use Jquery, obviously).
<script type="text/javascript">
function Checkforchange() {
$.get("/refresh/items.html", function (data) {
if ($('#text').html() !== data) {
$('#text').html(data);
window.setTimeout(Checkforchange, 5000);
}
});
}
$(document).ready(function () {
Checkforchange();
});
</script>
So i have some troubles getting to the right place when loading the page. I would like to when i open start.php to go to start.php#forside.
Right now i have something that works a little but its not the right way to do it and i would like something more stable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter">0</span>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML) <= 0) {
location.href = 'start.php#forside';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },75);
</script>
</body>
</html>
Would it be possible with some js?
EDIT:
i solved it with
<?php
header('Location: start.php#forside');
?>
What about this:
var timeLeft = 5;
var interval;
function timer() {
timeLeft--;
document.getElementById('counter').innerHTML = timeLeft;
if (timeLeft == 0) {
location.href = 'start.php#forside';
}
};
interval = setInterval(timer, 1000);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter"></span>
</body>
</html>
If you want to go to #forside when the page loads, you could use scrollIntoView() instead of replacing location.href.
if (parseInt(i.innerHTML) <= 0) document.getElementById('forside').scrollIntoView()
Further documentation: MDN
Hi im having a problem with the page loading another page i have a page a and page b with page a it has an ajax that loads page b ,and page b loads and runs jquery perfectly until i click on page a and then the jquery in page b doesnt seem to can anyone help me with this?
AJAX
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
var receiveReq = getXmlHttpRequestObject();
function get() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'b.php', true);
receiveReq.onreadystatechange = handleGet;
receiveReq.send(null);
}
}
function handleGet() {
if (receiveReq.readyState == 4) {
document.getElementById('content').innerHTML = receiveReq.responseText;
}
}
PAGE 1 THAT LOADS THE AJAX AND THE SECOND PAGE
<script src="add.js"></script>
Live Chat
<div id='content' class='content'></div>
PAGE 2 THAT THE PAGE 1 LOADS WITH THE WORKING JQUERY IF LOADED BY IT SELF BUT DOESNT WORK AFTER THE AJAX LOADS THIS PAGE
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Test selctions</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#' + $('#selection option:selected').text().toLowerCase()).show();
$('#selection').change(function () {
$('.op').hide();
$('#' + $('#selection option:selected').text().toLowerCase()).show();
});
});
</script>
<style type="text/css">
#plane ,#boat,#car ,#other {
display: none;
}
</style>
</head>
<body>
options:
<select id='selection'>
<option>Pls choose</option>
<option value='1' id='1'>Car</option>
<option value='2' id='2'>Plane</option>
<option value='3' id='3'>Boat</option>
<option value=''>Other</option>
</select><div>
<div id='car' class='op'>you have chosen a car</div>
<div id='plane' class='op'>you have chosen a plane</div>
<div id='boat' class='op'>you have chosen a boat</div>
<div id='other' class='op'>others</div>
</div>
</body>
</html>
Can someone help me with this one and we would really appreciate it! and thanks!
Use live() or $(document).on() function of jquery.
write all jquery function of page2 on page1 and use live() or $(document).on() functions.
it will work...
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>