We Keep Coding

How to slow down onclick events inside my function or make them happen gradually? Looking for smooth transition

I'm sure there is a simple fix for this and I just am unable to piece it together... In the event that the link with the id of "light_off" is clicked then I want all the little changes to take place, that part is working, but they're happening too abruptly. How do I slow them down or fade into the changes so the transition looks smoother? Do I fadeIn? Add "slow" duration? Animate? And if so, how would I implement that properly? Gee, I hope that makes sense. Any help would be appreciated! Thank you!!
<script>
$(document).ready(function(){
$("#lights_off").click(function(){
$("#lights_off").fadeOut(1000);
$("#main").addClass(" lights_on");
$('#flavoredesign_logo').attr('src','img/logofinal.png');
$("#nav").css("color","#000000");
$("#nav").css("border-bottom"," #333 solid 1px");
});
});
</script>

You can also use $.animate()
However using animate you can't set color values, but only numeric values or use 'toggle's. w3 has an excellent guide for using it.
$(function() {
var on = true;
$('#lights').on('click', function() {
if ( on ) {
$( "#lights" ).animate({
width: 100,
height: 100
}, 1000 );
} else {
$( "#lights" ).animate({
width: 200,
height: 200
}, 1000 );
}
on = !on;
});
})
I created a fiddle with sizing of an element

you can use setTimeout(function(){ /you code/ }, 200) or use css animations / transitions

As pointed out in the comments, couldn't you use the CSS transition attribute to achieve smooth class changes? You can use this to give a time frame for transitioning between different property values. For example, if you wanted to give an animation time frame for transitioning between colours:
.light {
border-radius: 50%;
width: 100px;
height: 100px;
transition: background-color 1s; //Most properties can be manipulated through the transition attribute, e.g. width 1s
Then toggling between different classes with different values for background-colour:
.lights_off {
background-color: grey;
}
.lights_on {
background-color: yellow;
}
I've created a Fiddle that shows how this could be utilised to create a smooth transition.

Make second container stick on top right after the first one when scrolling

As you can see here : http://www.shadownet.com.mv/products-2/
The first container sticks on top when scrolled vertically from the container. It should end and the second container "SHADOW SERVER SERIES" should stick on top replacing the first one (bringing the first one to the original position) when it is scrolled vertically from the container.
Right now i use this JS code to make the first one stick but when i use it for the second one, it sticks both on top and doesn't give the intended results :
var menu = document.querySelector('#sticky')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition) {
menu.style.position = 'fixed';
menu.style.top = '42px';
menu.style.width = '100%';
} else {
menu.style.position = 'static';
menu.style.top = '';
}
});
I apologize for my bad english, im not a native speaker.

If you can use CSS, I would use the menuPosition as state in CSS.
So first the JS function would control state:
var menu = document.querySelector('#sticky'),
menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition){
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
});
I've used classList which has a polyfill.
As Obsidian Age pointed out, move the variable menuPosition inside the event controller when it's CSS is dynamic from the top.
Then in CSS, use the body state to control offset for both containers:
#sticky { display: none; position: static; top: 48px; /*...*/ }
#sticky + #sticky2 { display: none; position: static; width: 100%;/*...*/ }
.scrolled #sticky { display: block; position: fixed; }
.scrolled #sticky + #sticky2 { display: block; position: fixed; }
The + in CSS only works if both containers are direct children of the same parent.

For this particular one,
I used stickyJS which worked wonderfully and out of the box. I was using a wordpress website. I added the script to header.php and added the JS snippet on desired page, set IDs for the two containers and gave z-index so that they go above each other when in view.

Change Height and Width of TextArea in codemirror

I am developing website which having xml, java programs. So i chose CodeMirror for displaying programs in TextArea. I had successfully displayed. It's default height is 300px in codemirror.css. How to change Height and Width of TextArea programmatically in codemirror?

