I tried to copy the Spin demo from https://greensock.com/draggable but my spinner doesn't have the momentum from the demo:
http://codepen.io/tomsoderlund/pen/XjWvwO
Isn’t this use of throwProps enough?
Draggable.create("#spinner", { type: "rotation", throwProps: true });
To enable that particular feature, you need ThrowPropsPlugin which is a membership benefit of Club GreenSock. See details and sign up at https://greensock.com/club/. Once you're signed up, you can download the zip that contains all the bonus stuff and then just load the ThrowPropsPlugin JS file into your page and BOOM, that feature will be enabled in Draggable. Sorry if there was any confusion.
Related
I've been searching for an hour on how to nagivate within my Laravel website without refreshing the website (page layout), but I couldn't find a proper solution: one that not just loads the HTML, but actually replaces the content view within the layout.
This is my current dashboard:
So when clicking on a menu item within the blue area, I want the red content area to change without page refresh. What would be a scalable solution for this? I'm trying to follow the DRY (Don't repeat yourself) principle as much as possible.
Oh, please don't mark this topic as a clone of other topics as I've seen most of them but without proper solution. Hope anyone can help me out.
Changing a view without page load means we need to use the ajax techology. Vuejs is a frontend frameework the allows us to acomplish that easily with its axios library
I believe you can get this done by using jQuery load function -
$(function () {
$("#menu_option_a").on("click", function () {
$("#dashboard").load("View1.html");
});
$("#menu_option_b").on("click", function () {
$("#dashboard").load("View2.html");
});
});
I have embedded a video into my site using the Ziggeo API. I am using Handlebars to populate the token to the ziggeo player:
<ziggeo id="zideo_player" ziggeo-width="560" ziggeo-height="315" ziggeo-playonclick="true" ziggeo-video={{this.token}}>
</ziggeo>
I know that the token is getting there because I can see it in the inspector.
The weird thing is, when I go into the inspector and change from ziggeo to ziggeoplayer, the video will show, but when I push those changes to Heroku, it again doesn't show.
It's as if the player is loading before the token is received and only by changing the name can I re-send the token.
This turned out to be an asynch (asynchronization) issue. The video was trying to load before it could send and receive information from Ziggeo's API. To solve this, I used a separate js file and then appended the video information after the document loaded.
After some more thought, I might have also been able to fix this by placing the Ziggeo API information at the bottom of the body in the index.handlebars file instead of in the head. I didn't have a chance to try this since the above trick worked, but it would probably look cleaner if it did.
v1 and v2 should both work on Heroku.
Benjamin, can you try replacing that HTML embedding code with JS code, which could then be delayed if really needed.
For example of same code in JS:
<script>
//ZiggeoAPI will work only with v1-rXY/ziggeo.js v2- will require v2 app to be created and code would look just a bit different
ZiggeoApi.Events.on("system_ready", function() {
var player = new ZiggeoApi.V2.Player({
element: document.getElementById("your_element_ID"),
attrs: {
width: 560,
height: 315,
theme: "modern",
themecolor: "red",
playonclick: true,
video: "{{this.token}}"
}
});
player.activate();
});
</script>
This would only fire once the Ziggeo system is loaded and ready. This means that it fires after the DOM is ready and page loaded so it should be before the {{this.video}} is available.
I have a plugin which need to show a (Modal) dialog each time the user double click on a word.
Detecting double click is no problem, but the exact fields/values in the dialog depends on exactly which word the user clicked on, and some mutable global state. So I can't create the dialog until the moment before I need to show it. And here is the problem: How do I do that?
Right now I use this code:
var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
// Creating dialog here.
});
CKEDITOR.instances.editor.openDialog(dialogName);
This works, but having to add a uniquely named dialog, just to show it once and then newer use it again seems really really wrong. Also I fear this will keep using resources since the dialogs are newer removed(I could not find any remove method).
So my question is: Is there a better way to dynamical create and show a "one use" dialog?
Update:
If bootstrap is not allowed then maybe an addFrame version of the dialog is acceptable. This could then refer to a html file that can load from parameters.
NB: The plunkr only works, if you fork and edit it, otherwise it will give you a 404 for the template.
Here is a quick plunkr:
plunky
And here is the plugin in question:
CKEDITOR.plugins.add( 'insertVariable', {
requires: ['iframedialog'],
icons: 'insertvariable',
init: function( editor ) {
editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );
CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);
editor.ui.addButton( 'insertVariable', {
label: 'Insert Variable',
command: 'varDialog',
icon: this.path + '<insert gif>'
});
}
});
Obviously you are not creating dialogs anymore with different content, but you are referring to another piece of html, that can change. I've kept the bootstrap thing in there as well for reference.
I made one final edit, that will show the current contents. So I think that is roughly what you want. Check it out.
Previous Answer
If you are prepared to use bootstrap, then you can do no worse than check out their modal dialog, which can be just be shown and hidden at will.
http://getbootstrap.com/javascript/#modals
It's simple and cuts down any need to keep creating your own dialog. The dialog won't be one use type, but you will set the defaults as necessary. The varying content link is here:
http://getbootstrap.com/javascript/#modals-related-target
That would be the quickest way to get this going. It all depends on whether you want to use this framework. As CKEDITOR is already using JQuery it is an option worth considering.
I've added a plugin that allows the user to add a specially styled div via a dialog. The issue now is, this element should not be clickable inside the edtior. The problem is the users manage it to click inside the div and enter text there and by this screw it up.
I've already spent some time searching the documentation but couldn't find the right approach to do this yet. I'm not asking for code, just some advice how to do it, a pointer to the right API method would be good enough for me. I guess I can somehow access the elements or intercept an users click and prevent them from adding something to my element somehow, I just couldn't yet figure out how to do it.
Use the Widget System.
Widget Tutorial.
Demos.
I've finally managed to get this done by making the elements content not editable. When I create the element in my dialog:
hrElement.setAttribute('contenteditable', false);
When loading the plugin:
init: function (editor) {
editor.on('contentDom', function () {
var stiching = (this.document.getElementsByTag('div'));
console.log(stiching);
for(var i=0;i<stiching.count();i++){
if (stiching.getItem(i).hasClass('stitching')) {
stiching.getItem(i).setAttribute('contenteditable', false);
}
}
});
}
I'm pretty sure this is not the most best solution (don't like to iterate over the elements) but at least it works for me now. Any suggestions how to improve it for future cases are welcome.
I am trying to reproduce this effect but im at not that familiar with javascript to deconstruct these sites on my own. Here are the sites with the effect I am looking for(only the navigation):
http://www.serialcut.com/
http://www.ultranoir.com/
http://kikk.be/
http://www.marcusthomasllc.com/
I would like the current page/section to have width:100% so it can be responsive and not show content from other sections.
When the new page is loading, the loading gif is a nice touch (optional)
lastly, this is where I think the ajax comes in; if I'm on a page, say contact and I click home there is only one page slide from contact to home and not every page in between.
I dont expect anyone to actually break down these sites for me but I would appreciate a push in the right direction. Maybe there are some jQuery plugins or basic concepts I can use. I have searched this site but can only find simple jQuery slidein effects.
Thanks for all your time. cheers
Here are some options.
This tutorial: http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery
The jQuery scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/
The Supersized plugin: http://buildinternet.com/project/supersized/
Or maybe this tutorial: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
Just use Google, there are thousands and thousands of pages with examples and plugins.
Here ya go using jQuery:
var slideAjax = function(elementid, url, data){
$('#'+elementid).hide(); //make sure the div we are loading into is hidden
$.ajax({
url: url,
type: 'POST',
data: data,
}).done(function(data)){
$('#'+elementid).html(data).show('slide',{direction: 'right'}, 200); //slide in
});
}
If you don't mind complexities, you can create a setTimeout to push the loader html in with a time length of like 200 ms. Then, clear the timer with the done function. That way, it only shows the loader when the page takes longer that 200ms to load. This is useful if you can plot your load times on a bell curve. Typically, a page's load time will sit on an inverted bell curve, where it will either take between 0 and X, or Y and infinity. If you can map out Y, you can set the loader to start at Y so that it doesn't just show for a split second and cut out.