OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Create navigation bar [duplicate]

  • Thread starter Thread starter nic
  • Start date Start date
N

nic

Guest
I've been trying to create a navigation bar on Google Apps Script. When onclick, I want the navigation to show a certain page. I tried using a onclick() in anchor tag but it seems like the onclick() function doesn't work with anchor tag in Apps Script... Is there any other way for me to create navigation bar in Apps Script?

Edit​


Sorry I think I've confused you for the question. I want to put a navigation bar in a standalone webapp, and I'm building the webapp using google appscript. But I have problem when I want to link pages (about, news) to the nav bar. for example, When I click the nav bar, it will shows this n-fde2z55pv56hs752i7fn5pz4auy44qtfz7bsfzi-0lu-script.googleuser… instead of the news page. I noticed that if I include onclick() in achor tag, it will redirect me to this link https://n-fde2z55pv56hs752i7fn5pz4a....googleusercontent.com/userCodeAppPanel#about.

I'll include my code below so that you can have a clear view on my problem:

Below is my code:

HTML code​


Code:
    <div class="topnav" id="myTopnav">
        <a  href=#news onclick="openNews()">News</a>
        <a  href=#about onclick="openAbout()">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction">
            <i class="fa fa-bars"></i>
        </a>
    </div>
    
    <div id="aboutDisplay" class="aboutDisplay">
        <div class="container">
            <p>about page</p>
        </div>
    </div>

      <div style="display:none" id="newsDisplay" class="newsDisplay">
        <div class="container">
            <p>news page</p>
        </div>
    </div>

Javascript​


Code:
    function openAbout() {
        document.getElementById("aboutDisplay").style.display = "block";
        document.getElementById("newsDisplay").style.display = "none"; 
    }  

     function openNews() {
        document.getElementById("aboutDisplay").style.display = "none";
        document.getElementById("newsDisplay").style.display = "block"; 
    }
<p>I've been trying to create a navigation bar on Google Apps Script. When <code>onclick</code>, I want the navigation to show a certain page. I tried using a <code>onclick()</code> in anchor tag but it seems like the <code>onclick()</code> function doesn't work with anchor tag in Apps Script... Is there any other way for me to create navigation bar in Apps Script?</p>
<h1>Edit</h1>
<p>Sorry I think I've confused you for the question.
I want to put a navigation bar in a standalone webapp, and I'm building the webapp using google appscript. But I have problem when I want to link pages (about, news) to the nav bar. for example, When I click the nav bar, it will shows this n-fde2z55pv56hs752i7fn5pz4auy44qtfz7bsfzi-0lu-script.googleuser… instead of the news page. I noticed that if I include onclick() in achor tag, it will redirect me to this link <a href="https://n-fde2z55pv56hs752i7fn5pz4a....googleusercontent.com/userCodeAppPanel#about" rel="nofollow noreferrer">https://n-fde2z55pv56hs752i7fn5pz4a....googleusercontent.com/userCodeAppPanel#about</a>.</p>
<p>I'll include my code below so that you can have a clear view on my problem:</p>
<p>Below is my code:</p>
<h3>HTML code</h3>
<pre class="lang-html prettyprint-override"><code> <div class="topnav" id="myTopnav">
<a href=#news onclick="openNews()">News</a>
<a href=#about onclick="openAbout()">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction">
<i class="fa fa-bars"></i>
</a>
</div>

<div id="aboutDisplay" class="aboutDisplay">
<div class="container">
<p>about page</p>
</div>
</div>

<div style="display:none" id="newsDisplay" class="newsDisplay">
<div class="container">
<p>news page</p>
</div>
</div>
</code></pre>
<h3>Javascript</h3>
<pre><code> function openAbout() {
document.getElementById("aboutDisplay").style.display = "block";
document.getElementById("newsDisplay").style.display = "none";
}

function openNews() {
document.getElementById("aboutDisplay").style.display = "none";
document.getElementById("newsDisplay").style.display = "block";
}
</code></pre>
Continue reading...
 

Latest posts

D
Replies
0
Views
1
Domantas Giedraitis
D
Top