How to resize website "banner" to fit different size windows?

How to resize website "banner" to fit different size windows? - javascript

I've tried a few different things to fix this, but I have
#serverselect{
color: white;
background: black;
/*TOP BAR COLOR DOJCAD is #2196f3*/
font-family: Roboto;
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
align-items: center;
}
<select id="server" style= "background-color: #000000 ; color: #FFFFFF" onchange="location = this.value;">
<option value="0" selected disabled>Select A Server</option>
<option value="?server=1">1</option>
<option value="?server=2">2</option>
<option value="?server=3">3</option>
<option value="?server=4">4</option>
<option value="?server=5">5</option>
</select>
</div>
When I make the window smaller, the "banner" clutters up and makes it unusable. See linked images.
Incorrect: https://imgur.com/a/rDOOrAo
Correct: https://imgur.com/a/06VKiYF

Related

Editable Vinyl/Text Editor using Javascript

Hello as I'm finding ways to create and editable Vinyl or text editor I cant make it work, I want an output similar to this link https://www.stickermule.com/products/vinyl-lettering , I made one but with buttons and it worked but I want to apply it via combo box but it wouldn't work, can someone help me? I'm using HTML CSS and JavaScript.
Here is the code i have tried
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
p {
width: 40%;
border: 1px solid black;
padding: 10px;
font-weight: bold;
font-size: 18px;
}
button {
padding: 10px 20px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
Select Color:
<select>
<option>Choose a Color</option>
<option id="btnRed">Red</option>
<option id="btnBlue">Blue</option>
<option id="btnGreen">Green</option>
</select>
<textarea style="width: 25%; height: 200px;"></textarea>
</div>
<script>
let btnRed = document.querySelector('#btnRed');
let btnBlue = document.querySelector('#btnBlue');
let btnGreen = document.querySelector('#btnGreen');
let content = document.querySelector('textarea');
btnRed.addEventListener('click',() => content.style.color = 'red');
btnBlue.addEventListener('click',() => content.style.color = 'blue');
btnGreen.addEventListener('click',() => content.style.color = 'green');
</script>
</body>
</html>

I developed this solution using jQuery for simplicity. When the change event of the <select> element is triggered, the value of the <option> elements is assigned to the <textarea> element whose id attribute is resultTextArea.
$( ".target" ).change(function() {
$('#resultTextArea').css('color', this.value);
});
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
Select Color:
<select class="target">
<option>Choose a Color</option>
<option id="btnRed" value="red">Red</option>
<option id="btnBlue" value="blue">Blue</option>
<option id="btnGreen" value="green">Green</option>
</select>
<textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>
</div>

I have developed a solution using plain JavaScript in the solution below. The SetColor() method is called when the <select> element's onchange event is triggered; the value of the selected element in the <select> element is assigned to the color style of the <textarea> element.
function SetColor()
{
var value = document.getElementById("selectElement").value;
var textareaElement = document.getElementById("resultTextArea");
textareaElement.style.color = value;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div class="container">
Select Color:
<select id="selectElement" onchange="SetColor()">
<option>Choose a Color</option>
<option id="btnRed" value="red">Red</option>
<option id="btnBlue" value="blue">Blue</option>
<option id="btnGreen" value="green">Green</option>
</select>
<textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>

Select drop down gives blank options in firefox

I have a select element with options inside that will not show when in Firefox.
This should be showing 3 different options. In Chrome and Safari it works fine. I've been looking for a solution and nothing seems to work. Apparently this is a bug in Firefox. Here's the html.
.select-field {
display: inline-block;
width: 100%;
background-color: #005D5D;
border-radius: .5em;
margin: 0 auto;
}
.select-field>select {
float: left;
width: 100%;
background-color: transparent;
border: 0em;
padding: .5em;
font-size: 1em;
color: white;
background: url("./menu_arrow.svg") no-repeat 97% 50%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>

This works totally fine if I run in Firefox, https://jsfiddle.net/prashu421/8b1w8afr/
can you share your CSS as well?
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>

datalist vertical scroll not working in chrome

I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add overflow-y: scroll in css style for datalist? Used code below:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option value="ghi"></option>
<option value="jkl"></option>
<option value="mno"></option>
<option value="pqrs"></option>
<option value="tuv"> </option>
</datalist>
<input type="submit">
</form>

There is simple solution for this. Use https://github.com/b3n/datalist plugin.
Example:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>
var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);

Unfortunately, No you can't use overflow-y property for datalist. You will have to write jQuery code to make it happen or at least show all possible values.
I wrote a small example for you i hope it will help you to get it done for you yourself:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#options{
display: none;
height: 300px;
text-align: center;
border: 1px solid red;
overflow-y:scroll;
}
#options>p{
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
</datalist>
<input type="submit">
<div id="options">
</div>
</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
$('#options').append('<p>'+$(this).val()+'</p>');
})
$('#options').css({'width':$('input[name="browser"]').width()});
$('input[name="browser"]').click(function(){
$('#options').show();
});
$('input[name="browser"]').keyup(function(){
$('#options').hide();
});
$('#options p').click(function(){
$('input[name="browser"]').val($(this).text());
$('#options').hide();
})
</script>
</body>
</html>
It actually creates a second option list for you to choose from which is scrollable and if user types in input box then datalist works as expected to give suggestions.
I hope it helps

