I have a HTML project consisting of 5 pages. I have a login button in every page where I am using a modal. It uses id of the modal div.
<li> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">LOGIN</button></li>
but i've to copy paste the modal code in every page.
Is there a way to not paste the complete modal div in every page ?
My suggnetion is to use jquery here is some code snippet
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("button.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
For button you can put your code in #includedContent div.
Aou have to put script code js file . i.e "button.js"
And include that js file in every page where you need to have login button.
and #includedContent div.
hope so this will help you
Related
I'm trying to add a payment button to my web page (wix). When clicked, it opens in the same iframe like a widget, but I would like it to open in a new tab when clicked. target="_blank" does not work.
Example code:
<html>
<body>
<script src="https://www.example.com./integrations/v1/web-payment-checkout.js"
data-preference-id="example" data-source="button">
</script>
</body>
</html>
With Bootstrap you can use an anchor like a button.
OR use style to customize link as to appear like a button.
And use target="_blank" to open the link in a new tab.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<br>
<a class="btn btn-success" href="https://www.google.com" target="_blank">open google in new tab</a>
</body>
</html>
If you want to open a link in a new tab from velo, I made a video workaround below:
https://joelgrayson.com/open-in-new-tab-wix-code
https://youtu.be/7yp-kLGu1Yw
Essentially, you cannot use <a href='' target='_blank'> in velo, but you can do it in an HTML frame. In the workaround, I messaged the HTML frame from velo. Upon receiving the message, the HTML frame opened using <a href='' target='_blank'.
I have an HTML page
<html>
<body>
<button> This is a button! </button>
</body>
</html>
it is loaded into chromium
How to catch a user's click on it and execute code?
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
I'm working on an existing page. And there's a button on the page. It's like:
<html>
<script src="..."></script>
...
<div><input>...</input></div>
</html>
After click the button, a pop up dialog page(it's a fully functional page, not just displaying some messages) will show. It's like:
<html>
<script src="..."></script>
...
<div><input>...</input></div>
<div>
<iframe>
<html>
<script src="..."></script>
<form>
...
</form>
</html>
</iframe>
</div>
</html>
In the new page, I have to load all the necessary script again which takes a lot of time.
My question is:
I'm doubtful about this kind of implementation, can someone comment on this?
what's the best practice for this kind of scenario(open a new dialog page)?
In my website i made a mainpage which has 3 divs: header, footer and main. Header div has some buttons which change main div. Means that page is loaded only once then i just change main div when some button is clicked. I simply put a html page in main div when some button is clicked.
i have put alert in every page's $(document).ready function. Whenever main div is changed, these alerts should come because main div is a html page. But these alerts are not coming. Why is that so. I want to load some data every time when main div is changed. How can i do that? Thanks in advance.
main page:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
$("#main").load("page1.html");
});
$("#btn2").click(function(){
$("#main").load("page2.html");
});
});
</script>
</head>
<body>
<div id="header"> --- </div>
<div id="maincontent"><div id="main"> --- </div></div>
<div id="footer"> --- </div>
</body>
</html>
page1:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// trying to load data. but its not working
});
</script>
</head>
<body>
<div id="page1-div"> --- </div>
</body>
</html>
You are just making changes in DOM, not loading new document which would trigger $(document).ready();.
Based in questions tags, i assume that you are loading content using AJAX. In that case just use jQuery's callbacks for $.ajax* functions to do any kind of action when content is loaded.
This looks like what you need.
http://james.padolsey.com/javascript/monitoring-dom-properties/