2012-02-01 12 views
8

अब मुझे यकीन है कि आप में से कुछ ने इस घटना के बारे में सुना है जो Byron Nuclear Plant (जो मुझे पास रहने के लिए होता है) के साथ-साथ भारी मात्रा में भूकंप चल रहा है संयुक्त राज्य अमेरिका, और कनाडा।क्रोम एक्सटेंशन सरल पॉपअप अंतिम राज्य में शेष नहीं रहेगा

वैसे भी इन सभी मुद्दों पर जा रहा मैं परमाणु संयंत्रों बेहतर देखने के लिए चाहते थे पर साथ: (BTW मैं this विस्तार जहां पूरी दुनिया में भूकंप निगरानी कर सकते हैं), और मैं पहले से ही पता था कि के बारे में Radiation Network तो मैं एक बना क्रोम एक्सटेंशन Radiation Map कहा जाता है जो विकिरण नेटवर्क द्वारा संचालित होता है (हालांकि मैं विकिरण नेटवर्क से संबद्ध नहीं हूं)

मैंने इसे स्वयं ही नहीं बनाया, लेकिन हर कोई अमेरिका, जापान, दक्षिण अमेरिका में विकिरण स्तरों की निगरानी कर सकता है , और यूरोप। (मुझे पता है कि मैंने बहुत काम नहीं किया है, लेकिन आप कारण देखते हैं)

हालांकि मुझे 1 समस्या है जिसे मैं समझ नहीं सकता। जब मेरे पास पॉपअप खुलता है, और मैं जापान के विकिरण के स्तर को देख रहा हूं, और जब मैं पॉपअप बंद करता हूं तो यह संयुक्त राज्य विकिरण के स्तर को दिखाने के लिए वापस आता है। मैं इसे कैसे बना सकता हूं ताकि यह उस स्थान पर रहे जहां उपयोगकर्ता इसे छोड़ देता है, इस मामले में जापान के मामले में कहें? RMD.JS (मैं सामग्री लिपियों, लेकिन सीएसएस की कोशिश की, और jQuery लोड नहीं किया)

प्रकट

{ 
    "name": "Radiation Map", 
    "version": "1.0.1", 
    "description": "See what radiation levels are anywhere in the United States, South America, Japan, and Europe! Updated in real time every minute.", 

    "browser_action": { 
     "default_icon": "images/logo.png", 
     "default_title": "Radiation Map", 
     "popup": "index.html" 
    }, 

    "icons": { 
     "48": "images/48x48.png", 
     "128": "images/128x128.png", 
     "256": "images/logo.png" 
    } 
} 

पॉपअप

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/rmd.js"></script> 
</head> 
<body id="radiationmap"> 
    <div id="rmlbbg"></div> 

    <div id="topnavradiation"> 
     <ul id="menu"> 
      <div id="themedrop"> 
       <table> 
        <tr><td> 
         <button id="cus">Contiguous United States</button> 
        </tr></td> 
        <tr><td> 
         <button id="hawaii">Hawaii</button> 
        </tr></td> 
        <tr><td> 
         <button id="alaska">Alaska</button> 
        </tr></td> 
        <tr><td> 
         <button id="sa">South America</button> 
        </tr></td> 
        <tr><td> 
         <button id="japan">Japan</button> 
        </tr></td> 
        <tr><td> 
         <button id="europe">Europe</button> 
        </tr></td> 
       </table> 
      </div> 
      <li><button id="about">About</button></li> 
      <li><button id="home">Home</button></li> 
      <li><button id="location">Location</button></li> 
     </ul> 
    </div> 

    <div id="radiationmap"> 
     <div id="cusmap"> 
      <img src="http://www.radiationnetwork.com/GGFTPMap.jpg" width="752" height="478"> 
     </div> 
     <div id="alaskamap"> 
      <img src="http://www.radiationnetwork.com/Alaska.JPG" width="752" height="478"> 
     </div> 
     <div id="hawaiimap"> 
      <img src="http://www.radiationnetwork.com/Hawaii.JPG" width="752" height="478"> 
     </div> 
     <div id="samap"> 
      <img src="http://www.radiationnetwork.com/Paraguay.JPG" width="752" height="478"> 
     </div> 
     <div id="japanmap"> 
      <img src="http://www.radiationnetwork.com/Japan.JPG" width="752" height="478"> 
     </div> 
     <div id="europemap"> 
      <img src="http://www.radiationnetwork.com/Europe.JPG" width="752" height="478"> 
     </div> 

     <table width="752"> 
      <td><img src="images/LegendWeb.bmp"></td> 
      <td><img src="images/Nuclear.bmp"> Nuclear Site</td> 
      <td>Alert Level = 100 CPM</td> 
     </table> 
    </div> 

    <div id="aboutradiationmap"> 
     Radiation Map is powered by the <a href="http://radiationnetwork.com/" target="_blank">Radiation Network</a>, and without them this extension couldn't be possible. 

     <p><a href="http://www.youtube.com/mikethedj4" target="_blank">Michael</a> created this extension for obvious reasons, and is in no way affiliated with the Radiation Network.</p> 
     <hr> 
     <center>Take control over your life, and stay safe!<br /> 
     <em>Much Love!</em> 

     <p><a href="http://swagbucks.com/refer/mikethedj4" target="_blank"><img src="images/swagbucks.jpg"></a></p> 

     </center> 
    </div> 
