How to make touch event in one HTML file effect things in a separate HTML file?

Question

I'm not sure if this is possible, here is what I mean:

I have a touch event to hide/show an hourly forecast, but now I need to make the touch event on a separate HTML file, so when I tap the touch event on one html file the forecast (displayed in a separate html file) will disappear, can this be done?

Here is my js file for all the touch events:

// UniAW6.4LS By Ian Nicoll and Dacal

var forecastdisplay = true;
var hourlyforecastdisplay = true;
var slideshow = false;
var optiondisplay = false;
var weatherdisplay = true;
var weatherBGdisplay = true;
var clockdisplay = true;
var timedwalls = false;
var disabletouch = false;
var windeffectdisplay = true;
var prev_wind_effects = wind_effects; // TO REVERT BACK...
var touchdownX;
var touchupX;
var touchX;
var stateX = 0;
var stateY = 0;

if (ChangeClick == false) { var touchmode = "touchend"; } else { var touchmode = "click"; }

function StartTouch() {

if (ChangeClick == false) { 
document.getElementById("HourlyTouchLayer").addEventListener("touchstart", touchStart, false); // FOR THE  HOURLY FORECAST
document.getElementById("HourlyTouchLayer").addEventListener("touchmove", touchMove, false); // FOR THE  HOURLY FORECAST
} else {
document.getElementById("HourlyTouchLayer").addEventListener("mousedown", mouseDown, false); // FOR THE  HOURLY FORECAST
document.getElementById("HourlyTouchLayer").addEventListener("mouseup", mouseUp, false); // FOR THE  HOURLY FORECAST
}

document.getElementById("TouchLayer").addEventListener(touchmode, touchEnd, false); // FOR THE FORECAST
document.getElementById("TouchLayer2").addEventListener(touchmode, touchEnd2, false); // FOR THE OPTIONS
}

function touchEnd() {
if (forecastdisplay == false) {
    document.getElementById('TouchForecast').className = "forecastMoveUp";
    forecastdisplay = true;
} else {
    document.getElementById('TouchForecast').className = "forecastMoveDown";
    forecastdisplay = false;
}
if (updateFileTimer != "") { createOptionsCookie(); }
}

function touchEnd2(event) {
event.preventDefault();
if (optiondisplay == false) {
    document.getElementById("optionContainer").style.zIndex= "1000";
    document.getElementById("optionContainer").className = "fade-in-option";
    StartButtons();
    optiondisplay = true;
} else {
    document.getElementById("optionContainer").style.zIndex= "800";
    document.getElementById("optionContainer").className = "fade-out-option";
    StopButtons();
    optiondisplay = false;
}
}

function touchStart(event) {
event.preventDefault();
touchdownX = event.targetTouches[0].pageX;
}

function touchMove(event) {
event.preventDefault();
touchupX = event.targetTouches[0].pageX;
touchX = touchupX - touchdownX;
if  (touchX != 0) { MoveElementX(); }
}

function mouseDown(event) {
event.preventDefault();
touchdownX = event.pageX;
}

function mouseUp(event) {
event.preventDefault();
touchupX = event.pageX;
touchX = touchupX - touchdownX;
if  (touchX != 0) { MoveElementX(); }
}


function MoveElementX() {
if (hourlyforecastdisplay == true) {
    switch (stateX) {
        case 0 :
        if ( touchX < 0 ) {
        document.getElementById("hourlyforecast").className = "forecastTranslateLeft";
        stateX++;
        }
        break;
        case 1 :
        if ( touchX > 0 ) {
        document.getElementById("hourlyforecast").className = "forecastTranslateRight";
            stateX--;
            } 
        break;
    }
}
}

