I am trying to get a full month of events view on one computer page (Full HD) to avoid scrolling left to right.
if (view.type == 'resourceTimelineMonth')
{
setTimeout(function (){
var cols = document.getElementsByTagName ("col");
for (var i = 0; i < cols.length; i++) {
cols[i].style="width:2px";
}
},30);
}
After the calendar is loaded I am resizing the columns of the table to 2px.
It works as expected for higher columns size than 29-30 pixels.
Less than that does not result to what should be.
How to circumvent this limit ? Any idea ?
Thanks
Here is a workaround for those interested. Instead of trying to reduce the columns themselves I scaled down the calendar itself. You can change the scaling manually or better doing a ratio with the innerWidth of the screen.
if (view.type == 'resourceTimelineMonth') {
setTimeout(function () {
var box =
document.getElementsByClassName('fc-view-container');
var box1 =
document.getElementsByClassName('fc-scroller-canvas');
var box2 =
document.getElementsByClassName('fc-time-area fc-widget-header');
var box3 = document.getElementsByClassName('fc-cell-text');
box1[3].setAttribute('style','width:auto;');
box[0].setAttribute('style','transform:scale(0.25,1);transform-origin:0
center;width:6600px');
box2[0].setAttribute('style',';transform-origin:0 center');
for (let i=0; i< box3.length;i++) {
box3[i].setAttribute('style','font-size:10px;transform:scale(3,1)');}
},30);
}
Sorry for the poor formatting, cannot seem to make the identation work...
Related
I am trying to design some code in Apps Script that can be put on any Google Slides presentation and split every text box by paragraphs so every paragraph has its own text box.
I started out using var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 50, 50, 300, 300); to make the new text boxes like google describes to use in most of its tutorials but it 'couldn't identify the TEXT_BOX type' so I found .insertTextBox and that seems to work better but I've found other problems.
I can use .getParagraphs to find the number of paragraphs in a text box but I can't tell if it doesn't include the contents of each paragraph or if I'm just not using the correct command to get the text from the paragraph. I have also tried to find an alternative to find the beginning of each paragraph and divide the text from there but I can't find a command for that either. Maybe would I have to use .indexOf to find each /n or /r, or is there a simpler way?
I'm also having a problem where my equations to divide up the text box size are giving me undefined answers and I've tried declaring the variables as numbers but it just makes things worse.
function myFunction() { // get slides in the presentation and establish 'for' variables
var slide = SlidesApp.getActivePresentation().getSlides();
var i;
var j;
var k;
for (i = 0; i < slide.length; i++) { // get the text boxes on each slide
var text = slide[i].getShapes();
for (j = 0; j < text.length; j++) { // get the location of and the paragraphs in each textbox (locations don't work)
var top = text[j].getTop;
var left = text[j].getLeft;
var width = text[j].getWidth;
var height = text[j].getHeight;
var paragraph = text[j].getText().getParagraphs();
for (k = 0; k < paragraph.length; k++){ // make a textbox for each paragraph distributed vertically over the original textbox
var content = text[j].getRange(paragraph[k]); //I was hoping this would fill with the contents of current paragraph
var shapeheight = height / paragraph.length; //NaN and I don't know why
var shapetop = height * k + top; //also doesn't work these should all be numbers
slide[i].insertTextBox(content, left, shapetop, width, shapeheight);
}
text[j].remove(); //delete original textbox on slide
}
}
}
Here are pictures of what I'm trying to do:
Slide before intended changes
Approximate slide after intended changes
I believe your goal as follows.
You want to split each paragraph in a text box as each text box on Google Slides.
You want to achieve this using Google Apps Script.
Modification points:
In your script,
getTop, getLeft, getWidth and getHeight are the method. So please add ().
About var content = text[j].getRange(paragraph[k]), getRange has no arguments.
About var shapeheight = height / paragraph.length, in this case, this can be put outof the for loop.
About var shapetop = height * k + top, in this case, that might be var shapetop = shapeheight * k + top.
When above points are reflected to your script, it becomes as follows.
Modified script:
function myFunction() {
var slide = SlidesApp.getActivePresentation().getSlides();
var i;
var j;
var k;
for (i = 0; i < slide.length; i++) {
var text = slide[i].getShapes();
for (j = 0; j < text.length; j++) {
var top = text[j].getTop(); // Modified
var left = text[j].getLeft(); // Modified
var width = text[j].getWidth(); // Modified
var height = text[j].getHeight(); // Modified
var paragraph = text[j].getText().getParagraphs();
var shapeheight = height / paragraph.length; // Modified
for (k = 0; k < paragraph.length; k++) {
var content = paragraph[k].getRange().asString(); // Modified
var shapetop = shapeheight * k + top; // Modified
slide[i].insertTextBox(content, left, shapetop, width, shapeheight);
}
text[j].remove();
}
}
}
Note:
In the current stage, it seems that AutoFit cannot be set. By this, when slide[i].insertTextBox(content, left, shapetop, width, shapeheight) is used, the text deviates a little from the box. So in this case, how about not using shapeheight? In this case, please modify slide[i].insertTextBox(content, left, shapetop, width, shapeheight); as follows.
var t = slide[i].insertTextBox(content);
t.setLeft(left);
t.setTop(shapetop);
t.setWidth(width);
References:
getTop()
getLeft()
getWidth()
getHeight()
getRange()
insertTextBox(text)
I've been searching the site for an answer, and nothing I've come across seems to help. I'm trying to make it so that a default (and eventually user-specified) number of divs fill up the containing div like a grid. I'm trying to figure out how to make the size of the boxes I append to the parent change depending on how many are added, while always filling up the div, if that makes sense. So for instance, if I specify 9, I should have 3 rows and 3 columns. If I specify 62, then I'm looking for 16 rows and 16 columns, always filling up (or coming close to, anyway) the containing div. Here's a JSfiddle I have so far: https://jsfiddle.net/psyonix/1g9p59bx/1/ Here's the code as it is:
var d = ("<div class='square'></div>");
function createGrid(numSquares){
for(var i = 0; i < numSquares; i++){
$('#g_area').append(d);
}
var squareSize = Math.floor(580/numSquares );
$('.square').height(squareSize);
$('.square').width(squareSize);
};
$(document).ready(function(){
createGrid(64);
});
The only issue you had was setting the square size to 1/64th of the height instead of 1/(64^.5) of the height. Essentially you where just making one row. https://jsfiddle.net/1g9p59bx/7/
var d = ("<div class='square'></div>");
function createGrid(numSquares){
var gridContainer = $('#g_area');
for(var i = 0; i < numSquares; i++){
gridContainer.append(d);
}
var squareSize = Math.floor(580/(Math.sqrt(numSquares)) );
$('.square').height(squareSize);
$('.square').width(squareSize);
};
$(document).ready(function(){
createGrid(64);
});
I would create a little jqueryplugin for that. You can call it in every container you like: containerForGrid.createGrid(cols, rows)
(function($){
$.fn.createGrid = function(cols, rows) {
// get width and height of sorrounding container
var w = this.width()
var h = this.height()
// calculate width and height of one cell
var colWidth = w / cols
var rowHeight = h / rows
// loop over all rows
for(var i = rows; --i;){
// loop over all cols
for(var j = cols; --j;){
$('<div>').css({
width:colWidth,
height:rowHeight,
float:'left'
}).appendTo(this)
}
}
}
})(jQuery)
jQuery('div').createGrid(10,10)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:1000px;height:500px">
</div>
I'm writing a script which needs the src of the image which is positioned topmost on any website, NOT the FIRST image in the source, but the one positioned the highest.
i tried something really basic, which is, retrieving the first image tag, however this wont work for images positioned by css/jquery/javascript.
so any idea how i can accomplish this?
|-----------------
| .....title....
| |------|
| |image | <==== link needed
| |------|
|//text content
|Lorem dolor ipsum
I'm not certain about the jQuery reply but I believe that will still only give
you relative image coordinate. Following this earlier post showing a method to get the
absolute x, y coordinates of a html element on a page, and stealing the same method
from PrototypeJS, the following code should do what you need,
Caveats, I think that the 0 top check is safe to use to determine if an image is
invisible or not, but it might be problematic. Also, this will only get images inside img tags, not image links or anything set with css.
// cumulative offset function stolen from PrototypeJS
var cumulativeOffset = function(element) {
var top = 0, left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
return {
top: top,
left: left
};
};
// get all images
var results = document.getElementsByTagName("img");
var images = [];
for (result in results) {
if (results.hasOwnProperty(result)) {
images.push(results[result]);
}
}
// map our offset function across the images
var offsets = images.map(cumulativeOffset);
// pull out the highest image by checking for min offset
// offset of 0 means that the image is invisible (I think...)
var highest = images[0];
var minOffset = offsets[0];
for (i in offsets) {
if (minOffset.top === 0 ||
(offsets[i].top > 0 && offsets[i].top < minOffset.top)) {
minOffset = offsets[i];
highest = images[i];
}
}
// highest is your image element
console.log(highest);
You need to compare the .y property of each element.
function getTopMostImage() {
//Get all images
var imgs = document.querySelectorAll("img");
//Define a variable that marks the topmost image
var topmost = imgs[0];
//Check all image positions and mark the topmost
for (i = 1; i < imgs.length; i++) {
if (topmost.y > imgs[i].y)
topmost = imgs[i];
}
return topmost.src;
}
After load you can check the first img element present in Dom by first() Docs are here
Hope it helps
// Use the most appropriate selector for your images such as "body img" or bla bla...
var images = jQuery('img');
var topMostImageIndex = 0;
for (var i = 0; i < images.length; i++) {
if (jQuery(images[i]).position().top < jQuery(images[topMostImageIndex]).position().top) {
topMostImageIndex = i;
}
}
// It's the top-most image
images[topMostImageIndex];
I'm currently trying to dynamically create a table using jQuery, JavaScript and HTML. In my application images are coming dynamically.
**CASE:**If 9 images are coming dynamically then there must 3 rows and 3 columns, and if 16 image coming then 4 rows and 4 columns and so on. I also want some solution if odd number images(eg: 17, 19, 91..etc). I have searched lot but I didn't got proper answer. I am not looking for plugins.
Again, I'm not sure if this is what you wanted since your question is vague, no one has any idea how your markup looks like or how are you getting the images but I guess one of the solutions might be something like this:
http://jsfiddle.net/Udf3D/
$(document).ready(function(){
var count = $("#container img").size();
var columns = Math.sqrt(count);
columns = parseInt(columns);
$("#container img").css('width', $("#container").width() / columns);
});
The idea is to get the number of images, find square root of that number and then simply set the width of the image to fit nicely in the container. (if you have 25 images, you'll have 5 columns and image width would be 1/5 of the contaier width).
Again no idea if this fits your needs but it's a direction in which I would go.
Here's another possibility that assumes fixed with of images. This means as the number of images gets large, you may go over the edge of the page. Maybe that is ok.
http://jsfiddle.net/C4WpQ/14/
function createImages (n)
{
var images = [];
for (i = 0; i < n; i++)
{
var imageUrl = "http://images.fake.com/" + i + ".png";
images.push(imageUrl);
}
return images;
}
function leastSquareRoot (n)
{
// maybe use ceil if you want a wider rectangle vs a taller one
// when a square is not possible
var sr = Math.sqrt(n);
return Math.floor(sr);
}
function createRowsAndCols (images, width)
{
var result = "<table>\n";
var lsr = leastSquareRoot(images.length);
for (i = 0; i < images.length; i++)
{
if (i % width == 0)
{
result += "\t<tr>\n";
}
result += "\t\t<td><img src=\"" + images[i] + "\"></td>\n";
if (i % width == width - 1 || i == images.length - 1)
{
result += "\t</tr>\n";
}
}
result += "</table>\n";
return result;
}
function showTags(markup)
{
return markup.replace(/\</g, '<').replace(/\>/g, '>');
}
$( document ).ready(function() {
$("#canvas").html("Creating images...");
var images = createImages(17);
$("#canvas").append(" created " + images.length + " images.<br/>");
var width = leastSquareRoot(images.length);
$("#canvas").append("The proposed width is " + width + ".<br/>" );
var result = createRowsAndCols(images, width);
$("#canvas").append(result);
$("#canvas").append("<pre><code>" + showTags(result) + "</code></pre>");
});
Hey guys I'm having an issue that hopefully someone can help me with,
I have a JSFiddle here of applying the averaged colors to new div block,
so I know it is working, I am having trouble applying them to gradient backgrounds though, and I think I have something seriously messed up, here is the repo
the issue is definetly in this portion of code somehow, I recommend cloning it out for review
var isWebkit = 'webkitRequestAnimationFrame' in window;
var values = $.makeArray($('.value'));
for(var i = 0; i < sigma; i++)
{
var newColor = [
Math.floor(minColor[0]+maxIncrements[0]*i),
Math.floor(minColor[1]+maxIncrements[1]*i),
Math.floor(minColor[2]+maxIncrements[2]*i)
];
var hex = this.toHex(newColor[0], newColor[1], newColor[2]);
(isWebkit) ? $(values[i]).css('background', '-webkit-gradient(linear, left top, left bottom, from(#'+hex+'), to(#000));')
: $(values[i]).css('background', '-moz-linear-gradient(top, #'+hex+', #000);');
}
for(var i = 1; i < sigma+1; i++)
{
var newColor = [
Math.min(255,Math.floor(maxColor[0]+minIncrements[0]*i)),
Math.min(255,Math.floor(maxColor[1]+minIncrements[1]*i)),
Math.min(255,Math.floor(maxColor[2]+minIncrements[2]*i))
];
var hex = this.toHex(newColor[0], newColor[1], newColor[2]);
var c = (sigma+i);
if (c <= values.length) // prevent overlap if we have an odd sigma
{
(isWebkit) ? $(values[c]).css('background', '-webkit-gradient(linear, left top, left bottom, from(#'+hex+'), to(#000));')
: $(values[c]).css('background', '-moz-linear-gradient(top, #'+hex+', #000);');
}
}
EDIT
it looks like in my version compared to my fiddle I am NOT iterating, and always end up with a single hex of 000000 ???
The issue was that it was trying to parse a HASH when hashes weren't accounted for
The fix
/** hex parsers */
(
function(a)
{
a["toRGB"] = function(a)
{
var b = parseInt(a.replace('#', ''), 16); //drop our hash if it exists
return[b>>16,b>>8&255,b&255]
};
a["toHex"] = function(a,b,c)
{
return'#'+(c|b<<8|a<<16|1<<24).toString(16).slice(1) // re-add our hash
}
})(this);