No color on hover - javascript

I can't seem to figure out why the remaining 3 tabs don't have colors when I hover my mouse. The first 3 are working properly but the remaining 3 are not. I only made adjustments on their margins and nothing more. I just like to put code on my Blogger blog because its quite helpful. Below are the codes I'm having problems with. They are working on the console but when I put it on my blog the hover effect is not there.
p {
margin-top: -30px;
}
.ctc-txt.bg_ffffff.br6 {
width: 642px;
height: 200px;
}
.clr-txt {
top: 160px;
}
.text-center.ct-case.mb10 {
display: flex;
align-items: right;
justify-content: center;
margin-top: -20px;
margin-left: 120px;
}
.counter {
margin-left: -14px;
}
#copyStr {
margin-left: 260px;
margin-top: -10px;
}
#text {
top: -30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/Dieffer/test1/master/mycss.css">
<form method="post" id="text" action="">
<p class="">
Type or Paste your text here to change text case
</p>
<div class="relative">
<textarea class="ctc-txt bg_ffffff br6" name="form_content" id="form_content" onclick="cont()"> </textarea>
<img class="clr-txt" onclick="resete()" src="https://smallseotools.com/asets/images/cleartext.svg">
</div>
<div class="col-lg-12 col-sm-12 pn pt5 pb5">
<div class="button_box h-a">
<div class="counter">
<label>Character Count: <span id="cc"> 0 </span></label>
<label>- Word Count: <span id="wc"> 0 </span></label>
</div>
</div>
</div>
<div class="text-center ct-case mb10" id="ctc_button_box">
<input name="toggle" class="button ctc-btn br6" type="button" id="toggle" value="tOGGLE cASE">
<input name="sentence" class="button ctc-btn br6" type="button" id="sentence" value="Sentence case">
<input name="lower" class="button ctc-btn br6" type="button" id="lower" value="lower case">
<input name="" class="button ctc-btn br6" type="button" id="upper" value="UPPER CASE">
<input name="capitalized" class="button ctc-btn br6" type="button" id="capitalized" value="Capitalize Word">
<input name="alternating" class="button ctc-btn br6" type="button" id="alternating" value="aLtErNaTe cAsE">
</div>
</form>

Have you tried to clean your browser-cache?
Since the Code works just fine, maybe that could cause the problem.

Related

Uncaught TypeError: counterElement is null

