i want to change the class of the element when i click on an icon
i click
if the curent class is 'text_area_box' then remove it and add the 'text_area_box_active'
i tested the if(element.classList.contains('text_area_box')) and got true as a result so that means the condition work perfectly... js code is bellow.
Now replacing the classes should work but there is no result on the html page
The problem is on the javascript code where the condition work perfectly but the page does not change
here is my code:
function update_function() {
var element = document.getElementById("text_area_box");
if(element.classList.contains('text_area_box')) /*the condition works perfectly*/
{
element.classList.remove('text_area_box');
element.classList.add('text_area_box_active');
}
else{
element.classList.remove('text_area_box_active');
element.classList.add('text_area_box');
}
}
.text_area_box_active{
position: relative;
}
.text_area_box {
position: relative;
display: none;
}
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i> <--- the button
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<div class="text_area_box" id="text_area_box"> <--- the class to change
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>
sorry if there is any lack of explanation.
It's working fine, your button was empty, so no click to call the function.
function update_function() {
var element = document.getElementById("text_area_box");
if(element.classList.contains('text_area_box')) /*the condition works perfectly*/
{
element.classList.remove('text_area_box');
element.classList.add('text_area_box_active');
}
else{
element.classList.remove('text_area_box_active');
element.classList.add('text_area_box');
}
}
.text_area_box_active{
position: relative;
}
.text_area_box {
position: relative;
display: none;
font-size: xx-large;
color: red;
}
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()">button</i> <--- the button
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<div class="text_area_box" id="text_area_box"> <--- the class to change
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>
I actualy was doing it all correctly but one small thing that i did not understend yet was causing the problem:
-When i changed document.getElementById('') to document.querySelector('') it worked fine.
javascript:
function update_function() {
var element = document.querySelector(".text_area_box"); // instead of getElementById
if(element.classList.contains('text_area_box')) /*the condition works perfectly*/
{
element.classList.remove('text_area_box');
element.classList.add('text_area_box_active');
}
else{
element.classList.remove('text_area_box_active');
element.classList.add('text_area_box');
}
}
.text_area_box_active{
position: relative;
}
.text_area_box {
position: relative;
display: none;
}
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i> <--- the button
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<div class="text_area_box" id="text_area_box"> <--- the class to change
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>
Related
I have a simple HTML drawer that contains product recommendations. Javascript is used to toggle it open and close. In the HTML, there are 2 prices, the regular price and the discounted price. Both are visible on load. The JS is supposed to hide the discounted price(current price), if the current price is the same as the old price. Because then it's not necessary to show both(identical prices). But if there is an offer, it's supposed to show both.
The problem is, my javascript for opening and closing the drawer is working, but the code for hiding/showing both prices aren't. And I know the code is fine because it works on another product recommendation template I'm using(which isn't a drawer, but normal on-page element).
I've tried putting the price-code before the drawer-function code, but then the drawer doesn't respond to clicks and does not open anymore.
When I use Preview in the software I'm using to inject product recommendations(Dynamic Yield), the prices are shown correctly. It's only when I preview it on the website itself, that it doesn't work. Both prices are shown even if they match.
Here is the JS:
(function() {
var container = document.querySelectorAll('.dy-sliding-drawer-container')[0];
var handler = container.querySelector('.dy-sliding-handle');
function toggle() {
if (container.className.indexOf('dy-open') > -1) {
container.className = container.className.replace('dy-open','');
} else {
container.className = container.className.trim() + ' dy-open';
}
}
handler.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggle();
});
})();
var mq = window.matchMedia( "(max-width: 599px)" );
var itemPrices = document.querySelectorAll('.price-box');
for(var i=0; i<itemPrices.length; i++){
var discount_price_element = itemPrices[i].getElementsByClassName("dynamic-price")[0];
var price_element = itemPrices[i].getElementsByClassName("regular-price")[0];
if(parseFloat(discount_price_element.innerHTML) == parseFloat(price_element.innerHTML)){
discount_price_element.style.display = "none";
if (mq.matches) {
price_element.style.fontSize = "16px";
price_element.style.paddingTop = "15px";
} else {
price_element.style.fontSize = "20px";
}
price_element.style.fontWeight = "700";
} else {
price_element.style.textDecoration = "line-through";
price_element.style.paddingLeft = "10px";
}
}
Is there anything I can do to make both codes work together? I've tried putting them in the same function, with no luck.
Here is the HTML(I guess the only relevant code here is the .price-box div, but I'm gonna paste everything in case you need it):
<div>
<div class="dy-sliding-drawer-container" data-dy-strategy-container="">
<div class="dy-sliding-handle">
<div class="dy-sliding-handle-text">
${Title}
</div>
</div>
<div class="dy-sliding-items-container dy-open">
${#Recommendation}
<a href="${Item Link}" class="dy-rv-rcom-item">
<div class="dy-rv-rcom-item-image-container item-${SKU}" style=" background-image: url(${Item Image}); background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;min-height: 50px;
min-width: 50px;">
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">${product_price_dynamic},-</span>
<span class="regular-price">${price},-</span>
</div>
</div>
<!-- button -->
<div class="product-item-actions add-to-cart-button-dy">
<div class="actions-primary">
<form data-role="tocart-form" action="https://www.norli.no/checkout/cart/add/uenc/${uenc}/product/${product_id}/" method="post">
<input type="hidden" name="product" value="${product_id}" tabindex="0">
<input type="hidden" name="uenc" value="${uenc}" tabindex="0">
<input name="form_key" type="hidden" value="${formkey}" tabindex="0">
<button type="submit" title="Handlekurv" class="action tocart primary" tabindex="0">
<span class="tocart--short">Legg til</span>
</button>
</form>
</div>
</div>
<div class="product actions product-item-actions read-more-button-dy" style="display: none !important;">
<div class="actions-primary">
<div class="fieldset">
<div class="actions">
<span class="out-of-stock-view-more lesmer-button" style="color:#FFF; display: none !important;">Les mer</span>
</div>
</div>
</div>
</div>
<!-- button end -->
</a>
${/Recommendation}
</div>
</div>
</div>
And if the CSS is needed, heres is the CSS for the relevant classes(old price and new price:
.price-box{
display: flex;
align-items: flex-end;
}
.dynamic-price{
color:#dd1768;
font-size:18px;
font-weight:700;
letter-spacing:-1.5px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.regular-price{
font-size:14px;
letter-spacing:-1px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
font-weight: 400;
}
Could anybody help me out? Keep in mind that the Javascript works fine for recommendation widgets which loads on-page, but not with this click-to-open drawer. Appreciate any help.
Your script does basically work - provided the variables in your template have been
replaced by actual values before the markup is rendered into the DOM. I have modified your data a little bit to demonstrate the correct behaviour on some same-price and some differing-price .price-box examples.
I also took the liberty of shortening your very verbose scripts. I have probably gone a bit too far, especially my .reduce() construct is not easy to read. But look at it as an extreme way of avoiding creating variable names.
(function(){
var container = document.querySelector('.dy-sliding-drawer-container');
container.querySelector('.dy-sliding-handle').onclick=e=>
container.classList.toggle("dy-open");
})();
// var mq = window.matchMedia( "(max-width: 599px)" );
document.querySelectorAll('.price-box').forEach(p=>{
[...p.querySelectorAll("span")].reduce((a,c)=>a.style.display=(a.textContent==c.textContent?"none":""))});
.dy-open {background-color:yellow}
.price-box{
display: flex;
align-items: flex-end;
}
.dynamic-price{
color:#dd1768;
font-size:18px;
font-weight:700;
letter-spacing:-1.5px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.regular-price{
font-size:14px;
letter-spacing:-1px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
font-weight: 400;
}
<div>
<div class="dy-sliding-drawer-container" data-dy-strategy-container="">
<div class="dy-sliding-handle">
<div class="dy-sliding-handle-text">
${Title}
</div>
</div>
<div class="dy-sliding-items-container">
${#Recommendation}
<a href="#${Item Link}" class="dy-rv-rcom-item">
<div class="dy-rv-rcom-item-image-container item-${SKU}" style=" background-image: url(${Item Image}); background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;min-height: 50px;
min-width: 50px;">
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">50,-</span>
<span class="regular-price">50,-</span>
</div>
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">50,-</span>
<span class="regular-price">60,-</span>
</div>
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">60,-</span>
<span class="regular-price">60,-</span>
</div>
</div>
<!-- button -->
<div class="product-item-actions add-to-cart-button-dy">
<div class="actions-primary">
<form data-role="tocart-form" action="https://www.norli.no/checkout/cart/add/uenc/${uenc}/product/${product_id}/" method="post">
<input type="hidden" name="product" value="${product_id}" tabindex="0">
<input type="hidden" name="uenc" value="${uenc}" tabindex="0">
<input name="form_key" type="hidden" value="${formkey}" tabindex="0">
<button type="submit" title="Handlekurv" class="action tocart primary" tabindex="0">
<span class="tocart--short">Legg til</span>
</button>
</form>
</div>
</div>
<div class="product actions product-item-actions read-more-button-dy" style="display: none !important;">
<div class="actions-primary">
<div class="fieldset">
<div class="actions">
<span class="out-of-stock-view-more lesmer-button" style="color:#FFF; display: none !important;">Les mer</span>
</div>
</div>
</div>
</div>
<!-- button end -->
</a>
${/Recommendation}
</div>
</div>
</div>
Explanation:
The .reduce() over all the <span>s in a .price-box div relies on the fact that the "reduced price" span always comes before the "regular price" one and that you will always have exactly two elements. When reduce() is called without the second (starting value) argument it takes the first array element (the "reduced price" span) as the starting value (a). The (only) "current" value in the iteration (c) will then be the regular price span. When the .textContent of both elements are the same the a span will be hidden, otherwise it will remain visible.
I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<span class="day">14</span> <span class="month">April</span>
</div>
Fransa Geneline Islak Mendil İhracı
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
This is the element I want to have changes in the css codes.
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}
You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});
From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!
You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>
seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>
I am trying to preventDefault mouseover on some condition without success. The idea is to show/hide icon next to disabled input on mouseover/mouseleave and keep it on input enable and it works fine. What I am not able to do is to hide icon on blur.
HTML
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<i class="trash icon" style="display: none;"></i>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 1" type="text" />
</div>
</div>
</div>
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<i class="trash icon" style="display: none;"></i>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 2" type="text" />
</div>
</div>
</div>
JS
// Get input on dblClick
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
});
// Disabled input on blur
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
});
// Show trash icon on hover
$('.element').mouseover(function() {
$(this).find('.trash').css('display', 'block');
})
// Would like to keep trash icon on input focus and hide icon on blur
$('.element').mouseleave(function(event) {
if($(this).find('input').is(":focus")) {
event.preventDefault();
} else {
$(this).find('.trash').hide();
}
});
Here is a fiddle
Thanks for help
Just fix it in CSS with first adding an active class to .element first. Always better to use CSS
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
$(this).closest('.element').addClass('active');
});
/* Disable input on blur page name */
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
$(this).closest('.element').removeClass('active');
});
and in CSS
.page-element .trash,
.page-element .setting {
display: none;
}
.page-element:hover .trash,
.page-element:hover .setting {
display: block;
}
.page-element.active .trash,
.page-element.active .setting {
display: block !important
}
Here is http://jsfiddle.net/Greggg/e1x7jnor/6/
I have code like this,
<div class="wrapper">
<div class="box">
<h4 style="padding-left: 11px; padding-top: 15px;">Main title</h4>
<div class="hideunhide">
<h5 style="padding-left: 14px;">sub title1</h5>
<div class="horizontal controls">
</div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title2</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title3</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
</div>
</div>
</div>
When i click one the should be toggle(hide/unhide)
i have tried something like this,
$('.box').click(function() {
$(this).css('display', 'none')
$('.hideunhide').css('display', 'block')
});
But it is not working please help.
Fiddle: http://jsfiddle.net/ctrY4/
pelase have a look on below url
Fiddler!
$(function () {
$('.box').click(function () {
$('.hideunhide').slideToggle();
});
});
if you want to make .box class has to toggle then do like this..
$('.box').on('click',function(){
$('.hideunhide').toggle();
});
It seems that you hide a .box element, which is a parent of .hideunhide element. So if the parent element is hidden, all it's children are invisibile, regardless of their CSS display value.
You should reorganize your html.
Are you looking something like a toggle for the hideunhide?
Solution if it is a yes:
$('.box').click(function(){
$('.hideunhide').toggle();
});
Created a fiddle for the proposed solution: http://jsfiddle.net/ctrY4/1/
use code something like this :
$('.box').click(function(){
$('hideunhide').toggle();
});
*Before used to this correct your html code.
$('h4').click(function(){
$('.hideunhide').fadeOut(1000);
$('.hideunhide').fadeIn(1000);
});
This will hide and unhide .hideunhide elements in defined milliseconds interval when you click to h4.
Fiddle
By seeing you code, it seems you need to hide the <h4> tag. Try below.
$('.box h4').click(function(){
$(".hideunhide").slideToggle();
});
and fiddle