We Keep Coding

JS 'reload' div element content without refreshing page

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

bootstrap modal shows previously resized textarea as it is

I am using a bootstrap modal to get some information from user. Inside the modal-content class I have given a <textarea /> field to let user provide comment. This textarea is and should remain resizable. But the problem is when the user resizes the text area and closes the modal, the textarea shows previously changed size and it does not reset to original.
Please follow the link below to reproduce the issue:
Open Modal, Resize the textarea so that it will stretch even outside the modal
Now click on close
Open the modal again, the previously changed size of textarea will be shown.
Note that CSS resize: none; is not the option I DO want the textarea should be re-sizable.
Also, I have jquery available, Is there option with jquery to reset the size when the modal closes automatically?
Edit: The duplicate suggestion is different as the textarea here comes within a bootstrap modal.
Demo

When the modal is closed (hidden.bs.modal event) reset the textarea height and width.
$('#myModal').on('hidden.bs.modal', function() {
$(this).find('textarea').css({'width': '', 'height': ''});
})
JSFiddle

Semantic-ui pop up z-index?

http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?

I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.

Search for 1190 in semantic-UI.css. Override the value.

First slide doesnt show in jQuery Royal Slider within tabs

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.

Maintain page position while page length changes

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.