</body> 
</html> 

(प्रभाव को छिपाने के लिए , और विकिरण के स्तर की निगरानी करने वाले अन्य मानचित्र दिखाएं)

$(document).ready(function() { 
    $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap, div#themedrop, div#aboutradiationmap, div#rmlbbg').hide(); 

    $('button#home').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeOut(400); 
     $('div#themedrop').slideUp(400); 
    }); 

    $('button#about').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeToggle(400); 
     $('div#themedrop').slideUp(400); 
    }); 

    $('button#location').click(function() { 
     $('div#themedrop').slideToggle(400); 
    }); 

    $('button#cus').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#cusmap').delay(400).slideDown(400); 
    }); 

    $('button#europe').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#cusmap').slideUp(400); 
     $('div#europemap').delay(400).slideDown(400); 
    }); 

    $('button#japan').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#cusmap, div#europemap').slideUp(400); 
     $('div#japanmap').delay(400).slideDown(400); 
    }); 

    $('button#sa').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#cusmap, div#japanmap, div#europemap').slideUp(400); 
     $('div#samap').delay(400).slideDown(400); 
    }); 

    $('button#alaska').click(function() { 
     $('div#cusmap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#alaskamap').delay(400).slideDown(400); 
    }); 

    $('button#hawaii').click(function() { 
     $('div#alaskamap, div#cusmap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#hawaiimap').delay(400).slideDown(400); 
    }); 

    $('div#rmlbbg').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeOut(400); 
    }); 

}); 

उत्तर

7

पॉप-अप खुलने पर हर बार पृष्ठ को फिर से लोड किया जाता है, जिसका अर्थ है कि राज्य स्वचालित रूप से जारी नहीं रहेगा। वर्तमान सत्र के लिए सेटिंग को याद रखने के लिए आप sessionStorage का उपयोग कर सकते हैं (या यहां तक ​​कि localStorage यदि आप ब्राउज़र को पुनरारंभ करना चाहते हैं)। इस तरह कुछ:

$(document).ready(function() { 

    ... 

    $('button#cus').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#cusmap').delay(400).slideDown(400); 
     sessionStorage.selectedMap = "cus"; 
    }); 

    ... 

    // "Click" the button corresponding to the map previously selected 
    var selectedMap = sessionStorage.selectedMap || "cus"; 
    $('button#' + selectedMap).click(); 
}); 
+0

उपयोगकर्ता विस्तार को खोलता है, अलास्का पर क्लिक करता है, एक्सटेंशन बंद कर देता है, इसे बैक अप करता है, और मैं इसे छोड़ना चाहता हूं कि उपयोगकर्ता ने इसे कैसे छोड़ा। भ्रम के लिए खेद है, लेकिन यह इस मुद्दे को कैसे हल करता है? –

+1

@ mikethedj4: शायद मुझे अधिक स्पष्ट होना चाहिए था - जो आप पूछ रहे हैं वह स्वचालित रूप से नहीं होगा। पॉपअप खुलने पर हर बार पृष्ठ पुनः लोड हो जाता है। इसलिए आपको पृष्ठ को इस तरह से प्रारंभ करना होगा कि उपयोगकर्ता की पिछली पसंद का सम्मान किया जाए। यही मेरा कोड उदाहरण है। –

+0

बस इस उत्तर पर थोड़ा सा स्पष्टीकरण करने के लिए। जब आप sessionStorage नहीं करते हैं तो एक्सटेंशन को खोलने और बंद करने पर स्थानीय स्टोरेज का उपयोग एक्सटेंशन की स्थिति को संरक्षित करता है। मुझे लगता है कि एक्सटेंशन खोलने और बंद करने से पॉपअप को एक नई विंडो/टैब में फिर से खोल दिया जाता है ताकि सत्रस्टोरस साफ़ हो जाए। –

संबंधित मुद्दे