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
Related
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.
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'm designing a particular page where wherever I click I want to go back to the homepage.
All of the page in enclosed in a section:
<section id="test-page-1" ui-sref="project.home">
</section>
The problem is that I have 3 particular buttons in this page and are not working as they should, instead they are also redirecting me to the Home page.
Z-index didn't solve the problem as from what I read it only works on a visual perspective rather than functionality. I'd really like it if I can still use the ui-sref="project.home" in the whole section as it is. Any ideas please ?
In the functions associated with you button clicks, stop the event propagation.
$scope.buttonFunctioanlity = function (e) {
e.stopPropagation();
};
<button ng-click="buttonFunctioanlity($event)">Click Me</button>
You know what ui-sref is right?
Changing your application state and redirecting to different url (Home in your case)
not really understood your problem, but remember you can add ng-click together with ui-sref to do some function before redirecting (might help your logic)
like
<section id="test-page-1"
ng-click="doSomething(someParams)"
ui-sref="project.home"></section>
and controller
$scope.doSomething = function(someParams) {
// bla-bla-blaaa
}
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
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