Develop Reference

jQuery - element crossing another element

I have a fixed div on the page which contains a logo and as the user scrolls and this logo passes over other divs I wnat to the change the colour of the logo.
I have this working over a single div but need to it work across multiple so any help appreciated.
The WIP site can be seen here... dd.mintfresh.co.uk - if you scroll down you'll (hopefully) see the logo change from black to white as it crosses an illustrated egg. I need the same to happen when it crosses other divs further down the page.
The script so far...
jQuery(window).scroll(function(){
var fixed = jQuery("logo");
var fixed_position = jQuery("#logo").offset().top;
var fixed_height = jQuery("#logo").height();
var toCross_position = jQuery("#egg").offset().top;
var toCross_height = jQuery("#egg").height();
if (fixed_position + fixed_height < toCross_position) {
jQuery("#logo img").css({filter : "invert(100%)"});
} else if (fixed_position > toCross_position + toCross_height) {
jQuery("#logo img").css({filter : "invert(100%)"});
} else {
jQuery("#logo img").css({filter : "invert(0%)"});
}
}
);
Any help appreciated. Thanks!

you need to fire a div scroll event. you can assign
$("div1").scroll(function(){
//change the color of the div1
}
});
$("div2").scroll(function(){
//change the color of the div2
}
});
or you can assign a class to divs which you want to change the color
$(".div").scroll(function(){
//change the color of the div which you are scrolling now
}
});