The CodeMirror user manual is your friend.
Example code:
<textarea id="myText" rows="4" cols="10"></textarea>
<script type="text/javascript" language="javascript">
var myTextArea = document.getElementById('myText');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
myCodeMirror.setSize(500, 300);
</script>

myCodeMirror.setSize(null, 500);
You can pass null for either of them to indicate that that dimension should not be changed.
Documentation:
cm.setSize(width: number|string, height: number|string)
Programmatically set the size of the editor (overriding the applicable
CSS rules). width and height can be either numbers (interpreted as
pixels) or CSS units ("100%", for example). You can pass null for
either of them to indicate that that dimension should not be changed.

Although the answer from Christian is great, just a heads up:
Autoresize Demo.
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
By setting an editor's height style to auto and giving the viewportMargin a value of Infinity, CodeMirror can be made to automatically resize to fit its content.
Source: https://codemirror.net/demo/resize.html

As an extention to the correct answer:
If you want that it takes the whole size of the Parent element, you can use:
myCodeMirror.setSize("100%", "100%");

if you are doing this in react use ref
const codemirrorRef = React.useRef();
React.useEffect(() => {
const current = codemirrorRef.current.editor.display.wrapper.style.height = "1000px";
});
<CodeMirror
[...]
ref={codemirrorRef}
/>
codemirrorRef.current.editor.display.wrapper contains the div element. From there you can do anything you would do if you did document.getElementById('#id')

$(function () {
// CodeMirror
CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
lineNumbers: true,
readOnly: true,
//mode: "htmlmixed",
}).setSize("100%", 610);
})

I used the solutions above but always struggled with the option when one line was too long and then it break out of the wrapper and broke the layout. I did not want to use the lineBreak option so I defined following:
<div class="container">
<textarea id="codemirror">
</div>
and the style was following:
.container {
position: relative;
height: {as you want}
width: 100%;
}
#codemirror {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

If you use ngx-codemirror package in your angular application the below blog will be very much useful for you
https://devsuhas.com/2021/04/06/change-height-and-width-of-textarea-in-codemirror/

My jquery loading overlay doesn't show up every

For whatever reason, my jquery loading overlay doesn't load at all under any circumstance even though the same code was working just days ago. Well, not the exact same code. I have been trying to get the overlay to resize with the window, and I have been trying different things, but I don't understand what I did that caused the overlay to never even show up? Here is the code that should attach to the overlay to the correct div...
function MRNSearchInternals()
{
//debugger;
var form = $("#MRNSearch");
$div = $("#TabView1");
var srlzdform = form.serialize();
var PopID = <% =PopID %>;
var options = [];
var $url = $("#target").attr("action");
$('<div id="overlay">').css({
position: 'absolute',
opacity: 0.2,
top : $div.offset().top,
left : $div.offset().left,
width : $div.offset().width,
height : $div.outerHeight(),
background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
}).hide().appendTo($div);
$("#overlay").fadeIn();
$.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data)
{
DisplayDemographicSearch(data);
$("#overlay").fadeOut();
});
}
Notice how I create the div. I give it an id, and then I call it's css atribute. From there I set all the css attributes. I then attempt to call fadeIn, and fadeOut after the ajax call. Any body have any idea why this isn't working? Any help would be great.
Some More clarification
Also notice how I chose the div to overlay. I get a div id from my dom
$div = $("#TabView1");
Also, I looked the source, and I do have that particular div in there. So that is not the problem. Somehow or the other, it simply isn't showing up.
UPDATE: The DOM I get
Below is what is produced from the jquery code. It appears as though everything is being created fine. Note also, that display is set to none. That is what I would expect since I have the overlay fade out. My question is why does it never show up.
<div class="TabView" id="TabView1">
<div class="Tabs">...</Tabs>
<div class="Pages">
<div id="overlay" style="left: 114px; top: 205px; height: 452px; display: none; position: absolute; opacity: 0.2; background-image: url("/images/ajax-loader.gif"); background-attachment: scroll; background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: blue;"/>
</div>

