I have cart from chartJS using canvas.
When I hover on my site's sidebar, page layout changes and the chart can't fit box anymore because it's dimensions are bigger than white box dimensions.
This lines are getting out of white box.
But when I reload page at this point, than everything fits perfect.
My question:
Is there a way to add event or something, when I hover on sidebar that chart element width gets updated, or to reload that element so it can automatically fit box, whithout refreshing page?
There is mouseover event, you can use one of those:
let sidebar = document.querySelector(".sidebar");
// This handler will be executed only once when the cursor
// moves over the unordered list
sidebar.addEventListener("mouseenter", function( event ) {
// call chartJS here
});
let sidebar = document.querySelector(".sidebar");
// This handler will be executed every time the cursor
// is moved over a different list item
sidebar.addEventListener("mouseover", function( event ) {
// call chartJS here
});
For more information about events visit this page:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
Related
I am using a SectionList to display a list of data. I have a top menu where a users can click these buttons to display a different set of data on the list, think of it like tabs. All this is working fine, the correct data is being shown and it's refreshing properly.
However the problem is that when a user scrolls down, say halfway, on the list then clicks one of the buttons at the top the list does not show the refreshing animation (the spinning circle) anymore. I have correctly implemented the refreshing property and that works whenever I pull down to refresh.
Also if you scroll to the top of the list then click one of the buttons the refresh icon also shows up as intended. The problem is whenever you scroll down the list and then set the refreshing property the list does not show the icon.
<SectionList
refreshing={this.state.isFetching}
onRefresh={() => this.onRefreshList()}
....
...
/>
Then whenever I make a call to start updating the data...
this.setState({ isFetching: true }, function() {
....
....
//all code in here works fine the list shows activity monitor no problems
//when you scroll down on the list THEN
//call this the activity monitor can't be seen on the list
});
So to counteract this I tried to scroll to the top automatically before calling my actual refresh. This kinda of works but it looks really bad. There is no callback so I don't know when the list has completed scrolling to the top.
//this also works properly and scrolls the list to the top but
//it's really jumpy and looks terrible because the data is immediately
//replaced while it's scrolling to the top, the loading animation can't be seen.
this.sectionListRef.scrollToLocation({
animated: true,
sectionIndex: 0,
itemIndex: 0,
viewPosition: 0
});
Is this a known issue? Are there any workarounds or am I just doing something wrong here?
I have bootstrap tabs setup with one tab having the tinyMCE editor and another tab carrying a raw/minified version of the data that goes into the tinyMCE editor
When I initially load the page, the height of the editor is set to 100px. When running the data collection, it uses tinymce.get('dataReport').execCommand('mceInsertContent', false, content);
and the height of the editor will change as it adds content.
My issue, when the other tab (raw data tab) is active, when the user switches back to the tinyMCE tab, the height of the editor is still at 100px. But once the user clicks inside the editor, it will resize.
Is there a way to manually call a resize on tinyMCE when the tab is selected?
I tried fooling it with a onclick="tinymce.execCommand('mceFocus',false,'dataReport');" on the tab button, and it will focus fine (ie. I can start typing right away) but the height of it is still at 100px.
you can use resizeTo(w,h) method documentation
In your onClick call a function updateTinymce()
function updateTinymce(){
tinymce.execCommand('mceFocus',true,'dataReport');
var ed = tinymce.activeEditor;
ed.theme.resizeTo(400, 200);
}
I have this layout of my page. On my page there is an update panel. Inside that there is a textbox and a Div. Inside that div there is a grid. When I search a record in textbox,It selects the row of the grid and changes its color but the external div scrollbar doesnt scroll to that position. Can you let me know some jquery or c# code by which I can maintain the position.
Maintain Here doesn't mean that I need to keep the same position but to scroll automatically to the desired row.
Gridview.SelectedRow.Focus(); Not Working
On Text Changed Event I passed the selected Index of grid to javascript method.
and in Javascript I did this, and It worked.
function divScorllAdjust(index) {
var div = document.getElementById("divGrid");
div.scrollTop = index*20;
};
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
Let's say I have a situation like this:
The page is 4000 pixels long.
The user has scrolled down the page, so 1000 pixels of content are hidden above the viewport.
Then, the user clicks a button, and content of arbitrary length is loaded via AJAX at the top of the page, pushing the button (and the content the user was looking at) below the viewport.
I've tried writing a Javascript callback to scroll down to the content the user was looking at before they clicked the button, but the experience is not seamless (a scroll "up" when new content is inserted, followed by a scroll back "down").
Is there any way to keep the viewport fixed on the content the user was looking at?
This is a simplified example, but should get the point across.
<div style="height: 1000px; width:1000px;" id="top-div">some content above the fold</div>
<button id="button">Click Me</button>
<img src="img.jpg" alt="Some image the user was looking at when they clicked the button." />
<script>
$("button").click(function() {
$.get('/new/content', function(response) {
$("#top-div").before(response);
});
});
</script>
Delay displaying the new content
The closest to an elegant solution that comes to mind is to delay displaying the new content until it's within or below the viewport. In other words, don't change the height of any major layout elements that are above the viewport; change them when they are within or below the viewport, when it won't do any harm. Display them when it's safe to do so.
For example, the user scrolls to the bottom third of a very tall page. While they're down there, some Ajax content of a new or different size is loaded near the top of the page, but it's not displayed yet. The user scrolls back up through the page, and once all of the affected layout area scrolls into view, the new content is displayed, as if it was loaded just then.
Basically, when Ajax content is loaded, retrieve the scroll position of the layout element, and either display the content or add it to a queue, based on the current scroll position of the page. Anytime the user scrolls the page or clicks on an anchor tag (or any action that changes the scroll position of the page), check the queue to see if there's any content that still needs to be displayed, and determine if it can now be safely displayed.
Make the content collapsible
Another option is to have the Ajax content appear in a collapsible format. It could be displayed initially in a small size that doesn't affect the page layout (if the layout element is above the viewport). The user can then click on the content to toggle between the collapsed format and the full version or, in a variation of the previous idea, it could automatically expand when the layout element is scrolled into view.
Check out this fiddle:
http://jsfiddle.net/FYEYB/
Here's the important code:
$("button").click(function() {
//cache the org height
var orgHeight = $("#content").height();
//run your ajax request.
mockAjax(function() {
//in the callback ajust the height
$(window).scrollTop($(window).scrollTop() + $("#content").height() - orgHeight);
});
});
Basically in the callback of your ajax request, add the difference in the height of the container to what it was before. You will probably need to add a check to make sure the new content was indeed added above the viewport, but I'll leave you to figure that out.