I am trying to create and endless draggable wall on wordpress using this script: http://wall.plasm.it/ .
The problem I am facing, is that I don't know how could I grab wordpress posts, and insert them into the wall grid.
This is the code that initialises the wall:
window.addEvent("domready", function(){
// Define The Wall
var maxLength = 100; // Max Number images
var counterFluid = 1;
var wallFluid = new Wall("wall", {
"draggable":true,
"inertia":true,
"width":150,
"height":150,
"rangex":[-100,100],
"rangey":[-100,100],
callOnUpdate: function(items){
items.each(function(e, i){
var a = new Element("img[src=/your/folder/images/"+counterFluid+".jpg]");
a.inject(e.node).fade("hide").fade("in");
counterFluid++;
// Reset counter
if( counterFluid > maxLength ) counterFluid = 1;
})
}
});
// Init Fluid Wall
wallFluid.initWall();
});
I should find a way to make 'new Element', grab an already existing wordpress post, or add a new one using ajax, although I think this would make it really slow. Any ideas how I could make this work?
I think what you want to do is setup a Wordpress Query to get the posts you want via an ajax query. These would be returned into your items array instead of the images in your example.
If the page is based on a standard Wordpress structure I do not see any benefit from using AJAX here. The easiest way would be to grab the posts and place them inside the wall. So this script, in the case of more than one post, creates html elements of the wall, sets the basic css, takes the posts and places them inside the wall. Is based on this example.
window.addEvent( "domready", function() {
if ( $$( '.post' ).length > 1 ) {
// create base container for the wall
new Element( 'div#wall_container' ).setStyles({
width: 608,
position: 'relative',
margin: '0 auto'
}).inject( $$( '.post' )[0], 'before' );
// create viewport, wall, and navigation
new Element( 'div#viewport' ).setStyles({
width: 608,
height: 450,
position: 'relative',
overflow: 'hidden',
}).inject( 'wall_container' );
new Element( 'div#wall' ).inject( 'viewport' );
new Element( 'div#wall-list' ).inject( 'viewport', 'after' );
// collect all posts ( elements with class="post" ) and dispose them
var posts = $$( '.post' ).dispose();
new Wall( "wall", {
"draggable": true,
"inertia": true,
"autoposition": true,
"preload": true,
"width": 608,
"height": 450,
"rangex": [ 0, posts.length ], // use number of posts for number of items in the wall
"rangey": [ 0, 1 ], // only one line
callOnUpdate: function( items ) {
items.each( function(e, i) {
posts[e.y].inject(e.node); // inject posts into wall
});
}
}) .initWall()
.getListLinksPoints( "wall-list" );
}
});
The Wall script is intended primarily for images, and not for text, because all the elements are absolutely positioned with fixed dimensions (unless the posts are similar in length, which can be also fixed with the use of more tag).
The examle is tested with WP 3.8.1, on the default themes. In order to work you need to enqueue the following scripts:
mootools-core-1.4.5-full-compat.js
mootools-more-1.4.0.1.js
wall.js
Related
I have created a data entry web application using asp mvc where the user can submit a record of their wellbeing. The data is saved to a SQL database and everything is working fine however, I would like to add a fixed reference point on the jQuery slider itself to show the user their most recent score. Maybe in the form of an additional fixed handle at the corresponding value...however I'm very new to javascript and have tried and failed so far.
Here is a screen shot of my sliders
The numbers at the bottom show the values for the previous entry
I have posted my JS code for the sliders below. Any help would be much appreciated.
$(function() {
var handle = $("#pain-handle");
$("#painSlider").slider({
min: 0,
max: 10,
value: 0,
animate: "fast",
create: function() {
handle.text($(this).slider("value"));
}
}
);
$("#painSlider").slider().slider("pips", {
labels: {
first: "No Symptoms",
last: "Worst Symptoms"
}
}
).on("slidechange", function(e, ui) {
$("#pain-handle").text(ui.value);
}
);
}
);
so it seems like you need to make specific pips visible. Just for information; the slider always has values, but the css hides them. So we just need to make the correct pips visible.
The steps are;
figure out the correct values (suggest to put them as html-data)
add a cssClass to those values
use css to display the correct pips (style accordingly)
Firstly, I've amended your JS a little so that you're using the float plugin for the pips to display the values on the slider handles. It'll be a little more robust than your solution. $(".slider").slider("float"); You can read about it here; https://simeydotme.github.io/jQuery-ui-Slider-Pips/#options-float
the final js code is;
$(function() {
// here we assume 4 sliders all with the same css class
var $sliders = $(".painSlider");
$sliders.each( function(k, el) {
var $slider = $(el);
var previousValue = $slider.data( "previous" );
// handle different labels for best/worst
var firstLabel = $slider.hasClass( "bestWorst" ) ? "Best Imaginable" : "No Symptoms";
var lastLabel = $slider.hasClass( "bestWorst" ) ? "Worst Imaginable" : "Worst Symptoms";
$slider.slider({
min: 0,
max: 10,
value: 0,
animate: "fast"
})
.slider("pips", {
labels: {
first: firstLabel,
last: lastLabel
}
})
.slider("float")
// add a css class to the correct values
// so that we can style them to be shown
.find(".ui-slider-pip")
.eq( previousValue )
.find( ".ui-slider-label" )
.addClass( "previous-value" );
});
});
and then there's a little bit of css to apply;
/* this is the magic to show the value */
.ui-slider-label.previous-value {
display: block;
}
/* these two styles are to show the "float"
labels inside the handle, instead of using
your own custom handle-text. */
.ui-slider-tip {
visibility: visible!important;
opacity: 1!important;
transform: none!important;
position: static!important;
background: transparent!important;
border: none!important;
color: white!important;
margin: auto!important;
width: auto!important;
}
.ui-slider-tip::before,
.ui-slider-tip::after {
display: none!important;
}
the fully, working code, is viewable here; https://jsfiddle.net/vzw53dge/
I would like to add category icons to a Wordpress page, each icon animated with snap.svg.
I added the div and inside an svg in the loop that prints the page (index.php). All divs are appearing with the right size of the svg, but blank.
The svg has a class that is targeted by the js file.
The js file is loaded and works fine by itself, but the animation appears only in the first div of that class, printed on each other as many times it is counted by the loop (how many posts there are on the actual page from that category).
I added "each()" and the beginning of the js, but is not allocating the animations on their proper places. I also tried to add double "each()" for the svg location and adding the snap object to svg too, but that was not working either.
I tried to add unique id to each svg with the post-id, but i could not pass the id from inside the loop to the js file. I went through many possible solutions I found here and else, but none were adaptable, because my php and js is too poor.
If you know how should I solve this, please answer me. Thank you!
// This is the js code (a little trimmed, because the path is long with many randoms, but everything else is there):
jQuery(document).ready(function(){
jQuery(".d-icon").each(function() {
var dicon = Snap(".d-icon");
var dfirepath = dicon.path("M250 377 C"+ ......+ z").attr({ id: "dfirepath", class: "dfire", fill: "none", });
function animpath(){ dfirepath.animate({ 'd':"M250 377 C"+(Math.floor(Math.random() * 20 + 271))+ .....+ z" }, 200, mina.linear);};
function setIntervalX(callback, delay, repetitions, complete) { var x = 0; var intervalID = window.setInterval(function () { callback(); if (++x === repetitions) { window.clearInterval(intervalID); complete();} }, delay); }
var dman = dicon.path("m136 ..... 0z").attr({ id: "dman", class:"dman", fill: "#222", transform: "r70", });
var dslip = dicon.path("m307 ..... 0z").attr({ id: "dslip", class:"dslip", fill: "#196ff1", transform:"s0 0"});
var dani1 = function() { dslip.animate({ transform: "s1 1"}, 500, dani2); }
var dani2 = function() { dman.animate({ transform: 'r0 ' + dman.getBBox().cx + ' ' + dman.getBBox(0).cy, opacity:"1" }, 500, dani3 ); }
var dani3 = function() { dslip.animate({ transform: "s0 0"}, 300); dman.animate({ transform: "s0 0"}, 300, dani4); }
var dani4 = function() { dfirepath.animate({fill: "#d62a2a"}, 30, dani5); }
var dani5 = function() { setIntervalX(animpath, 200, 10, dani6); }
var dani6 = function() { dfirepath.animate({fill: "#fff"}, 30); dman.animate({ transform: "s1 1"}, 100); }
dani1(); }); });
I guess your error is here:
var dicon = Snap(".d-icon");
You are passing a query selector to the Snap constructor, this means Snap always tries to get the first DOM element with that class, hence why you're getting the animations at the wrong place.
You can either correct that in two ways:
Declare width and height inside the constructor, for example var dicon = Snap(800, 600);
Since you are using jQuery you can access to the current element inside .each() with the $(this) keyword. Since you are using jQuery instead of the dollar you could use jQuery(this).
Please keep in mind this is a jQuery object and probably Snap will require a DOM object. In jQuery you can access the dom object by appending a [0] after the this keyword. If var dicon = Snap( jQuery(this) ); does not work you can try with var dicon = Snap( jQuery(this)[0] );
Additionally, you have several .attr({id : '...', in your code. I assume you are trying to associate to the paths an ID which are not unique. These should be relatively safe since they sit inside a SVG element and I don't see you are using those ID for future selection.
But if you have to select those at a later time I would suggest to append to these a numerical value so you wont have colliding ID names.
I have a web page where the user creates simple drawings using various blocks, e.g. shapes representing furniture are drag and dropped onto a building floor plan. It uses Interact.js.
The blocks themselves can be dragged/moved, resized, added, inserted, deleted, merged, split, recoloured, font etc by the user - JavaScript acting on HTML and CSS.
I plan to save changes locally (for offline if needed) and back to the server for sharing with others who have access to this project. Undo/redo is nice to have too.
How to save modified diagrams (html & CSS)?
Option 1:
document.getElementById('foo').innerHTML for the HTML.
For CSS you'd have to recursively traverse the whole DOM and match selectors on each element to the rules defined in each CSS file.
As described in the answer above, this will (most of the times) work for classes:
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
(classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
}
}
But this is a bad, error-prone solution.
Option 2:
What you need to do is have a data model that you edit, think of JSON looking like this:
[
{type: 'circle', color: 'blue', x: 10, y: 15, children: [
{type: 'line', color: 'red', x: 100, y: 0, children: []}
]},
{type: 'square', color: 'greed', x: 100, y: 15, children: []}
]
Based on this you'd write a recursive function like this:
var foo = document.getElementById('foo'); // this is where you "draw" stuff
function draw(elements) {
var i;
for(i in elements) {
drawElement(elements[i]);
if(elements[i].children.length > 0) {
draw(elements[i].children);
}
}
}
function drawElement(element) {
var domElement = document.createElement("div");
domElement.className = 'element ' + element.type + ' ' + element.color;
domElement.style.left = element.x + 'px';
domElement.style.top = element.y + 'px';
foo.appendChild(domElement);
}
Now you need to define some CSS:
#foo {
position: relative;
}
#foo .element {
position: absolute;
}
#foo .element.square {
...
}
#foo .element.blue {
background-color: blue;
}
Next, the "interactive" part. Whenever your user adds something to the "canvas" instead of directly manipulating the DOM you only add stuff to that JSON tree and then delete the old DOM and run draw again.
You can go with option 1 but that will be a lot harder. Read the comments in the answer I attached, you'll see there are a lot of browser inconsistencies and limitations.
Option 3:
Working with a <canvas>, not the DOM is more manageable. Try looking into Fabric.js for example, it already handles "saving" and "initializing" from JSON and allows users to "draw" stuff to it.
With jQuery you can use .html() method to retrive inner html of your container. But for css I think you should manually examine all properties of all objects you want to save to get similar approach.
So, for both, if you can modify the code that handles drawing operations, I think the simplest way would be catalog all actions that user can do and store it in a variable that enable you to reproduce all the process another time.
For example:
[
["drawBox", 200, 200, 400, 400, "#ff0000", "#0000ff"],
...
]
This approach will be also useful if you want to impement undo/redo functionalities in the future.
You should store that 'state' in db.
you can use HTML5 SessionState to save rendered Page Content
also you can store that in local storage of browser and sync local storage with db.
I have a problem.
I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.
I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.
Then I return the scroll container.
The code is this:
sap.ui.jsview("ttest.initView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf ttest.initView
*/
getControllerName : function() {
return "ttest.initView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf ttest.initView
*/
createContent : function(oController) {
var oTweetList = new sap.m.List("items", {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
columns : [
new sap.m.Column({
styleClass : "data",
hAlign : "Left",
})
]
});
var oSlider = new sap.m.Slider({
id: "tweetSlider",
width: '100%',
min: 0,
change : function(oEvent){
//Update tweet list
var startIndex = 0;
var endIndex = this.getValue();
oController.updateTweetList("update", startIndex, endIndex);
}
});
var oPage = new sap.m.Page({
title: "Tweet list for #matteorenzi",
enableScrolling : false,
headerContent: [
new sap.m.Button({
icon: "sap-icon://refresh",
press : function(oEvent){
//Update tweet list with all tweets
oController.updateTweetList("first", "", "");
}
})
],
content: [
oSlider,
oTweetList
]
});
var oScroller = new sap.m.ScrollContainer({
vertical : true,
horizontal : false,
content : [
oPage
]
});
oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new it.besolution.Tweet({
user : "{user/name}",
username : "{user/screen_name}",
tweet : "{text}",
press : function(oEvent){
var path = this.getBindingContext().getPath();
sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
app.to("iduserDetails");
}
})
]
});
oSlider.setMax(oGlobalModel.getProperty("/size") - 1);
oTweetList.setModel(oGlobalModel);
oTweetList.bindAggregation("items", "/tweets/", template);
});
return oScroller;
}
});
The page didn't load. I don't know how to do. Why the list is invisible?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible.
Why? How I have to write my code to show the list without the scrollbar?
If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly recommended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.
I am using parallax.js to animate a series of elements on a homepage. I searched for code that would allow me to add a simple "slider" effect to the elements as well.
Everything seems to be working properly, except that after the first li, the parallax effect only works horizontally. On li #1, the element hovers as expected, following the mouse in every direction.
Here's a link to jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/1/
Here's a link to the revised jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/5/
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);
(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
fadeIn : 1000,
fadeOut : 1000,
delay : 500
},
settings = $.extend( defaults, options ),
$this = this,
cur = 0,
fadeIt = function( which ) {
var li = $this.find('li');
cur = which = (which >= li.length) ? 0 : which;
li.fadeOut( settings.fadeOut );
li.eq( which )
.delay( settings.fadeOut )
.fadeIn( settings.fadeIn, function(){
setTimeout(function() {
cur++;
fadeIt( cur );
}, settings.delay);
});
};
fadeIt( cur );
};
$('ul.scene').ezslide({
fadeIn : 600,
fadeOut : 600,
delay : 3000
});
})(jQuery);
EDIT: I sort of fixed this. I don't really know what I'm doing, so there's probably a cleaner way. But, I realized that the parallax effect was only being applied once to the first list item. The script that makes each item fade in wasn't getting the benefit of the parallax.js script.
SO - I put each fading element into its own ul, with a unique id, and a shared class. By some miracle, this actually works. But let me know if there's a better way.
This is an interesting one. The issue is that the parallax code sets the very first layer to position: relative and all others to position: absolute. This has the effect of making the parent ul have the dimensions of only the first layer. This is normally fine, except that when you display any element other than the first, the first is hidden. This causes the ul to have 0 height. The parallax depends on the height of the scene, as a result no height means no vertical movement.
You can fix the issue by applying a fixed height to your ul:
#scene{
height: 128px;
}
http://jsfiddle.net/t6uwq/7/
You can find greater detail on the motion calculation in the documentation on github.