Well, the better way to create the overlay div would be
$('<div/>', {
id: 'overlay'
})
Does that solve the problem? Otherwise, the ID might not be created, or does it?
Update for the edit from your post: the "width" attribute is not set on the created overlay. What happens if that is added and set to e.g. 100px? It seems like there is something wrong with the setting of the width attribute (or the getting of the width attribute of $div).

Is this code called more than once? If so, are you removing #overlay somewhere?
Calling this code multiple times would create duplicate #overlay dom nodes which is a no-no and could explain why it doesn't work sometimes.
To remove it, change:
$("#overlay").fadeOut();
to:
$("#overlay").fadeOut('slow', function () {
$("#overlay").remove();
});

Your selector doesn't look right.
I would try:
$('#overlay').css. . . .

function MRNSearchInternals()
{
//debugger;
var form = $("#MRNSearch");
$div = $("#TabView1");
var srlzdform = form.serialize();
var PopID = <% =PopID %>;
var options = [];
var $url = $("#target").attr("action");
$('<div id="overlay">').css({
position: 'absolute',
opacity: 0.2,
top : $div.offset().top,
left : $div.offset().left,
width : $div.offset().width, //<- The problem is right here should be $div.width
height : $div.outerHeight(),
background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
}).hide().appendTo($div);
$("#overlay").fadeIn();
$.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data)
{
DisplayDemographicSearch(data);
$("#overlay").fadeOut('slow', function () {
$("#overlay").remove();
});
});
}
Man. That was real hard to debugg. I wish Visual studio 2010 had better jquery debugging capability. Thankfully, the next version is supposed to be a better jquery debugger. But, the problem was the width attribute.

DIV Element Not Scrolling

Take a look at this.
Sign in with any random username and start spamming chat till you get to the bottom of the DIV. Notice how it doesn't scroll? I need to figure out why.
JavaScript code used for scrolling:
// Note: CHATBOX_ID = "#chat"
Minte.UI.addChatEntry = function(html)
{
// Add the chat entry...
var entry = '<div>' + this.formatString(html) + '</div>';
$(CHATBOX_ID).html($(CHATBOX_ID).html() + entry);
// .. Then scroll down to the bottom
var chatContentHeight = 0;
var chatHeight = $(CHATBOX_ID).height();
$(CHATBOX_ID + " > div").each(function() {
chatContentHeight += $(this).outerHeight();
});
if (chatContentHeight > chatHeight)
{
var scroll = chatContentHeight - chatHeight;
$(CHATBOX_ID).scrollTop(scroll);
}
};
*And here is my CSS for #chat: *
chat {
position: absolute;
left: 0%;
top: 0%;
width: 65%;
height: 100%;
text-align: left;
overflow-y: scroll;
overflow-x: hide;
word-wrap: break-word;
}
I have a feeling that it's happening because #chat is absolutely positioned, but I don't know why exactly. The HTML code is rather long so I didn't post it here, but on the page I linked you just view it with View Source.
I have spent too much time trying to fix this problem to no avail. Hopefully you guys can help me solve this mysterious problem.

The .scrollHeight property on your #chat element is what you want.
$(CHATBOX_ID).scrollTop($(CHATBOX_ID)[0].scrollHeight)

try this:
$(CHATBOX_ID).scrollTop($(CHATBOX_ID).height())

You shouldn't be taking the difference between the two heights. Just scroll to the height of the larger element.

In my case chatContentHeight ends up at 462, while chatHeight is 480. Because of this, the last if statement is false.
There's a much simpler way to do this using jQuery. It's a bit long to paste here so here is the link: http://kisdigital.wordpress.com/2010/03/10/using-jquery-to-scroll-to-the-bottom-of-a-div-revised/

or you can call some huge number like
$("#chat").scrollTop(1e5)