We Keep Coding

Adding an image when clicking on a row (<li> tag)

To solve this problem, i had the idea to create a css class to add the image and when i click on "li", i add the class to it. But for some reason, it just doesnt work. The row appear properly in the ui-grid, but when i click on it, the image doesnt appear. I already tested the onclick() event with an alert() and the function is called.
Since i begin in these languages, i just feel like im assuming things (for exemple, does $(this) really refer to the "li" tag?). If anyone have an idea, it would be appreciated. Here is my code :
CSS
checked
{
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
JS
function isChecked()
{
alert("test");
$(this).addClass("checked");
}
HTML
<li class="addedParts" onclick="isChecked()">
<a href="javascript:addParts();">
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>

this will refer to window in your example as context is not passed.
Try this:
function isChecked(elem) {
$(elem).addClass("checked");
}
.checked {
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="addedParts" onclick="isChecked(this)">
<a>
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>

how to hide images in a specific list and make them visible in a other list

I have a question: is it possible to hide some images and make the same visible in another list? Here is the code:
<section>
<ul class="portfolio_filters">
<li>show all</li>
<li>New Logos</li>
<!--lightbox2-->
<li>Black & White</li>
<!--lightbox3-->
<li>Industrial</li>
<!--lightbox3-->
<li>Mix</li>
<!--lightbox4-->
</ul>
</section>
i want some images not to show in the "SHOW ALL" list, but if I click (for example) on the black and white list the same image needs to be visible.
thanks for the answers here is for example a linked image
<div class="new col-sm-4 col-md-4">
<div class="portfolio_item"> <a href="images/portfolio/stimson.jpg" class="lightbox"> <img src="images/portfolio/stimson.jpg" alt="Wedding photograph">
<div class="overlay">
<div class="desc">
<h4>Stimson</h4>
<span class="cross"></span> </div>
</div>
</a> </div>
</div>
how to make this visible only in the " NEW LOGOS " list and not in the "SHOW All" list?

You could try something like this:
$("img").hide();
$("li a").click(function(event){
event.preventDefault();
$("img").hide();
filter = $(this).data("filter");
if(filter=="*")
$("img:not(.black)").show();
else
$(filter).show();
});
Demo JsFiddle

Add a class like .hidefromall to the images you want to hide, and use a :not() selector:
<li>show all</li>

It's kinda hard with not all of the code. I assume that all the lists are build the same, and have the same HTML structure.
Most simple is to add a class to the specific list in which you want to hide the 'Show all', lets call that class dontShowAll. In your CSS you can then use:
.portfolio_filters.dontShowAll li:first-child { /*note that the classes a written without a space!! */
display: none;
}
If you aren't able to change the HTML structure you can use child selectors:
section:first-child ul li:first-child { /* only from the first list */
section:nth-child(odd) ul li:first-child { /* from all the odd lists */
section:nth-child(3n) ul li:first-child { /* every third */
section:nth-child(4) ul li:first-child { /* only the fourth */
section:nth-child(n + 5) ul li:first-child { /* the fifth and all that follow */

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}

JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.

Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div

The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});

You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});

Alternating bullet notes styled with images

I'm currently trying to alternate the colors of my bullet notes using some images.
However, I encountered several problems:
If I press backspace to delete one of the bullets, there's a blue line from contenteditable that appears - try backspacing everything in the fiddle link I gave and you'll see what I mean. There's probably an easy fix for this by making the border 0px, but I'm not sure of the correct syntax
The main problem is that I want it written in a way so that when the user presses enter, the next color bullet, or image in this case, will show up. I don't want it to show up all at once, but I'm not sure how to implement it. I'm assuming either CSS classes or Javascript is involved - I'm kind of new to these languages.
This is a snippet from the whole code that needs fixing:
<body>
<div contenteditable>
<div id = "notes"
<ul>
<li style = "list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
<li style = "list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
<li style = "list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
</ul>
<style>
#notes {
position: absolute;
</style>
</div>
</div
</body
And here's the fiddle.js link: http://jsfiddle.net/95Wvv/
It would be nice if you gave a solution in fiddle as well. Thank you!

edited to fit OP requirements
Move your contenteditable on <ul>
Add outline: 0 to your <li>
HTML :
<div>
<div id="notes">
<ul contenteditable>
<li style="list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
<li style="list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
<li style="list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
</ul>
</div>
</div>
CSS :
#notes {
position: absolute;
}
[contenteditable] {
outline: none;
}
Updated JSFiddle
EDIT
To alternate colors, use this code :
HTML
<div>
<div id="notes">
<ul contenteditable>
<li>Click here to edit</li>
<li>Click here </li>
<li>Click here </li>
</ul>
</div>
</div>
CSS
#notes {
position: absolute;
}
[contenteditable] {
outline: none;
}
li {
list-style-image: url('http://i61.tinypic.com/2nb9jxs.png');
}
li:nth-child(3n+1) {
list-style-image: url('http://i61.tinypic.com/2m5xb1f.png');
}
li:nth-child(3n+2) {
list-style-image: url('http://i61.tinypic.com/2qb5342.png');
}
Another JSFiddle !

To fix part one, add outline: 0; to the Element that has contenteditable on it (http://jsfiddle.net/95Wvv/)

Bootstrap Pagination between navigation elements

I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.
The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .
The plugins that I've tried have not been useful to me .
My code looks like this:
<div class="row">
<div class="col-md-12 column">
<ul class="nav nav-pills center-pills text-center">
<li class="active">
<a href="#">
<span class="text-center badge pull-right span-list">1</span>
1 Mars
</a>
</li>
<li class="">2 Mars</li>
<li class="">3 Mars</li>
<li class="">4 Mars</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
</ul>
</div>
</div>
The code fiddle .
Your suggestions will be very welcome .

Are you having a problem with styling? If so...
I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.
.row{overflow:hidden;height:42px;}
I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.
HTML
<li class="next">Next</li>
<li class="prev">Previous</li>
CSS
li.next{float:right;}
li.prev{float:left;}
I believe this gives the desired result... please let me know if I've missed your intention.
Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.
Example: http://jsfiddle.net/nickg1/5ELfQ/2/
Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/

I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.

What you can do is .prepend() a left li and .append() a right li:
$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});

Although there has little browser compatibility and styling issues in this solution. But I hope this will give you an idea to start.
My CSS:
.nav.nav-pills {
width:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position: relative;
padding-right: 38px;
display: inline-block;
}
.nav-pills > li {
display: inline-block !important;
float: none !important;
}
.nav-pills > li.last {
position: absolute;
right: 0;
}
As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.
<div class="col-md-12 column text-center">
Apply jQuery for previous/next buttons and resizing issues.
$(document).ready(function () {
$('.nav').prepend('<li>«</li>');
$('.nav').append('<li class="last">»</li>');
var ulWidth = $('.nav').width();
var screenWidth = document.body.clientWidth;
if (screenWidth < ulWidth ){
$('.nav').css('width', '100%');
}
$(window).resize(function(){
screenWidth = document.body.clientWidth;
screenWidth < ulWidth == true ?
$('.nav').css('width', '100%') :
$('.nav').css('width', 'auto');
});
});