Jgrowl like notification using dojo - javascript

Is there anything in Dojo like the jquery jgrowl.

There exists dojox.widget.Toaster. (Test-File & API Documentation)
You need to create a new channel with the Toaster, for example.
var errors = new dojox.widget.Toaster({
messageTopic: '/app/error',
positionDirection: 'br-up',
duration: 5000
});
After this you can publish with dojo.publish to the channel /app/error
dojo.publish('/app/error', ["Error sending data"]);
Don't forget to load the Toaster CSS dojox/widget/Toaster/Toaster.css
If you want it black, you need to change the CSS. I created an example with two Toasters, one displays new messages in the right upper corner, the other in the right bottom corner. And i made them black.
JS Fiddle

Check out this github project.
I was looking for the same thing, but with a bit more features than the Toaster widget provided. So I started the dGrowl project.

Related

How to move sys_note display from footer to top in TYPO3 list view?

The TYPO3 sysext sys_notes is using $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['recordlist/Modules/Recordlist/index.php']['drawFooterHook'] to render the content of notes at the bottom of the list module.
I'd like to display the notes on top of the list module, right after the flash messages. Unfortunately there is no hook to do so. Is there any other alternative? Maybe I can inject some JavaScript to move the content to top, but I don't know how. Any ideas where to look for a solution?
The core patch from Georg Ringer works fine for me.
Note: this patch will not be integrated in TYPO3 8.7 due to the feature freeze.
If you want to use it with TYPO3 8.7, you can xclass the core or patch it if you use Composer:
composer require cweagans/composer-patches
download the diff from Gerrit
put the patch file to build/patches or a similar location
add this to the "extra" section of your composer.json:
"patches": {
"typo3/cms": {
"Hook for sys_notes #61170": "build/patches/80047d6.diff"
}
}
composer update typo3/cms
last but not least, use the new hook in your ext_localconf.php:
// reset hook from sys_note to render notes at the bottom of the list module
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['recordlist/Modules/Recordlist/index.php']['drawFooterHook']['sys_note'] = '';
// render sys_note notes in the header instead
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['recordlist/Modules/Recordlist/index.php']['drawHeaderHook']['sys_note'] = \TYPO3\CMS\SysNote\Hook\RecordListHook::class . '->render';
Possible workaround: Add a flash message with a information about sys_notes and a link (anchor) to the bottom.

HTML carousel/slide show on apples website

I found this carousel on apples website where it has the 3 radio presenters, and was wondering how i could create this effect or if there is a carousel like this available.
I did some research and found a similar stackoverflow question which links to slick.js so I am wondering if apple use slick and have customized it to do this or they found a new carousel that makes this effect occur.
From inspecting the carousel i found the class zine-gallery-content but searching that didn't help.
Does anyone know how i can make this carousel? It is also responsive.
It looks custom to me. They've called it 'ac-gallery' within their code. They tend to prepend things with ac-, ac-analytics, etc.
I'll let you know how I figured this out. I inspected the slider and was looking for a wrapper class or ID with the words 'gallery', 'carousel', 'slider' or something similar. I noticed the carousel contained the ID #zine-gallery. I then looked for one of their javascript files that looked like the primary file where most of the code is compiled to. I found a file called main.built.js. I opened this file and searched for zine-gallery, which did exist. I then opened my web inspector, opened the "Sources" tab and found main.built.js. I then clicked the "Pretty Print" button (The {} icon next to the line and column number. This formats the uglified javascript and allows you to read it more easily.
The following leads me to believe it's custom:
this.gallery = B.create({
id: this.galleryId,
el: this.wrapper,
section: this,
model: this.slides,
triggerSelector: this.triggerSelector,
trigger: {
events: ["mouseover", "click"]
}
})
Usually a plugin would include it's name in the creation process. Also, right below the following gallery methods are defined:
C._removeActiveStates,
C._animateNewStation,
C._blendToNewBackgroundColor,
C.activate,
C.deactivate,
C.animateIn,
C.onRequestAnimationFrame,
C.onScroll,
C.onResize, etc.

