I have this javascript code, lib.js. It manages my every java popup in my site. How ever it is not set to be appear absolutely centered in page, I have tried several css codes for its div. But it did not work. I also tried the famous /2 code but it didnt work or I might have added it to wrong place.
Below is my lib.js:
var currentTime = new Date();
var topP = 0;
$(document, window).keypress(function(e){
if (e.keyCode == 27){
$(".yekbox").fadeOut();
$("#yekbox_overlay").hide();
}
});
$(document).ready(function() {
$(".showme").unbind().hover(
function(e) {
$(".tooltip").remove();
this.t = $(this).next(".description").html();
$(this).append( '<div class="tooltip">' + this.t + '</div>' );
},
function() {
//this.title = this.t;
$(".tooltip").remove();
}
).mousemove(
function(e) {
$(".tooltip").css({
"top" : e.pageY + 20,
"left" : e.pageX + 20
});
}
);
topP = $(this).scrollTop();
//$(".yekbox").css("top", $(window).height()-250 + "px");
//$(".yekbox").css("left", $(window).width()-(440*2) + "px");
$("#yekbox_overlay").css("height", $(window).height());
$(window, document).resize(function(){
topP = $(this).scrollTop();
$(".yekbox").css("marginTop", topP-250 + "px");
if ($(window).width() > 900 ) $(".yekbox").css("left", $(window).width()-(440*2) + "px");
$(".yekbox").css("marginLeft", "auto");
$(".yekbox").css("marginRight", "auto");
$("#yekbox_overlay").css("height", $(window).height());
});
$(window).scroll(function () {
topP = $(this).scrollTop();
$(".yekbox:visible").css("marginTop", topP-250 + "px");
$("#yekbox_overlay:visible").css("height", $(window).height());
});
$(window).bind("scroll",function () {
topP = $(this).scrollTop();
$(".yekbox:visible").css("marginTop", topP-250 + "px");
$("#yekbox_overlay:visible").css("height", $(window).height());
});
$("#yekbox_overlay").click(function(){
$(".yekbox").fadeOut();
$(this).hide();
return false;
});
The JS and HTML code above doesn't help in anything.
In general, if you want a block to be centered to the parent, it should have
A fixed width
margin: auto
If you want a block absolutely centered (position absolute or fixed)
$('#mypopup').css('left', ($(window).width() - $('#mypopup').width()) / 2)
Related
Im new in Javascript, Im sorry for the armature questions
i have a fadein code only for one class that works perfect, here is the code:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
I would like to add some more classes like, fadeinleft, fadeinright, etc.
like this:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
});
jQuery(document).ready(function($) {
var faidinbottom = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidinbottom').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidinbottom')) {
$(this).removeClass('faidinbottom');
}
});
}
faidinbottom();
$(window).on('scroll resize', faidinbottom);
});
jQuery(document).ready(function($) {
var faidintop = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidintop').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidintop')) {
$(this).removeClass('faidintop');
}
});
}
faidintop();
$(window).on('scroll resize', faidintop);
If you ask me why my code is with removeClass, not with addClass, it is becouse it is easer for me to manipulate whit my content, without changing the base css styles of my website. I just add some classes "faidintop, faidinbottom etc." to the style sheet, then to the class of a div, and the magic happens.
I will be very grateful if some one could help me whit this, or at least give me some directions, how to do it the right way.
$('.pallete').hide();
$(document).delegate('.pick', 'click', function () {
var pos = $(this).offset();
var x = pos.left - $(window).scrollLeft() + $(this).width();
var y = pos.top - $(window).scrollTop() + $(this).height();
$('.pallete').css({
top: y + "px",
left: x + "px",
}).show();
});
$(document).delegate('.col', 'click', function () {
var pos = $(this).css('background-color');
$('.pick').css('background-color', pos);
$(this).parents('div').fadeOut();
});
Here is the fiddle, http://jsfiddle.net/zPNk3/5/.
The problem is when I click first time on .pick element the '.palette' element is shown properly. But when I click next time the same is not working.
When you do $(this).parents('div').fadeOut(), you’re fading out all <div> parents of the element. You’re only showing .pallete.
Try:
$(this).closest('.pallete').fadeOut();
It works!
Look at the row div, that should not be hidden,
$(document).delegate('.col', 'click', function () {
var pos = $(this).css('background-color');
$('.pick').css('background-color', pos);
//$(this).parents('div').fadeOut(); // this is wrong
$(this).parent().parent().fadeOut(); // fixed
});
I have multiple divs on my page where I want to animate their background position onScroll, so here is what I have got for now
/* animate background possition on scroll */
$(window).scroll(function() {
var y = $(this).scrollTop();
if(y < $(".page-separator").offset().top && ( $(".page-separator").offset().top ) < ( y + $(window).height() ) ){
$(this).css('background-position', '0% ' + parseInt(-y / 10) + 'px');
}
});
But it doesn't work. I think it is because $(this)is not currently visible $(".page-separator") , can you please help me to fix it?
So I have modified my code here but I am stacked again, I can't pass parameter into .each jquery function
$(window).scroll(function() {
var y = $(window).scrollTop();
$(".page-separator").each(function(y){
//$(".page-separator").css('background-position', '0% ' + parseInt(-y / 10) + 'px');
if( y < $(this).offset().top && ( $(this).offset().top ) < ( y + $(window).height() ) ){
$(this).css('background-position', '0% ' + parseInt(-y / 10) + 'px');
}console.log(y);
});
});
when I see console.log(y) it only shows 0 1 2 nothing more, not the top position
To change the background-position of the visible .page-separator elements, you'd do :
$(window).on('scroll', function() {
var y = $(window).scrollTop();
$(".page-separator").filter(function() {
return $(this).offset().top < (y + $(window).height()) &&
$(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 10) + 'px');
});
FIDDLE
$(this) == $(window) in this case. You should add one class (ex: 'animate') for all divs, and use it as selector (ex: $('.animate'))
I am having below issue when trying to brows the site through navigation,
http://nickylurie.com.au/Temp/index.php
as you can see left hand site image some time load some time aren't,
i am you using below code to change the image when going through to different page,
var pic = new Image();
pic.src = "images/homeLargeImg.jpg";
and below is the my backend code.
var RHigh=$('#RightPane').height()
var windHigh=$(window).height()
$(pic).hide().load(function()
{
//debugger;
$(this).fadeIn();
var marginT=(windHigh/100*5)
var imgH = (marginT+windHigh)
$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"' style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()
})
$(window).bind('resize', function()
{
resize()
});
function resize()
{
RHigh=$('#RightPane').height()
windHigh=$(window).height()
if( RHigh < windHigh)
{
$("#triquibackimg").css("height",$(window).height());
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
//----------------Right Pane vAlign--------------
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", $("#LeftPane").width());
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#RightPane").vAlign();
//$("#RightPane").hAlign();
});
}
else
{
$("#triquibackimg").css("height",(RHigh+150));
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
// if ($(window).height()>800){
// $("#RightPane").css("position",'relative');
// }
// else{$("#RightPane").css("margin-top",60)}
}
}
can some one please advice about this?
Thanks
Offtopic: I wanted to comment on this questions, because I don't have the answer (yet), its lame that I must have a repetation of 50 to comment..
Ontopic:
What are you trying to achieve and what is the problem?
When I try to view your website, all the large images on the left are loading (mac, chrome), I checked all pages..
They do load very slow..
Why do you want to insert the image by javascript and not simply by a img tag?
ok so i have an interspire shopping cart so its hard to customize..
anyway,
here is a link to my code
http://jsfiddle.net/WTvQX/
im having trouble getting the scroll to work properly...
it works differently on my actual site here...
so i need help... re-doing it or just fixing..
let me kno
You need to add the "relatedLeft" ID to the left button, however try something like this...
Demo: http://jsfiddle.net/wdm954/WTvQX/3/
$('#relatedRight').click(function() {
$('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
$('#scool').animate({left: "-=100px"}, 'slow');
});
You can adjust pixel distance and speed to your liking.
EDIT: Try something like this. The first part finds the width of all the images. Then the animates only fire when the offset is within range.
Demo: http://jsfiddle.net/wdm954/WTvQX/5/
var w = 0;
$('#scroll img').each(function (i, val) {
w += $(this).width();
});
$('#relatedRight').click(function() {
var offset = $('#scroll').offset();
if (offset.left < w) {
$('#scroll').animate({left: "+=100px"}, 'slow');
}
});
$('#relatedLeft').click(function() {
var offset = $('#scroll').offset();
if (offset.left > -w) {
$('#scroll').animate({left: "-=100px"}, 'slow');
}
});
EDIT: One more code option here. This one will stop scrolling sooner (note there are CSS changes here also).
Demo: http://jsfiddle.net/wdm954/WTvQX/7/
var w = 0;
$('#scroll img').each(function (i, val) {
w += $(this).width();
w += parseFloat($(this).css('paddingRight'));
w += parseFloat($(this).css('paddingLeft'));
w += parseFloat($(this).css('marginRight'));
w += parseFloat($(this).css('marginLeft'));
});
$('#scroll').css('width', w + 'px');
$('#relatedRight').click(function() {
var offset = $('#scroll').offset();
if (offset.left < 0) {
$('#scroll').stop().animate({left: "+=100px"}, 'slow');
}
});
$('#relatedLeft').click(function() {
var offset = $('#scroll').offset();
var b = $('#bar').width();
if (offset.left > b-w) {
$('#scroll').stop().animate({left: "-=100px"}, 'slow');
}
});