I'm wondering if it is possible to get the charts for Google Trends responsive with the current given code (by adding an 'unknown' parameters)
Example
<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=hoest,+Bronchitis,+Bronchiolitis,+RSV&geo=BE&date=1/2011+49m&cmpt=q&tz&tz&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=900&h=330"></script>
It is anyway not working when putting '100%' as width value.
But anyone aware of an extra parameter to change the unit you want to use (which is px by default)?
Try getting the screen width with javascript on page load, then dynamically create the embed code replacing the defined width parameter with the actual screen width.
<script>
//function which gets screen width
function getWidth() {
if (self.innerHeight) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
//define screen width variable. Subtract 15 pixels from width just to be on the safe side and reduce chance of getting a horizontal scroll bar
var screenWidth = getWidth()-Number(15);
//replace the following URL with your own. Be sure to keep the modified part of the string in tact where it replaces the width with screenWidth variable
var embedCode = "//www.google.com.au/trends/embed.js?hl=en-US&q=mick+fanning,+wwe&geo=ZA&date=now+7-d&cmpt=q&tz=Etc/GMT-10&tz=Etc/GMT-10&content=1&cid=TIMESERIES_GRAPH_0&export=5&w="+screenWidth+"&h=330";
//write this new code to browser. Split '<script'> tags to prevent browser errors when writing.
document.write('<scr'+'ipt type=\"text/javascript\" src=\"'+embedCode+'\"></scr'+'ipt>');
</script>
Note the width of the chart will not adjust if the browser window changes. (ie, user flips their phone sideways).
If you click the menu on the top right of the trends graph there is an option to embed the graph in Desktop or Mobile views. Select Mobile and it will do the responsiveness for you and give you the code snippet.
Related
I am currently using toolPage control with sideNavigation to display my navigation. By default, its displayed and can be collapsed if I click the "hamburger" icon at the top.
Now, I would like it to collapse not only by icon-click, but also if the browser width is decreased (or when a user opens it on the phone). Is there a way to achieve it? I know boolean properties 'sideExpanded' on 'toolPage' control and 'expanded' on sideNavigation control, but how can I set their value automatically depending on the width of the screen?
Can I see somewhere in the this.getView() structure the actual width of the window? I assume that then I could tie this expanded value to the function/formatter which determines if the control should be expanded or not. Or should I tie t the devide model somehow? In my manifest.json, I have desktop, tablet and phone deviceTypes defined. What is the correct way to do it? Thanks a lot!
You can achieve this using sap.ui.Device.resize.attachHandler(myFunction, oListener?) method, callback function returns parameters height and width based on your requirement you can expand or collapse thesideNavigation.
other way is to check the device sap.ui.Device.media.attachHandler(myFunction, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD); using this you can access the callback to with parameters type of device:
Do initialization: myFunction(sap.ui.Device.media.getCurrentRange(sap.ui.Device.media.RANGESETS.SAP_STANDARD));
function myFunction(mParams) {
switch(mParams.name) {
case "Phone":
// Do what is needed for a little screen
break;
case "Tablet":
// Do what is needed for a medium sized screen
break;
case "Desktop":
// Do what is needed for a large screen
}}
Regards,
Saddam
Recently started working on a master detail structure angular ag-grid. The structure has two levels of master-detail nesting. I need to fix the heights of inner - 2 grids such that they occupy all available real estate on the screen. Currently, ag-grid defaults it to 300 px and a lot of whitespace or unused space appears on a 1920x1200 screen resolution monitor. I also need to have fixed headers for all grids.
Any ideas or pointers would be appreciated...
Update: Referring to a forked version of plunker example from ag-grid here - https://next.plnkr.co/edit/yUzo4EqONEmgCmIw This is simple and basic set up for master-detail grid.
Note that: I haven't set any detail row height and have setup just one record to show up in the grid to test for the issue.
If you run the plunker code and view the result in separate window, notice that the inner / child grid doesn't occupy all the space available below it. In other words, it doesn't take as much as space/height available from parent container (master's detail row). The default 300px master detailRowHeight is making height fixed for inner grid. Also, from documentation, detailRowHeight prop doesn't seem to take something similar as 100% or 100vh and only takes fixed pixels number. Added a picture of the example below and the height / unused space I referred
We have different resolutions that users use to view data in grid and the heights of inner grids need to auto-adjust taking max. available space to show most information in the grids.
You could try something like this, I pulled it from the documentation:
In your component.ts file add this method. If it's a detail row it will apply different calculations than the other rows.
public rowHeight(params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight = params.data.callRecords.length * 28;
return allDetailRowHeight + offset;
} else {
// otherwise return fixed master row height
return 25;
}
};
In your template add the following: [getRowHeight]="rowHeight"
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[masterDetail]="true"
[detailCellRendererParams]="detailCellRendererParams"
[getRowHeight]="rowHeight"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Hopefully this will get you moving forward. Good Luck!
https://www.ag-grid.com/javascript-grid-master-detail/#detail-row-height
So I don't have a great, full solution for you but as a starting point I would use CSS to override the styles ag-grid is setting - I don't think detailRowHeight is going to help.
Here's my plunk getting close to what you want with some simple CSS I put in index.html. You can use !important to override ag-grid styles, or you could use javascript to set the CSS after ag-grid does. I prefer !important in this case and don't have to worry about timing.
https://next.plnkr.co/edit/mmXBBJE5Wa1JrX7v
The problem I wasn't going to get into is getting it to dynamically fill up available space, depending on the row selected, scroll position, etc. I can't think of any simple way to achieve that - I do this type of thing in grid often and end up writing javascript to calculate the available space, and then set the CSS in javascript.
In ag-grid you have the possibility to set auto height for details.
Set grid property detailRowAutoHeight=true to have the detail grid to dynamically change it's height to fit it's rows.
const gridOptions = {
// dynamically set row height for all detail grids
detailRowAutoHeight: true,
// other grid options ...
}
However if you are providing your own detail component...
detailCellRenderer: 'MyOwnDetailsComponent',
then, it might not work and you will still need to provide an grid options height detail content through...
detailRowHeight: 560,
Please see the ag-grid documentation here
I got a app that shows multiple pages, which are dragable. As the content of those can get very long I want to show only the page-name and limit the height of the page to about 50px on beginDrag() and reset the height to auto on endDrag(). Unfortunately this doesnt work, the styles get just ignored. I think this happends because react-dnd needs to keep the proportion of the elements so it can handle the drop-targets and knows which component is at which position. Is there any other way to accomplish this?
If you use a dragPreview then it will use that instead of the screenshot-ed component, similar to what he does in the tutorial (http://gaearon.github.io/react-dnd/docs-tutorial.html):
componentDidMount: function () {
var connectDragPreview = this.props.connectDragPreview;
var myPlaceholder = <Placeholder /> // A fake component with the height you want
myPlaceholder.onload = function() {
connectDragPreview(myPlaceholder);
}
}
(Note that you'll have to inject the connectDragPreview through the collector like he did as well)
I'm not quite sure I understand the problem but may be connectDragPreview can help you?
Some useful info here
I'm trying to configure the width for Alfresco.util.PopupManager.displayPrompt() but I don't see how to do it.
YUI Dialog has a width property, but the only config that I've managed to see, defaultDisplayPromptConfig object, doesn't seem to pay much attention to my messing with it.
Specifically, I tried setting Alfresco.util.PopupManager.defaultDisplayPromptConfig.width but it didn't work :)
I'm also trying to style up the panel I'm loading (create-site style injected panel), but it does not work for now.
Is there a way to configure the PopupManager Prompt object?
TIA
If you look at the source for Alfresco.util.PopupManager.displayPrompt() contained in alfresco.js then you'll see that the method creates an instance of YAHOO.widget.SimpleDialog, which does support a width property.
The problem is that displayPrompt() takes only specific configuration options which it passes through to the SimpleDialog, so adding an additional width parameter to your config will not have any effect, as you can see.
// Create the SimpleDialog that will display the text
var prompt = new YAHOO.widget.SimpleDialog("prompt",
{
close: c.close,
constraintoviewport: c.constraintoviewport,
draggable: c.draggable,
effect: c.effect,
modal: c.modal,
visible: c.visible,
zIndex: this.zIndex++
});
// Show the title if it exists
if (c.title)
{
prompt.setHeader($html(c.title));
}
// Show the prompt text
prompt.setBody(c.noEscape ? c.text : $html(c.text));
// Show the icon if it exists
if (c.icon)
{
prompt.cfg.setProperty("icon", c.icon);
}
// Add the buttons to the dialog
if (c.buttons)
{
prompt.cfg.queueProperty("buttons", c.buttons);
}
// Add the dialog to the dom, center it and show it.
prompt.render(parent);
prompt.center();
prompt.show();
I like the idea of enhancing the function to support a width property and possibly others, but in the meantime you are best off using SimpleDialog directly in your own code, modifying the above to add a width parameter.
I am developing a chrome extension (content script) to access web page content. I use the DOM to access all elements in page.
My code does not work correctly when the web page contains "frameset". In this matter I can count the frame number but I can't access to the frame content.
I use this code to count frame objects available on current page :
for frameset :
parent.frames.length
and for iframe :
document.getElementsByTagName("iframe").length
but the following code does not work :
parent.frames[0]
and returns "undefined".
My question:
How can I access to frame set elements inside a chrome extension (for both iframe and frameset)?
Similar to how Jerinaw approached it, I did the following via jQuery:
// Find the frame
var frame = $(document).find("frame[name='nameOfFrame']")[0];
// Callback once frame's internals are loaded
$(frame).load(function() {
accessFrame();
});
function accessFrame() {
// The following line is really important to accessing the frame's content.
var frameContent = frame.contentDocument;
// Notice that $(".objectSelectorClass") won't discover the object you're hunting for. You have to find it within the frame's contentDocument.
var objectInFrame = $(frameContent).find(".objectSelectorClass");
var objectInFrame_AlternateSyntax = $(".objectSelectorClass", frameContent)
// do stuff to objectInFrame
}
I'm running into the same problem. The frames are not iframes and they are in a frameset. What I had to do was an onload (for some reason addEventListener isn't working) to the frame but through it's contentWindow
for example:
From the main document
document.querySelector('#SomeFrameSelector').contentWindow.document.body.onload
Accessing the frame this way got me to the frames document and allowed me to attach the onload. Once fired using the same selector I was able to modify the frames content.