I have a problem. I'm creating a shopping cart for a website and I've encountered an error. I need to add a unit to the number of this product when adding the same product. But for some reason I get an error when I add the same product, although logically everything should work. Java script can't find my [data-counter]. and returns null even though it finds the number of the first item. Help me please. My code:
JS:
const cartWrapper = document.querySelector('#check');
window.addEventListener('click', function(event) {
if (event.target.hasAttribute('data-cart')) {
const card = event.target.closest('.dlg-modal')
console.log(card)
//Собираем данные
const productInfo = {
id: card.dataset.id,
imgSrc: card.querySelector('.gui__pizzablock').getAttribute('src'),
title: card.querySelector('.productTitle').innerText,
price: card.querySelector('.priceTitle').innerText,
description: card.querySelector('.gui__description').innerText,
counter: card.querySelector('[data-counter]').innerText,
};
console.log(productInfo)
const itemInCart = cartWrapper.querySelector(`[data-id="${productInfo.id}"]`);
console.log(itemInCart)
if (itemInCart) {
alert('present')
const counterElement = itemInCart.querySelector('[data-counter]');
counterElement.innerText = parseInt(counterElement.innerText) + 1;
alert('wow')
} else {
const cartItemHTML = `<div class="item__block">
<div data-id="${productInfo.id}"></div>
<div data-counter>${productInfo.counter}</div>
<img class="img__rubb" src="${productInfo.imgSrc}">
<p style="margin: -73px 100px">${productInfo.title}</p>
<p class="description__rubb" style="margin: 81px 100px">${productInfo.description}</p>
<hr style="width: 400px; margin: -55px 15px; border-bottom: 1px solid rgba(103,103,103,0)">
<p style="margin: 70px 15px">${productInfo.price}<span>руб.</span></p>
</div>`;
cartWrapper.insertAdjacentHTML('beforeend', cartItemHTML)
}
}
})
<div data-id="01" id="modal_1" class="dlg-modal dlg-modal-fade">
<div class="gui_pizza">
<img class="gui__pizzablock" src="ciplenokBarbekku.webp">
<div class="gui__pizza__constructor">
<p class="productTitle">Chicken</p>
<div class="kupiudauna" data-counter>228</div>
<!-- change1-->
<p class="gui__description"><span id="pizza_sm" class="gui__description">30</span> см, <span id="pizza_testo" class="gui__description">традиционное тесто</span>, <span id="pizza_g" class="gui__description">710</span> г</p>
<!-- change1-->
<div class="gui__main__description">
<p>Sause, sause, sause,<br class="show_pizza__space">cheese, meat</p>
<!-- change2-->
<input type="radio" class="big__small__pizza" id="one" name='radio' />
<input type="radio" class="big__small__pizza" id="two" name='radio' />
<input type="radio" class="big__small__pizza" id="three" name='radio' />
<input type="radio" class="big__small__pizza" id="four" name='radio' />
<input type="radio" class="big__small__pizza" id="five" name='radio' />
<!-- chabge2-->
<br />
<div class="big__small__pizza__buttons">
<!-- chabge3-->
<label id="onebtn" class="big__small__pizza__btn" for="one">Small</label>
<label id="twobtn" class="big__small__pizza__btn" for="two">Average</label>
<label id="threebtn" class="big__small__pizza__btn" for="three">Big</label>
<!-- chabge3-->
</div>
<div style="margin: 15px 0" class="big__small__pizza__buttons__tonkoe">
<!-- change4-->
<label id="tradis" class="big__small__pizza__btn__tonkoe" for="four"> Традиционное</label>
<label id="tonkoe" class="big__small__pizza__btn__tonkoe" for="five"> Тонкое</label>
<!-- chabge4-->
</div>
<!-- change5-->
<div id="first_gui_block" class="gui__pizza__block">
<!-- change5-->
<div class="game__block__content">
<div style="font-size: 22px; padding: 13px 0px" class="game__mode">Add по </div>
<!-- change6-->
<img id="selected1" class="selected1" src="selected.png" style="width: 29px; height: 29px">
<!-- change6-->
<br>
<br>
<img class="show_pizza__1__gui" src="x2cheese.png" style="width: 85px; height: 85px">
<p class="show_pizza__1_text__gui">CheeseX2</p>
</img>
<p class="show_pizza__1_text__gui2">3,00$.</p>
</div>
<div class="game__block__content">
</div>
</div>
<!-- change7-->
<div id="second_gui_block" class="gui__pizza__block2">
<!-- change7-->
<div class="game__block__content">
<div style="font-size: 22px; padding: 13px 0px" class="game__mode"> </div>
<!-- change8-->
<img id="selected2" class="selected2" src="selected.png" style="width: 29px; height: 29px">
<!-- change8-->
<br>
<br>
<img class="show_pizza__1__gui" src="ogurchiki.png" style="width: 85px; height: 85px">
<p class="show_pizza__1_text__gui3">Cucumbers</p>
</img>
<p class="show_pizza__1_text__gui4">2,00$.</p>
</div>
<div class="game__block__content">
</div>
</div>
<div style="color: #0077FF; font-weight: lighter;" class="small__bigger__pizza__btn">
<em>⠀</em>
<a class="small__bigger__pizza__btn" style="color: white;" data-cart target="_blank">Add to basket за <span class="priceTitle" id="price__pizza__gui">2.90</span>$.</a>
</div>
</div>
</div>
</div>
<span class="closer" data-close=""></span>
<h3></h3>
</div>
<div data-id="999" id="check" class="dlg-modal dlg-modal-fade" style="background: #f3f3f3; width: 790px; height: 100%; left: 100%">
<h2 style="text-align: left; padding: 20px 0px 10px 0px">Your basket</h2>
<div class="item__block__container">
</div>
<span class="closer1" data-close=""></span>
</div>
I tried even the most stupid solutions, by type to change the type of quotes. I'm suffering for a long time, I can not solve this problem, please help

display: flex & justify-content: space-evenly

