I'm trying to style a menu I built and I add a different class on each div element every time someone clicks on them. How can I remove the already added class from this element when I click anyone of the other 3 divs?
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
});
$('.garden-btn').click(function() {
$(this).addClass("active-btn-pink");
});
$('.technology-btn').click(function() {
$(this).addClass("active-btn-purple");
});
$('.auto-btn').click(function() {
$(this).addClass("active-btn-deep-purple");
});
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color: #555B66;
}
.active-btn-red {
background: #E53935;
color: #fff!important;
}
.active-btn-pink {
background: #D81B60;
color: #fff!important;
}
.active-btn-purple {
background: #8E24AA;
color: #fff!important;
}
.active-btn-deep-purple {
background: #5E35B1;
color: #fff!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn">FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
I know that i could do something like that for each one of them:
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
$('.garden-btn').removeClass("active-btn-pink");
$('.technology-btn').removeClass("active-btn-purple");
$('.auto-btn').removeClass("active-btn-deep-purple");
});
But as I will add more than 20 elements in my menu, I would like to ask if there any smarter/shorter way to make this work.
As #disinfor said in the comments, you could do something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn" data-active-class ='active-btn-red '>FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color:#555B66;
}
.fashion-btn.active {
background:#E53935;color:#fff!important;
}
.garden-btn.active {
background:#D81B60;color:#fff!important;
}
.technology-btn.active {
background:#8E24AA;color:#fff!important;
}
.auto-btn.active {
background:#5E35B1;color:#fff!important;
}
$(".categories-sidebar-popup-menu-row" ).each(function (){
$(this).click(function(){
clearStyle();
$(this).addClass("active");
});
});
function clearStyle(){
buttonWithActive = $('.categories-sidebar-popup-menu-row.active');
buttonWithActive.removeClass('active');
}
Related
In my below jQuery I have an element that reflects the written input within a secondary element. At the same time the element with the reflected text needs to resize, this is working, but there are 2 problems I cannot resolve:
1. When holding a backspace down, it doesn't keep up.
2. When you press single backspace, it skips a character and field cannot be emptied.
Please see below snippet:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').bind('keypress keyup blur', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
The problem is that the .bind('keypress keyup blur', function() { is not cooping well with updating the values. When the key is down it needs an update and is waiting for up, it then skips, and vice versa.
So the solution here is to use .on('input', function() { instead.
See below outcome:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').on('input', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
I have the following code:
Type some text in place of the [Header] and press enter.
As you can see on clicking enter in the h2 element the cursor shifts to span element.
However, it adds an extra line in the beginning.
I don't know how to remove a line from the end.
function enter() {
if (event.key == "Enter") {
$("div#text span").focus();
}
}
var h = $('h2').offset();
$('div#text span').click(function() {
});
div#text {
padding: 5px;
margin: 0;
width: 99.3%;
height: 99%;
resize: none;
font-family: 'Callibri';
font-size: 25px;
text-align: left;
z-index: 99;
line-height: 30px;
background-color: white;
overflow-y: scroll;
cursor: text;
}
h2 {
text-align: center;
font-size: 40px !important;
}
h2:focus,
div#text span:focus {
outline: none;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text" spellcheck="false">
<h2 contenteditable="true" onkeydown="enter()">[Header]</h2><span contenteditable="true">[Body]</span>
</div>
Use event.preventDefault to override default behaviour on pressing enter key.
function enter() {
if (event.key == "Enter") {
event.preventDefault();
$("div#text span").focus();
}
}
var h = $('h2').offset();
$('div#text span').click(function() {
});
div#text {
padding: 5px;
margin: 0;
width: 99.3%;
height: 99%;
resize: none;
font-family: 'Callibri';
font-size: 25px;
text-align: left;
z-index: 99;
line-height: 30px;
background-color: white;
overflow-y: scroll;
cursor: text;
}
h2 {
text-align: center;
font-size: 40px !important;
}
h2:focus,
div#text span:focus {
outline: none;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text" spellcheck="false">
<h2 contenteditable="true" onkeydown="enter()">[Header]</h2><span contenteditable="true">[Body]</span>
</div>
I'm trying to appendTo a <div> into current <div class='mainDiv'> when click on a button. Now its appendTo all the class='mainDiv' & after the cloning. I need it only to the current clicked <div>. Can someone help me to solve it?
(function($) {
function div2() {
$('<div/>').addClass('div2').text('This is a Content').appendTo('.mainDiv');
}
function cloneIt() {
$('.mainDiv').clone().detach().appendTo('body');
}
$(document).on('click', '.div1', function() {
div2();
});
$(document).on('click', 'span', function() {
cloneIt();
});
})(jQuery);
body {
display: flex;
justify-content: space-around;
}
.mainDiv {
background-color: #000;
width: 100px;
height: 100px;
color: #fff;
padding: 20px;
margin-left: 15px;
margin-right: 15px;
}
.div1 {
background-color: blue;
padding: 10px;
cursor: pointer;
}
.div2 {
background-color: red;
padding: 10px;
}
span {
display: block;
padding: 10px;
background-color: green;
margin-bottom: 15px;
cursor: pointer;
}
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
You can get the current element bu using $(this) and then get the parent using $(this).parent() and send it as parameter to the function div2($(this).parent()); and use it instead of using class selector
function div2(item) {
$('<div/>').addClass('div2').text('This is a Content').appendTo(item);
}
See code snippet:
(function($) {
function div2(item) {
if (item.has(".div2").length <= 0) {
$('<div/>').addClass('div2').text('This is a Content').appendTo(item);
}
}
function cloneIt() {
$('.mainDiv').clone().detach().appendTo('body');
}
$(document).on('click', '.div1', function() {
div2($(this).parent());
});
$(document).on('click', 'span', function() {
cloneIt();
});
})(jQuery);
body {
display: flex;
justify-content: space-around;
}
.mainDiv {
background-color: #000;
width: 100px;
height: 100px;
color: #fff;
padding: 20px;
margin-left: 15px;
margin-right: 15px;
}
.div1 {
background-color: blue;
padding: 10px;
cursor: pointer;
}
.div2 {
background-color: red;
padding: 10px;
}
span {
display: block;
padding: 10px;
background-color: green;
margin-bottom: 15px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
I don't know if I understand your question in the right way, but cloning the current clicked div could be solved like this
(function($){
$(document).on('click', '.mainDiv > div', function(){
$(this).closest('.mainDiv').append($(this).clone(true));
});
})(jQuery);
body {
display: flex;
justify-content: space-around;
}
.mainDiv {
background-color: #000;
width: 100px;
/* height: 100px; */
color: #fff;
padding: 20px;
margin-left: 15px;
margin-right: 15px;
}
.div1 {
background-color: blue;
padding: 10px;
cursor: pointer;
}
.div2 {
background-color: red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
You can add the newly created div to the correct .mainDiv with the following
(function($) {
function div2(el) {
$('<div/>').addClass('div2').text('This is a Content').appendTo(el);
}
function cloneIt() {
$('.mainDiv').clone().detach().appendTo('body');
}
$(document).on('click', '.div1', function() {
var el = $(this).parent('.mainDiv');
div2(el);
});
$(document).on('click', 'span', function() {
cloneIt();
});
})(jQuery);
body {
display: flex;
justify-content: space-around;
}
.mainDiv {
background-color: #000;
width: 100px;
height: 100px;
color: #fff;
padding: 20px;
margin-left: 15px;
margin-right: 15px;
}
.div1 {
background-color: blue;
padding: 10px;
cursour: pointer;
}
.div2 {
background-color: red;
padding: 10px;
}
span {
display: block;
padding: 10px;
background-color: green;
margin-bottom: 15px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
I am making a selection panel and I am having a hard time figuring out an aspect to it. There are nine boxes and I want the user to be able to click the boxes and when clicked for the hover's format to stay present and then ideally some sort of checkmark or something added into the border of the box. I am completely unsure of how to get the boxes' hover font effect to stay when I take the mouse off.
Does anyone know how I can do this?
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
Create another class name that hold the same css style when hovering, and add those class into clicked element or use toggleClass like following example :
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.box_focused {
background-color: #45ba95;
background-image : url("http://findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
background-position: right top;
background-repeat: no-repeat;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
You can use the following example by using JQuery and using .hover and .addClass():
$(".project-option-boxes").hover(function()
{
$(this).addClass("active");
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.active {
background: #45ba95;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
You can create a class with the same style as the hover, and when one box is clicked, you can add this class to the box.
.project-option-boxes.active {
background-color: #45ba95;
color: #FFF;
}
and to give the class to the boxes,
$(document).on('click', 'project-option-boxes', function (e) {
$(this).toggleClass('active');
}
I am using a drop down for some additional content. I am not sure why but the drop down isn't working properly. When clicked on the 'read more' link it takes me back to my home page or refreshes to the home page. I made a jsfiddle and it's doing the same there. Any info on what I am doing wrong would be appreciated.
$('.expand-notice').on('click', function(e) {
e.preventDefault();
var parent = $(this.parentNode.parentNode);
parent.toggleClass('open-notice');
if (parent.hasClass('open-notice')) $(this).text('Less');
else $(this).text('Read more');
});
.notice {
background: #DDDDDD;
max-width: 40em;
margin: 0 auto 0.5em;
padding: 1em;
text-align: center;
font-family: sans-serif;
letter-spacing: 1px;
}
.notice p {
margin: 0;
}
.notice-type,
.notice-title {
font-family: sans-serif;
}
.notice-type {
text-transform: uppercase;
opacity: 0.8;
font-size: 11px;
letter-spacing: 2px;
}
.notice-title {
font-size: 20px;
}
.notice-content {
display: none;
text-align: left;
margin: 5px;
}
.notice-content p {
letter-spacing: 0;
padding: 5px;
}
.open-notice .notice-content {
display: block;
}
.recent-news {
margin: 0em auto;
max-width: 80em;
padding: 0 3% 2em;
overflow: hidden;
text-align: center;
}
.recent-news h2 {
margin-top: 0.5em;
}
.news-item {
display: inline-block;
margin: 1.5em 0 0 0;
width: 47.75%;
background: #fff;
padding: 2em 0em;
text-align: center;
vertical-align: top;
}
.news-item:nth-child(2n) {
margin-left: 3%;
}
.news-item p {
padding: 0em 1.5em;
margin: 0em;
line-height: 1.6;
}
.news-item p.news-date {
font-size: 0.95em;
}
<div class="page" data-subject-page="1">
<div class="largeText" data-subject-text="">
<div class="recent-news">
<h1>main title</h1>
<div class="notice">
<p class="notice-type">Date</a>
<p class="notice-title">sub title</p>
<div class="notice-content">
<p>Content here</p>
</div>
<p>Read more</p>
</div>
</div>
</div>
</div>
Remove the href attribute from a tag and wrap the scripts into
$(document).ready()
Please see the fiddle
As your Javascript code it suppose to show Content Here Less. Well. You have to do the following:
1- Be sure that you included the Jquery library
2- Place your Jquery code between script tag just before the closing </body> tag.
Checkout This DEMO
If you want to place your script in the head section, you have to use $document.ready(function(){// Your Code here});