I am using Drupal in a node, I have this resizing grid for items.
document.addEventListener("DOMContentLoaded", function(event) {
function resizeGridItem(item){
grid = document.getElementsByClassName("grid")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeAllGridItems(){
allItems = document.getElementsByClassName("item");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}
function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}
</script>
The website is good when we reload it twice after saving the cache, but a new user first loads or from incognito, some of the titles overlap the image.
Is there a way to reload a node only once in Drupal after the first load? Or is there a missing way to resize?
Related
I have a Blazor WASM application using a MudTable that displays many rows from List<T>.
The MudTable uses #ref="_mappingTable" to identify the table in code.
In code, I set the selected item:
_mappingTable.SetSelectedItem(specificItemFromTheList);
StateHasChanged();
This seems to work fine. However, I'd then like the table to automatically scroll so that item is now visible. It's not automatically doing that and not sure how to achieve that.
There is an open issue requesting a new function "Scroll to row in MudTable"
https://github.com/MudBlazor/MudBlazor/issues/5445
You can wait for that issue to be solved or try the alternative posted by the user geometrikal
Currently using this code to scroll a row into view. It assumes the
table rows are all the same height.
export function scrollMudTableToRow(rowIndex) {
var tableElement = document.querySelector("div.mud-table-container");
var tableHeight = tableElement.offsetHeight;
var tableOffset = tableElement.scrollTop;
var tableRowHeight = tableElement.querySelector("tr.mud-table-row").scrollHeight;
// Element is above view - scroll so it is at top
if (rowIndex * tableRowHeight < tableOffset) {
tableElement.scrollTo(0, rowIndex * tableRowHeight);
}
// Element is below view - scroll so that it is at bottom
else if ((rowIndex + 1) * tableRowHeight > tableOffset + tableHeight) {
tableElement.scrollTo(0, (rowIndex + 1) * tableRowHeight - tableHeight);
}
}
Let me start with i am sorry for the long post.
I'm attempting to use the bootstrap carousel and unfortunately the pictures i have been given are NOT uniform. for example some are 100x200, doe are 150x100, etc. The aspect ratios are different, letter vs landscape. Ive attempted a number of things, including the using the following helper function on load of each of my images in the Carousel:
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {
var result = { width: 0, height: 0, fScaleToTargetWidth: true };
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
}
else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
}
else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
result.targetleft = Math.floor((targetwidth - result.width) / 2);
result.targettop = Math.floor((targetheight - result.height) / 2);
return result;
}
function OnImageLoad(evt) {
var img = evt.currentTarget;
// what's the size of this image and it's parent
var w = $(img).prop('naturalWidth');
var h = $(img).prop('naturalHeight');
//var tw = $(img).parent().width();
//var th = $(img).parent().height();
var tw = $(img).parent().parent().parent().parent().width();
var th = $(img).parent().parent().parent().parent().height();
// compute the new size and offsets
var result = ScaleImage(w, h, tw, th, true);
// adjust the image coordinates and size
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
and using the following for each of my images for the carousel
<img src="~/Images/Img1_Tall.jpg" alt="Tall" id="firstImage" onload="OnImageLoad(event);" />
and for the FIRST image in the carousel it works great, but each one after that they seem to just end up their natural size and are horizontally centered but are just against the top boarder of the carousel.
I've even changed the "onload" to pass the values of the length and width of the image but that didn't work either, in debug it seems only the first image kicks off the "onload" event.
the effect i am going for is if the ratio of the container is 3:4 and the ratio of the image is 1:2, the image stretch to meet the left and right edges and would center vertically and have letter box above and below, but the container does not change so that the navigation buttons of the carousel do not move. if the image is 2:1, the image would stretch to meet the top and bottom centered horizontally with letterboxes on the right and left, again keeping the navigation buttons unmoved.
any help would be appreciated... including:
what you are trying to do is crazy
do you want to do something like http://jsbin.com/zotelasa/1 . With that code I can get the active items w,h or any other variables you used in your code to run scale image. Because of parent.parent codes it applies to carousels main divs but you can set your own container.
The quick and dirty solution would be to resize the images using an image editor, and save the properly-sized images to a folder named eg carousel_images. Then whenever you get new content you simply run the image through your editor. With a carousel you're most likely dealing with a number of images in the several to dozens range and not hundreds or thousands.
A more complicated solution is explain to your image provider that you need everything one size. The images aren't going to look right if you're stretching and skewing them on the fly, and you can show them an image with the aspect ratios wrong to explain what you mean.
Finally, as a technical solution, I would try to find out why your image resizer is only being run on the first image. From the sound of it, other images just aren't being run through your function. I think that the technical solution should be a last resort in this case because, like I said, the end results are just not going to be as good. You should at a minimum, if possible, handle each image by hand to make sure the result is adequate.
...And the answer is a little long too...
• I assume that the width’s image’s parent is a constant, and while you don’t change the width’s viewport that must remain.
A-. Get the width’s image’s parent…
(Because the id attribute I took the grand parent’s parameter, that is (must be) the same than the parent’s one).
B-. With the below value deduce the height’s image’s parent, including the preferred ratio (in this case 16x9…
C-. … And with this, set the images’ parents height collection (all the elements with class=”item”).
D-. In order to conserve your carousel’s responsive characteristic, you must add the $F_getAdjustImagesParents function to the window resize event.
E-. Set the slide’s images position to absolute (Note: That must be via JQuery because if you do it in Css the bootstrap carousel will not display correctly. I did it with a new class for the images ('myCarouselImgs').
• Bootstrap carousel’s event 'slide.bs.carousel' and 'slid.bs.carousel'.
As you know, after the ‘click’ event, the slide.bs.carousel event is one of the firsts events that imply the change from the present slide to the next one; while the 'slid.bs.carousel' one is the end of the process.
F-. In the first one (slide.bs.carousel event), using the ‘relatedTarget’ variable of the Bootstrap’s plugin, the item’s id attribute and a item’s data attribute, get the number of the next item (ensure that these last ones -id attribute and data attribute- be present).
G-. In the second one, 'slid.bs.carousel', get the image’s size. For that you need to identify the implied image. I gave an id to each one. With this and the value obtained in previus step, it can do it.
H-. Well, now you already have the four values required for the ScaleImage function. You can call it…
I-. … And apply the result with some effect
var $parentImgW = ' '
var $parentImgH = ' ';
var $myCarousel = $('#myCarousel')
var $carouseItems = $('.item');
function $F_getAdjustImagesParents(){
$parentImgW = $myCarousel.width(); // A
$parentImgH = ($parentImgW*9)/16; // B
$carouseItems.height($parentImgH+'px').css('max-height',$parentImgH+'px'); //C
console.log('$parentImgW ====> '+$parentImgW);
console.log('$parentImgH ====> '+$parentImgH)
};
$F_getAdjustImagesParents();
$(window).on('resize',function(){ // D
$F_getAdjustImagesParents();
});
$('.myCarouselImgs').css('position','absolute'); // E
$myCarousel.on('slide.bs.carousel', function(event) {// The slide’s change process starts
var $slideNum = $("#"+event.relatedTarget.id).data('slide_num'); // F
console.log('$lideNum ====> '+$slideNum)
$myCarousel.on('slid.bs.carousel', function(event) {//The slide’s change process ends
var $imgW = $('#myCarouselSlideImage'+$slideNum).width(); //G
var $imgH = $('#myCarouselSlideImage'+$slideNum).height(); //G
console.log('$imgW ====> '+$imgW);
console.log('$imgH ====> '+$imgH);
var $result = '';
$result = ScaleImage($imgW, $imgH, $parentImgW, $parentImgH, true); //H
console.log('$result.width ====> '+$result.width);
console.log('$result.height ====> '+$result.height);
console.log('$result.targetleft ====> '+$result.targetleft);
console.log('$result.targettop ====> '+$result.targettop);
$('#myCarouselSlideImage'+$slideNum).animate({ // I
width:$result.width+'px',
height:$result.height+'px',
left:$result.targetleft+'px',
top:$result.targettop+'px' },
300);
});
});
See it runnig at https://jsfiddle.net/nd90r1ht/57/ or at https://jsfiddle.net/omarlin25/nd90r1ht/59/
The scenario:
On a big screen, the horizontal row holds 6-7 tabs without issues. But as the screen begins to narrow, the right-most tab should become (or such a tab be added) a dropdown tab with a "More" label and receive the other tabs as they start to lack space to be displayed.
The process of switching to the mobile view should end with only the first and second tabs (an example) displayed as usual, plus with the abovementioned "More" dropdown tab hosting other tabs.
Does this make sense? Is there anything in Bootstrap 3 that is able to support such a thing?
This demo on Bootply may help you:
http://bootply.com/105764
It calculates the height of the tabs row. When the height exceed 50 pixels it moves the extra tabs into a dropdown. It will collapse/expand the tabs accordingly as the window is resized.
var autocollapse = function() {
var tabs = $('#tabs');
var tabsHeight = tabs.innerHeight();
if (tabsHeight >= 50) {
while(tabsHeight > 50) {
var children = tabs.children('li:not(:last-child)');
var count = children.size();
$(children[count-1]).prependTo('#collapsed');
tabsHeight = tabs.innerHeight();
}
}
else {
while(tabsHeight < 50 && (tabs.children('li').size()>0)) {
var collapsed = $('#collapsed').children('li');
var count = collapsed.size();
$(collapsed[0]).insertBefore(tabs.children('li:last-child'));
tabsHeight = tabs.innerHeight();
}
if (tabsHeight>50) { // double chk height again
autocollapse();
}
}
};
$(document).ready(function() {
autocollapse(); // when document first loads
$(window).on('resize', autocollapse); // when window is resized
});
I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.
I generate panels dynamically and put them in other states in that way so in one state you have a list of panels on the left and one big panel on the right for example in one state and when you click on the list on the left (with small panels) that panels takes the places of the big panel and the big one goes back in the place. So I have 50 panels on the left and i want to scroll them down but I don't want to big panel to go down with them I want it fixed.
this is where I got and I don't know how to do that
here is my code:
enter code here
protected function canvas1_creationCompleteHandler(event:FlexEvent):void
{
blurEffect= new BlurEffect(myBlur,myUnBlur);
listEventsResult.token=eventService.listEvent();
blurEffect.initFilter(event);
panels=generatePanels(panelNumber);
var vBox:VGroup= new VGroup();
states=statesList.toArray();
trace("stavi sequence i sostojba e"+ states[0].toString());
for(var i:int=0; i<panelNumber ;i++) // get panel from list panels and set states
{
addChild(panels.getItemAt(i) as Panel);
(states[i] as State).overrides=[ new SetProperty(panels.getItemAt(i),"x",110), new SetProperty(panels.getItemAt(i),"y",0),
new SetProperty(panels.getItemAt(i),"width",widthBigPanel), new SetProperty(panels.getItemAt(i),"height",heightBigPanel)
//,new AddChild(g2,(panels.getItemAt(k) as Panel))
//,new SetProperty(panels.getItemAt(i),"scaleZ",110)
];
trace("vlegov override za new state");
var yy:int=0;
for(var k:int=0;k<panelNumber;k++)
{
trace("menuvam state: yy = " + yy);
if(k!=i){
vBox.addChild(panels.getItemAt(k) as Panel);
(states[i] as State).overrides = (states[i] as State).overrides.concat([ new SetProperty(panels.getItemAt(k),"x",x), new SetProperty(panels.getItemAt(k),"y",yy),
new SetProperty(panels.getItemAt(k),"width",widthPanel), new SetProperty(panels.getItemAt(k),"height",heightPanel)
//,new AddChild(g1,(panels.getItemAt(k) as Panel))
]);
yy+=110;
}
}
for(z=0; z<(states[i] as State).overrides.length; ++z){
var tempSetProperty:SetProperty= (states[i] as State).overrides[z] as SetProperty;
trace("\nname: " + tempSetProperty.name);
trace("target: " + tempSetProperty.target);
trace("value: " + tempSetProperty._value);
}
setCurrentState("state0");
addChild(vBox);
}
//sequence.targets=panels.toArray();
t1.targets=panels.toArray();
}
You could do your regular scrolling, but add a vertical scroll bar listener, scroll="myScroll(event), that repositions the large panel as scrolling occurs (using something like the original x,y values of the panel and the verticalScrollPosition property).
Alternatively, you could add a second canvas on top of the first one, and sets its background to transparent. Place the large panel on the transparent canvas so it doesnt scroll (and put it back to the original canvas when scrolling completes if that suits).
Both of these are heavy(ish) on processing (especially the transparent canvas).