DIV Active state - Style change - javascript

I have created 04 buttons and defined the active states for each button in the CSS. These active states are called in JS, so that it changes the div style property on clicked and then resets the property when the other button is clicked.
But this is not working for me.
I have created a fiddleDIV TAG for this. Kindly help.

Change your code from being called onLoad to be called No wrap - in <head>.
Because the functions were inside the onLoad function scope and not the global scope, they were not readable and no javascript was being called when clicking the buttons.
I didn't change any code, just the option on the left pane:
jsFiddle
Update
You also had a small flaw in logic causing the classes to become intertwined. Here's what you were doing:
When first object is clicked, set it's class to obj1_active. When second object is clicked set obj1's class to obj2 and set obj2's class to obj2_active.
As you can see, we're crossing obj1 and obj2 classes. To solve this, we'll keep track of the last object clicked (role) and the class that it should be when a new object is clicked (cname).
Here is the Demo: jsFiddle
Optimization
The code you have works, but it's not very optimized. We shouldn't need four different functions that all do essentially the same thing just to different elements.
In this demo, I simply add and remove _active from the className of each element when clicked: jsFiddle
Lets take it a step further and use multiple classes. This is useful to be able to generalize our CSS declarations. Lets use the default classes, and only append the active class onto the active element and remove it when a new element is clicked.
We'll also separate the _ in the classNames so that btn is its own class as well as mission. This allows for us to really clean up our CSS code to improve readability as well as not need to update multiple sections when we just need a simple background color update or something of that nature.
Here is the optimized demo: jsFiddle
Link Color
I'm not sure if you meant to do this, but you'll notice that the links sometimes start white then turn to black when clicked. This is because the :link pseudo selector only selects non-visited links. If you want it to select all links, then just use the <a> tag: Final jsFiddle

Related

How to change the color of a /dojox/mobile/ToolBarButton

I guess it's a simple task, but I'm not able to change the color of a dojox/mobile/ToolBarButton:
h1(data-dojo-type="dojox/mobile/Heading") My Heading
span#myButton(data-dojo-type="dojox/mobile/ToolBarButton" dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="arrow:'right', label:'My Button'" style="float:right;")
Inside a javascript function I want to change the color of the button, like I can do during startup using:
defaultColor:'mblRedButton'
or
defaultColor:'mblBlueButton'
Of course adding that class to the DOM node it's not enough. But I don't understand how should I do it.
UPDATE
Still unsolved but I add that I tried to add the class mblBlueButton to the dom node of the button without success. Inspecting the classes at run-time I see the button is actually composed of several items. Each one has the original class. I wonder how to change them all.

jQuery Panel Will Not Toggle Active Class/Collapse One at a Time

I have two divs - one panel div that controls what shows on the other div. The problem is I have to apply a 'selected' class when a panel is active and also when the sub items under the panel is active as well. Right now, it does not "toggle" the selected class when active. This is what I have so far...
jQuery
$('.options-display .options-list').hide();
$('#option-1').show(); // change to whatever is shown first on page
$('.collapse p').click(function(){
$(this).toggleClass('.selected');
var target = '#' + $(this).data('target');
$('.options-list').not(target).hide();
$(target).show();
});
jsfiddle
https://jsfiddle.net/peyton_fields98/48d8zut7/
It is working as written, perhaps not as intended. There are two aspects which may not be obvious that led to your confusion.
First, this is a common typo that I have made as well, when using a class name in the toggle (or addClass or removeClass) make sure you do not include the . for the selector
//$(this).toggleClass('.selected');
$(this).toggleClass('selected');//should be this
// ^no `.`
To note: using this approach still leaves the original "selected" class intact. Perhaps you should preface this line of code with
$('.collapse .selected').removeClass('selected');
Second, the this binding in the click callback is going to be the element clicked, and in your example when selecting a sub item, it is the <p> element. Perhaps the selected class should be on the parent div in those cases if you are wanting to style the entire section. It was hard to tell as you left out the styling for the selected class.

Visible binding and dynamic css binding

In this example, Knockout is working as intented. I'm looking for an alternative way of achieving the goal of having a dynamically filled grid with CSS class .last on every second item. In a way, I'm probably looking for a different approach.
JSFiddle with description
My problem illustrated on http://jsfiddle.net/96vdD/7/ and described here:
Three people pass through the foreach. Adding three divs to the grid.
Dynamically, Knockout assigns a css class of last to every second div that comes out of the foreach.
At the same time, each peoples visibility property decides whether or not (s)he will be displayed in the grid.
The CSS will strip the margin of every .last div in the grid, to prevent each second div from being moved to the next 'row'. A common layout technique in CSS.
See what happens when you change Charles' visibility to true and run the JSFiddle.
Problem
The second person in the example, Charles, is not shown in the grid (because his property visible is set to false). However, Denise is still moved to the next row.
Knockout adds a style="display:none" to Charles, but also applies the class="last" rule to him, while ideally I would like Denise to receive the class="last" as visually she is the second people in the grid.
Question
How can I have Knockout ignore !visible elements when applying the class="last" rule?
You can create a computed array of only visible people:
self.visiblePeople = ko.computed(function() {
return ko.utils.arrayFilter(self.people(), function(person) {
return person.visible;
});
});
then bind on it in your html:
<div class="wrapper" data-bind="foreach: visiblePeople">
Fiddle - http://jsfiddle.net/96vdD/8/

Use javascript to add a letter in css?

I'm having issues with my noggin... Please help me answer this question:
is it possible to add a single letter to a string in css? (i would assume that it is by storing the original string and adding a letter at a specific position)
Here is my code:
.u_usa{
background-image: url(../images/icons/usa_24.png);
}
What I am looking to do is onclick change the css property to:
.u_usa{
background-image: url(../images/icons/usa_24t.png);
}
then when clicked, change it back (removing the "t")...
the issue is that i have SEVERAL different classes that I want to use the same function on, each having a different location for the background image. The thing that stays the same is that one image has a t and one doesnt...
i need one function that, no matter what class im changing, is able to simply change one letter in the css property (whatever class is calling the function)
thank you in advance, If you couldnt tell by my jibberish posting, I have been working on these issues for a while and have fixed just about everything but this one item.
Thank you again...
edit:
what i am trying to achieve is creating a function that when run does a css switch, but is dynamic as to whatever class is running it. i have 60+ different divs that have backgrounds, when clicked i want to add or remove a "t" from the 4th to last character position of the css background image url.
You should add a second CSS rule for each class with a dual-class selector, e.g.:
.u_usa {
background-image: url(../images/icons/usa_24.png);
}
.u_usa.clicked {
background-image: url(../images/icons/usa_24t.png);
}
and then in your onclick event handler, add or remove the clicked class from the appropriate elements.
There are a number of approaches:
Toggle Classes
Have one background image specified by one class and a different background image by another class. Find all the elements with one class, loop over them, remove one class and add the other. It's reasonably quick for say less than 100 elements with the same class but might be slow where there are more.
Select elements based on background image and change it
Very slow and compute intensive, ok for a small number of elements but that's it.
Change the style rule
Find the style rule in the appropriate style sheet and change the value of the background-image property. It's more code (if you have to write the function from scratch, but I'm sure you can find a suitable function and add it to your code collection). It's very fast, regardless of how many elements you need to modify. The only drawback is that it will change every element with the class, you can't except some based on logic like you can with the toggle method.
Your choice.
we can use addClass function in JQuery to do that when click on a button.course we can not do that without javascript
Firstly you can make the style inline instead of a class.
Then use the code snippets below
from normal to 't' image
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('.png','t.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
and reverse
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('t.png','.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
Or
Make two different classes and change the class everytime you need to change the background-image
document.getElementsByClassName('className')[0].setAttribute('class','newClassName');
That's not possible with CSS I'm afraid. You'll have to use javascript, or more likely a library such as jQuery to create that functionality.

Change class value based on element ID

Slap me if I am going about this wrong, I am quite the beginner.
Here is my setup, which is very similar visually to Outlook's UI I guess.
Left pane (floating div) contains a list of containers you can click on (like emails). Right hand pane contains a set of non-visible containers that should become visible when their class is changed to a different css class.
I'm trying to set it up where if you click on the element in the left pane, it then performs an onclick javascript action (stored in an external .js file) that toggles the right div's class value between two css classes.
The onclick in the left pane div passes $_row['uniqueID'] to the function. That is the uniquely incremented column name. It is also the ID value of the right pane 's.
Putting this altogether, can someone direct me on how to do this?
left pane...
<div onclick=\"toggleMenu('".$row['uniqueIdentifier'],"'); \">
right pane...
<div id=".$row['uniqueIdentifier']," class=\"mL\">
css...
div.mL {display:none;}
div.mL.active {display:block;}
function toggleMenu(div){
$('#'+div).addClass('active');
}
jQuery has .addClass() and .removeClass() methods.
I think that's what you're after, let me know if not.
By not changing too much code I suggest doing this :
div.mL {display:none;}
div.mLactive {display:block;}
I erased the dot, so u have now 2 different classes.
So on clicking you just change the class of the div with the correct id to mLactive.
In Jquery this canbe done with $(#'theid').addClass('mLactive');
This only adds the new class. You also want to remove the previous class with $(#'theid').removeClass('mL');
Another way : $(#'theid').attr( "class" , "mLactive" ); Which doesn't require to remove the previous class. Your choice. Another advantage of this method is that javascript has a method to do that which doesn't require Jquery.
Jquery has also the easy options $(#'theid').show(); and $(#'theid').hide() btw.

Categories