I'm trying to create a fairly straightforward interface with Raphael, whereby if you click on a given path you'll get a corresponding div to appear. Since I'm likely going to be using irregular shapes I'll be creating the shapes in Illustrator and then converting to paths using readysetraphael.com, but if there's a better way to do it I'm open to that too.
I'm basically looking to capture the functionality you see here, but with raphael objects as the buttons.
http://jsfiddle.net/4xV7b/
Here's my current fiddle -- what I don't understand is what needs to happen during the mouseclick event to show/hide the corresponding divs.
el.click(function() {
//mysterious voodoo magic goes here
});
If you were using Raphael 2, you could use the data method to store arbitrary information with your elements -- as in this example.
Essentially, when you're creating each path, you simply call
el.data( 'div_id', 'greenthing' );
Then, when that element is clicked, you can retrieve the indicated div from the element using
el.click( function()
{
var div_id = this.data( 'div_id' );
// Display the div here. Josemando's approach is perfectly cool and will work universally.
} );
If you wanted to make sure that only one div at a time is displayed, you could do this (primitive but effective):
el.click( function()
{
rsr.forEach( function( subEl )
{
var divId = subEl.data('div_id' );
if ( divId && document.getElementById( divId ) )
document.getElementById( divId ).style.display = 'none';
} );
} );
There are, of course, other ways to skin that cat.
You may also find that your path construction code would be more manageable if you put all of the shape-specific data into a structured object and then render each path in a loop. The fiddle I've provided above demonstrates such a technique, which will pay off quickly once you have more than a handful of shapes.
You can use pure javascript to show a div:
document.getElementById("redthing").style.display = "block";
If you want animations, you can try using jQuery, or even manually creating them with css
Related
I need to setup the behaviour of a polymer web-compontent at runtime. I tried to change the "behaviours" array by pushing the new behaviour, but it didn't work. Is there a proper way to do it?
I'm trying to create a table web-component with a pager at bottom. It should be extensible allowing the loading of data from a javascript array, a restful service or a custom source. Thus, I decided to create a behaviour for each one of these source and change it when the source changes. Is it a correct way to design it?
Here as example the source code of the behaviour to load data from an array. It has the following function:
itemsLoad: function(page, itemsPerPage, callback) {...
which is called from the web-component to load data of a specific page. My idea is that each behaviour based on the type of data source (e.g. CSV, JSON, etc.) will implement this method in a different way. Then, the behaviour will be registered at run-time, because is at run-time that the developers knows which is the source to use.
I don't think you will be able to change behaviours at run-time, because they are mixed into the element prototype.
What you can do is create a separate element for each of your cases (csv, json, etc) and create nodes dynamically as required. You could than place that element inside your grid
<table-component>
<json-data-source></json-data-source>
</table-component>
The <table-component> would look for a child element which implements itemsLoad to get the data.
EDIT
To work with child nodes you would use Polymer's DOM API. For example you could listen to added child nodes and select one that implements the itemsLoad method.
Polymer({
attached: function() {
Polymer.dom(this).observeNodes(function(info) {
var newNodes = info.addedNodes;
for(var i=0; i<newNodes.length; i++) {
var dataSource = newNodes[i];
if(dataSource.itemsLoad && typeof dataSource.itemsLoad === 'function') {
this.loadItems(dataSource);
break;
}
}
});
}
loadItems: function(dataSource) {
dataSource.itemsLoad().then(...);
}
});
You could replace Polymer.dom(this).observeNodes with simply iteration over Polymer.dom(this).children. Whichever works best for you.
I'm trying to insert InlineDrawing into table cell.
According to documentation you can add InlineDrawing to Paragraph.
so
tr = table.appendTableRow();
var tc1 = tr.appendTableCell();
var tc1.appendParagraph( how to fit new InlineDrawing here? );
How to get new instance of inlineDrawing ? How to work with this object ?
I can't find any online reference about this.
Thank you for your help.
Here you go: (credit: https://gist.github.com/bennettscience/cd51762de17c860d6930)
// Don't forget your global variables up top.
// Search through the page elements. Paragraphs are top-level, which is why I start with those.
if( type == DocumentApp.ElementType.PARAGRAPH ){
// Look for child elements within the paragraph. Inline Drawings are children.
if(element.asParagraph().getNumChildren() !=0 && element.asParagraph().getChild(0).getType() == DocumentApp.ElementType.INLINE_DRAWING) {
// For whatever reason, drawings don't have their own methods in the InlineDrawing class. This bit copies and adds it to the bottom of the doc.
var drawing = element.asParagraph().copy();
body.appendParagraph(drawing);
}
}
Yes, I've also noticed Google's documentation is lacking in many areas. You have to use the copy() method to get a copy of it. See an example code snippet here: How do I export InlineDrawing as an image in Document?. In that, he uses child.getParent().copy() to get the paragraph with the InlineDrawing. There's only one other reference I found (http://googlestyle.client.jp/document_services/class_inlinedrawing.html). See the removeFromParent section, where he uses getImages to get a list of handles to images in the document.
I have an implementation of using drag and drop for upload purposes using examples from http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
This is what it looks like when it works.
Before drag and drop: http://cl.ly/image/0c3f1m0M2K2D
After drag and drop: http://cl.ly/image/0Z131N333n0L
The droparea is a div that I call dropArea.
Now the problem is out of the supposed 4 images I have drag-n-dropped, I then wished to select two of them to be of a special status. For eg, I want to inform the server that image 1 and 3 are to be sneaks.
I want to be able to drag and drop image 1 and 3 already in the div element into 2 drawn divs
http://cl.ly/image/3T3O410X2E40
I realize I am not able to do this so far.
Main reason being that I am unable to add in the ondragstart attribute to the images created in the dropArea div.
I am able to add in the draggable attribute.
So I get html code that reads like this after I drag and drop into dropArea div.
Can I get the effect the way I want it as described?
if not, are there alternative ways to achieve the same outcome without using drag and drop? Perhaps right click on the drag-n-dropped image and select them as sneaks?
UPDATE:
I realize I needed to add an id attribute, so now the drag and drop effect of another drag-n-dropped image inside dropArea works.
But I want to drag and drop a copy and not the original image. Hence I still need help with this.
I realise this question is over 4 years old, but maybe someone else might also need this information :)
So as shrishaster asked in the comments on Kim Stacks answer:
"How can i do same thing for Texts instead of Images?"
The fix for this is a minor tweak on the dropcopy function given by Kim Stacks:
function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("p");
var original = document.getElementById(data);
copyimg.innerHTML = original.innerHTML;
ev.target.appendChild(copyimg);
}
By doing this you make a clone of the original paragraf content :)
I hope this will help at least some.
there are 2 parts to this answer
Ensure that you assign an unique id attribute to the drag-n-dropped image
Use the following javascript functions copied from http://www.w3schools.com/html5/html5_draganddrop.asp but include a new one called dropcopy
These are the functions from the w3schools example
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
This is the new one for dropcopy
function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
}
Then for the div that requires a copy just make sure you use the dropcopy for the ondrop attribute
<div id="div2" class="sneaks" ondrop="dropcopy(event)"
ondragover="allowDrop(event)"></div>
I want to know the custom shape creation in html5 using LimeJS.Could anyone tell me how to create a custom shape like comment in a game using LimeJS for html5.
for images
var gameMap = new lime.Sprite().setSize(400,300).setFill('images/bk.jpg').setPosition(0,0).setAnchorPoint(0,0);
for custom shapes we have to fill with different points
You essentially create a custom sprite, and render the UI appropriately, which could be a combination of elements. The shell needs to be:
test.board = function() {
goog.base(this);
}
goog.inherits(test.board, lime.Sprite);
Text input isn't direct; here is an article on text input: https://groups.google.com/forum/?fromgroups=#!topic/limejs/txaxgK3eXQg. You can use a label, and attach to the key press event. I don't know if this works for canvas rendering...
bangin' my head against this and it's starting to hurt.
I'm having trouble with adding an event to an element.
I'm able to add the event, and then call it immediately with element.fireEvent('click'), but once the element is attached to the DOM, it does not react to the click.
example code:
var el = new Element('strong').setStyle('cursor','pointer');
el.addEvent('click',function () { alert('hi!'); });
el.replaces(old_element); // you can assume old_element exists
el.fireEvent('click'); // alert fires
however, once I attach this to the DOM, the element is not reactive to the click. styles stick (cursor is pointer when I mouseover), but no event fires. tried mouseover as well, to no avail.
any clues here? am I missing something basic? I am doing this all over the place, but in this one instance it doesn't work.
EDIT----------------
ok here's some more code. unfortunately I can't expose the real code, as it's for a project that is still under tight wraps.
basically, the nodes all get picked up as "replaceable", then the json found in the rel="" attribute sets the stage for what it should be replaced by. In this particular instance, the replaced element is a user name that should pop up some info when clicked.
again, if I fire the event directly after attaching it, all is good, but the element does not react to the click once it's attached.
HTML-----------
<p>Example: <span class='_mootpl_' rel="{'text':'foo','tag':'strong','event':'click','action':'MyAction','params':{'var1': 'val1','var2': 'val2'}}"></span></p>
JAVASCRIPT-----
assumptions:
1. below two functions are part of a larger class
2. ROOTELEMENT is set at initialize()
3. MyAction is defined before any parsing takes place (and is properly handled on the .fireEvent() test)
parseTemplate: function() {
this.ROOTELEMENT.getElements('span._mootpl_').each(function(el) {
var _c = JSON.decode(el.get('rel'));
var new_el = this.get_replace_element(_c); // sets up the base element
if (_c.hasOwnProperty('event')) {
new_el = this.attach_event(new_el, _c);
}
});
},
attach_event: function(el, _c) {
el.store(_c.event+'-action',_c.action);
el.store('params',_c.params);
el.addEvent(_c.event, function() {
eval(this.retrieve('click-action') + '(this);');
}).setStyle('cursor','pointer');
return el;
},
Works just fine. Test case: http://jsfiddle.net/2GX66/
debugging this is not easy when you lack content / DOM.
first - do you use event delegation or have event handlers on a parent / the parent element that do event.stop()?
if so, replace with event.preventDefault()
second thing to do. do not replace an element but put it somewhere else in the DOM - like document.body's first node and see if it works there.
if it does work elsewhere, see #1
though I realsie you said 'example code', you should write this as:
new Element('strong', {
styles: {
cursor: "pointer"
},
events: {
click: function(event) {
console.log("hi");
}
}
}).replaces(old_element);
no point in doing 3 separate statements and saving a reference if you are not going to reuse it. you really ought to show the ACTUAL code if you need advice, though. in this snippet you don't even set content text so the element won't show if it's inline. could it be a styling issue, what is the display on the element, inline? inline-block?
can you assign it a class that changes it on a :hover pseudo and see it do it? mind you, you say the cursor sticks which means you can mouseover it - hence css works. this also eliminates the possibility of having any element shims above it / transparent els that can prevent the event from bubbling.
finally. assign it an id in the making. assign the event to a parent element via:
parentEl.addEvent("click:relay(strong#idhere)", fn);
and see if it works that way (you need Element.delegate from mootools-more)
good luck, gotta love the weird problems - makes our job worth doing. it wouldn't be the worst thing to post a url or JSFIDDLE too...