You can use like this :-
$(window).scroll(function() {
var that = $(this);
$('.section').each(function() {
var s = $(this);
if (that.scrollTop() >= s.position().top) {
if(s.hasClass('active')) {
$('.logo').addClass('invert');
} else {
$('.logo').removeClass('invert');
}
}
});
});
body {
padding: 0;
margin: 0;
}
div {
background: #f00;
height: 400px;
}
.logo {
position: fixed;
top: 0;
left: 0;
width: 100px;
}
.logo.invert {
filter: invert(100%);
}
div:nth-child(even) {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://dd.mintfresh.co.uk/wp-content/uploads/2018/06/DD_logo.svg" class="logo" />
<div id="page1" class="section"></div>
<div id="page2" class="section active"></div>
<div id="page3" class="section"></div>
<div id="page4" class="section active"></div>
<div id="page5" class="section"></div>
As your site code you can do like this :
$(window).scroll(function() {
var that = $(this);
$('#content > section').each(function() {
var s = $(this);
if (that.scrollTop() >= s.position().top) {
if(s.hasClass('black')) {
$('#logo img').css({filter: 'invert(0%)'});
} else {
$('#logo img').css({filter: 'invert(100%)'});
}
}
});
});

Create multiple divs with different content

The problem is when duplicate multiple div but with different data-type, it still running a same content, i want correct all div will have the different content following the different data-type.
Is there a way to do this?
$(function() {
// document
'use strict';
var cp = $('div.box');
// unique id
var idCp = 0;
for (var i = 0; i < cp.length; i++) {
idCp++;
cp[i].id = "cp_" + idCp;
}
// diffrent type
if (cp.data('type') == "c1") {
cp.addClass('red').css({
"background: 'red',
"padding": "20px",
"display": "table"
});
$('.box').append('<div class="cp-title">' + 'c1-title' + '</div>');
} else if (cp.data('type') == "c2") {
cp.addClass('green').css({
"background": 'green',
"padding": "20px",
"display": "table"
});
$('.box').append('<div class="cp-title">' + 'c2-title' + '</div>');
} else {
return false;
}
}); //end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<! it should be like this>
<div class="box" data-type="c1" id="cp_1">
<div class="cp-title">c1 title</div>
</div>
<div class="box" data-type="c2" id="cp_2">
<div class="cp-title">c2 title</div>
</div>
<! currently wrong output>
<div class="box" data-type="c1" id="cp_1">
<div class="cp-title">c1 title</div>
</div>
<div class="box" data-type="c2" id="cp_2">
<div class="cp-title">c1 title</div>
</div>

The problem in your code is that you are not looping inside the div's. You have to use the .each() function while looping inside all the elements
$(function() {
var cp = $('div.box');
cp.each(function() {
var _cp = $(this);
var text = _cp.attr("data-type") + "-title"; //Generate the text dynamically
var cls = _cp.attr("data-class"); //Get the class dynamically
_cp.addClass(cls).append('<div class="cp-title">' + text + '</div>'); //Add the class and append the text to the parent div
});
}); //end
.box{
padding: 20px;
display: table;
}
.red{
background: red;
}
.green{
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-type="c1" data-class="red"></div>
<div class="box" data-type="c2" data-class="green"></div>

Probably you're searching for something like this.
// document.ready
$(function() {
'use strict';
$('.box').each(function(i,elem){
var ref = +$(elem).attr("data-type").match(/\d/)[0], addClass = 'default';
switch(true) {
case ref === 1:
addClass = 'red';
break;
case ref === 2:
addClass = 'green';
break;
}
$(this)
.addClass(addClass)
.append('<div class="cp-title">c'+ref+' title</div>');
});
}); //end
.red{
background: red;
padding: 20px;
display: table;
}.green{
background: green;
padding: 20px;
display: table;
}.default {
background: #2d2d2d;
color: #f6f6f6;
padding: 20px;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-type="c1"></div><div class="box" data-type="c2"></div>

Generic Javascript Code

I wrote a code for a hover functionality. Now, I am asking myself how to make this code generic in order to show different divs when hovering over a different link. The JavaScript code is as follows:
<script>
$(function() {
var moveLeft = 20;
var moveDown = 10;
$('a#trigger').hover(function(e) {
$('div#purpose').show();
}, function() {
$('div#purpose').hide();
});
$('a#trigger').mousemove(function(e) {
$("div#purpose").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
</script>
The div I call is as follows:
<!-- Purpose: Hover Popup -->
<div class= id="purpose">
<h3>Purpose</h3>
<p>
Test
</p>
</div>
Furthermore, I added some CSS style
<!-- Style for Hovering -->
<style type="text/css">
div#purpose {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
</style>
Could anybody tell me how to make this code generic in order to add further divs which are called from another link?

Create a javascript function and pass in the variables (e.g. link and div)
function foo($link, $div){
var moveLeft = 20;
var moveDown = 10;
$link.hover(function(e) {
$div.show();
}, function() {
$div.hide();
});
$link.mousemove(function(e) {
$div.css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
}
For your existing behaviour call the following for example:
foo($('a#trigger'), $("div#purpose"));
This will actually be slightly better for performance as you'll be using the same jQuery reference each time. However depending on how you're actually planning on using this, having a seperate function call each time might not be the best way.
For example if you wish to use this on dynamic data it wouldn't be sensible to make static calls to a function each time.

Make use of custom data-* attributes in your HTML, and use classes to target a generalized group of elements, ex:
<a class="trigger" data-target="purpose" />
And the JS
$(".trigger").hover(function(e) {
var elemToShow = $(this).data("target");
$("#" + elemToShow).show();
}, function() {
var elemToShow = $(this).data("target");
$("#" + elemToShow).show();
}).mousemove(function(e) {
var elemToShow = $(this).data("target");
$("#" + elemToShow).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});

You could build your trigger elements in a way that they hold the information about what element to show:
<a class="trigger" data-show="purpose">...</a>
Then you initialize them all at once like this:
$(function() {
$('.trigger').hover(function() {
var elementId = $(this).data('show');
$('#'+elementId).show();
}, function() {
var elementId = $(this).data('show');
$('#'+elementId).hide();
);
});

You don't need any JavaScript or jQuery at all for this--you can simply use CSS with the :hover pseudo-class.
.menu {
background-color: #eee;
}
.menuItem {
display: inline-block;
}
.menu .trigger + .purpose {
display: none;
position: absolute;
background-color: #eee;
}
.menu .trigger:hover + .purpose, .menu .trigger + .purpose:hover {
display: block;
}
<div class="menu">
<div class="menuItem">
Trigger 1
<div class="purpose">
<h3>Purpose 1</h3>
<p>
Test 1
</p>
</div>
</div>
<div class="menuItem">
Trigger 2
<div class="purpose">
<h3>Purpose 2</h3>
<p>
Test 2
</p>
</div>
</div>
<div class="menuItem">
Trigger 3
<div class="purpose">
<h3>Purpose 3</h3>
<p>
Test 3
</p>
</div>
</div>
<div class="menuItem">
Trigger 4
<div class="purpose">
<h3>Purpose 4</h3>
<p>
Test 4
</p>
</div>
</div>
</div>

Loop through CSS tables and count selected cells

I am trying to loop through all the css-table and display how many cells are selected in each one.
I am using a each method but it does not seem to work.
Thanks for any help.
My code is below and this is the fiddle
jquery:
$(function () {
$('.css-table-td').click(function () {
var theTable = $(this).closest('.css-table');
$(this).toggleClass("highligh-cell");
});
});
$("#csstableinfo").click( function() {
var sCount=0;
$(".css-table div").each(function (index) {
// sCount=theTable.find('.css-table-td.highligh-cell').length; this is not workikng
alert (sCount)
});
});
Html:
<div class="css-table">
<div class="css-table-tr">
<div class="css-table-td" id="1">b</div>
<div class="css-table-td" id="2">c</div>
<div class="css-table-td" id="3">e</div>
</div>
</div>
<br/>
<div class="css-table">
<div class="css-table-tr">
<div class="css-table-td" id="1">b</div>
<div class="css-table-td" id="2">c</div>
<div class="css-table-td" id="3">e</div>
</div>
</div>
<br/>
<div class="css-table">
<div class="css-table-tr">
<div class="css-table-td" id="1">b</div>
<div class="css-table-td" id="2">c</div>
<div class="css-table-td" id="3">e</div>
</div>
</div>
<br/>
<INPUT TYPE="submit" id="csstableinfo" VALUE="Count Selected">
css:
.css-table {
display: table;
background-color:#ccc;
}
.css-table-tr {
display: table-row;
height:30px;
}
.css-table-td {
display: table-cell;
border:1px solid #fff;
width: 30px;
text-align:center;
vertical-align:middle;
}
.highligh-cell {
background: #999;
}

$(".css-table .highligh-cell").length will give you the number of selected elements, no need to use each.
$("#csstableinfo").click(function () {
alert($(".css-table .highligh-cell").length);
});
jsfiddle DEMO
EDIT:
To get how many in each table are selected:
$("#csstableinfo").click(function () {
var msg = "";
$(".css-table").each(function(index) {
var sCount = $(this).find('.highligh-cell').length;
msg += "table_" + index + " = " + sCount + "\n";
});
alert(msg);
});
Updated jsfiddle

Are you even getting an alert set? if not, the problem is with the $(".css-table div") call. You shouldn't call it this way since every div you call already containing the css table class.
try using $(".css-table"), if it's not working, it's better working with id's.
P.S. you are using different classes for each row also, so it won't identify the rows.

You just have to increase the counter and make each for the class of selected i.e .highligh-cell:
$("#csstableinfo").click( function() {
var sCount=0;
$(".highligh-cell").each(function (index) {
// sCount=theTable.find('.css-table-td.highligh-cell').length;
sCount++;
});
alert (sCount)
});
Checkout DEMO

Jquery Paginate placing items on second page and no limit on the list so not actually paginating

See my JsFiddle http://jsfiddle.net/iamdanbarrett/frbh9/
So this is inline JS for the paginate.....
<script>
$(window).load(
function()
{
var o=$('#paginate').first(),
h=o.height(),
c=$('<div/>').css('width',o.width()).addClass('part'),
cc,i=1,item,
p=$('<div id="pagination"></div>').append($('<a/>').text('['+1+']').data({i:0}));
o.before(p);
do{
if(typeof cc=='undefined'){cc=c.clone().appendTo(o);}
item=o.children().not('.part').first().appendTo(cc.first());
if(cc.children().length>0 && cc.height()>=h)
{
p.append($('<a/>').data({i:i++}).text('['+(i)+']'));
cc=c.clone().appendTo(o).append(item);
}
}while($('#paginate').first().children().not('.part').length>0);
if($('.part',o).length<2){p.remove();return;}
$('.part',o).not(':eq(0)').hide();
$('a',p).click(function(){
var _this=$(this);
$('a',_this.parent()).removeClass('current');
_this.addClass('current');
$('#paginate>.part').hide().eq(_this.data('i')).show();
}).first().addClass('current');
return;
});
</script>
This is external for the list update...
$(document).ready(function() {
$newItemField = $('#newItem');
$addButton = $('#add');
$('ol').sortable();
$('li').append('<span class="delete">x</span');
$('ol').delegate('li','mouseover mouseout',function() {
$(this).toggleClass('hovered');
});
$('ol').delegate('li>.delete','mouseover mouseout',function() {
$(this).toggleClass('hovered');
});
$('ol').on('click','li>.delete',function(){
$(this).parent().remove();
});
$newItemField.keypress(function(e) {
if (e.which == 13) {
addItem();
}
});
$addButton.click(function() {
addItem();
});
});
function addItem() {
if ($newItemField.val() !== '') {
$newItem = $('<li/>');
$newItem.text($newItemField.val());
$deleteButton = $('<span/>').text('x').addClass('delete');
$newItem.append($deleteButton);
$newItem.css('background-color','#e4ffef');
$newItem.appendTo('ol');
$newItem.animate({backgroundColor:'#FFFFFF'},5000);
$newItemField.val('');
}
}
I am having where by I have a list for tasks to be updated via an input and places it into an OL which works great and it works great with paginate but placing the items onto th seond page....
any ideas?

it's because ol element is inside second element of paginate div.
See below(you can see once it renders).
<div id="paginate">
<div class="part" style="width: 960px;"></div>
<div class="part" style="width: 960px; display: none;">
<ol class="ui-sortable"></ol>
</div>
<div class="part" style="width: 960px; display: none;"></div>
</div>
so, placing below code will do the trick and work as expected.
$(".ui-sortable").appendTo("#paginate div:first-child");
Now it's working...
http://jsfiddle.net/iashu/Nty7M/