Javascript Box Shadow - javascript

I have a box that previews a Box Shadow. The user types in the inputs for the lenghts, blur, spread and colour (hex). So far I have this for the output of the style but it obviously doesn't work.
document.getElementById('jj_preview3').style["boxShadow"] = jj_input6 + 'px' + jj_input7 + 'px' + jj_input8 + 'px' + jj_input9 + '#' + jj_input10;
jj_input6 = Horizontal Length
jj_input7 = Vertical Length
jj_input8 = Blue Radius
jj_input9 = Spread
jj_input10 = Shadow Colour
What changes do I have to make the the javascript code snippet above to make it work?

It should work if you put in spaces. You're also missing 'px' in the last string literal.
document.getElementById('jj_preview3').style['boxShadow'] = jj_input6 + 'px ' +
jj_input7 + 'px ' + jj_input8 + 'px ' + jj_input9 + 'px #' + jj_input10;

Simply for future references:
var someVariable = document.getElementById("someId")
someVariable.style.boxShadow = "5px 5px 1.2em black";
Note: The 1.2em is for the blur effect, but px could be used as well, or it can be omitted all together.

Related

Google Script: Setting custom scale, when exporting to PDF

I have written script to export my Google spreadsheet to a PDF, but the scale is wrong. I need to set a custom scale of 70%, but as far as I can tell, my options regarding scale customisation are:
1 = Normal 100%,
2 = Fit to width,
3 = Fit to height and
4 = Fit to Page.
Below is some redacted script.
var exporturl = 'https://docs.google.com/spreadsheets/d/' +
'xxxxxx' + //file ID
'/export?exportFormat=pdf&format=pdf' +
'&size=A4' +
'&portrait=true' +
'&scale=3' + // My question refers to this line
'&top_margin=0.50' +
'&bottom_margin=0.50' +
'&left_margin=0.50' +
'&right_margin=0.50' +
'&sheetnames=false&printtitle=false' +
'&pagenum=false' +
'&gridlines=true' +
'&fzr=FALSE' +
'&gid=' +
'yyyyyyy'; //the sheet's Id
Is it possible to set a custom scale or am I bound to the 4 options? Also, if anyone can suggest a workaround, I'd apprecite it.

IE invalid argument because vars equal NaN

The penultimate line gives an "Invalid argument" error in IE11 - other browsers are fine run the code fine.
var active = $('.interactivemap-minimap-active', this.el);
if (x === undefined) x = self.x;
if (y === undefined) y = self.y;
var width = Math.round(self.container.width() / self.contentWidth / self.scale * this.el.width()),
height = Math.round(self.container.height() / self.contentHeight / self.scale * this.el.height()),
top = Math.round(-y / self.contentHeight / self.scale * this.el.height()),
left = Math.round(-x / self.contentWidth / self.scale * this.el.width()),
right = left + width,
bottom = top + height;
console.log("pass2: width=" + width + ", height=" + height + ", top=" + top + ", left=" + left + ", right=" + right + ", bottom=" + bottom);
active.each(function() {
$(this)[0].style.clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
});
the console.log will show:
width=Nan , height=Nan , top=Nan , left=Nan , right=Nan , bottom=Nan
If I comment out the troublesome line, the console.log will show:
width=Nan , height=Nan , top=Nan , left=Nan , right=Nan , bottom=Nan
width=140 , height=162 , top=-1 , left=0 , right=140 , bottom=161
So it looks like it takes a moment to populate those variables with actual data but it starts the last function when the are still equal to Nan and then errors.
Is there any way to get around this?

jquery .css() not applying -webkit-transform

I cannot see what is wrong with this code. Calculate center position of window then transform-translate div there (have to use translate for what i am doing).
Just getting this working for Chrome for a start, hence the -webkit- prefix).
Very confused as to why jQuery does not apply the inline style to the .logo div. Have included my other trouble-shooting experiments, commented out.
A syntax problem? jsfiddle here.
var centerPosition = '';
function centerLogo(){
var w_width = $(window).width();
var w_height = $(window).height();
var hCenter = (w_width / 2) - 150;
var vCenter = (w_height / 2) - 150;
console.log(hCenter);
console.log(vCenter);
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
console.log(centerPosition);
$('.logo').css('-webkit-transform', centerPosition);
// Try uncommenting the three examples below - they all work ...
// $('.logo').css('background', 'blue');
// centerPosition = 'blue';
// $('.logo').css('background', centerPosition);
// $('.logo').css('-webkit-transform', 'translate(10.85px, 45.56px)');
}
jQuery(document).ready(function($){
centerLogo();
});
The correcy syntax of $('.logo').css('-webkit-transform', centerPosition); does not have semi colons inside the Strings. Try changing this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
to this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px)';
Should work: http://jsfiddle.net/7f7rt/6/
This Will Sure Work.
var posElem = document.getElementById('logo'); // set id to div
var newStyle = '-webkit-transform: translate(' + hCenter + 'px, ' + vCenter + 'px);' +
'transform: translate(' + hCenter + 'px, ' + vCenter + 'px);';
posElem.setAttribute('style',newStyle);

HTML / Javascript Dynamic line using HR tag

I have create one flow diagram on user choice. On selecting option a line should be drawn.
Line is properly created but it is resetting the option that user selected.
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px;behavior:url(Scripts/-ms-transform.htc); -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);'><hr></div>";
//
//alert(htmlLine);
document.body.innerHTML += htmlLine;
last line is creating some problem. when last line is commented everything is fine.
Please help me...!!!
one problem i see in your code is that you use single quotations on style.
You must have something like this : style=".....". You can escape the double quotations by using the '\' . Your code will look like this :
var htmlLine = "<div style=\"padding:0px;...etc
-> the double quotation is escaped by the \ character

IE 7 CSS Issues

Okay, I'll be the first to admit that i'm quite terrible when it comes to css, but I try... :D
I have this JS Function which I use to create rounded corners using images, instead of the standard div in div in div way. I know there are better ways, but this is how i've done it:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div>' + title + '</div>');
div.css("position", "relative");
div.css("z-index", "2");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
//div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}
div is the div object being passed to the function $("#divid") for example.
left, middle and right are the image locations.
leftwidth, rightwidth and height are pretty self explanitory.
Now the problem - Using IE 8, the div(which is a rounded title bar) draws perfectly when using the commented out line
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
and the active line
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
But IE 7 only works with the active line.
The left and middle images are drawn in IE 7 but not the right image and the div content(title).
The active line for both IE 7 and IE 8 renders the left and right images usless as they both(left and right) sit over the center image, so any transparency only shows the center image and not the body background.
Any and All help is, as usual, really appreciated.
If you're not aware of this already, there is a rather elegant way in CSS to create a rounded corner:
-moz-border-radius: 15px; /* where the 15px is the degree of rounding */
border-radius: 15px;
This is only supported in newer browsers (IE7, for example, will still have square borders).
Additionally, I noticed you said that this was for a rounded title bar. Wouldn't it be easier if you just used a photo-editing software like GIMP or PS to create a rounded image? This would solve the problem of cross-browser compatibility as well as the problem of obtrusive JavaScript not gracefully degrading (if JavaScript is disabled, the user does not get the image!)
While i'm sure this won't help anyone - for completeness my solution was to set the z-index on the appended div instead of the passed div:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div style="z-index:5">' + title + '</div>');
div.css("position", "relative");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';z-index:-2;"><img src="' + middle + '" style="position:absolute; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}

Categories

Resources