guys.
Just a question about CSS and javascript.
I have this code but I need to make the input areas centered.
For some reason they are not aligned even with the same length.
I know that the text size effects the position of the flex, but I didn't understand how.
Sorry for the silly question, I'm just starting to learn it.
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}
Firstly, the fnum id should be a unique ID for one element on the page. In this instance you should use classes instead of id:
<input type="number" name="fnum" class="fnum">
Then, in your css you should use . instead of #:
.fnum {
margin: 0 1rem;
}
The name attribute should also be unique, as this is the way you will access the data from your backend. e.g.
<input type="number" name="production-fnum" class="fnum">
<input type="number" name="factory-fnum" class="fnum">
Presuming the CSS you have is written in a separate .css file, or in tags.
The space-evenly attribute is affected by the width of the elements,
You can add a fixed width to the h3 and input elements with:
h3 {
width: 150px;
}
input {
width: 150px;
}
or, you can give each h3 element a class and add the style to that, and style the fnum class we created earlier e.g.
<h3 class="label">Factory</h3>
.label{width: 150px}
.fnum{width: 150px}
Also, I would use a label instead of h3 (https://www.w3schools.com/tags/tag_label.asp)
I can offer such a solution. Set this rule in your css:
.scoreItem h3 {
width: 90px;
}
Where width 90px is the width of the longest tag h3 - Production.
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}
.scoreItem h3 {
width: 90px;
}
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>

Bootstrap - Reducing spacing between form-controls like textbox and label

I'm developing the a .NET(C#) MVC web-application.
I have the following bootstrap drop-down menu.
I'm trying to achieve the following two things :
1) I'm trying to reduce the spacing between a label and it's respective text-box. I tried using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label" but then the textbox overlapped the label.
2) I want to reduce the height of the textbox.
How can I achieve these?
here's my cshtml code :
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span></button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
#*#Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*#
</div>
</div>
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
</div>
//and so on
</form>
</div>
</div>
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</div>
And here's my CSS code :
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
I'm trying to reduce the spacing between a label and it's respective text-box.
Give your texboxes a css class (pull-left or whatever you want to call it) and then use css to pull the textboxes to the left.
.pull-left {
margin-left: -20px; /* Try with different values until you are happy */
}
I want to reduce the height of the textbox.
Try using padding and line-height and play with the numbers until you are happy with the height:
input[type="text"]{ padding: 20px 10px; line-height: 28px; }
The above will apply 20px to top and bottom and 10px to left and right. Here are some other ways:
padding: 20px 10px 20px 10px; /*top right bottom left*/
Finally make sure these margins play well when you are changing the size of the screen. If it looks good on big screen, it may not look good on smaller screens so choose something which will look good across all screens.

JQuery div.show() is resizing my fields

I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks
Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/

aligning radio buttons within a div

This is my first attempt at using javscript with html/css. I have a button that when clicked shows a question, and three radio buttons. Everything so far so good, but I would like the radio buttons to be aligned with their actual button on the left (not the text). The content div is centered, so it seems like it is just centering the radio buttons to the page, but not relative to one another. I think if you take a look at my link you will understand:
Link to example page
Any ideas on how I can get the affect I am looking for here? Admittedly this is pretty clunky but baby steps :)
Here is my html:
<!-- Here is the main content -->
<div class="content">
<h1>Quiz With Javascript</h1>
<p>This is a simple quiz leveraging javascript.</p>
<div class="btn-group">
<input type="button" class="btn btn-primary btn-lg" onclick="showDiv()" value="Click Here For The Question" />
</div>
<div id="question1">
<h3>Where Does Phil Work?</h3>
<div>
<form>
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</form>
</div>
<script src="js/quiz.js"></script>
<script type="text/javascript">
function showDiv() {
document.getElementById('question1').style.display = "block";
}
</script>
</div>
Here is a snippet from my CSS:
body {
margin: 50px 0px;
padding: 0px;
background-color: #7FFFD4;
border-radius: 25px;
}
.content {
text-align: center;
}
input[type='radio']{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
form {
padding-left: 559px;
text-align: left;
}
Try this:
<form style="">
<div class="centerDiv">
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</div>
</form>
and the CSS:
.centerDiv {
display: inline-block;
margin: auto;
text-align: left;
}

Categories