Develop Reference

Please How do I make an Element slide-in, user selects choice from drop-down, then it slides out

Please I need an element on my page to slide-in automatically 3 seconds after page is opened, and then slide-out after user chooses their preferred choice from the dropdown menu (which is the Element). I want the slide-in/slide-out effect to be from the right-hand side of the page.
The dropdown menu particularly is the 'Google Translate Element', which I have styled to my desired appearance, and I want this to slide in 4 seconds upon page lunch and after user chooses desired language, it slides out.
Below is the code for the styled Element
/*google translate Dropdown */
#google_translate_element select{
background: rgba(246,237,253,0.92) !important;
border: none !important;
color: rgba(54,58,173) !important;
width: 115px !important;
border-radius: 5px !important;
padding: 5px 5px !important;
font-size: 11.8px !important;
position: absolute !important;
margin-top: 84px !important;
margin-left: 232px !important;
}
.vl {
position: absolute !important;
border-left: 3.7px solid green !important;
border-radius: 2px !important;
height: 30px !important;
margin-top: 67px !important;
margin-left:351px !important;
}
/*google translate link | logo */
.goog-logo-link,.goog-te-gadget span,div#goog-gt-{
display:none!important;
}
.goog-te-gadget{
color:transparent!important;
font-size:0;
}
/* google translate banner-frame */
.goog-te-banner-frame{
display:none !important;
}
#goog-gt-tt, .goog-te-balloon-frame{
display: none !important;
}
.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}
<div id="google_translate_element"></div>
<div class="vl"></div>

To hide the element to the right you can:
Give it a css property right of less than zero and position absolute. This will hide the element to the right of the page. Be sure to make it position:absolute, and how much of it is hidden by the right property depends on the width of the element. If width is 2 px, don't set right to 50px, play with it till its correct.
To make it appear:
change it's right css property to 0 or more link, that will put it back on the page.
To make it appear after n seconds since the user selects an option:
put an event listener on every selectable element in the dropdown (either individually or from it's parent element), this would presumably be a onclick listener.
When the event is triggered, set a setTimeout function with JS (link) for whatever time you want to, with a callback to a function that updates the hidden element right property to more than 0, thus making it appear from the right
it would end up kind of like:
/*css*/
element {
right: -15px;
}
/*js to show after 4 seconds*/
const showElement = () => {
/*update css `right` property*/
}
let startTimeout = setTimeout(showElement(), 4000)
element.addEventListener('click', startTimeout())

Changing the behavior of an element in dropdown div (banner) opening smoothly

I'm trying to make a dropdown and riseup banner without using jQuery.
I want it to descend and rise smoothly when the triangle will be pressed, as in the picture. The triangle decorated as text for now (but it can be as button too).
The question is how to change the behavior of an element (triangle) after pushing it several times. If I pressed it for the first time, the banner will dropdown and then the triangle must change its direction to up, and 'Show' will change to 'Hide'. If I pressed it again, the banner will rise up and the triangle must change its direction to go down.
Adding a picture for clarity:
According to muka.gergely I simplified the example for myself:
HTML:
<div class="dropdown-wrapper">
<div class="btn-dropdown">
Show ▼
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
</div>
JavaScript:
<script>
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
/* Changing the name of the 'Banner' is not working */
/* const initialText = "Banner"
/*if (btn.textContent.toLowerCase().includes(initialText.toLowerCase())) {
btn.textContent = 'Hide a Banner';
} else {
btn.textContent = initialText;
}
*/
e.target.classList.toggle('open');
});
})
</script>
CSS:
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
max-height: 500px;
transition: all 1.50s;
}
jsfiddle

For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property.
Max-height is not required here and messes with the css transition.
And the second transition property is not needed as it is already defined.
.dropdown-content-container {
overflow-y: hidden;
height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
}
For your second problem of changing the name, well you must put the text you want to change into an element so you can access it directly and only change that label and not all of the element (including the container).
So first we need to change the HTML code (I used span but it doesn't matter)
<div class="btn-dropdown">
<span class="dropdown-content-label">Show ▼</span>
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
and then we need to slightly adjust the JS code to fit this HTML adjustment by getting the label and not the whole dropdown element.
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
const initialText = "Show ▼"
const label = btn.querySelector(".dropdown-content-label");
if (label.textContent.toLowerCase() === initialText.toLowerCase()) {
label.textContent = 'Hide ▲';
} else {
label.textContent = initialText;
}
btn.classList.toggle('open');
});
})

Don't use jQuery DOM changes when printing

Update: CSS solution below.
I'm using the fullpage.js jQuery plugin which unfortunately also affects the printing of the webpage, only displaying the current viewport display and its sibling.
The problem I have is that the print command uses the DOM (obviously), but the plugin has already made inline CSS changes in the DOM. Is there a way to disable the DOM changes for print?
This doesn't work, but here's my idea:
$(document).ready(function() {
if(#media !print) { // PS: Not real code!
$('#fullpage').fullpage();
}
});
------ CSS solution -------
Praveen's reply led me on the right course. The CSS needed to override the fullpage.js inline styles are:
/* Override javascript inline styles */
html,
body {
overflow: visible !important;
height: auto !important;
}
.fullpage-wrapper {
height: auto !important;
transform: none !important;
transition: none !important;
}
.fp-section {
height: auto !important;
}
.fp-slidesContainer {
width: auto !important;
transition: none !important;
transform: none !important;
}
.fp-slides,
.fp-slides * {
position: static !important;
}
.fp-slide {
width: auto !important;
}

Do something like this in your CSS:
Hiding the full page slides:
.fp-slides {
display: none;
}
Or making them static, as this would do the stuff by rendering the contents normally:
.fp-slides, .fp-slides * {
position: static !important;
/* I don't like putting !important,
but there is no other way to override the inline styles without this!*/
}
Else, you can specify the stylesheet to apply for only screen as the media:
<link rel="stylesheet" href="fullpage.css" media="screen" />

You can use a flag and set it true when the printing function is called:
var flag = false;
$(document).ready(function() {
if(flag === false) {
// all your code
}
function toPrint() {
flag = true;
window.print();
}
});

Setting the width of a RichCombo box in CKEditor

I've created a plugin with a RichCombo box. Unfortunately the name of the dropdown is a little too long for the RichCombo and it gets cut off.
Is there a way to force a wider RichCombo? Likewise, is there a way to force a width of the actual dropdown list (ListBox) itself?

The CSS value you seek is .cke_combopanel { width: 150px; }. It can be found within editor.css.

style your page with:
.cke_combo_text {
width: 130px !important;
}
.cke_combopanel {
width: 370px !important;
}

I got it. I added this to the page containing the ckeditor control:
<style>
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
</style>

Change Textfield colour on focus ExtJs

I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.
I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,
Definition of the Button:
xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
'focus':function(){
Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
}
}
CSS rules:
.red {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/
Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.
I hope this helps another people.
Thank You

You don't need jQuery if I understand the question.
.green:focus {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}