In my page i have this path for display an image.
Example:
<link rel="icon" type="image/png" href="/img/logo.png"/>
My image is not display, because on my Apache the path is:
/var/www/html/apps/stc-1.0-r-20170516195017/img/logo.png
The particularity off my path is my app is rebuild every day so this argument stc-1.0-r-20170516195017 is dynamic
My question is how can i do in javascript to get my path /apps/static-[DYNAMIC_VALUE]/ ?
Hint: My root directory is : /var/www/html/
My page:
<!DOCTYPE html>
<html dir="ltr" lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/png" href="/img/logo.png" />
<title>Erreur 404</title>
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
</head>
<body>
<div id="app">
<div id="site">
<div class="header" id="header-container">
<header>
<div id="header">
<div class="inside">
<div class="fl"><a class="header-link" title="Retour à l'accueil de Google" href="http://www.google.com/">Google</a>
</div>
</div>
</div>
<div id="banner">
<div role="banner" class="inside">
<div class="fl menu-main-conteneur ">
<nav id="menu-main" aria-label="Menu principal" data-title="Menu" class="menuHaut"></nav>
</div>
<div class="fl w10 mls">
<a class="sub-header-link" href="/accueil" title="Retour vers la page d'accueil " id="img-logo"><img src="img/logo.png" alt="Application" /></a>
</div>
<div class="fl mls">
<a class="sub-header-link" href="/apps/accueil" title=" Retour vers la page d'accueil ">
<h1 id="app-title">Application </h1>
</a>
</div>
</div>
</div>
</header>
</div>
<main id="page" role="main">
<span></span>
<div id="nfe-page">
<div id="nf-img"></div>
<h2 class="nfe-title">Oops! Nous ne trouvons pas ce que vous cherchez!</h2>Retour à la page d'accueil
</div>
</main>
<footer id="ft" class="footer-container" role="contentinfo">
<div id="footer" class="footer-content inside">
<div class="fl mll">
<ul class="footer-links">
<li>Plan de l'application
</li>
<li>Accessibilité
</li>
<li>Contact
</li>
</ul>
</div>
<div class="fr mrl">
<p>Application </p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
The better way
Is to apply some change under your configs files.
but since i don't have not enough explaination about them...
Alternative
In your case, you can bypass the dynamic behavior
by getting recursively the excepted file using the dynamic pattern:
$iter = new RecursiveIteratorIterator
(
new RecursiveDirectoryIterator($you_root_dir, RecursiveDirectoryIterator::SKIP_DOTS),
RecursiveIteratorIterator::SELF_FIRST,
RecursiveIteratorIterator::CATCH_GET_CHILD // Ignore "Permission denied"
);
foreach ($iter as $path => $fileinfo)
{
if($fileinfo->isDir() && preg_match("/^stc-.*[\d]+$/i", $fileinfo->getFilename()))
{
$logo = $path."/img/logo.png";
if(file_exists($path."/img/logo.png"))
{
header("Content-Type:image/png");
header("Content-Length: ".filesize($logo));
readfile($logo);
break;
}
}
}
However, if at creation, the static dir is preserved,
you should take the newest directory, by ignore the old stagged dirs.
// sort and get the newest dir
$dirs = [];
array_walk(scandir($path, SCANDIR_SORT_DESCENDING),
function($d, $k) use(&$path, &$dirs)
{
if(is_dir($path.$d) && !preg_match("/^\.+$/", $d))
$dirs[filemtime($path.$d)] = $d;
});
ksort($dirs);
// check and show the img
$logo = array_pop($dirs)."/img/logo.png";
if(file_exists($logo))
{
header("Content-Type:image/png");
header("Content-Length: ".filesize($logo));
readfile($logo);
}
You have to put the wanted code inside a new file called logo.php
and callable from your web root like :
<img src="logo.php">
Related
I'm currently working with news API and trying to populate different category (i.e sports, science, business etc) under different heading on the same page of the website, but failed to do so. Here I tried to use template literal, as first created a template literal in the api named category and initiated it using let. So there are two sections "Trending Blogs" and "You May Like" so here I wanna show two different category in the two different section respectively. Here I'm attaching the code in the following.
Here is the code in html
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/styles/utils.css" />
<link rel="stylesheet" href="/styles/navbar.css" />
<link rel="stylesheet" href="/styles/body.css" />
<script
src="https://kit.fontawesome.com/e582ecfb98.js"
crossorigin="anonymous"
></script>
<title>Document</title>
</head>
<body>
<!-- <h1>This is a blog site</h1> -->
<!-- Navbar starts from here -->
<nav class="navigation max-width-0 m-auto">
<div class="middle">
<b> Blogsite</b>
</div>
<div class="left">
<ul>
<li><a class="header-elements" href="./index.html">Home</a></li>
<li><a class="header-elements" href="./about.html">About</a></li>
<li><a class="header-elements" href="./contact.html">Contact</a></li>
</ul>
</div>
<div class="right">
<input type="text" placeholder="Article Search" />
<button class="btn"><i class="fa fa-magnifying-glass"></i></button>
</div>
</nav>
<!-- Navbar ends -->
<!-- body starts -->
<div class="content max-width-1 m-auto">
<h1 class="land-heading">Welcome to Blogsite</h1>
<p class="intro">
Atameo allows travellers to capture their trips in a completely new way.
It records your route, adds your photos, videos and music and turns your
adventures into your personal travel profile. Have all your travel
experiences in one place and find out more about your travel style by
diving into your personal travel statistics: How far did you travel last
year? What’s the highest point you have been to? How much of the world
have you seen? Inspire others to go out and explore, while getting
inspired by some of the most daring journeys of our time. Explore.
Capture. Inspire.
</p>
<hr />
<h1 class="land-heading">Trending Blogs</h1>
<div class="blog-section" id="blog-section">
</div>
<h1 class="land-heading">You may like</h1>
<div class="blog-section" id="blog-section2">
</div>
<h1 class="land-heading">Categories</h1>
<div class="blog-section" id="category">
<div class="r1c1 block">
<a href=""
><img
class="img"
src="https://www.nomadicmatt.com/wp-content/uploads/2022/07/parisnm3.jpeg"
alt="img"
/>
<p class="blog-title">NM+ Weekly Update: Europe Edition</p></a
>
</div>
</div>
</div>
<!-- Body ends -->
<!-- Footer starts -->
<div class="footer m-auto">
<label for="">Feedback</label>
<input type="text" class="" placeholder="First Name" />
<input type="text" placeholder="e-mail" />
<button type="submit" class="btn btn-foot">Send Feedback</button>
</div>
<div class="m-auto copyright">
<p>copyright 2022 #md_arif</p>
</div>
<!-- Footer ends -->
<script src="./scripts/app.js"></script>
</body>
</html>
`
Here is the code of vanilla-js
console.log("Here we go");
let blogSection = document.getElementById("blog-section");
let blogSection2 = document.getElementById("blog-section2");
function generateCards(e) {
const newXHRRequest = new XMLHttpRequest();
// let source = 'the-times-of-india';
let apikey = '75da3b7678de41fcb76359935aabdc3d'
let category = '';
newXHRRequest.open(
"GET",
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&pagesize=3&apiKey=${apikey}`,
true
);
newXHRRequest.getResponseHeader("content-type", "application/json");
newXHRRequest.onload = function () {
if (this.status === 200) {
let myCards = JSON.parse(this.responseText);
console.log(myCards);
let articles = myCards.articles;
// console.log(articles);
let itemsHtml = "";
articles.forEach((element) => {
// console.log(articles);
// category="sports";
console.log(element);
let items = `<div class="r1c1 block">
<a href="${element["url"]}" target="_blank"><img class="img" src=${element["urlToImage"]} alt="img">
<p class="blog-title">${element["title"]}</p></a>
</div>`;
itemsHtml += items;
});
blogSection.innerHTML = itemsHtml;
blogSection2.innerHTML = itemsHtml;
} else {
console.log("Some error occured");
}
};
newXHRRequest.send();
}
generateCards();
I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
I'm new at jquery and javascript so this might be a very simple question. I get an error that I cannot understand and it comes up every time a function is runned in my .js-file.
At the moment my .js-file simply has this as a way to find what the problem is:
$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(){
var check = "I work";
alert(check);
});
});
The title-link changed color without any problem, so the .js-file is located by my HTML-file. I also have the latest CDN for my jquery in the HTML-file in script-tags.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
How does it come that when I click an element with title-link class on my browser, the page just reloads - or crashes(?)? When inspecting the page, I see it switch from my .js-file to jquery.min.js:formatted after passing each row in my function and points to these rows below:
while ((o = i.handlers[n++]) && !u.isImmediatePropagationStopped())
u.rnamespace && !1 !== o.namespace && !u.rnamespace.test(o.namespace) || (u.handleObj = o,
u.data = o.data,
void 0 !== (r = ((S.event.special[o.origType] || {}).handle || o.handler).apply(i.elem, s)) && !1 === (u.result = r) && (u.preventDefault(),
u.stopPropagation()))
}
return c.postDispatch && c.postDispatch.call(this, u),
u.result
Why does this happen and what can I do to have my code run as intended? ATM I cannot use my javascript file due to the page reloading everytime a function has been used. Many thanks for any help
EDIT: this is the HTML-page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/tentaJs.js"></script>
<link rel="stylesheet" href="./css/main.css">
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: titel </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info#kil.se <br>
Tele: 00000000</p>
</footer>
</div>
</body>
</html>
$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(e){
e.preventDefault();
var check = "I work";
alert(check);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: titel </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info#kil.se <br>
Tele: 00000000</p>
</footer>
</div>
</body>
</html>
I am using Cordova 6.2.0 and want to override the backbutton on Android. I found the following solution(s) but this doesn't work for me (I guess it's because of the cordova Version): link.
I am using the following code to override the backbutton:
document.addEventListener("deviceready",ondeviceready, false);
function ondeviceready()
{
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey()
{
//Do something
}
The Problem is that the backbutton only "does something" on the first page. this is my index.html page:
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Stadtwerke-App</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="js/hammer.js"></script>
<script>
$(document).ready(function(e) {
var startX, curX, startY, curY; // Variables
var newXScroll, newYScroll, genXScroll; // More Variables!
// Change the height of the sidebar, as well as a few things to do with the main content area, so the user
// can actually scroll in the content area.
function sideBarHeight() {
var docHeight = $(document).height();
var winHeight = $(window).height();
$('.slide-in').height(winHeight);
$('#main-container').height(winHeight);
$('#sub-container').height($('#sub-container').height());
}
sideBarHeight();
var outIn = 'in';
Hammer(document.getElementById('main-container')).on('swiperight', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
});
Hammer(document.getElementById('main-container')).on('swipeleft', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
});
function runAnimation() {
if(outIn == 'out') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
} else if(outIn == 'in') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
}
}
$('.menu-icon').click(function() {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
});
});
</script>
</head>
<body id="index" name="index">
<!--script>start()</script-->
<div id="main-container" class="tk-chaparral-pro">
<div id="Email" class="emailbox"></div>
<h2>News</h2>
<div class="Container" onclick='browser("http://www.tagesschau.de/inland/eeg-reform-105.html")'>
<p class="Buttonbereich" align="center"><img src="img/Tagesschau.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Wie geht es weiter mit der Energiewende?</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/metropolregion_artikel,-Nach-Unwetter-Behinderungen-im-Bahnverkehr-_arid,195765.html")'>
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Nach Unwetter: Behinderungen im Bahnverkehr</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/finanzen/meine-finanzen/geld-ausgeben/so-bekommen-sie-die-praemie-fuer-ihr-e-auto-14239079.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 18.05.2016: So bekommen Sie die Prämie für Ihr E-Auto</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/region_artikel,-Hochspannungstrasse-bei-Leimen-Nach-80-Jahren-gehen-die-Stahlmasten-in-Rente-_arid,192723.html")' >
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<p class="Buttonbereich2"> 18.05.2016: Nach 80 Jahren gehen Stahlmasten in Rente</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/wirtschaft/grafik-des-tages-woher-kommt-unser-strom-14237266.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 17.05.2016</p-->
<p class="Buttonbereich2"> 17.05.2016: Woher kommt unser Strom?</p>
</div>
<div id="sub-container">
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="nav">
<div class="navbox">
<div class="menu-icon">
<div class="bar"> </div>
<div class="bar"> </div>
<div class="bar"> </div>
</div>
</div>
<div class="navbox" style=" float:right"><img src="img/Musterwerke.PNG" style="float:right;height:100%;background-color:white"> </div>
<h1 align="center" style="margin-top:10px;">Stadtwerke-App</h1>
</div>
<div class="footer">
<a rel="external" href="infos.html" ><img src="img/Infos.png" alt="hsag logo" style="float:left;height:80%;border:5px solid white"/></a>
<div class="navbox" style=" float:right" onclick='browser("https://www.hsag.info")' ><img src="img/hsag_logo.png" style="float:right;height:100%;background-color:white"> </div>
</div>
</div>
<div class="slide-in">
<ul class="tk-museo-sans">
<li onclick='window.open("index.html","_self" )' >Startseite</li>
<li onclick='window.open("Index_Nach Registrierung.html","_self" )'>Zählerstandserfassung</li>
<li onclick='window.open("Abfallkalender.html","_self" )'>Abfallkalender</li>
<li onclick='window.open("Apothekennotdienst.html","_self" )'>Apothekennotdienst</li>
<li onclick='window.open("Stoerungsmeldung.html","_self" )'>Störungsmeldung</li>
<li onclick='window.open("Services.html","_self" )'>Kundenportal</li>
<li onclick='window.open("Spartipps.html","_self" )'>Energiespartipps</li>
<li onclick='window.open("Vergleich.html","_self" )'>Verbrauchsvergleich</li>
<li onclick='window.open("Events.html","_self" )'>Event-Übersicht</li>
<li onclick='window.open("Impressum.html","_self" )'>Impressum</li>
<li onclick='window.open("Einstellungen.html","_self" )'>Einstellungen/Account</li>
</ul>
</div>
</body>
</html>
All other Pages include the same JS-Scripts.
Try the following code .It woks for me
In HTML:
<body onload="onLoad()">
in Script:
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
}
I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:
window.location="page.html"
Now the onBackKey() function is firing at every single page.
I want to add a spinner to show that the content is loading, when someone clicks on an icon. Basically when someone clicks the hyper-link, the page takes time to load and meanwhile I want to show a spinner/'loading image'. How to implement that?
Thanks in advance
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="keywords" content=" my webpage" />
</head>
<body>
<div class="content">
<div class="wrap">
<!--- start-top-grids---->
<div class="top-grids">
<div class="top-grid">
<div class="product-pic">
<img src="img/search_page.png" title="watch" />
</div>
Directory
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/news.png" title="shoe" />
</div>
News
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/payment.png" title="view pay" />
</div>
View Pay
</div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</body>
</html>
You can try something like below:
1) Place "spinning wheel" image in one div.
2) Add "Loading..." text
When your page is loading set that div to display and once your page is loaded successfully set div to display: none.
<div id="progressIndicator" style="display: none;">
<div style="background-color: Transparent;" >
<img src="Images/indicator_mozilla_blu.gif" style="font-family: Tahoma; font-size: small; cursor: wait"
align="absMiddle" alt="" /> Loading...
</div>
</div>
UPDATE
When you are clicking on Image button do not directly call server side function. Instead call a client side function like "CallServerSideFunction()" and from that function call your server side function. You can try something like below:
In Javascript function:
function DisplayProgress() {
document.getElementById('progressIndicator').style.display = '';
}
function HideProgress() {
document.getElementById('progressIndicator').style.display = none;
}
function CallServerSideFunction() {
DisplayProgress();
document.getElementById("btnCallServerSideFunction").click();
HideProgress();
}
Let me know if this helps.