If you have not heard of Dipity, it is a web app that allows people to create timelines on a browser. Here is an example of a timeline:
http://www.dipity.com/StevePro/Steve-Jobs-Life-and-Career/
How could I implement the timeline functionality that you see in the above link? More specifically, how is the zooming, momentum scrolling, and other UI elements achieved, without Flash?
Under your expertise, what libraries or projects should I be looking at if I want to make a canvas that can zoom in/out, scroll, and go fullscreen like the one you see above?
Thanks in advance for your help.
First off, you can view source and see that they're using a lot of jQuery and jQuery plugins:
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityAccount.js.v8972.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-1.4.2.min.js.v8078.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipity.js.v9015.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityCookie.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityDialog.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipitySearch.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-ui-1.8.custom.min.js.v8078.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/swfupload.js.v7257.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/functions.js.v8803.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/carousel.js.v8453.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/typewatch.js.v7961.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.mousewheel.min.js.v8346.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.autogrow-textarea.js.v8871.js"></script>
<script type="text/javascript" src="http://www.dipity.com/js/widget.js?key=8307484b5ef1207f7f202fe890a8e14d&sig=5d284fd444ffec2ff3b59dbe2d3d8167"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityForms.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityEvent.js.v8979.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityTopic.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/eventdetail.js.v8490.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/tl_below.js.v6370.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/ajaxForm.js.v8875.js"></script>
You're not going to get any "do A, B, and C and you're done", as they have a very complex UI going there. My suggestion would be start on one piece of it (canvas, or mouse wheel events) and just build out a small piece at a time, or find plugins to build the pieces, and then put them all together to build what you're after.
That's the same way pretty much all software is built. You take your individual building blocks, and stack them up to create your own unique creation.
Related
I recently installed Magento 2.3 and extended the default Magento Luma theme by creating a custom theme.
I'm trying to override type attributes of default JavaScript and CSS files in the <HEAD>.
In other words, I want this:
<link rel="stylesheet" type="text/css" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
to become this:
<link rel="stylesheet" type="text/css/custom" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
Notice the change from text/javascript to text/javascript/custom. Similar for CSS.
I tried updating my default_head_blocks.xml file like so:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="mage/calendar.css" type="text/css/custom"/>
<script src="requirejs/require.js" type="text/javascript/custom"/>
<script src="mage/polyfill.js" type="text/javascript/custom"/>
</head>
</page>
But what I get is:
<link rel="stylesheet" type="text/css" type="text/css/custom" media="all" href="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/calendar.css" />
<script type="text/javascript" type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/requirejs/require.js"></script>
<script type="text/javascript" type="text/javascript/custom" src="https://my-mage-url/pub/static/version1574118953/frontend/restive/magedot/en_US/mage/polyfill.js"></script>
Notice the double type declarations instead of single.
Is there a way to achieve what I described i.e. overriding type attributes for JavaScript and CSS files?
P.S. I know why I need to do this, I'm just not able to explain fully here.
I couldn't find another option to do this besides using root.phtml. Here are the steps:
Create a templates folder under Magento_Theme folder in your theme space
Create root.phtml file inside this directory [templates]
Open <Magento_root>/vendor/magento/module-theme/view/base/templates/root.phtml, then copy and paste its contents into the root.phtml in your theme space
Create a function to modify $headContent. I used preg_replace with a regular expression to find the duplicate references and then remove what I did not need. It was just a few lines of code.
Upload, then flush cache
I have the following page http://link.org/ (tested and is valid W3 HTML), where I am using the jquery cycle slideshow function (old version).
But even though the cycle function file is definitely being called, I am still getting an error: $(...).cycle is not a function
Would someone be able to look and see what the issue might be?
Thanks!
For some weird reason jQuery tools are invoking ready event before page is completely loaded, change order of scripts from:
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
to
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
and your error will be gone.
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.
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.
First MVC project, just curious what the best way to manage this is.
All of my views that I'm creating contain the following
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
I would prefer to keep my js before my closing body tag. I know I can obviously move this to my layout.cshtml file, but I imagine there's a more elegant MVC/Razor way to do this (especially if I have view-specific files that I don't want to load globally).
How can I accomplish this?
I put my global scripts inside _Layout.cshtml, and then define a section for scripts I only want to include from certain views.
E.g. in layout.cshtml
<body>
...
<script src="#Url.Content("~/Scripts/global1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/global2.js")" type="text/javascript"></script>
#RenderSection("FooterScripts", false)
</body>
</html>
and then in the views if I need a script I don't want to include globally:
#section FooterScripts
{
<script src="#Url.Content("~/Scripts/local.js")" type="text/javascript"></script>
}