I'm testing Swup.js
As far as I see it doesn't work with relative links. Like this;
Go page
Screenshoot for link in DOM
For this you need to enter the URL with the full path. But this may be undesirable. Relativity is used quite often, especially in designs with HTML content.
It works when I do as follows.
Go page
This was not the case with Turbolinks. What is the reason of this? Do I need to make any adjustments? Thanks.
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP INDEX</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="1.css">
<script src="1.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>INDEX</h1>
Go Page
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
My page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP PAGE</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="2.css">
<script src="2.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>PAGE</h1>
Go Index
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
Try to insert that instead of (LINK_SELECTOR: 'a')
linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',
Related
I have been experimenting with this for a couple of hours and I remain confused.
I am attempting to open a JQuery UI dialog (modal) when a link ([a] tag) is clicked, getting the content of the dialog window from the href of the link.
So far I have (gleaned from various places) where testb.html is a simple html fragment:
<div><p>Some text</p><p>more text</p</div>
The idea is that when anchor (link) is click the content of testb.html appears in the dialog.
Why doesn't this work???
David (70-year-old pre-Alzheimers ex-programmer with little HTML experience)s
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p>Click!</p>
</body>
</html>
you can use this code:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p>Click!</p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>
You run the assignment before the element exists on the page. Wrap it in a load handler
$(function() { // on page load
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
});
})
You cannot open the container as a dialog the way you try it. You need something like
$(function() { // on page load
$(".container").dialog({
autoOpen: false,
width: 750,
modal: true
});
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
$(".container").dialog('open');
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p>Click!</p>
</body>
</html>
This opens a jquery dialog modal when the anchor tag is clicked.
Combining bits from the previous answers, I got this, which works!
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<p>Click!</p>
<div id="dialog" title="Basic dialog"></div>
<script>
$('.modal').on('click', function (e) {
e.preventDefault();
$('#dialog').load(this.href)
$("#dialog").dialog()
});
</script>
</body>
</html>
With codeangler's answer, the dialog appeared,but didn't have the content of testb.html, instead had the content of the div.
With mplungjan's answer... Well, I couldn't get it to work.
With Sepehr Pourjozi's answer, the dialog appeared but contained the literal text "testb.html", not the content of testb.html.
Taking hints from all three answers, I got it to work. And now I understand JQuery dialogs a little bit better.
Thanks, all.
David
Hi I have two page in the iframe(index.html,another-one.html).
index.html has a button which redirected to another-one.html
once another-one.html sent message using window.top.postMessage causing it redirect back to initial one.
index.html (page loaded initially)
another-page.html.
Trigger window.top.postMessage from another-page.html
Redirected to initial page.
Expected should stay at index.html
Host Page or Container Page loaded with index.html
host page code
<iframe src ="http://127.0.0.1:8888/index.html" name="example" id="example" application="yes">
</iframe>
js code in host page
window.addEventListener("message", (e)=>{
if(e && e.data){
this.pagedata = e.data;
}
}, false);
code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(()=>{
$("#redirectButton").click(()=>{
window.location.href="./another-page.html";
});
})
</script>
</head>
<body >
<button id="redirectButton" type="button">Redirect</button>
</body>
</html>
code of another-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New Page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(()=>{
$("#btnMessage").click(()=>{
let obj = {
message:"this is new message"+(new Date())
};
window.top.postMessage(obj, '*');
});
})
</script>
</head>
<body >
Another Page
<input id="btnMessage" type="button" value="Send Again"></input>
</body>
</html>
I created a Node.js application and dont want that the Client is able to refresh the page or atleast give him a warning before he refresh it.
Here is my code for the client.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.2.2/pusher.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="mainClients.js"></script>
<title>Clients</title>
</head>
<body onload="RunOnBeforeUnload()">
<div id ="main">
<div class="container" id = "1">
<h1 id="questionIndex"></h1>
<p id="question"></p>
<form id="vote-form">
</form>
<br><br>
</div>
<script type="text/javascript">
let url = window.location.search;
code = url.substr(url.indexOf("=")+1);
generatePageContents('questionIndex', 'question', 'vote-form', 'http://localhost:5000/QueryQuestion', code, 1)
</script>
<script type="text/javascript">
if(typeof(form) == 'undefined') {
const form = document.getElementById('vote-form');
vote(form, 'os', 'submitId', 'http://localhost:5000/poll');
}else {
vote(form, 'os', 'submitId', 'http://localhost:5000/poll');
}
</script>
<script type="text/javascript">
questionListener('topic-change', 'topic-change', 'questionIndex', 'question', 'vote-form', 'http://localhost:5000/QueryQuestion', code);
</script>
<script language="javascript">
function RunOnBeforeUnload() {window.onbeforeunload = function(){ return '!'; } }
</script>
</div>
</body>
</html>
Does anyone here know how to handle this task? I think it should be pretty easy but I cant find anything on the Internet
I have the following code (also on jfiddle https://jsfiddle.net/96ye4hL4/1/ )
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
</body>
</html>
When I click on the right most character in a hyperlink (the M in FooM), the hyperlink window does not pop up.
How can I pop up the hyperlink window upon clicking the last letter in FooM?
This is an open issue with the Quill library.
https://github.com/quilljs/quill/issues/1931
Notice your code snippet will not run, but standard HREF does:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
FooM
</body>
</html>
So i just want to open a webpage , but a big part of it are scripts read by the browser...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>MyAccount</title>
<link rel="stylesheet" href="/vendor.css" />
<link rel="stylesheet" href="/app.css" />
</head>
<body>
<div id="container">
// Here is the rest generated by the script. On chrome i can see it easily (inspect element)
</div>
<script type="text/javascript">
window.myAccountUrl = "http://urlsample";
</script>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/app.js"></script>
<script type="text/javascript" src="/init.js"></script>
</body>
</html>
but with casper nothing appear in it. I use this settings:
pageSettings: {
loadImages: true,
loadPlugins: true,
javascriptEnabled: true,
localToRemoteUrlAccessEnabled: true,
XSSAuditingEnabled: true
}
And i render the html like that:
var js = this.evaluate(function() {
return document;
});
this.echo(js.all[0].outerHTML);
If anyone can help me, he's welcome. :)