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>
Related
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])',
the window popup but video isn't playing.
it says ''The web page at file://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1 might be temporarily down or it may have moved permanently to a new web address.''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/watch?v=Nlw5FnHGER4">play</a>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</body>
</html>
when i am trying this with a image then it is working fine.
$(document).ready(function(){
$('.popup-youtube, .popup-vimeo').magnificPopup({
// disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
iframe:{
patterns:{
youtube:{
index: 'youtube.com',
id: 'v=',
src: 'https://www.youtube.com/embed/%id%'
},
},
srcAction:'iframe_src',
},
fixedContentPos: false
});
});
Declared src for iframe and it worked.
If you want the video in a popup/another window try this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
please note the movement of all script tags to under the head, the updated URL, and the removal of
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
if you want it embedded within the page (as an iframe) try:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</head>
<body>
<iframe width="420" height="315" class= "popup" scr= "https://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1">play</iframe>
</body>
</html>
also reference this site, w3 schools, (here)
also try it out here (option 1), RIGHT CLICK on the link in STACK OVERFLOWS ENGINE in any other you can just click on it but stack overflow requires you to right click and say "open in new tab"
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</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. :)
i'm writing a android apps with phonegap and need inappbrowser to display certain contents, so i write some testing code
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.2.css" />
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<style>
#footer {
position:fixed;
bottom:0;
width:100%;
}
</style>
</head>
<body>
<div data-role="page" id="page_dashboard">
<script type="text/javascript" charset="utf-8" src="scripts/dashboard.js"></script>
<script type="text/javascript" charset="utf-8">
var ref = window.open('http://apache.org','_blank','location=yes, enableViewportScale=yes');
ref
.addEventListener('loadstart', function() { alert(event.url); });
</script>
After i clicked the button, the strange code will convert to the valid text. That is "Alert" box to prompt "undefined" text.
Problems:
Why the text can't be displayed?
Why there is a alert box when the apps start?