We Keep Coding

Applying first and last child to a certain <tr> id via css and jquery

Basically I want to be able to remove margins below and above the 'non' first and last child duplicates. So I have tried to target the row that has duplicate id's.. in this case #Day2 and #Day6, then I've tried to select the :first-child and the :last-child
tr#Day2:first-child td, tr#Day6:first-child td { margin-top: 0px !important; }
tr#Day2:last-child td, tr#Day6:last-child td { margin-bottom: 0px !important; }
I'm not sure if a css only way is able to achieve what I want or if I'm on a somewhat right path with what I'm currently doing.
My attempt to use jquery to do this is:
<script>
$(document).ready(function () {
$(document).ajaxComplete(function () {
var seen = {};
$('table tr td').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).css("margin-bottom", "0px");
else
seen[txt] = true;
});
});
});
</script>
Though this doesn't seem to even remove the margin of a duplicate, nor does my css attempt I'm sure there is a way. Perhaps I cannot use :first-child and :last-child with a tr id? If so is there any other way to achieve what I want?
I greatly appreciate any help, thank you.
JSFiddle
Please view my example here.
**
Solution
**
All achieved without the need for jQuery. Please find the working edition here.
Thanks #Marcin for pointing me towards the solution.
JSFiddle: View Solution

There is only workaround for this:
.Day2 { margin: 0px 0px 5px 0px; }
.Day2 ~ .Day2 td { margin-top: 5px; }
This sets only bottom margin on each .Day2 and then, if there is any .Day2 before, sets margin-top to 5px;
Taken from CSS3 selector :first-of-type with class name?
You shouldn't use the same id on more than one element. Use class instead (for example class="day1").

click to change background toggle

When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks

JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/

Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE

You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>

Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/

table clicked cell color scheme

I have menu in a table "mytable" like this:
<td id="1" align="center" onclick="clicked(1);"> one </td >
<td id="2" align="center" onclick="clicked(2);"> two </td >
<td id="3" align="center" onclick="clicked(3);"> three </td>
<td id="4" align="center" onclick="clicked(4);"> four </td>
...
The css:
#mytable {
background:#d0d0df;
cursor:pointer;
}
#mytable td{
background:#4092c4;
color:#efefef;
}
#mytable td:hover{
background:#e0e0e0;
color:#FF004F;
}
The javascript:
function clicked(k){
for (x=1; x<5; x++){ // reset all cells
document.getElementById(x).style.background='#4092c4';
document.getElementById(x).style.color='#efefef';
}
// set cell
document.getElementById(k).style.background='#106284';
document.getElementById(k).style.color='#FF004F';
}
How to highlight a single clicked cell and maintain the hover functionality?
The above code works, but after calling clicked() the hovering functionality is lost.
I rather not use jquery.

Syntax issue, ids that are just numbers are not valid HTML.
The problem you are having is that when the javascript runs, it appends the styles inline on the elements, and the CSS styles cannot override inline (not without adding things like !important, and that just gets ugly).
I would steer away from writing styling in the JS, just use it to change classes. So make a new class, lets call it .active, and when you click a tablecell just add the class, and remove the class from all the others.
Something like (this is example only, some tweaking may be required)
function clicked(k){
var otherCell, thisCell;
for (x=1; x<5; x++){ // reset all cells
otherCell = document.getElementById(x);
otherCell.className = otherCell.className.replace('active','');
}
// set cell as active
thisCell = document.getElementById(k);
thisCell.className += thisCell.className + ' active';
}
and then set the styles only in css, something like
#mytable {
background:#d0d0df;
cursor:pointer;
}
#mytable td{
background:#4092c4;
color:#efefef;
}
#mytable td.active{
background:#106284;
color:#efefef;
}
#mytable td:hover{
background:#e0e0e0;
color:#FF004F;
}
This way you have more control over the 'cascading' of the style rules, being more specific or changing the order of the rules will give you possible different outcomes.
As per fiddle here

