Hallo,
ich bin relativ neu in der JS programmierung.
Ich soll im Rahmen einer Bachelorarbeit eine Webseite für mobile Geräte erstellen.
Um die Diagramm anzuzeigen benutze ich Charts.js. Damit sich die Göße automatisch anpasst sobald das Display gedreht wird habe ich folgendes gemacht.
Die Charts.js Datei habe ich mittels
etc angepasst.
Leider geht das ganze nicht wenn ich kein alert() vor dem reaload ausführe.
Das Gleiche habe ich bei den onchange Methoden der range-slider die ich benutze.
Hat jemand vllt eine Idee woran das liegen könnte?
Für Antworten wäre ich sehr sehr sehr dankbar!!
MfG Patrick
Hier mal der relavante Code:
ich bin relativ neu in der JS programmierung.
Ich soll im Rahmen einer Bachelorarbeit eine Webseite für mobile Geräte erstellen.
Um die Diagramm anzuzeigen benutze ich Charts.js. Damit sich die Göße automatisch anpasst sobald das Display gedreht wird habe ich folgendes gemacht.
HTML:
$(window).resize(function()
{
// Wenn hier kein alert() kommt geht das nicht.
location.reload();
});
HTML:
$(document).width() *0.8;Leider geht das ganze nicht wenn ich kein alert() vor dem reaload ausführe.
Das Gleiche habe ich bei den onchange Methoden der range-slider die ich benutze.
Hat jemand vllt eine Idee woran das liegen könnte?
Für Antworten wäre ich sehr sehr sehr dankbar!!
MfG Patrick
Hier mal der relavante Code:
HTML:
//Variablen
var currentPage = 0;
var Seiten = new Array();
/*
* Diese Funktion dient dazu, herauszufinden, an welcher Stelle sich der Besucher befindet, dazu
* wird mit activePage die aktuelle ID der Seite ermittelt und dann mit dem Array verglichen
*/
function currentPageAnalyse() {
var activePage = $.mobile.activePage[0].id;
for(i = 0; i < Seiten.length; i++)
{
if(Seiten[i] == activePage) {
currentPage = i;
break;
}
}
}
/*
* Swipe-Effekt
*/
jQuery(document).ready(function() {
//################################################ Seiten zaehlen fuer swipe
var SeitenAnzahl = $("div[data-role=page]").size();
for(var a = 1; a <= SeitenAnzahl; a++){
Seiten.push($("div[data-role=page]").get(a-1).id);
}
//#########################################Swipe
$(document).on('pagebeforeshow', currentPageAnalyse); //----- Wenn Seite geladen wird
//$(document).on('swipeleft', swipeLeft); //----- Swipe left
//$(document).on('swiperight', swipeRight); //----- Swipe right
function swipeLeft(event)
{
if(currentPage + 1 < Seiten.length) {
$.mobile.changePage('#' + Seiten[currentPage + 1], {transition: "slide"});
}
}
function swipeRight(event) {
if(currentPage > 0) {
$.mobile.changePage('#' + Seiten[currentPage - 1], {transition: "slide", reverse: true});
}
}
//############################## Funktionen für Button einbinden
//Button: Logout
try{
document.getElementById("logoutButton").onclick = neuladen;
}catch(err){};
//Button: Login
try{
document.getElementById("loginButton").onclick = neuladen;
}catch(err){};
//Button: Sichern
try{
document.getElementById("sichernButton").onclick = testfunktion;
}catch(err) {};
//------------------------- Laedt nach 0.5 Sekunden die Seite neu
function neuladen()
{
setInterval(function(){
//alert("Test");
location.reload();
},500);
}
//############################### Range-Slider-Funktionen
try{
//########################## Wenn ich hier kein alert ausführe wird kein haendler eingetragen!
alert("Das muss sein da sonst die Slider nicht gehen");
aenderungInTextfeldFarbe();
document.getElementById("sliderR").onchange = aenderungInTextfeldFarbe;
document.getElementById("sliderG").onchange = aenderungInTextfeldFarbe;
document.getElementById("sliderB").onchange = aenderungInTextfeldFarbe;
}
catch(err)
{
alert("slider geht nicht");
};
//############################ Resize
// Wenn die Groesse der seite geaendert wir neuladen, wegen diagrammgroesse
$(window).resize(function()
{
// ##################Auch hier geht nix ohne alert!!!!!!!
//alert("Resize\n "+ $(document).width() +" x "+ $(document).height());
location.reload();
});
});
//------------------------------------------------------------------------------------------------------------------
function testfunktion()
{
alert("Testfunktion");
document.getElementById("farbFeld").style.backgroundColor ="red";
}
Zuletzt bearbeitet von einem Moderator:
