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.
Related
I am just learning JS/CSS.
Here is the site I am playing with.
http://keysoft.keydesign-themes.com/demo1/
I want to change "text-align" attribute of a style ".pricing .pricing-row" to "left" using JavaScript.
When I change it in Chrome console (Styles) to "text-align:left" I see that it aligns rows to left but keeps buttons centered. That is what I want.
I tried in console: document.querySelectorAll('.pricing.pricing-row')but I can't understand how to select textAlign attribute from there. It shows a NodeList.
Also I have tried document.getElementsByClassName('pricing-row') but there are elements like div.pricing-row.button-container.
These elements are unnecessary because if I use them in a loop then buttons' alignments will be affected.
So my goal is to align only "pricing-rows" without affecting alignment of buttons or other parts.
Could you tell me please the most efficient way to accomplish this task?
I'm not sure how to do this in pure JS but it's possible with jQuery.
Basically your problem is that some of the 21 divs that have the class 'pricing-row' also have other classes, and you don't want to pick those. Well actually that helps you weed them out.
First off - in order to use jQuery in the webdev console do this:
$===jQuery // should prompt true
Now:
$("div[class='pricing-row'")
will pick only divs with this specific class. Then you can do whatever you want with them. in your case:
$("div[class='pricing-row'").css('text-align', 'left');
another option which is simply very useful to no is the jQuery not() method:
$(".pricing-low).not('.button-container .selector').css('text-align', 'left');
What happens here is that first all of the elements with the "pricing-low" class are selected, and then the not() method drops the ones that have the following extra classes. In the end the css manipulation works.
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.
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
I'm working on text content that sometimes has different parts being related to each other, and I'd like to let user hover/mouseover any of the related parts, and accordingly highlight all the related parts at the same time with the same highlight color.
What's the quickest way to do this, assuming that I do have all the information (on the server) regarding which parts are related, prior to generating the content into HTML. I.e. I can put in the proper css or javascript to get the needed setup in ad hoc, per page basis.
The fastest way would be toggling a class on your body or a top container element and defining the CSS in such a way that it descendants are corrected colored/highlighted etc. This will be faster than adding/removing classes from each element in the association.
For example: if all related elements have the class "rel-1" then you can have a CSS definition like:
body.rel-1 .rel-1 {
background-color: #ddd;
/* .. other styles */
}
And on hover over any element with class rel-1, toggle the same class in the body/container element.
For example:
$('.rel-1').mouseover(function() {
$(body).addClass('rel-1');
});
$('.rel-1').mouseout(function() {
$(body).removeClass();
});
and so on..
If I understand your question, this can be done using jquery pretty easily.
First, I'd set up html elements with attributes. I'm using thisisfor, you can use (almost) anything. So if you can predetermine which 'group' each item belongs to on the server side, you can classify them with an attribute of your choice, and then whatever 'group'.
html
<div class="hoverme" thisisfor="group3">What group are we in?</div>
<div class="hoverme" thisisfor="group3">What group are we in?</div>
<div class="hoverme" thisisfor="group2">What group are we in?</div>
<div class="hoverme" thisisfor="group4">What group are we in?</div>
Then, using jquery, you can set up a hover event that checks an attribute, the thisisfor attribute in our case:
jquery
$("[thisisfor]").hover(function(){ /* anything with 'thisisfor' attribute */
var group = $(this).attr('thisisfor'); /* store its value as variable 'group' */
$("[thisisfor="+ group +"]").html(group); /* all with this group that was hovered....change the text (or whatever your plan is) */
});
See my example
But, yea, the possibilities are endless using attributes...
I'm trying to get a button to stay pushed down when clicked on. However, the box-shadow portion in what I'm working with, and the CSS active state part are both confusing me.
I know this is doable considering this code: http://jsfiddle.net/UEkBQ/
This is the code I'm working with: http://jsfiddle.net/frnYf/
It seems that the CSS "#button:active" is constantly functional, while I only want it to be toggled when clicked on.
The first fiddle works because make-me-green is a css class name, and can be targetted by css rules, where as #button:active is not a class name (its a css selector consisting of a tag id and a pseudoclass).
Change your css rule from #button:active to #button.some-css-class-name and the js to $(this).toggleClass('some-css-class-name');
The reason you need #button.some-css-class-name and not just .sone-css-class-name is that # selectors have a higher priority than . selectors.
In response to your question about the ....
<div id="blah" class="blah">hello</div>
we can target this div with its class or its id, to tell css which we use a . for a class or # for an id.
Or try: http://jsfiddle.net/frnYf/35/