This is probably overkill, but the jQuery javascript library makes this trivial.
I've channged the HTML too becuase using table for non-tabula data should be avoided.
New HTML:
<ul id="mytable">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
Also note, no ID's on the items and no in-line javascript, nice and clean.
New CSS:
#mytable {
background:#d0d0df;
cursor:pointer;
list-style:none;
padding-left:0;
}
#mytable li {
background:#4092c4;
color:#efefef;
display:inline-block;
margin:2px -2px 2px 2px;
padding:3px;
}
#mytable li:hover {
background:#e0e0e0;
color:#FF004F;
}
#mytable li.active {
background:#106284;
color:#efefef;
}
Note: I've used inline-block for the list items to orientate the horizontaly, you could also use float or table-cell. This is a good article on floats vs inline-blocl. Also note the new active class.
Now for the super-simple jquery (make sure to include the jquery library!)
$(document).ready(function(){ //Performs the following code when the document is fully loaded
//Assigns a click event handler to list items in an element with ID "myTable"
$("#mytable li").click(function () {
//Remove the active class from list items in #mytable that were not clicked
$("#mytable li").not($(this)).removeClass("active");
//Add the active class to the clicked element.
$(this).addClass("active");
});
});
Fiddle
Just make sure to include the jquery library and to use $(document).ready();
Handy jQuery Links
Document Ready
Selectors
Click
Not
Add Class
Remove Class

jQuery Toggling when it shouldn't

So I got myself this far and I've solved the problem I was having but I'd still like to know why this is.
First, here is my original code:
$(function(){
var navListLength = $('nav ul li').length;
buttonPress(1);
function buttonPress(i){
if(i < navListLength){
$('nav ul li a:nth-child(' + i + ')').click(function(){
$(this).toggleClass('button-pressed');
console.log('Button Down');
setTimeout(function(){
$('nav ul li a:nth-child(' + i + ')').toggleClass('button-pressed');
buttonPress(i + 1);
console.log('Button Up');
}, 500);
});
}
}
});
It's supposed to toggle the style of a single link in a navigation list when it's clicked and not affect any other links in the list.
I wanted to do it this way so that I could add any amount of links to this list in the future without having to create a new a new class and add it to the jQuery each time.
The first toggle works as expected. But the second toggle is being applied to all of the links and it creates an inverted effect. So all of the links are opposite of what they are supposed to be except the link being clicked.
I solved the problem by changing the first toggleClass to addClass and the second toggleClass to removeClass. But I shouldn't have to do that.
Could anyone tell me why this is?
Here's a picture of my buttons:

You're doing way too much work just to toggle a class on click. You don't need to make an array of all the navigation items, the whole point of jQuery is that it handles selecting DOM elements for you.
Try this:
$(function() {
$('nav ul li').click(function() {
$(this).toggleClass('button-pressed');
});
});
You don't have to handle making sure the others aren't affected. Only the clicked element gets toggled.
-- EDIT --
I see what you were going for with the setTimeout() now. You can do it inside the click handler, like this:
$('nav ul li').click(function() {
// store the selection in a variable
var $this = $(this);
$this.toggleClass('button-pressed');
window.setTimeout(function() {
$this.toggleClass('button-pressed');
}, 500);
});
FIDDLE

Why now in pure CSS like:
LIVE DEMO
<span class="button" tabindex="1">
<span>Home</span>
</span>
span.button{
display:inline-block;
border-radius:9px;
background:#ddd;
padding:6px;
vertical-align:middle;
outline:none;
}
span.button > span{
background:#F06BAE;
color:#fff;
font-size:20px;
font-weight:bold;
display:inline-block;
padding:10px 25px;
border-radius: 6px;
border-bottom:4px solid #CB4589;
transition: border 0.3s;
}
span.button:focus > span{
border-top: 4px solid #FCA9D2;
border-bottom-width:0;
}

Add/Remove Class with jquery function

I have this code.
CSS
body {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
HTML
Show/hide
<br />
<div class="slidingDiv">
Fill this space with really interesting content.
hide
</div>
JS
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Someone tell me if its possible to add in this jquery function that if i click on it, at the same time to show/hide a new div, change a class to an tag and remove another class from another tag? How can i do it?
Thanks.

yes you can, take a look of the method addClass and also of the removeClass.

remove: jQuery('element').removeClass('class'); reference
add: jQuery('element').addClass('class'); reference
And you can use toggleClass to switch.
toggle: jQuery('element').toggleClass('class otherClass'); reference

Add class:
$('selector').addClass('className');
Remove class:
$('selector').removeClass('className');

yes of course you can add or remove classes
<script type="text/javascript">
$("#ButtonId").click(function () {
$('#itemid').removeClass('classname');
$('#itemid').addClass('classname');
});
</script>