I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/
var no = new ComboBox('cb_identifier');
div.combobox {
font-family: Tahoma;
font-size: 12px
}
div.combobox {
position: relative;
zoom: 1
}
div.combobox div.dropdownlist {
display: none;
width: 200px;
border: solid 1px #000;
background-color: #fff;
height: 200px;
overflow: auto;
position: absolute;
top: 18px;
left: 0px;
}
div.combobox .dropdownlist a {
display: block;
text-decoration: none;
color: #000;
padding: 1px;
height: 1em;
cursor: default
}
div.combobox .dropdownlist a.light {
color: #fff;
background-color: #007
}
div.combobox .dropdownlist,
input {
font-family: Tahoma;
font-size: 12px;
}
div.combobox input {
float: left;
width: 182px;
border: solid 1px #ccc;
height: 15px
}
div.combobox span {
border: solid 1px #ccc;
background: #eee;
width: 16px;
height: 17px;
float: left;
text-align: center;
border-left: none;
cursor: default
}
<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>
<div class="combobox">
<input type="text" name="comboboxfieldname" id="cb_identifier">
<span>▼</span>
<div class="dropdownlist">
<a>Item1</a>
<a>Second Item2</a>
<a>Third Item3</a>
</div>
</div>

How to design step progress bar using jquery,css

I spent 3 days. I tried to design step by step progress bar like below.
====(discount 10 %)======(discount 20 %)=====(discount 30 %)========
fill it dynamically how can i do that i searched on google every thing i tried to customize but not success so far.
Thanks

I've just made this to inspire you (not sure if it's what you try to do).
$(document).ready(function() {
$('#discount').on('change', function() {
$('#discount-bar').css({'width' : $(this).val() + '%'});
});
});
select {
margin-bottom: 12px;
}
.discount-bar-container {
position: relative;
width: 400px;
height: 30px;
border: 1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.discount-bar-container .discount-bar {
position: absolute;
display: block;
height: 100%;
width: 0;
background-color: red;
transition: width 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="discount">Choose a value :</label>
<select name="discount" id="discount">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<div class="discount-bar-container">
<div class="discount-bar" id="discount-bar"></div>
</div>

jQuery picklist: shows only one

When using the jquery picklist (from: https://code.google.com/p/jquery-ui-picklist/) I only get one list instead of 2 (left and right). Any ideas?
I almost copy pasted all from http://jsfiddle.net/awnry/ScX4S/
HTML code:
<html>
<head>
<title>TestSite</title>
<link href="./css/test.css" rel="stylesheet">
</head>
<body>
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/test.js"></script>
<div>
<select name="basic" id="basic" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected="selected">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</body>
</html>
JS Code:
$(document).ready(function() {
$("#basic").picklist();
});
CSS Code:
body { margin: 0.5em; }
.pickList_sourceListContainer, .pickList_controlsContainer, `.pickList_targetListContainer { float: left; margin: 0.25em; }`
.pickList_controlsContainer { text-align: center; }
.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset #eee; overflow-y: auto; cursor: default; }
.pickList_selectedListItem { background-color: #a3c8f5; }
.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
.pickList_clear { clear: both; }

In your code, Change
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
to
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
Reason : You should include reference jquery UI widget before picklist. (Check the ordering in the fiddle)
The ordering matters as picklist refers the former(jquery UI widget library) for its functionality - Reference.

We Keep Coding

JavaScript is the programming language of the Web.

How to resize website "banner" to fit different size windows? - javascript

Related

Editable Vinyl/Text Editor using Javascript

Select drop down gives blank options in firefox

datalist vertical scroll not working in chrome

How to design step progress bar using jquery,css

jQuery picklist: shows only one

Categories

Resources