when click button move to another html and show layer - javascript

Is it possible that when click the button from a.html then move to b.html and show a layer(b.html) ?
I searched some similar example like active tab specific from another HTML.
Using javascript event like hash.location....
Anyone know how to make it and some examples? Thank you

You need 2 HTML files. Let's say you have a.html and b.html in the same folder.
If I understand correctly, you want to change the page when clicking on a button.
You now have 2 solutions :
listening to a click on the button
using a little trick, by having a button element inside a link tag <a>.
Listening to a click on a button
Let's say you have this button in your a.html file :
<button id="pageChanger">Change Page</button>
Then you need to add this JS :
document.getElementById('pageChanger').addEventListener('click', () => {
window.location = 'b.html';
})
(Don't forget that it has to be added at the end of your document, or else it will not load properly
Having a button inside a link
You just need to add this HTML code :
<button>Change page</button>

For example, suppose two html pages are as follows:
page1.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<button type="button" onclick="window.location.href = 'page2.html#myDiv'">Goto Div in Page 2</button>
</body>
</html>
page2.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="myDiv">
This is my div
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
When you click on the ‌Button in the first page, window redirects to the layer in the second page.
In this example, anchor part is used. The anchor part is the part of the URL after the hash sign (#).
Example:
<button type="button" onclick="window.location.href = 'https://stackoverflow.com/jobs?med=site-ui&ref=jobs-tab#profile-summary'">Go!</button>

Related

Google Script - Sidebar button keeps opening a new tab

I'm creating an extremely basic script to assist me in one of my google spreadsheets.
I've successfully got a sidebar showing, with a few buttons (which function). However, whenever I click on one of those buttons, it also opens up a new tab, with a URL something like: "https://n-lx3mdv5ls3mdgglsq226llilxd2m4owxy72y3fy-1lu-script.googleusercontent.com/userCodeAppPanel?"
Even if the button is left without any functionality, this still occurs.
Here's an example of the html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
</style>
</head>
<body>
<div class="sidebar">
<form>
<div class="block" id="buttons">
<button id="unindent">Unindent</button>
<button id="indent">Indent</button>
<button id="asdgdgasg">Test</button>
</div>
</form>
</div>
</body>
</html>
How can I stop this new tab from opening every time?
Issue:
<button> type, if not specified defaults to type=submit. So, The form automatically submits the data to the server. This is not preferable in a iframe.
Solution:
Explicitly specify button type as button. <button type='button'>
Use event.preventDefault() to prevent automatic form submission.
References:
Button#Default
Sample Form
When I saw your issue, I thought that this is due to <form>. So I proposed the following modifications.
Modify <form> to <form onsubmit="event.preventDefault()">.
Modify <base target="_top"> to <base target="_self">.
Remove <base target="_top">.
Note:
I think that #TheMaster's answer is more useful information.
References:
Event.preventDefault()
The Document Base URL element

Javascript opening multiple tabs in chrome extension

I am making a chrome extension and I have multiple buttons which open different tabs. Unfortunately for some reason when I click the Seqta button it opens the tab 3 times and with the maths book it opens the tab twice. I'm not sure what is wrong but I have put the html and javascript below.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #263238;
width: 300px;
height: 500px;
}
</style>
</head>
<body>
<div id="buttons">
<div id="buttonDivSEQTA">
<button type="button" class="button" id="seqta" >Seqta</button>
<script src="popup.js"></script>
</div>
<div id="buttonDivMATH">
<button type="button" class="button" id="maths">Maths Textbook</button>
<script src="popup.js"></script>
</div>
<div id="buttonDivHASS">
<button type="button" class="button" id="hass">HASS Textbook</button>
<script src="popup.js"></script>
</div>
</div>
</body>
</html>
Javascript
var button = document.getElementById("seqta");
button.addEventListener("click", function(){
chrome.tabs.create({url:"https://learn.bcgs.wa.edu.au"});
});
var button = document.getElementById("maths");
button.addEventListener("click", function(){
chrome.tabs.create({url:"https://jacplus.com.au"});
});
var button = document.getElementById("hass");
button.addEventListener("click", function(){
chrome.tabs.create({url:"http://www.pearsonplaces.com.au/User_Login.aspx"});
});
It would be great if someone could help me out
You entered mutliple script calling, remove <script src="popup.js"></script> from the body and place it in right before .
As others say you have the script called three times.
You need to delete the two of them and move the call into the <head>-section with whatever is located there. It is the most common and also then you know exactly where your scripts are located and you doesn't have to search your entire page for the script.
For example:
<head>
<script src="popup.js"></script>
</head>
For reference:
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
W3Schools
For those who are interested there is an old discussion on where to put the jQuery/JavaScript scripts - read it here

How to wrap the element with matching button text?

Hi i am trying to append the div to the button with the corresponding to that button text
(i.e. In the case of below example the button text is "Download" so i am appending the div class as new and if the button text is "Upload"
i will append some other div class).
And for the appending div I am using wrap API.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button class="btn" title="run">Download</button>
<script>
$(document).ready(function() {
var buttontext = $("button").text();
alert(buttontext);
$('button[text="Download"]').wrap("<div class='new'></div>");
});
</script>
</body>
</html>
I am trying to get the button text like this button[text="Download"] but it is not working.
Finally i want the output something like this
<div class="new">
<button class="btn" title="run">Download</button>
</div>
Any help will be appreciated.
You could user jquery's contains method:
$(document).ready(function() {
$('button:contains("Download")').wrap("<div class='new'></div>");
});
Here is a working codepen:
http://codepen.io/egerrard/pen/MJpwdz
And the documentation on contains:
https://api.jquery.com/jQuery.contains

Contents inserted by Javascript is not catching up the styles

Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.

Click a button and it should load the content into the main content area

I have create 3 buttons on the left menu for "Cars," "Music," and "Games"
When the user clicks one, it should load the appropriate contents into a DIV
in the main content area. Each button should replace the contents of anything
previously displayed in the div. I created my buttons, but I do not know how to
load the content into the main content div or how to replace the previous content.
Can you help please?
Use jquery load function
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script src="../js/jquery.js"></script>
<script>
function load(url){
$('#content').load(url);
}
</script>
</head>
<body>
<button onclick='load("url1");'>Content 1</button>
<button onclick='load("url2");'>Content 2</button>
<div id='content'></div>
</body>
UPDATE Ok lets clarify it a bit.
The code above uses jQuery lib. Look here for more info about load function.
If you cannot or dont want to use jQuery look here for JS solution.
If you want to use only static content then you have two another options:
//1: if the new content is only small portion of info text
<script>
function load(newContent){
document.getElementById('content').innerHTML = newContent;
}
</script>
<button onclick='load("some text 1");'>Content1</button>
<button onclick='load("another text 2");'>Content2</button>
<div id='content'></div>
//2: put content directly to your page the several DIVs and hide them
<script>
function show(index){
var n=2; // number of DIVs
//show desired content and hide any others
for(var i=1; i<=n; i++){
document.getElementById('content'+i).style.display = i == index ? 'block' : 'none';
}
}
</script>
<button onclick='show(1);'>Content 1</button>
<button onclick='show(2);'>Content 2</button>
<div id='content1'></div>
<div id='content2' style='display:none;'></div>

Categories