I have set of divs built in php based on the data I load in, and I use sortable for the users to be able to change to order and save it.
To make it more comfortable to use I'd like every second div in set to be of different format.
This code works when I move one "even" div to another "even" position, otherwise when I place "even" div to where "odd" one is it starts to color all between them as "odd".
Code:
$( ".droppable" ).sortable({
update: function( ) {
$(".draggable:nth-child(even)").addClass("even");
$(".draggable:nth-child(odd)").addClass("odd");
}
});
What do I do wrong?
Cheers for help!
What did I do wrong?
You used jQuery.
Use CSS:
.draggable:nth-child(even) {
background: #eee; /* Or whatever you want */
}
I would use CSS pseudo-classes
DEMO http://jsfiddle.net/UAcC7/737/
li:nth-child(odd) {
color: green;
}
li:nth-child(even) {
color: red;
}
Change the order of the addclass statements and check if it makes a difference.
Related
I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page:
$(function () {
$("select").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ multiple: false }
);
$("[multiple]").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ enableCaseInsensitiveFiltering: true }
);
});
The code above works perfectly. The problem is that options with long text values overruns it's container boundaries as per the following screenshot, instead of wrapping over to a new line.
How can I fix this? Preferably if there is a way to do it by simply altering my above .js code that would be a bonus.
By default, nothing should be applying a width to the .multiselect-container, so it will take up as much room as it needs in order to display all the items on a single line:
If however, something is applying a width to the .multiselect-container, you'll encounter the problem you identified:
The problem is that bootstrap multiselect uses a dropdown-menu to which the bootstrap library applies the following code:
.dropdown-menu>li>a { white-space: nowrap; }
In order to fix this, we can return white-space to it's normal wrapping mode with the following css:
.multiselect-container > li > a { white-space: normal; }
Demo in jsFiddle
Couple more notes:
maxHeight takes the number of pixels, so passing in 5 will make the control only 5px high. You should pass in something like maxHeight: 200
enableCaseInsensitiveFiltering does the same thing as enableFiltering so you don't need both. Decide whether you want case sensitivity or not and then set either one to true
Update with further explanation
#user2105811, You do not need to target the label specifically and you do not need to use !important here's the HTML structure and CSS that is generated for this solution:
Notice that white-space is always inherited from the parent, so targeting label will do the same thing as targeting a, but will address the problem at it's root.
The original bootstrap code has the same degree of specificity as the selector being used to fix it. Meaning it will override it as long as your custom CSS is placed after the bootstrap css which should always be the case. If it's not working, I suspect you are not doing this.
Your suggestion to use:
.multiselect-container > li > a {
white-space: normal;
}
doesn't work. Instead I added the label tag to the CSS and set it to !important. Now it works.
.multiselect-container > li > a > label{
white-space: normal !important;
}
I'm trying to get a links background image to toggle or swap on click for an FAQ accordion expand/contractable div using javascript.
I've gotten things working based on this jsfiddle example (http://jsfiddle.net/QwELf/)
You can see my page working here (http://bit.ly/1hfgcGL)
The problem comes in when you click one of the toggle links a 3rd time. It gets the wrong background image and is then out of sync with how it should look.
Right arrow > for contracted state and downward arrow for expanded state are how they should be but the opposite shows up.
It seems to work just fine in the jsfiddle on the 3rd or more clicks any idea what's going wrong with mine?
Script
<script type="text/javascript">
function changeArrow(element){
var arrow = element;
if(arrow.className == 'background_one'){
arrow.className = 'background_two';
} else {
arrow.className = 'background_one';
}
}
</script>
CSS
.background_one { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevright.gif) center left no-repeat;}
.background_two { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevdown.gif) center left no-repeat;}
HTML
<a class="background_one" data-toggle="collapse" data-target="#demo4" onClick="changeArrow(this)">If I transfer my balance to a new Access 3 Equity Line, what will my interest rate be?</a>
You need to check if it has class, not if it is, as you have several on times. As you use jQuery you can use .hasClass(), .addClass() and removeCLass(). You might also want to look at .toggleClass().
function changeArrow(element) {
var $arrow = $(element);
if ($arrow.hasClass('background_one')) {
$arrow.removeClass('background_one');
$arrow.addClass('background_two');
} else {
$arrow.removeClass('background_two');
$arrow.addClass('background_one');
}
}
That is happening because the className also contains the class collapsed the second time it's clicked.
I used IE's debugger and found this:
Perhaps you could use contains instead of equals, like the following (untested, but should work):
function changeArrow(element){
element.className = (arrow.className.contains('background_one') ?
'background_two' :
'background_one');
}
I have set of 6 divs, and when I click on each of them, a certain div changes its innerHTML, like some kind of menu. When user hovers over those "buttons" (actually divs), they highlight with CSS's property :hover. There's also :active, when a user is clicking on a "button".
Since the "information" div changes when clicked, I'd like to have the current selected div constantly highlighted, in a whole different color than when on hover. So I used javascript for this. I call a function that changes background color of all of the "buttons" (so I don't have to "remember" which one was clicked), and then changes this div's backgroundColor to appropriate color.
However, now I lost my :hover and :active styles. How to handle this?
Here are code snippets as requested:
function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}
function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}
meaning is a string, menubuttonX are 6 div's that act like buttons.
#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}
#kotd .menubutton:hover {
background-color: #aaa;
}
#kotd .menubutton:active {
background-color: #bbb;
}
instead of changing the color with javascript, use javascript to add and remove a class (for example .current) to the active "button" and then style the .current class accordingly in CSS. jQuery would be the most elegant solution to do that using the addClass(),removeClass() or toggleClass() functions.
To explain the idea a bit further:
When you click on a button, you add a class to its class attribute instead of adding inline style properties. This allows to style them via your CSS stylesheet.
In jQuery it is really easy. You can do something like this:
$(".menubutton").click(function () {
$(".menubutton").removeClass("current");
$(this).addClass("current");
});
Step-by-step:
you first look for all DOM elements with class menubutton by calling $(".menubutton"). Then by using .click() you trigger an event if one of the menubutton elements gets clicked. The function(){} includes the functions that get executed on click. First
$(".menubutton").removeClass("current");
again gets all objects with class menubutton and removes the class current from any of them that have it. Second
$(this).addClass("current");
adds class current ti "this" ... meaning the clicked object.
This will make the clicked object in the DOM look something like this:
<div class="menubutton current">
In your CSS you can now style the objects that has the additional current class:
.currnet {
background-color:blue;
color:white;
}
DEMO
In pure JavaScript this will be a bit more tricky. Maybe this thread can give you some more insight into that:
How to add/remove a class in JavaScript?
You should be using jquery's .hover() function extensively.
Check out http://api.jquery.com/hover/ & http://api.jquery.com/click/
The samples and you can easily do this.
To be exact, you should be using the following two built-in functions :
$(selector).hover(handlerIn, handlerOut);
$(selector).click(event);
Cheers
I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)
You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!
CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.
I'm making some divs clickable with JavaScript. I'd like to use CSS to make the user understand that they are clickable, for example changing the color of links inside a div when mouse enters the div.
In CSS it is:
#menu > div:hover > a {
color: #f00;
}
and it works like a charm.
I'd like the color of the link to change when you mouseover only if JavaScrpt is Enabled, because if it is disabled the div is not clickable, just the link is. I'd like to add this declaration with javascript, something that in mootools should be as simple as:
$$('#menu > div:hover > a').setStyle('color', '#f00');
But that selector doesn't work on mootools. I should go for each div children of #menu and addEvents to it. That seems too much work for me compared to the simple css definition. How can I do that?
Alternative solution (that I don't know how to implement) could be write a with_js_enabled.css to load trough javascript. Is it possible?
Much simpler: set a class on the body element on page load:
document.body.className = "js";
Then modify your CSS;
.js #menu > div:hover > a {
color: #f00;
}
Job done :-)
(Although I assume you're aware that IE 6 doesn't support :hover on anything but links?)
well, since you asked about mootools here...
to change the colours of all A's within the divs of #menu when mouseover is triggered on the div, you could define a class a.red { color: red; }
$("menu").getElements("div").each(function(el) {
el.addEvents({
mouseenter: function() {
this.getElements("a").addClass("red");
},
mouseleave: function() {
this.getElements("a").removeClass("red");
}
});
});
you could also go $("menu").getElements("div").getElements("a") or even $("menu").getElements("a"), then attach the events to the parent (if it happens to be the div) - i guess it really does not matter.