function StartButtons() {
document.getElementById("refresh").addEventListener(touchmode, touchRefresh, false);
document.getElementById("timedwall").addEventListener(touchmode, touchTimewall, false);
document.getElementById("slideshow").addEventListener(touchmode, touchSlideShow, false);
document.getElementById("hideweatherInfo").addEventListener(touchmode, touchHideWeather, false);
document.getElementById("hideweatherBG").addEventListener(touchmode, touchHideWeatherBG, false);
document.getElementById("hideclock").addEventListener(touchmode, touchHideClock, false);
document.getElementById("disableforcasttouch").addEventListener(touchmode, touchDisableForecast, false);
document.getElementById("windeffect").addEventListener(touchmode, touchWindeffect, false);
document.getElementById("disablehourlyforcast").addEventListener(touchmode, touchHideHourlyForecast, false);
document.getElementById("refresh").innerHTML = "Reload (for a fresh start)";
document.getElementById("timedwall").innerHTML = "Launch Timed Walls";
document.getElementById("slideshow").innerHTML = "Launch the Slideshow";
document.getElementById("hideweatherInfo").innerHTML = "Hide all weather information";
document.getElementById("hideweatherBG").innerHTML = "Hide all overlay";
document.getElementById("hideclock").innerHTML = "Hide the clock";
document.getElementById("disableforcasttouch").innerHTML = "Disable forecast touch";
document.getElementById("windeffect").innerHTML = "Disable Wind Effect";
document.getElementById("disablehourlyforcast").innerHTML = "Hide Hourly Forecast";
}

function StopButtons() {
document.getElementById("refresh").removeEventListener(touchmode, touchRefresh, false);
document.getElementById("timedwall").removeEventListener(touchmode, touchTimewall, false);
document.getElementById("slideshow").removeEventListener(touchmode, touchSlideShow, false);
document.getElementById("hideweatherInfo").removeEventListener(touchmode, touchHideWeather, false);
document.getElementById("hideweatherBG").removeEventListener(touchmode, touchHideWeatherBG, false);
document.getElementById("hideclock").removeEventListener(touchmode, touchHideClock, false);
document.getElementById("disableforcasttouch").removeEventListener(touchmode, touchDisableForecast, false);
document.getElementById("windeffect").removeEventListener(touchmode, touchWindeffect, false);
document.getElementById("disablehourlyforcast").removeEventListener(touchmode, touchHideHourlyForecast, false);
}

function touchRefresh() {
event.preventDefault();
$.removeCookie('optionsCookie');
window.location.reload();
}

