I need that when a user click a button. The dress changes. There are separate files for the dress and the body.
I added a custom code on a tap/click event on GWD which is this
document.getElementById("body").src = "Skin-Fair(Ivory).png";
document.getElementById("body").source = "Skin-Fair(Ivory).png";
What happens is that there is a placeholder when I click the button but it never makes the intended image appear.
This is a minimum example of how to change an image source with a button.
I strongly recommend you take a basic web dev course: https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer
document.getElementById('bt').addEventListener('click', function () {
document.getElementById('im').src = 'https://placeholdit.imgix.net/~text?txtsize=18&bg=FF6347&txtclr=ffffff&txt=New-Image&w=250&h=50';
});
<button id="bt">Button</button>
<img id="im" src="https://placeholdit.imgix.net/~text?txtsize=18&bg=FF6347&txtclr=ffffff&txt=Placeholder-Image&w=250&h=50">
No coding skills required for that using GWD.
I assume you have imported all your images in GWD project.
You should use the timeline and create two different keyframes.
Set the opacity to 0 to hide the unwanted assets in your keyframes.
Add an event on tap/click and set it to go to the keyframe/page you want.
Related
I am new to ionic app development and basically i have a radio list a user can select options from and for each option i have set up a background colour and what i want it to do is to change the background colour whenever the user selects an option. the problem is that it changes to the initial option but it doesn't change the colour after the initial load although when i inspect the page i can see it has changed the class name.
this is my html
<ion-nav-bar class="bar-{{viewColor}} nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
and this is how i am assigning the viewColor variable in my js
$scope.viewColor = "positive";
thanks in advance
Try using ionicView.beforeEnter method, set the viewcolor value before the page has finish loaded.
$scope.$on('$ionicView.beforeEnter', function () {
$scope.viewColor = "positive";
});
After playing around with different solutions (which didn't work) I ended up using ion-header-bar instead of ion-nav-bar and it works! The colour changes dynamically with the users selections. The only downside to it is that I have to create a header for each view and handle the application state myself
I have a MenuItemImage here:
auto myImage = MenuItemImage::create("image.png","image_selected.png",
CC_CALLBACK_1(HelloWorld::onImageClicked,this));
It allow me to input a image.png, which will be changed to image_selected.png on selected when I navigate between items in my menu with keyboard. However, I want to perform some actions when select it with myImage->selected(); (NOT activate it by clicking/touching or calling for myImage->activate(); function), not just a boring image_selected.png.
Now, I'm thinking about set up all of those action in:
keyBoardListener->onKeyPressed = [&](cocos2d::EventKeyboard::KeyCode keycode, Event* event)
{ // Setting up actions on KEY_RIGHT_ARROW or KEY_LEFT_ARROW pressed};
However this way makes things complicated. Therefore, I want to ask if there's any way that I could set up all of my actions as myImage being creating so I could call all of those action with a simple myImage->selected() or stop them with myImage->unselected() later?
Your attention and help is very much appreciated :D
Simply do this:
auto myImage = MenuItemImage::create("image.png", "image_selected.png", [&](Ref* ref){
//your code here
//by ref you can access "myImage" object
});
edit:
I'm not sure what are you trying to achieve. Do you want to have a few buttons in menu, which always one of the is selected and change them using arrows? (so menu navigation is like on console games).
edit2:
After watch a sample yt video I don't think you can achieve this relying only on MenuItemImage. Instead I'd create a ui::Button (if you need clicking/touching as well) or Sprite. Then I'd handle button states by myself. As for glowing frame you probably need some fancy shader or create it in photoshop and add to it an action with constantly fading out and in.
I am using the Seven theme and wondered if there was anything that can be done about he vertical tabs at the bottom to either hide the ones my user does not need or make them look a bit nicer.
To change which tabs show up for which roles, use the Override Node Options module: https://www.drupal.org/project/override_node_options
To change the look, you could create a custom module that adds CSS and/or JS in hook_init(). Another way to change the look would be to make a subtheme of Seven, set that as your admin theme, and then add your CSS / JS in the new theme.
You can manipulate which ones appear by proper use of hook_form_alter.
For that, you will need to create a small module, implement the hook, and then hide any element you want by setting $element['#access'] = false;
As an example, assuming you are interested in the node form for content type dummy_type:
In mymodule.module:
<?php
function mymodule_form_alter(&$form, $form_state,$form_id) {
if($form_id=='dummy_type_node_form') {
$form['additional_settings']['#access'] = false;
}
}
The above snippet will hide all the core vertical tabs. You can pick the specific ones you want by playing around a bit.
In that case you need to create role and assign permission
Step 1 : Create new role go to following path
Administration » People » Permissions
Here add new role e.g. content manager.
Step 2 : Click on edit permission as newly created role.
Here assign role as per your requirement.
I was wondering how to make a link, that when clicked it would open 2
links: One would open in a new tab instantly Second one would open in
a new window after a minute or so.
I also want to embed this in a website like weebly.
This is an edit to make things simpler -
linky
two opens one click
This sounds very spammy and not recommended but if you were to do it, I would do it a separate function rather than in line in the onclick html attribute.
Try the below. It will give a 5 second time gap between links.
function openPage1() {
window.open(url1);
window.setTimeout(openPage2,5000);
}
function openPage2() {
window.open(url2);
}
// Just call openPage1 from your button click handler
openPage1();
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs