I have this line:
$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10)},"left", pos.left + w + 10);
When I remove the left part at the end it works, but when I add the left part the element disappears.
Not sure what is happening:
Full Function:
function showPopUp(element){
var pos = element.offset();
var h = element.height();
var w = element.width();
var newDiv = document.createElement('div');
var genId = ("a" + (new Date).getTime() + Math.floor(Math.random() * 20));
newDiv.id = genId;
document.getElementsByTagName('body')[0].appendChild(newDiv);
$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10), "left": (pos.left + w + 10)});
$("#"+genId).append("<p> Tag:" + element.prop("tagName") + " || Em: "+ getEm(element) + "em || Px: " + getPixel(element) + "</p><p>Font Family: " + getFontFam(element) + "</p>");
}
EDIT
Fixed typo in code from copying from file
... "top": (pos.top + h + 10), "left": (pos.left + w + 10)});
You're using css() method wrong. It can't look like that. css() method takes only one argument like that(a string or an array). So this:
$("#" + genId).css({
"border": "2px solid black",
"background-color": "white",
"position": "fixed",
"z-index": "10000000000",
"top": (pos.top + h + 10)
}, "left", pos.left + w + 10);
Should look like this:
$("#" + genId).css({
"border": "2px solid black",
"background-color": "white",
"position": "fixed",
"z-index": "10000000000",
"top": (pos.top + h + 10),
"left": (pos.left + w + 10)
});
Please read the documentation from here and you will understand.
It's like .css( propertyName )
So you can either have this:
.css('display', 'block')
Or this:
.css({'display': 'block', 'color': '#f00'})
Not sure if this is the best fix but it worked for me.
I used the margin-left property instead of the left property and it is working now.
Related
I cant get this code to work. It's supposed to be a custom dialog box. When a certain event transpires, the div pops up with an animation like it's moving towards you from a distance. The div has a clickable link that is supposed to trigger the removal of the box when clicked.
It works fine for one iteration, but when I attempt to trigger it again the whole thing falls apart in a horrendous way. The console doesn't issue any warnings or errors, but the browser freezes then crashes.
Any help would be appreciated.
function modalBoxOpen(left, top, width, height, string, element){
var x = $('<div></div>').prependTo(element);
x.attr("id", "pop_up_div");
x.css("position", "absolute");
x.css("border-color", "black");
x.css("border-style", "solid");
x.css("background-color", "rgb(204, 204, 204)" );
x.css("padding", 0 + "%");
x.css("z-index", 10);
var y = $('<div>' + string + '</div>').prependTo(x);
y.attr("id", "inner_pop_up_div");
y.css("text-align", "center");
y.css("font-family", "arial");
y.css("position", "absolute");
y.css("margin", "1%");
y.css("width", "98%");
y.css("height", "93%"); y.css("background-color", "red");
var l = left + .5*width;
var t = top + .5*height;
x.css("left", l + "px");
x.css("top", t + "px");
x.css("width", 2*(left + .5*width - l) + "px");
x.css("height", 2*(top + .5*height - t) + "px");
y.css("font-size", .0413*2*(left + .5*width - l) + "px");
$('<div style = "background-color: black; border-radius: 10px; padding
: 1%; margin-top: 1%; margin-left: 43%; margin-right: 43%">' +
'<a class = "link" id = "ok_button" href = "javascript:;"> OK </a>
</div>').appendTo(y);
okButtonClick = function(e){
e.stopPropagation();
removeElement('pop_up_div');
$(".input_cover").css("display", "none");
bindHandlers();
if ( $("#language_list_container").is(":visible") )
{$("#language_clickable").click();}
}
$("#ok_button").bind("click", okButtonClick);
var count = 0;
timer = setInterval(open, 40);
function open(){
if ( count > 4 ) {
clearInterval(timer);
bindHandlers();
return;
}
l -= .1*width;
t -= .1*height;
x.css("left", l + "px");
x.css("top", t + "px");
x.css("width", 2*(left + .5*width - l) + "px");
x.css("height", 2*(top + .5*height - t) + "px");
x.css("border-radius", 2*(count+1) + "px");
y.css("font-size", .0413*2*(left + .5*width - l) + "px");
count++;
}
}
function removeElement(id) {
return
(elem=document.getElementById(id)).parentNode.removeChild(elem);
}
What I'm trying to achieve is to get the browser's viewport height and add it to several classes of my css. So far I have this:
Get viewport height:
var width = $(window).width();
var height = $(window).height();
Add to css
$('divOne').css({"height": " *viewport height* "});
$('divTwo').css({"top": " *viewport height* "});
$('divThree').css({"top": " *viewport height* + 200px"});
$('divTwo').css({"top": " *viewport height* + 400px "});
Sample:
It would be really great if someone could provide some working piece of code here. My coding skills are very limited.
Your code looks about right to me, except you have to do the math outside of the string literals, and because you're using classes, you need a class selector (e.g., ".divOne", not "divOne"), e.g.:
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({"top": height + "px"});
$('.divThree').css({"top": (height + 200) + "px"});
$('.divTwo').css({"top": (height + 400) + "px"});
You probably also want to give divs two through four height, because otherwise they'll only be as tall as their content. And you need to be certain that the script operating on the divs is after the divs in the markup, so that they exist when the code runs. (Or use jQuery's ready event, but there's no need for that if you control where the script tags go.)
Here's an example that adds heights, etc.: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div Height And Such</title>
</head>
<body>
<div class="divOne">divOne</div>
<div class="divTwo">divTwo</div>
<div class="divThree">divThree</div>
<div class="divFour">divFour</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({
"top": height + "px",
"height": "200px"
});
$('.divThree').css({
"top": (height + 200) + "px",
"height": "200px"
});
$('.divTwo').css({
"top": (height + 400) + "px",
"height": "200px"
});
</script>
</body>
</html>
$('.divOne').css({
"height": $(window).height()
})
Try that... Remember the . Before divOne
Is that what you're asking for?
var height = $(window).height();
$('.divOne').css({"height": height+"px"});
$('.divTwo').css({"height": height+"px"});
$('.divTwo').css({"top": height+"px"});
$('.divThree').css({"top": height+200});
$('.divTwo').css({"top": height + 400});
Choose whichever suits you the best. I suggest pure JavaScript with variables.
// NO VARIABLES
// pure JavaScript
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 200 + "px";
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 400 + "px";
// jQuery
$("#divOne").style.height = $(window).height();
$("#divTwo").style.height = $(window).height();
$("#divThree").style.height = parseFloat($(window).height()) + 200 + "px";
$("#divFour").style.height = parseFloat($(window).height()) + 200 + "px";
// WITH VARIBLES
// pure JavaScript <-- SUGGESTED
var viewportHeight = parseFloat(document.documentElement.clientHeight);
document.getElementById("divOne").style.height = viewportHeight + "px";
document.getElementById("divTwo").style.height = viewportHeight + "px";
document.getElementById("divThree").style.height =
viewportHeight + 200 + "px";
document.getElementById("divFour").style.height =
viewportHeight + 400 + "px";
// jQuery
var viewportHeight = parseFloat($(window).height());
$("#divOne").style.height = viewportHeight + "px";
$("#divTwo").style.height = viewportHeight + "px";
$("#divThree").style.height = viewportHeight + 200 + "px";
$("#divFour").style.height = viewportHeight + 400 + "px";
I have the following code in my external JS file:
var myDiv = $(".myDiv");
if (myDiv.css('left') == 'auto') {
var pos = myDiv.position();
myDiv.css({ "left:" + pos.left + "px", "top:" + pos.top + "px" });
}
It appears that the following line breaks my page:
myDiv.css({ "left:" + pos.left + "px", "top:" + pos.top + "px" });
If I comment it out everything works fine, except this functionality, obviously.
And if I put the values in alert I get them correctly as well.
alert(pos.left + ' ' + pos.top)
What am I missing?
You are trying to create an object by passing in 2 strings.
Should probably look like this:
myDiv.css({
"left": pos.left + "px",
"top": pos.top + "px"
});
Simple fix, use javascript object notation for the css properties. Move the colon outside the quotes:
myDiv.css({ "left": pos.left + "px", "top": pos.top + "px" });
You need quotation marks around the values in the object you pass to the .css() function:
myDiv.css({ "left: '" + pos.left + "px'", "top: '" + pos.top + "px'" });
I am trying to use the jQuery plugin: Floating boxes with easing and motion-blur in jQuery By: Marcell Jusztin.
I have it working just fine and understand how to tweak most attributes, but I am a Javascript rookie and really do not understand the mechanics involved in changing how it uses math to place the elements I want to animate. What I want to do is change the set x and y offset coordinates (which are in pixels of course) to a set of percentages so that the elements will dynamically scale in position based on screen resolution. Here is the script in its entirety:
jQuery.fn.floatingBox = function ( userOptions ) {
options = jQuery.extend ({
parent : 'backdrop',
stage : 'backdrop',
scale : 0.3,
xOffset : 0,
yOffset : 0,
blur : false,
isText : false,
blurColor : '#888',
frameRate : 40,
}, userOptions);
var parent = options.parent;
var stage = options.stage;
var scale = options.scale;
var xOffset = options.xOffset;
var yOffset = options.yOffset;
var blur = options.blur;
var isText = options.isText;
var blurColor = options.blurColor;
var frameRate = options.frameRate;
var midX = $('#' + stage).width() / 2;
var midY = $('#' + stage).height() / 2;
var _x = midX;
var _y = midY;
var xx = midX;
var yy = midY;
var objectId = $(this).attr('id');
$('#' + objectId).css('position','absolute');
shadowAmount = 0;
window["timer" + objectId] = window.setInterval(update,frameRate);
$('#' + parent).mousemove(function(event){
_x = event.pageX;
_y = event.pageY;
if( shadowAmount < 5 && blur == true ) shadowAmount += scale;
});
factor = scale * 0.5;
function update() {
xx += (((_x - midX) * -scale) - xx) * factor;
yy += (((_y - midY) * -scale) - yy) * factor;
$('#' + objectId).css('left', xx + xOffset + $('#' + parent).position().left);
$('#' + objectId).css('top', yy + yOffset + $('#' + parent).position().top);
if(blur){
if(!isText){
$('#' + objectId).css('box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
$('#' + objectId).css('-moz-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
$('#' + objectId).css('-webkit-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
$('#' + objectId).css('-o-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
}else{
$('#' + objectId).css('text-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
}
if(shadowAmount > 0 ) shadowAmount -= scale;
}
}
}
Here is the script that initiates the javascript in the HTML document:
<script type="text/javascript">
jQuery(function(){
$('#biglogo').floatingBox({
scale : 0.09,
blur : false,
isText : false,
xOffset : 400,
yOffset: 200,
});
$('#biglogo2').floatingBox({
scale : 0.08,
blur : false,
isText : false,
xOffset : 405,
yOffset: 205,
});
});
</script>
I have two transparent png files that are layered over each other with a minor offset of 5 pixels (or maybe its considered 10), but would rather the two images be centered in all browser windows and not just mine. The scale indicates how fast and far the elements move. The xOffset and yOffset parameters are of course fixed numbers that don't scale based on browser window size.
I have attempted to research this but ultimately, I'm neither finding that it can't be done, nor that it can because no one response seems to address the specific issue I am having. Perhaps I am not wording it correctly.
Thanks!
From the looks of the script I would say that it already takes the necessary calculations into accout. Try setting the parent and stage options and leave out the offset parameters. I.e
$('#biglogo').floatingBox({
parent: 'container-id',
stage: 'container-id',
scale: 0.09,
blur: false,
isText: false
});
Edit: I created a fiddle with some modifications to the plugin that shows how to get centering working, http://jsfiddle.net/wwBJt/
I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.
This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/
Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});
A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});
I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}
You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);