I have a very strange behavior with a datepicker loaded with data-type="ajax" inside the fancybox.
It is not possible to change month and year in the datepicker.
If I open datepicker and close the fancybox not by using the close "x", the datepicker still remains, but then with working select boxes for month and year
Here's my code from the calling script:
<html>
<head>
<title>test fancybox with datepicker</title>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></head>
<body>
<a data-fancybox data-type="ajax" href="testfancy-call.php">
Load Fancybox Content
</a>
</body>
</html>
And this is the very simple code from testfancy-call.php:
<html>
<head>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#date").datepicker({
changeMonth: true,
changeYear: true,
});
});
</script>
</head>
<body>
<h1>Datepicker</h1>
<input type="text" name="date" value="" id="date">
</body>
</html>
I tried to use data-type="iframe". Here I get the datepicker working, but I have to include all external script inside "testfancy-call.php". This is not a proper solution for me, because the used software's architecture doesn't allow this. So I need to find a way using data-type="ajax".
EDIT
The behavior is only when loading with data-type="ajax". If I place the code stuff from the ajax-loaded file testfancy-call.php directly inside the calling script like in https://codepen.io/fancyapps/pen/QqLXaz it works!
EDIT 2
After some research I found that it's a crossbrowser problem for issue 1. In Firefox the selectboxes for month and year so not work. Internet Explorer and Chrome work like exspected. Is there a way to get Firefox working?
All three testet browsers have the problem that is described in issue 2.
EDIT 3
I've uploaded a demo: http://marcox.square7.ch/testfancy.html
Try disabling touch events using touch: false, because fancyBox catches touch events by default to enable swiping gestures.
Related
In a presentation, I would like to create a Twitter Timeline with a few selected tweets. In the best case it should look as natural as if someone went to Twitter on his own computer or saw it on his smartphone.
I am using LateX Beamer for the rest of the slides, but I am flexible if it is another software that allows to export a PDF/Image that I could include in LateX.
(There are a lot of tools on how to integrate live Tweets in PowerPoint / Keynote , but I want to do it for historical tweets and will be offline during the presentation.)
I was trying the following:
- Simply take screenshots of the tweet and arrange them within LateX or PowerPoint. Looks ok but not super nice, and quite cumbersome to do.
Since it is possible to extract an html of a tweet to embed on a homepage, I thought of doing this for the presentation. Unfortunately, I don't know much of html / reveal.js presentations.
Has anybody found a good solution for a similar problem?
EDIT:
I started reveal.js and found the following plugin: https://github.com/rajgoel/reveal.js-plugins/tree/master/embed-tweet
I was then trying to apply it and followed the intros to reveal.js and also saved the source code of the plugin into my plugin folder for reveal.js. However, it does not work (=Returning a blank page in the html). Can anybody point me to my error? (I am completely new to reveal.js / html so sorry if it is basic?)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- ALL SLIDES GO HERE -->
<!-- Each section element contains an individual slide -->
<section>
<div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Required, even if empty.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/embed-tweet/embed-tweet.js' },
// ...
]
});
</script>
</body>
</html>
We have a browser-based solution that we want to integrate with Datalogic scanners.
We will be using the locked down browser as our primary interface.
We've got as far as configuring the scanner and can confirm that it is decoding our Code 39 barcodes.
We've set up a test page that is supposed to take the scanned code and dump it in a text area.
The test page is
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta http-equiv="DL_Code_39" content="Enable">
<meta http-equiv="DL_Scan" content="Javascript:ValidateInput()">
<script language="javascript" type="text/javascript">
function ValidateInput(n){
document.getElementById("sku").value+=";"+n;
};
</script>
</head>
<body>
<form method="post" name="fTest">
<textarea rows="5" cols="15" name="sku" id="sku"></textarea><br>
<input type="submit" value="go">
</form>
</body>
</html>
When we scan, the javascript call is firing, but returning undefined.
If we give the javascript function call a variable (something not done in the documentation) it does not fire
We must be missing something simple but there is no sample code in the DL documentation and google can find nothing else either.
Any help would be greatly appreciated.
I have always found javascript support to be flaky on Windows CE. I assume this is what the data logic scanner is running on?
I would normally configure the scanner to act as a keyboard, that way you can use standard html forms and handle the logic server side. I haven't got a Scorpio to test with but the Falcons have this ability under encoding options.
You can also set a prefix and suffix that the scanner will append to the scanned barcode. In your case it looks like this might be ';\n'
I have solved this on my own
The problem in this case is one of the reasons why developers drink too much.
The problem is the name of the example javascript function described in the documentation
This code works perfectly
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta http-equiv="DL_Triggers" content="Enable">
<meta http-equiv="DL_Code_39" content="Enable">
<meta http-equiv="DL_Scan" content="Javascript:PassSKU">
<script type="text/javascript">
function PassSKU(n){
if (n === undefined) {
n = 0;
}
document.getElementById("sku").value+=";"+n;
};
</script>
</head>
<body>
<form method="post" name="fTest">
<textarea rows="5" cols="20" name="sku" id="sku"></textarea><br>
<input type="submit" value="go">
</form>
</body>
</html>
The only thing I changed was to rename my function call from ValidateInput() (the function name given in the documentation which I copied and pasted) to PassSKU
So
<meta http-equiv="DL_Scan" content="Javascript:ValidateInput">
This does not work
<meta http-equiv="DL_Scan" content="Javascript:AnyOtherFunctionName">
This works fine
WHY this fixed the problem is a topic for another time.
In case someone comes across this question while searching for information on getting a Datalogic scanner to work with a web form, I've posted a working solution here: stackoverflow: "Datalogic Falcon X3 - Barcode Scanner"
So earlier I was stumped on why my website becomes unreadable (this is my first theme I'm creating in Magento) when I scale the website down to a phone size or small tablet size using Resizer bookmarklet in Chrome. I've created multiple responsive designs and never had this problem.
I figured out it's because that this gets appended into the style attribute on the tag:
-webkit-transform: scale(0.6122448979591837); -webkit-transform-origin: 0px 0px; min-width: 980px;
How exactly do I find what's appending that to the html style attribute? I'm guessing that's just a thing magento does by default in one of the javascript files?
Because when I delete that off the style attribute on the html tag, the page loads fine with the font size readable and everything else like it originally would.
These are all the default js files that Magento loads:
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mage/cookies.js"></script>
I'm not sure where this is coming from, but here's a tip. If you're working in Chrome, pull up the inspector (F12 on Windows).
Then, click the Elements tab (at upper-left). Right-click on the <html> node, and select Break On ... > Attributes Modifications. Then refresh your page.
If this is a JavaScript-driven problem, then the inspector should catch the change to the HTML element, and pause execution right at the line of the file which is adding these styles. That will tell you where the problem lies.
If it works, let me know and I can try to help further.
I downloaded the latest CKEditor and tried the following:
<html>
<head>
<script src="ckeditor/ckeditor.js">
</script>
</head>
<body>
<div id="editor">
Some test text
</div>
<script>
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editor' );
</script>
</body>
It worked in the sense that I can click the div to make the editor toolbar appear, but aside from that I can't seem to edit the content! Most of the toolbar buttons are disabled, and typing into the field does nothing. (See screenshot below)
According to http://nightly.ckeditor.com/13-04-14-07-42/standard/samples/inlinebycode.html this should be all the JS I need. Is there some other config setting I need to be doing?
Rawr, sorry. I found the answer mere minutes after posting this. I was so focused on looking for a config option I didn't realize to check the div in the example.
The div still has to have contenteditable="true" even if I don't use CKEDITOR.disableAutoInline.
So in all my failed attempts to get jQueryUI working, I have tried this example here after downloading a theme from the jQueryUI site.
and here is my code looking at that example in the link above in my asp.net mvc page.
<link type="text/css" href="<%= Url.Content("~/Scripts/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css")%>" rel="stylesheet" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-1.7.1.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-ui-1.8.17.custom.min.js")%>"></script>
<script>
$('#dialog_link').click(function(){
$('#Dialog').dialog('open');
return false;
});
</script>
<p id="dialog_link">Open Dialog</p>
<div id="Dialog" title="Dialog title!">
This content shown within dialog...
</div>
After hitting F5 I would have expected to see a clickable text which when clicked would bring up a modal dialog with a [x] button to close it and get back to the main window. However what I get to see is this on page load,
where the text 'open dialog' does not respond to click events and the supposed "modal dialog" is already visible in the form of a plain string and without any formatting. So where did all the magic of jQueryUI go? Something wrong in my linking correct scripts?
Totally lost. Please help..
Edit
This exact same code works in pure html mode in a different file. when I copy this code into my asp.net mvc page within the content tags I get a javascript error at a non-descript line!!
Just take the 'open' out of your $('#Dialog').dialog('open'); and you are good to go.
Edit: Added this jsFiddle with your code as an example:
http://jsfiddle.net/DoomHamster/LhJsL/1/
Also, you don't need 'return false' when clicking an element with no default click event.
EDIT: From your comment below I suspect that you are having issues with loading jQuery and jQueryUI in the first place. Try replacing your script and css links with the following as a test to eliminate path issues:
<link type="text/css" rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
Try this
$(function()
{
$('#dialog_link').click(function(){
$('#Dialog').dialog();
return false;
});
})