Develop Reference

How can I get the value in % relative div

i write function which output top and left all div within div id=container
var main = $('#container'),
res = $('#result'),
bw = parseInt(main.css('border-left-width'), 10),
mT = main.offset().top + bw,
mL = main.offset().left + bw;
$('#btn1').on('click', function () {
var allCoords = $('div', main).map(function () {
return getCoords(this);
}).get().join('<br>');
res.html(allCoords); });
function getCoords(el) {
var $that = $(el),
pos = $that.offset(),
posTop = pos.top - mT,
posLeft = pos.left - mL;
var pos = el.id + ' top: ' + posTop + 'px; left: ' + posLeft + 'px;';
return pos;}
How can I get the value(left and top) in % relative div id container
please help me.Thank

Use math formula 100*yoursreensize/yourelementdivorsomething, like this:
var width = $(window).width();
var left = $('#me').position().left;
var percent = parseInt(100*left/width);
alert(percent);
#me{
position:relative;
left:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="me">Me</div>

The method (reSize) not return vaule js

My script is
function test ()
{
this.reSize = function(iWidth, iHeight)
{
var iSize = new Array();
var self = this;
if (iWidth > 600 || iHeight > 600)
{
iWidth = Math.ceil(iWidth / 2);
iHeight = Math.ceil(iHeight / 2);
console.log(iWidth + ' resize ' + iHeight);
self.reSize((iWidth / 2), (iHeight / 2));
}
else
{
iSize = {w:Math.ceil(iWidth), h:Math.ceil(iHeight)};
console.log(iSize.w + ' tumbs ' + iSize.h);
return iSize;
}
}// end reSize
this.createDivImage = function()
{
var self = this;
var iSizeTumbs = {};
$('img.img-chat').unbind('click').click(function() {
var src = $(this).attr('src');
var sHtmlDiv = '';
sHtmlDiv += '<div class="dialogs-img">';
sHtmlDiv += '<div class="dialogs-img-close">x</div>';
sHtmlDiv += '<div class="body-img">';
sHtmlDiv += '<img src="' + src + '" class="body-img-zoom">';
sHtmlDiv += '</div>';
sHtmlDiv += '</div>';
$('<img/>').attr('src', src).load(function()
{
iSize = {w: this.width, h: this.height};
iSizeTumbs = self.reSize(iSize.w, iSize.h);
console.log(iSizeTumbs);
});
});
}
}
var oTest = new test();
oTest.createDivImage();
http://jsfiddle.net/e4Hx5/5/
firebug:
800 resize 600 /e4Hx5/5/show/ (wiersz 31)
400 tumbs 300 /e4Hx5/5/show/ (wiersz 37)
undefined /e4Hx5/5/show/ (wiersz 60)

Your problem is that one of the execution paths (the first case of your if) inside the reSize method returns nothing..
You need to return something from that path as well.
So you need to return self.reSize((iWidth / 2), (iHeight / 2));
Here is your code updated: http://jsfiddle.net/gaby/e4Hx5/6/

You need to return a value, not just make a recursive call;
if (iWidth > 600 || iHeight > 600) {
iWidth = Math.ceil(iWidth / 2);
iHeight = Math.ceil(iHeight / 2);
console.log(iWidth + ' resize ' + iHeight);
return self.reSize((iWidth / 2), (iHeight / 2));
}
Also, in your code, you divide iWidth and iHeight twice, are you sure it's correct behavior?

Logic behind creating a custom calendar in jquery and javascript

I am trying to wrap my head around the logic behind a calendar. At the moment, for testing purpose, I have displayed days with a counter (1-31), but 1 starts in the top left corner of the calendar. My question is, what do I need to do to calculate the current months days and display the month's days accordingly.
I have included some of my code.
this.RenderCalendar = function () {
var date = new Date();
date = new Date(date.getYear(), date.getMonth(), 1);
month = date.getMonth();
var calendarHeader = $("<div class=\"calHeader\"></div>");
var monthLabel = $("<label id=\"calMonth\">" + FRAMEWORK.GetMonthString(month) + "</label>");
var yearLabel = $("<label id=\"calYear\">" + date.getYear() + "</label>");
var nextMonth = $(">>");
var prevMonth = $("<<");
nextMonth.click(function () {
var oldTable = $(".calendarTableContainer table").first();
var newTable = FRAMEWORK.RenderCalendarTableMarkup(month + 1);
$(".calendarTableContainer").append(newTable);
$(".calendarTableContainer table").each(function () {
$(this).css("width", $(this).width() + "px");
});
$(".calendarTableContainer").css("width", ($(".calendarTableContainer table").outerWidth() * 2) + 25 + "px");
$(".calendarContainer").animate({
scrollLeft: $("div.calendarContainer").scrollLeft() + ($("div.calendarContainer table").next().width())
}, 500, function () {
$(".calendarTableContainer").css("width", "100%");
oldTable.remove();
$(".calendarTableContainer table").css("width", "100%");
});
var currentMonthIndex = $.inArray($("#calMonth").text(), months);
$("#calMonth").text(months[currentMonthIndex + 1]);
});
prevMonth.click(function () {
var oldTable = $(".calendarTableContainer table").first();
var newTable = FRAMEWORK.RenderCalendarTableMarkup(month - 1);
$(".calendarTableContainer").prepend(newTable);
$(".calendarTableContainer table").each(function () {
$(this).css("width", $(this).width() + "px");
});
$(".calendarTableContainer").css("width", ($(".calendarTableContainer table").outerWidth() * 2) + 25 + "px");
$(".calendarContainer").scrollLeft(oldTable.outerWidth());
$(".calendarContainer").animate({
scrollLeft: $("div.calendarContainer").scrollLeft() - ($("div.calendarContainer table").next().width())
}, 500, function () {
$(".calendarTableContainer").css("width", "100%");
oldTable.remove();
$(".calendarTableContainer table").css("width", "100%");
});
var currentMonthIndex = $.inArray($("#calMonth").text(), months);
$("#calMonth").text(months[currentMonthIndex - 1]);
});
calendarHeader.append(nextMonth);
calendarHeader.append(prevMonth);
calendarHeader.append(monthLabel);
calendarHeader.append(yearLabel);
$("#detailsContainer").append(calendarHeader);
var calendarContainer = $("<div class=\"calendarContainer\"></div>");
var calendarTableContainer = $("<div class=\"calendarTableContainer\"></div>");
calendarContainer.append(calendarTableContainer);
$("#detailsContainer").append(calendarContainer);
$(".calendarTableContainer").append(FRAMEWORK.RenderCalendarTableMarkup());
/*var containerHeight = $("#detailsContainer").height();
calendarContainer.css("height", containerHeight);
var calendarHeight = calendarContainer.outerHeight();
var calHeaderHeight = calendarHeader.outerHeight();
var calDayOfWeekHeight = $("#trCalDayOfWeekHeader").outerHeight();
var remainingContainerHeight = calendarHeight - calHeaderHeight - calDayOfWeekHeight;
$(".calendarContainer tr.trCalWeek").each(function () {
$(this).css("height", remainingContainerHeight / weekCount);
});*/
};
this.RenderCalendarTableMarkup = function (newMonth) {
var calendarTable = $("<table id=\"tabCalendar\" class=\"tabCalendarContainer\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\"></table>");
var calendarDayOfWeekHeader = $("<tr id=\"trCalDayOfWeekHeader\" class=\"trCalDayOfWeek\"></tr>");
for (var day = 0; day < days.length; day++) {
var dayOfWeek = $("<td id=\"tdDayName-" + days[day] + "\">" + days[day] + "</td>");
calendarDayOfWeekHeader.append(dayOfWeek);
};
calendarDayOfWeekHeader.find("td").each(function () {
$(this).css("width", 100 / 7 + "%");
});
calendarDayOfWeekHeader.find("td:last").css("border-right", "none");
calendarTable.append(calendarDayOfWeekHeader);
weekCount = FRAMEWORK.CountWeeksOfMonth(new Date().getDate(), month, new Date().getYear());
var dayCount = 1;
for (var week = 1; week <= weekCount; week++) {
var calendarWeek = $("<tr id=\"trWeek-" + week + "\" class=\"trCalWeek\"></tr>");
for (var day = 0; day < 7; day++) {
var calendarDay = $("<td id=\"tdDay-" + dayCount + "\"><label>" + dayCount + "</label></td>");
calendarWeek.append(calendarDay);
if (dayCount <= 30) {
dayCount++;
}
else { dayCount = 1; }
};
calendarWeek.find("td:last").css("border-right", "none");
calendarTable.append(calendarWeek);
};
return calendarTable;
};
RenderCalendar() gets called on dom ready. Within RenderCalendar, I have next- and previous month buttons which will navigate accordingly with RenderCalendarTableMarkup(), calculate the days and display them accordingly.
Any help please?

why do all this calculating by yourself anyway. Check out http://momentjs.com/

simplifying the Code

The code that I have is getting a little long, I think there is a way to simplify it, take a look on it:
var slidernav = document.getElementsByTagName('li');
slidernavinital = 20;
slidernavadd = 30;
slidernav[0].style.top = slidernavinital + slidernavadd*0 + 'px';
slidernav[1].style.top = slidernavinital + slidernavadd*1 + 'px';
slidernav[2].style.top = slidernavinital + slidernavadd*2 + 'px';
slidernav[3].style.top = slidernavinital + slidernavadd*3 + 'px';
slidernav[4].style.top = slidernavinital + slidernavadd*4 + 'px';
slidernav[5].style.top = slidernavinital + slidernavadd*5 + 'px';
slidernav[6].style.top = slidernavinital + slidernavadd*6 + 'px';
slidernav[7].style.top = slidernavinital + slidernavadd*7 + 'px';
slidernav[8].style.top = slidernavinital + slidernavadd*8 + 'px';
slidernav[9].style.top = slidernavinital + slidernavadd*9 + 'px';
slidernav[10].style.top = slidernavinital + slidernavadd*10 + 'px';
slidernav[11].style.top = slidernavinital + slidernavadd*11 + 'px';
Isn't possible to do Something like this:
document.getElementsByTagName('li')[x].style.top = 20 + 30*x + 'px';
Thanks a lot in advance!

Yes. Wrap it in a for loop.
for(var i = 0; i < sliderNav.length; i++) {
sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px";
}
I think you should pick up an Intro to Programming book, though, if you didn't know about loops (what's the point of a computer if it doesn't take care of the repetitive stuff for you?)
EDIT: By the way, the for loop is shorthand for the following while loop construct:
var i = 0;
while(i < sliderNav.length) {
sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px";
i++;
}
It just puts all of the "bookkeeping" on the first line of the loop so you can more easily predict how many times it will loop through. (A while loop just loops until the condition is met, and then stops, so if you forgot to include the i++; part, it will never stop.)

Use a loop to cycle though the elements.
var slidernav = document.getElementsByTagName('li');
slidernavinital = 20;
slidernavadd = 30;
for (var n = 0; n<slidernav.length; n++) {
    slidernav[n].style.top = slidernavinital + slidernavadd*n + 'px';
}

you can use a for
like this
var ln = slidernav.length;
for(var i = 1;i<=ln;i++)
{
slidernav[i].style.top = slidernavinital + slidernavadd*i + 'px';
}
it a very simple proggraming construction.

Slider refuses to center photos, forces left justified

This is a really great slider but it has just one annoying fault. If I have different widths of images, the ones that are too small for the default width, are left justified. I've tried every which way to do it with the html/css but it's somewhere in the js I think. I even loaded the js after the images load and it still put it left justified even though they were centered for that split second before the js loaded. What seems to happen is, the js takes the smaller width image and makes it the full default width and adds whitespace to the right of it, essentially making it a full width image. I am just curious if this is customizable so that the photo is centered and whitespace is added on either side.
Any thoughts are appreciated, thanks for taking a look.
(function ($) {
var params = new Array;
var order = new Array;
var images = new Array;
var links = new Array;
var linksTarget = new Array;
var titles = new Array;
var interval = new Array;
var imagePos = new Array;
var appInterval = new Array;
var squarePos = new Array;
var reverse = new Array;
$.fn.coinslider = $.fn.CoinSlider = function (options) {
init = function (el) {
order[el.id] = new Array();
images[el.id] = new Array();
links[el.id] = new Array();
linksTarget[el.id] = new Array();
titles[el.id] = new Array();
imagePos[el.id] = 0;
squarePos[el.id] = 0;
reverse[el.id] = 1;
params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
$.each($('#' + el.id + ' img'), function (i, item) {
images[el.id][i] = $(item).attr('src');
links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : '';
$(item).hide();
$(item).next().hide();
});
$(el).css({
'background-image': 'url(' + images[el.id][0] + ')',
'width': params[el.id].width,
'height': params[el.id].height,
'position': 'relative',
'background-position': 'top left'
}).wrap("<div class='coin-slider' id='coin-slider-" + el.id + "' />");
$('#' + el.id).append("<div class='cs-title' id='cs-title-" + el.id + "' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
$.setFields(el);
if (params[el.id].navigation) $.setNavigation(el);
$.transition(el, 0);
$.transitionCall(el);
}
$.setFields = function (el) {
tWidth = sWidth = parseInt(params[el.id].width / params[el.id].spw);
tHeight = sHeight = parseInt(params[el.id].height / params[el.id].sph);
counter = sLeft = sTop = 0;
tgapx = gapx = params[el.id].width - params[el.id].spw * sWidth;
tgapy = gapy = params[el.id].height - params[el.id].sph * sHeight;
for (i = 1; i <= params[el.id].sph; i++) {
gapx = tgapx;
if (gapy > 0) {
gapy--;
sHeight = tHeight + 1;
} else {
sHeight = tHeight;
}
for (j = 1; j <= params[el.id].spw; j++) {
if (gapx > 0) {
gapx--;
sWidth = tWidth + 1;
} else {
sWidth = tWidth;
}
order[el.id][counter] = i + '' + j;
counter++;
if (params[el.id].links) $('#' + el.id).append("<a href='" + links[el.id][0] + "' class='cs-" + el.id + "' id='cs-" + el.id + i + j + "' style='width:" + sWidth + "px; height:" + sHeight + "px; float: left; position: absolute;'></a>");
else $('#' + el.id).append("<div class='cs-" + el.id + "' id='cs-" + el.id + i + j + "' style='width:" + sWidth + "px; height:" + sHeight + "px; float: left; position: absolute;'></div>");
$("#cs-" + el.id + i + j).css({
'background-position': -sLeft + 'px ' + (-sTop + 'px'),
'left': sLeft,
'top': sTop
});
sLeft += sWidth;
}
sTop += sHeight;
sLeft = 0;
}
$('.cs-' + el.id).mouseover(function () {
$('#cs-navigation-' + el.id).show();
});
$('.cs-' + el.id).mouseout(function () {
$('#cs-navigation-' + el.id).hide();
});
$('#cs-title-' + el.id).mouseover(function () {
$('#cs-navigation-' + el.id).show();
});
$('#cs-title-' + el.id).mouseout(function () {
$('#cs-navigation-' + el.id).hide();
});
if (params[el.id].hoverPause) {
$('.cs-' + el.id).mouseover(function () {
params[el.id].pause = true;
});
$('.cs-' + el.id).mouseout(function () {
params[el.id].pause = false;
});
$('#cs-title-' + el.id).mouseover(function () {
params[el.id].pause = true;
});
$('#cs-title-' + el.id).mouseout(function () {
params[el.id].pause = false;
});
}
};
$.transitionCall = function (el) {
clearInterval(interval[el.id]);
delay = params[el.id].delay + params[el.id].spw * params[el.id].sph * params[el.id].sDelay;
interval[el.id] = setInterval(function () {
$.transition(el)
}, delay);
}
$.transition = function (el, direction) {
if (params[el.id].pause == true) return;
$.effect(el);
squarePos[el.id] = 0;
appInterval[el.id] = setInterval(function () {
$.appereance(el, order[el.id][squarePos[el.id]])
}, params[el.id].sDelay);
$(el).css({
'background-image': 'url(' + images[el.id][imagePos[el.id]] + ')'
});
if (typeof (direction) == "undefined") imagePos[el.id]++;
else if (direction == 'prev') imagePos[el.id]--;
else imagePos[el.id] = direction;
if (imagePos[el.id] == images[el.id].length) {
imagePos[el.id] = 0;
}
if (imagePos[el.id] == -1) {
imagePos[el.id] = images[el.id].length - 1;
}
$('.cs-button-' + el.id).removeClass('cs-active');
$('#cs-button-' + el.id + "-" + (imagePos[el.id] + 1)).addClass('cs-active');
if (titles[el.id][imagePos[el.id]]) {
$('#cs-title-' + el.id).css({
'opacity': 0
}).animate({
'opacity': params[el.id].opacity
}, params[el.id].titleSpeed);
$('#cs-title-' + el.id).html(titles[el.id][imagePos[el.id]]);
} else {
$('#cs-title-' + el.id).css('opacity', 0);
}
};
$.appereance = function (el, sid) {
$('.cs-' + el.id).attr('href', links[el.id][imagePos[el.id]]).attr('target', linksTarget[el.id][imagePos[el.id]]);
if (squarePos[el.id] == params[el.id].spw * params[el.id].sph) {
clearInterval(appInterval[el.id]);
return;
}
$('#cs-' + el.id + sid).css({
opacity: 0,
'background-image': 'url(' + images[el.id][imagePos[el.id]] + ')',
'background-repeat': 'no-repeat',
'background-color': '#fff',
});
$('#cs-' + el.id + sid).animate({
opacity: 1
}, 300);
squarePos[el.id]++;
};
$.setNavigation = function (el) {
$(el).append("<div id='cs-navigation-" + el.id + "'></div>");
$('#cs-navigation-' + el.id).hide();
$('#cs-navigation-' + el.id).append("<a href='#' id='cs-prev-" + el.id + "' class='cs-prev'></a>");
$('#cs-navigation-' + el.id).append("<a href='#' id='cs-next-" + el.id + "' class='cs-next'></a>");
$('#cs-prev-' + el.id).css({
'position': 'absolute',
'top': 0,
'left': 0,
'z-index': 1001,
'line-height': '30px',
'opacity': params[el.id].opacity
}).click(function (e) {
e.preventDefault();
$.transition(el, 'prev');
$.transitionCall(el);
}).mouseover(function () {
$('#cs-navigation-' + el.id).show()
});
$('#cs-next-' + el.id).css({
'position': 'absolute',
'top': 0,
'right': 0,
'z-index': 1001,
'line-height': '30px',
'opacity': params[el.id].opacity
}).click(function (e) {
e.preventDefault();
$.transition(el);
$.transitionCall(el);
}).mouseover(function () {
$('#cs-navigation-' + el.id).show()
});
$("<div id='cs-buttons-" + el.id + "' class='cs-buttons'></div>").appendTo($('#coin-slider-' + el.id));
for (k = 1; k < images[el.id].length + 1; k++) {
$('#cs-buttons-' + el.id).append("<a href='#' class='cs-button-" + el.id + "' id='cs-button-" + el.id + "-" + k + "'>" + k + "</a>");
}
$.each($('.cs-button-' + el.id), function (i, item) {
$(item).click(function (e) {
$('.cs-button-' + el.id).removeClass('cs-active');
$(this).addClass('cs-active');
e.preventDefault();
$.transition(el, i);
$.transitionCall(el);
})
});
$('#cs-navigation-' + el.id + ' a').mouseout(function () {
$('#cs-navigation-' + el.id).hide();
params[el.id].pause = false;
});
$("#cs-buttons-" + el.id) /*.css({'right':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'})*/
;
}
$.effect = function (el) {
effA = ['random', 'swirl', 'rain', 'straight'];
if (params[el.id].effect == '') eff = effA[Math.floor(Math.random() * (effA.length))];
else eff = params[el.id].effect;
order[el.id] = new Array();
if (eff == 'random') {
counter = 0;
for (i = 1; i <= params[el.id].sph; i++) {
for (j = 1; j <= params[el.id].spw; j++) {
order[el.id][counter] = i + '' + j;
counter++;
}
}
$.random(order[el.id]);
}
if (eff == 'rain') {
$.rain(el);
}
if (eff == 'swirl') $.swirl(el);
if (eff == 'straight') $.straight(el);
reverse[el.id] *= -1;
if (reverse[el.id] > 0) {
order[el.id].reverse();
}
}
$.random = function (arr) {
var i = arr.length;
if (i == 0) return false;
while (--i) {
var j = Math.floor(Math.random() * (i + 1));
var tempi = arr[i];
var tempj = arr[j];
arr[i] = tempj;
arr[j] = tempi;
}
}
$.swirl = function (el) {
var n = params[el.id].sph;
var m = params[el.id].spw;
var x = 1;
var y = 1;
var going = 0;
var num = 0;
var c = 0;
var dowhile = true;
while (dowhile) {
num = (going == 0 || going == 2) ? m : n;
for (i = 1; i <= num; i++) {
order[el.id][c] = x + '' + y;
c++;
if (i != num) {
switch (going) {
case 0:
y++;
break;
case 1:
x++;
break;
case 2:
y--;
break;
case 3:
x--;
break;
}
}
}
going = (going + 1) % 4;
switch (going) {
case 0:
m--;
y++;
break;
case 1:
n--;
x++;
break;
case 2:
m--;
y--;
break;
case 3:
n--;
x--;
break;
}
check = $.max(n, m) - $.min(n, m);
if (m <= check && n <= check) dowhile = false;
}
}
$.rain = function (el) {
var n = params[el.id].sph;
var m = params[el.id].spw;
var c = 0;
var to = to2 = from = 1;
var dowhile = true;
while (dowhile) {
for (i = from; i <= to; i++) {
order[el.id][c] = i + '' + parseInt(to2 - i + 1);
c++;
}
to2++;
if (to < n && to2 < m && n < m) {
to++;
}
if (to < n && n >= m) {
to++;
}
if (to2 > m) {
from++;
}
if (from > to) dowhile = false;
}
}
$.straight = function (el) {
counter = 0;
for (i = 1; i <= params[el.id].sph; i++) {
for (j = 1; j <= params[el.id].spw; j++) {
order[el.id][counter] = i + '' + j;
counter++;
}
}
}
$.min = function (n, m) {
if (n > m) return m;
else return n;
}
$.max = function (n, m) {
if (n < m) return m;
else return n;
}
this.each(function () {
init(this);
});
};
$.fn.coinslider.defaults = {
width: 828,
height: 200,
spw: 1,
sph: 1,
delay: 4000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links: false,
hoverPause: true
};
})(jQuery);

It seems to be taking the image source url and putting it into the background of the slider. I would first try changing
'background-position': 'top left'
to:
'background-position': 'center center'
... actually, the entire script seems geared towards tiling the images. I'd imagine that's the technique it uses to generate some of its cool effects. This line is where it's centering the current image within the tile defined by sph and spw.
'background-position': -sLeft + 'px ' + (-sTop + 'px'),
and if you use spw=1 and sph=1 you can center it by changing that to a fixed 'center center'.
I don't really care for this script in terms of general purpose, but it seems to have worked well for the person who wrote it.

this is my hacky solution
<script>
$(window).load(function() {
$('#coin-slider').coinslider({
opacity: 0.6,
effect: "rain",
hoverPause: true,
dely: 3000
});
// center coin slider
setTimeout(function(){
centerCS();
},500);
});
// center coin slider image
function centerCS(){
var w=$(".container").width(); // container of coin slider
var csw=$("#coin-slider").width();
var lpad=(w-csw)/2;
$("#coin-slider").css("margin-left",lpad+"px");
}
</script>