jQuery .attr Not Working Properly, Miss-Retrieving Links

This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.

Combining jQuery libraries: realistic-typewriter.js and waypoint.js

I am currently designing a website for a university project based around the open source project. My website is based around an infinite scroll layout, the idea is for each section to have a terminal that looks like the command line and to have the text print to these screens.
I have implemented realistic-typewriter.js (https://github.com/fardjad/realistic-typewriter.js) for the self-typing text. To have the animations triggered at pre-defined moments (when the user is at that section of the page) I have been told to use waypoint.js (https://github.com/imakewebthings/jquery-waypoints)
Now my problem is implementing the 2 together.
Typewriter.js is implemented something like this.
var typewriter = require('typewriter');
var twSpan = document.getElementById('typewriter');
var tw = typewriter(targetDomElement).withAccuracy(90)
.withMinimumSpeed(5)
.withMaximumSpeed(10)
.build();
tw.clear()
.type('TEXT GOES IN HERE')
});
What I don't understand here is the syntax of the variables at the start, it seems a bit convulted to my amateur eye.
The tw.clear() line - I assume the tw is the variable and the .clear does what?
Now the waypoint library - I was previously using this fine with the typed.js library, but its functionality was a bit limited and I was advised to move over to realistic-typewriter.js, the code doesn't seem to work in the same way with realistic-typewriter.js.
Here is the example code for waypoint.js from its documentation.
$('.thing').waypoint(function() {
// i tried to put the above code in here but it doesn't seem to work
); offset: '50%'
});
Basically I need to know how to combine waypoint.js and realistic-typewriter.js, but any explanations of the working processes of these would also be really helpful.
tw is an object that is accessing the "clear" method, which I am guessing clears out the element so it can type in it.
Also, looks like your waypoints code something is off. Should be something like:
$('.thing').waypoint(function() {
//code goes here
}, { offset: '50%' });
If you place the realistic-typewriter code there it should run it once you've reached that element.

Is it possible to create element on the fly with jQuery Mobile?

I have an app built using jQuery (and using various jQuery-UI tools).
For some reason, i have to port it to smartphones/tablet computer, and decided to use jQuery Mobile for that (in order to minimize the number of changes).
In my vanilla app, I created some elements of the page on the fly, depending of user interactions.
For example a slider could be created like that (p is an object with a bunch of params):
function createSlider(p){
return $("<div/>",{
"id":p.id,
"class":p.divClass,
}).slider({
"orientation": p.align,
"min":p.constraint.min,
"max":p.constraint.max,
"step":p.step,
"value":p.curVal,
"animate":"normal"
/*and some event handling here, but it doesn't matter*/
});
}
And it will produce a nice looking slider. Now it looks like:
function createSlider(p){
return $("<range/>",{
"id":p.id,
"class":p.divClass,
"min":p.constraint.min,
"max":p.constraint.max,
"step":p.step,
"value":p.curVal,
});
}
But as it's created on the fly, all the stuff done by jQuery Mobile on the page load isn't done on it.
Is there a way to force that initialization without writing the slider in the html?
Thanks.
EDIT: I found in the doc that it could be achieved using container.trigger("create");
However this does not work yet.
EDIT2: Ok create was the solution.
According to the documentation (see edit in the question), using trigger("create") on the containing element works.
And to make that work, you also need to remember that range is an input type and not a tag...
Working solution:
function createSlider(){
return $("<input/>",{
"type":"range",
"id":"sl",
"min":0,
"max":15,
"step":1,
"value":1,
});
}
function appendSlider(){
$("#yourdiv").append(createSlider()).trigger("create");
}
As a sidenote, the documentation for jQuery mobile lacks a search option.
Try calling .page() on the container the content is being added to. Alternatively, adding .page() to the content you're returning may also work.

Categories

Resources