Could you please have a look at the following link.
https://dl.dropbox.com/u/44791710/rotate/rotate.html
I have a problem with camera controls and a textbox. I cannot change the value of the textbox when I use controls. When I remove control lines, the textbox is editable.
Would you please check it.
Many Thanks
Try this:
controls = new THREE.TrackballControls( camera, renderer.domElement );
The second argument defaults to document, which I expect is the problem.
(You'll obviously have to change the order of some of your code, too.)
EDIT: For reference, you can also use this construct:
// container
container = document.createElement( 'div' );
document.body.appendChild( container );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//controls
controls = new THREE.TrackballControls( camera, container );
Clicks and keys events do not reach to the textbox.
You can remove next lines in "control" code:
event.preventDefault();
event.stopPropagation();
Related
enter code here I have setup navigation links to smooth scroll to an anchor point on my page.
Unfortunately I always have to click twice on every link for the anchor to move.
I think the smooth scroll javascript I'm using is causing the problem. but I don't know anything about java script and I have just copy/pasted this code from somewhere.
I'd be appreciative if you could help me understand, which part of this code is causing the problem.
//Smooth Scroll for Page Anchor
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I'm building a Vaadin 8 app ( first one for me ). I am using the designer to generate the UI. I've added several buttons to the dashboard which should fire a function when clicked. For some reason nothing fires when the image is clicked. Below is all the code that is involved. Can anyone see what I'm doing wrong?
This is the code from the .html file:
<vaadin-horizontal-layout responsive width-full margin>
**<vaadin-image icon="theme://images/properties.png" style-name="my-image-button" responsive alt="" _id="imagePropertyInfo"></vaadin-image>**
<vaadin-image icon="theme://images/occupants.png" responsive alt="" _id="imageOccupants"></vaadin-image>
<vaadin-image icon="theme://images/vendors.png" responsive alt="" _id="imageVendors"></vaadin-image>
</vaadin-horizontal-layout>
Here is the scss
.my-image-button
{
cursor: pointer;
}
Here is the code from the Dashboard UI
public DashboardHomeView( OnCallUI onCallUI )
{
this.onCallUI = onCallUI;
// Make it disabled until a property is selected
**imagePropertyInfo.setEnabled( false );
imagePropertyInfo.setStyleName( "my-image-button" );**
fetchPropertyBasicInfo();
}
protected void fetchPropertyBasicInfo()
{
List<PropertyProfileBasic> listOfPropertyProfiles = new ArrayList<PropertyProfileBasic>( OnCallUI.myStarService.fetchAllPropertyProfileBasicInformation() );
comboBoxGeneric.setCaption( "Select a Property" );
comboBoxGeneric.setItemCaptionGenerator( aProperty -> aProperty.toString() );
comboBoxGeneric.setItems( listOfPropertyProfiles );
comboBoxGeneric.addValueChangeListener( event -> fetchOccupantBasicInfo( event ) );
comboBoxGeneric.focus();
}
protected void fetchOccupantBasicInfo( ValueChangeEvent<PropertyProfileBasic> event )
{
// Fetch all the occupants for the selected property
if( event.getValue().getPropertyNo() != null )
{
// Fetch a list of occupant basic info for the selected property
List<OccupantProfileBasic> listOfOccupantProfiles = new ArrayList<OccupantProfileBasic>( OnCallUI.myStarService.fetchOccupantProfileBasicByPropertyNo( event.getValue().getPropertyNo() ) );
// Clear the existing grid et al
gridContainer.removeAllComponents();
// Add the occupant grid
occupantGrid = new OccupantProfileBasicGrid( listOfOccupantProfiles );
// Show the grid
gridContainer.addComponents( new Label( "Occupants" ), occupantGrid );
// Set the dashboard buttons to enabled now a property is selected
**imagePropertyInfo.setEnabled( true );
// Add the property info button
imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );**
}
}
protected void fetchPropertyInformation()
{
Notification.show( "Yo!", "You clicked!", Notification.Type.HUMANIZED_MESSAGE );
}
I assume you are using GridLayout. I am recommending another approach. Use Button, and set the button style to be borderless (apparently you want something like that. The icon of the button can be image from your theme, using ThemeResource. "Pseudo code" is something like this:
ThemeResource icon = new ThemeResource("/images/properties.png");
Button imagePropertyInfo = new Button(icon);
imagePropertyInfo.setStyleName(ValoTheme.BUTTON_BORDERLESS);
imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );
Note also, JavaDoc of Image component says.
"public Registration addClickListener(MouseEvents.ClickListener listener)
Add a click listener to the component. The listener is called whenever the user clicks inside the component. Depending on the content the event may be blocked and in that case no event is fired."
I think it does not like your way of setting image with theme, without using Resource.
If you want to remove the focus highlight of the button, it should be possible via this CSS rule:
.v-button-link:after {
content: none;
}
Also it is worth of mentioning that Image is not Focusable, while Button is. This means that even that Image can have click listener, it is not reached by keyboard navigation, Button is Focusable and is reached by tabbing etc. So using Button instead of Image makes your application more accessible.
I've the this Shadow Element/root in this example http://jsfiddle.net/fyf6thte/8/ working perfectly with JavaScript, interested to have similar one with DART, so I wrote the below code (using the same html and css file), but I could not see the button it looks theshadow.innerHTML = '<button id="d">click</button>'is not working
the full code is:
import 'dart:html';
void main() {
var thehost = document.querySelector('#host1');
document.registerElement(fonixDiv.tag, fonixDiv);
thehost.append(new fonixDiv());
}
class fonixDiv extends HtmlElement {
static final tag = 'fonix-div';
var shadow;
bool disabled;
factory fonixDiv() => new Element.tag(tag);
fonixDiv.created() : super.created() {
shadow = this.createShadowRoot();
shadow.host.innerHTML = '<button id="d">click</button>';
shadow.host.onClick.listen((e){
this.host.dataset.disabled='true'; // set Attribute to the custom element
});
shadow.children.d.onClick.listen((e){
this.text = "you clicked me :(";
// or shadow.children[0].textContent="Shadow DOM content changed";
this.disabled=true;
// alert("All: button, text and host should be change");
});
}
#override
void attached() {
super.attached();
this.disabled=disabled;
}
}
I'm not sure about the accuracy of the balance of the code, I can check it only after I see the button.
any help.
The error is correct: in Dart 'this' is not bound contextually as in JS and instead we have lexical scoping;
in your dart code you are actually changing the text content of the custom element and not of the target of the event (the button in the shadow root). So basically you have a custom element, you set the text content on it but you also have a shadow root created inside of that same DOM node and it shadows everything else you put inside that custom element and that is why you do not see it and continue to see the shadow root's content - this is how shadow root works by design.
To fix it you need to update the text content (and the disabled property) on the button (for example e.target.text = ...).
Hope this helps.
Seems like the .host should be removed from this line
shadow.host.innerHTML = '<button id="d">click</button>';
shadow.innerHTML = '<button id="d">click</button>';
The jsfiddle doesn't have it and it seems weird. I think with .host you add it basically to this and therefore as child not as content.
I think the main issue is: Use innerHtml instead of innerHTML.
There are a few additional minor things you need to fix:
Remove 'host', as Gunter says, you want to set the innerHtml of the shadow.
Instead of shadow.children.d.onClick, do shadow.querySelector('#d').onClick.
Also, do dataset['disabled'] instead of dataset.disabled.
When I put OpenLayers map in a dialog, the zoom wheel seems not working. Also, when trying to resize the dialog, it is not that smooth. How to solve the two problems?
Here is the fiddle http://jsfiddle.net/Ja7v2/2/
var div = $('<div />')
.attr('id', 'map')
.css({width:800,height:600})
.appendTo($('body'));
//start a simple map, code from on http://openlayers.org/dev/examples/osm.html
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
map.addControl(new OpenLayers.Control.Navigation({
zoomWheelEnabled: true,
}));
// initialize the jQueryUI Dialog
div.dialog({
width:800,
height:600,
title: 'My Map',
resizeStop: function(){
map.updateSize(); //to prevent drag-zoom error
},
dragStop: function(){
map.updateSize(); //to prevent drag-zoom error
}
});
seems the jQuery dialog disables scrolling by default.
Adding this line solves the (your) problem:
$('#map').css('overflow', 'hidden');
It's not the final solution, I believe, but shows you the way... :)
Hi i am converting my game from Corona SDK to Cocos2d-x 3.0 alpha.
I need to create an image button with text on it. It was very simple in Corona SDK with widget.newButton, which takes all x, y, size, font, image etc in single function.
Now i couldn't find any alternate to this in Cocos2d-x. The closest thing i have found in it is MenuItemImage
auto closeItem = MenuItemImage::create(
"blank.png",
"blank-selected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 , origin.y + closeItem->getContentSize().height/2));
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Point::ZERO);
this->addChild(menu, 1);
It takes the images and event, but i cannot set title and font on it. Anyone has idea how to set title and font on it?
You can use MenuItemFont or MenuItemLabel.
For example:
MenuItemFont::setFontName( "Marker Felt" );
MenuItemFont::setFontSize( 34 );
auto label = LabelBMFont::create( "go back", "fonts/bitmapFontTest3.fnt" );
auto back = MenuItemLabel::create(label, CC_CALLBACK_1(MenuLayer4::backCallback, this) );
or
MenuItemFont::setFontSize( 34 );
MenuItemFont::setFontName("Marker Felt");
auto item6 = MenuItemFont::create("Bugs", CC_CALLBACK_1(MenuLayerMainMenu::menuCallbackBugsTest, this));
For more information, see MenuTest.ccp
update
You can simply new a Label, and add it to you MenuItemImage, such as:
LabelTTF* closeLabel = LabelTTF::create("close", "Marker Felt", 28);
closeItem->addChild(closeLabel);
And you may need to adjust the label's position.
It's fairly simple, this works in at least cocos2d-x 3.10 and 3.16, but if you're looking to make a button with cocos2d, use the built in cocos2d::ui namespace for Button.
cocos2d::ui::Button* button = cocos2d::ui::Button::create();
//button textures
button->loadTextures(
"<your default texture>.png",
"<your pressed texture>.png",
"<your disabled texture>.png",
cocos2d::ui::Widget::TextureResType::PLIST
);
//text content, font, and size
button->setTitleText("Touch me!");
button->setTitleFontName("arial");
button->setTitleFontSize(24.0f);
//bind a callback with a lambda
auto touch_handler = [](cocos2d::Ref* ref, cocos2d::ui::Widget::TouchEventType evt)
{
if (evt == cocos2d::ui::Widget::TouchEventType::ENDED)
{
//do your callback logic here, ie play a sound or vibrate
}
};
button->addTouchEventListener(touch_handler);
//then finally, like a Nodes, add it to your scene
my_scene->addChild(button);
The textures you'll load are ideally packed into a texture with something like TexturePacker, otherwise you'll change it to LOCAL instead of PLIST. The textures will be used when the button is default, or when there's a touch, or when the button is disabled.