CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome-appchrome-app-developer-tool
Mdbook
Mdbook

Reputation: 39

Chromeapp set div display style

I am trying to create a menu-app, and ran into some trouble when trying to set the div style to "display:none;". I ran the code in jsfiddle, and it works fine. Here is my manifest:

{
  "manifest_version": 2,
  "name": "MenuProject",
  "short_name": "Menu",
  "description": "",
  "version": "0.0.1",
  "minimum_chrome_version": "38",

  "icons": {
    "16": "assets/icon_16.png",
    "128": "assets/icon_128.png"
  },

  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

Here is my background.js:

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create(
    'index.html',
    {
      frame:"none",
      id: 'mainWindow',
      bounds: {width: 300, height: 200}
    }
  );
});

Here is my index.html:

<body>  <style>
* {
    margin: 0;
    padding: 0;
}

body {
  height:200px;
 background-color: #f3f0ef;
}

.menu-container {
  -webkit-app-region: drag;
  display: block;
  position: relative;
  width: 300px;
  background-color: #f3f0ef;
  padding: 0;
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
}

.nav{
  background-color: #ed6b3a;
  height:40px;
 /* border-radius:5px 5px 0 0;*/
}

.settings {
  height:20px;
  float:right;
  background-image:url(http://i.imgur.com/CLs7u.png);
  width:20px;
  margin:10px;
}

.menu ul {
  list-style:none;
}

.menu ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:11px 10px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  }

.menu ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}

.menu ul li img {
  float:left;
  margin:-2px 0 0 0;
}
/*
.menu ul li:hover {
  border-left:3px solid #ed6b3a;
  background-color:rgba(0,0,0,0.02);
}*/
</style>

  <script>
//var menumain = document.getElementById('menu');
function openPaste(){
//var menumain = document.getElementById('menu');
document.getElementById('menu').style = "opacity:0;"
//  menumain.style="display:none;";
}
</script>
<link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>
<div class="menu-container">

  <div class="nav">
      <div class="settings"></div>
  </div>

  <div id="menu" class="menu" style="display:block;">
      <ul>
    <li onclick="openPaste();"><a><img src="http://i.imgur.com/4JPrK.png"><p>Quick Pastebin</p></a></li></button>
    <li><a><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
    <li><a><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
    <li><a><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
  </ul>
  </div>
</div>
</body>

When I run it in jsfiddle, clicking the "Open Pastebin" Button works fine. But when I run it as a chrome app, clicking it does nothing. What am I doing wrong?

Upvotes: 0

Views: 162

Answers (1)

kailniris
kailniris

Reputation: 9546

Chrome Apps do NOT allow inline scripts. You have to put your script into a different file and refer to that script file in your index.html.

Because of the Content Security Policy, this code won't execute. Including any inline code in your index.html will not work, including this:

<li onclick="openPaste();">

Read this for better understanding.

Upvotes: 1

Related Questions