function touchTimewall() {
if (timedwalls == false) {
    if (slideshow == true) { touchSlideShow(); }
    timedwalls = true;
    Wallpaper_options = 'timedwalls';
    document.getElementById("backgroundContainer").className = "fade-out-wall";
    document.getElementById("timedwall").className = "TextColorGreen";
} else {
    timedwalls = false;
    wpidx = "-1";
    WPfade_inTW.className='fade-out-wall';
    WPfade_outTW.className='fade-out-wall';
    document.getElementById("backgroundContainer").className = "fade-in-wall";
    document.getElementById("timedwall").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchSlideShow() {
if (slideshow == false) {
    if (timedwalls == true) { touchTimewall(); } // STOP THE TIMED WALL
    widgetStart();
    slideshow = true;
    Wallpaper_options = 'slideshow';
    document.getElementById("slideshow").className = "TextColorGreen";
    if (filename != "") {
        clearInterval(meteorTimer);
        delelement("astronautContainer");
        delelement("fogContainer");
        delelement("starContainer");
        delelement("meteorContainer");
        delelement("frameContainer");
        delelement("cloudContainer");
        delelement("dropContainer");
        delelement("circleContainer");
        delelement("wiperContainer");
        delelement("starsBGContainer");
        delelement("windContainer");
        delelement("windmillContainer");
        delelement("big_balloonContainer");
        delelement("small_balloonContainer");
        delelement("birdsContainer");
        delelement("frostContainer");
        if (Show_wind_effects == true) {
                removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "css");
                removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "js");
                Show_wind_effects = false;                  
        }
        if (Show_frost == true) {
                removejscssfile("Weather/" + iPhoneType, "frost_effect", "css");
                removejscssfile("Weather/" + iPhoneType, "frost_effect", "js");
                Show_frost = false;
        }   
        removejscssfile("Weather/"+iPhoneType, filename, "css");
        removejscssfile("Weather/"+iPhoneType, filename, "js");
    }
    document.getElementById("sun_moonContainer").className = "fade-out-wall";
    document.getElementById("backgroundContainer").className = "fade-out-wall";
} else {
    widgetStop();
    slideshow = false;
    if (filename != "") {
        loadjscssfile ("Weather/"+iPhoneType, filename, "css");
        loadjscssfile ("Weather/"+iPhoneType, filename, "js");
        if (Start_wind_effects == true) {
            loadjscssfile ("Weather/"+iPhoneType, wind_effects+"_effects", "css");
            loadjscssfile ("Weather/"+iPhoneType,wind_effects+"_effects", "js");
            Show_wind_effects = true;
        }
        if (Start_frost == true) {
            loadjscssfile("Weather/" + iPhoneType, "frost_effect", "css");
            loadjscssfile("Weather/" + iPhoneType, "frost_effect", "js");
            Show_frost = true;
        }           
    }
    document.getElementById("sun_moonContainer").className = "fade-in-wall";
    document.getElementById("backgroundContainer").className = "fade-in-wall";
    document.getElementById("slideshow").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideWeather() {
if (weatherdisplay == true) {
    document.getElementById("WeatherInfo").className = "fade-out-wall";
    document.getElementById("forecastInfo").className = "fade-out-wall";
    document.getElementById("hourlyforecast").className = "fade-out-wall";
    weatherdisplay = false;
    document.getElementById("hideweatherInfo").className = "TextColorGreen";
} else {
    document.getElementById("WeatherInfo").className = "fade-in-wall";
    document.getElementById("forecastInfo").className = "fade-in-wall";
    document.getElementById("hourlyforecast").className = "fade-in-wall";
    weatherdisplay = true;      
    document.getElementById("hideweatherInfo").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideClock() {
if (clockdisplay == true) {            
    document.getElementById("clockContainer").className = "fade-out-wall";
    clockdisplay = false;                      
    document.getElementById("hideclock").className = "TextColorGreen";
} else {
    document.getElementById("clockContainer").className = "fade-in-wall";
    clockdisplay = true;                       
    document.getElementById("hideclock").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideWeatherBG() {
if (weatherBGdisplay == true) {
    document.getElementById("forecastbg").style.display = 'none';
    document.getElementById("hourlyforecastbg").style.display = 'none';
    document.getElementById("WeatherInfoBG").className = "fade-out-wall";
    weatherBGdisplay = false;           
    document.getElementById("hideweatherBG").className = "TextColorGreen";
} else {
    document.getElementById("forecastbg").style.display = 'block';
    document.getElementById("hourlyforecastbg").style.display = 'block';
    document.getElementById("WeatherInfoBG").className = "fade-in-wall";
    weatherBGdisplay = true;        
    document.getElementById("hideweatherBG").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchDisableForecast() {
if (disabletouch == true) {
    document.getElementById("TouchLayer").addEventListener(touchmode, touchEnd, false);
    disabletouch = false;       
    document.getElementById("disableforcasttouch").className = "TextColorWhite";
} else {
    document.getElementById("TouchLayer").removeEventListener(touchmode, touchEnd, false);
    disabletouch = true;        
    document.getElementById("disableforcasttouch").className = "TextColorGreen";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchWindeffect() {
if (windeffectdisplay == true) {
    prev_wind_effects = wind_effects;
    wind_effects = "none";
    Start_wind_effects = false;
    windeffectdisplay = false;
    document.getElementById("windeffect").className = "TextColorGreen";
    if (Show_wind_effects == true) {
        delelement("windContainer");
        delelement("windmillContainer");
        removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "css");
        removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "js");
        Show_wind_effects = false;      
    }
} else {
    wind_effects = prev_wind_effects;
    if ((filename != "") && (slideshow == false) && (Show_wind_effects == false)) {
        if ((Math.round(obj.windspeed) >= Strong_Wind) && (filename != "windy")  && (wind_effects != "none")) { Start_wind_effects = true; } else { Start_wind_effects = false; }           
        if (Start_wind_effects == true) {
            loadjscssfile ("Weather/"+iPhoneType, wind_effects+"_effects", "css");
            loadjscssfile ("Weather/"+iPhoneType, wind_effects+"_effects", "js");
            Show_wind_effects = true;
        }
    }
    windeffectdisplay = true;
    document.getElementById("windeffect").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideHourlyForecast() {
if (hourlyforecastdisplay == true) {            
    document.getElementById("hourlyforecast").className = "fade-out-wall";
    document.getElementById("hourlyforecastbg").style.display = 'none';
    hourlyforecastdisplay = false;                      
    document.getElementById("disablehourlyforcast").className = "TextColorGreen";
} else {
    document.getElementById("hourlyforecast").className = "fade-in-wall";
    document.getElementById("hourlyforecastbg").style.display = 'block';
    hourlyforecastdisplay = true;                       
    document.getElementById("disablehourlyforcast").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function createOptionsCookie() {
var options = {};
options.slideshow = slideshow;
options.clockdisplay = clockdisplay;
options.weatherdisplay = weatherdisplay;
options.timedwalls = timedwalls;
options.weatherBGdisplay = weatherBGdisplay;
options.disabletouch = disabletouch;
options.forecastdisplay = forecastdisplay;
options.windeffectdisplay = windeffectdisplay;
options.hourlyforecastdisplay = hourlyforecastdisplay;
var optionsTmp = JSON.stringify(options);
$.cookie('optionsCookie', optionsTmp, {expires: 365});
}

Are these two pages running in the same browser on the same computer? — nullability, Feb 14 '14 at 20:16
Yes, It's actually an iPhone weather widget I started about 3 or 4 years ago and it has grown huge now, download link is in my comment to Michael below. — user2253720, Feb 14 '14 at 20:44

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

Without developing a data-driven backend (PHP, Node, RoR - to name the most popular), your best bet is probably working with LocalStorage.

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

When handling the touch event, you could set a variable with localStorage, and then in the other HTML page, look for a corresponding item and act on the value (or lack thereof) of that value.

You may also want to hook into the localStorage change event - just "storage":

HTML5 / JS storage event handler

document.addEventListener('storage', storageEventHandler, false);

var storageEventHandler = function(event){
    //do something
}

edited May 23 '17 at 10:25

Community

1
1

answered Feb 14 '14 at 20:03

Jordan Foreman

3,848
7
40
65

note that this will **only** work locally (hopefully that's a duh). For example, an HTML page viewed on one machine will not have access to the `localStorage` of another machine. Depending on the desired functionality of your application, this may or may not be cause for consideration. – Jordan Foreman Feb 14 '14 at 20:19
Thanks, this is a viable option in my case, thanks for the idea. If you want to see what I'm working with please download my complete widget from my other comment in Michael's post, it's all to do with the new way IOS7 deals with the lock screen, it can't handle all the animations on the top layer so I now need to separate them from the touch events. It is just a hobby for me so I am not so experienced. :( – user2253720 Feb 14 '14 at 20:36
you're probably not going to get anyone on SO to download anything from a place like mediafire - especially with 16 rep and no username, no offense intended. As for experience, hobby development is the best way (IMHO) to get more of it, so just keep building! – Jordan Foreman Feb 14 '14 at 20:45
Yes I guess it does look a bit fishy, but I can assure you it's not, it's also available here: http://modmyi.com/forums/iphone-4-4s-new-skins-themes-launches/821501-uniaw6-0-iph4-iph5.html but the link is just to the same place. Ah well, at least I got some idea's here, thanks again. Ian Nicoll. :) – user2253720 Feb 14 '14 at 20:52

score 1 · Answer 2 · answered Feb 14 '14 at 20:13

Does the page receiving the touch event have a reference (or can get a reference) to the forecast page? For example, is the forecast page in an iframe inside the original page?

If so, you could use postMessage() to communicate from the original page to the forecast page.

OTOH, if the forecast page is inside an iframe, and all you want to do is remove the forecast entirely, then all you really need to do is have the original page remove the iframe from the DOM.

I'd be happy to talk about any approach in more detail, but first how about providing some more information about these pages and how they are loaded?

I'm not using iFrame & there is too much code to post here, you can get my complete widget here: http://www.mediafire.com/download/ae0pnug4den76cg/UniAW6.4_LS_(WidgetWeather).zip To test things first go to the Config.js file & set var XML_TEST = true; & var ChangeClick = true; I know I'm asking a lot here so completely understand if you don't have time, but I think you will like the widget. Thanks. — user2253720, Feb 14 '14 at 20:26

How to make touch event in one HTML file effect things in a separate HTML file?

2 Answers2