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/
Related
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>
I have created a line of code where the user will click on the text, which will change color to red. This is linked to a checkbox feature which is checked every time the text is red. The checkbox is meant to be invisible by the way. But for the purpose of helping me I have increased the opacity to 100 instead of 0.
I am oblivious as to why the code wont work when I place it inside code for a modal box, which is where I want it to be in the first place.
The text changes color only when you interact with the checkbox, but I also want it to change the color when it gets clicked.
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
.onlyThese{
cursor:pointer;
}
.checkbox input[type="checkbox"] {
opacity: 100;
}
input[type=checkbox]:checked + label {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<div class="checkbox">
<input type="checkbox" id="group1" class="sector-print-temp">
<label for="group1" class="onlyThese">Publication </label>
</div>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5" class="modal" style="background-color:white">
<div style="float:left;">
<div class="checkbox">
<input type="checkbox" id="group1" class="sector-print-temp">
<label for="group1" class="onlyThese">Publication </label>
</div>
</div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
My expectations of the code should be the following:
The user clicks on the text
Text changes color to red
When the text changes color to red, the checkbox is checked
it's useless to try to do such complicated things, the CSS allows to directly fix this question, whether in a modal window or not
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
.onlyThese { cursor: pointer }
<input type="checkbox" id="group1"> <label for="group1" class="onlyThese">Publication </label>
its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!
Here is the code I have: http://jsfiddle.net/Draven/rEPXM/23/
I'd like to know how I can hide that Add submit button until I click the + image to add input boxes to the form.
I don't want to add the submit button next to the input box because I want to be able to add multiple input boxes and submit them all when I click Add.
HTML
<div id="left">
<div class="box">
<div class="boxtitle"><span class="boxtitleleftgap"> </span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><div class="addplus"> </div></div></span></div>
<div class="boxcontent">
<form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
<a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
<div id="foldercontainer"><input type="submit" value="Add"></div>
</form>
</div>
</div>
</div>
jQuery
function AddFolder() {
$('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}
Just give the button an ID, and make it start hidden
<input type="submit" id="addButton" value="Add" style="display: none;">
Then use the show() jQuery method:
$("#addButton").show();
http://jsfiddle.net/TcFhy/
Here's a way you could do this... also, cleaned up the method used for making these input boxes a bit:
http://jsfiddle.net/mori57/4JANS/
So, in your html you might have:
<div id="foldercontainer">
<input id="addSubmit" type="submit" value="Add">
<input id="folderName" name="folder[]" type="text" size="20" style="" />
</div>
and your CSS might be:
#foldercontainer #addSubmit {
display:none;
}
#foldercontainer #folderName {
display:none;
width: 120px;
background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left;
color: #000;
border: 1px solid #cdc2ab;
padding: 2px;
margin: 0px;
vertical-align: middle;
}
and your script could be:
// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
folderAddCt = 0;
function AddFolder() {
if(is_vis == false){
// if it's not visible, show the input boxes and
$('#foldercontainer input').show();
// set the flag true
is_vis = true;
} else {
// if visible, create a clone of the first add-folder
// text box with the .clone() method
$folderTB = $("#folderName").clone();
// give it a unique ID
$folderTB.attr("id","folderName_" + folderAddCt++);
// and append it to the container
$("#foldercontainer").append($folderTB);
}
}
I moved the button out of the folder wrap, and I am showing it when you add a new folder. This way the button will stay at the bottom when adding new folders. I also removed the inline style, and replaced it with a class.
This is used to display the button, just add it to the AddFolder() function:
$('#addBtn').show();
I am hiding it with CSS like this:
#addBtn { display: none;}
I moved the button out of the #foldercontainer, this way it will always stay at the bottom when you add multiple folders, as you wanted:
<div id="foldercontainer"></div>
<input id="addBtn" type="submit" value="Add">
Look here for the jsFiddle: http://jsfiddle.net/kmx4Y/1/
$('form#folderform input[type=submit]').hide();
Then show the add button after you click the submit
http://jsfiddle.net/SQh8L/
I'm trying to create a notification system for my website, but am having problem for some unknown reason. I have a link when a user clicks it, it fire off a JavaScript function, then checks if a div is hidden, if it is hidden, it show it and load a PHP script within that div.
I probably overlooked something
my JavaScript code:
// show notifications
$(".noti_bubble").click(function () {
// check the visibility of the element
if($(".show-note").is(":hidden")) {
$(".show-note").show();
alert('noti_bubble has been perform');
$(".show-note").load("scripts/notifications.php");
}else{
$(".show-note").hide();
}
});
my html code:
<div style="width:900px; margin:0 auto;">
<div style="width:250px; float:right;">
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>
<div class="notif_barline"></div>
<div id="notifyContent">
<div class="show-note"></div>
</div>
</div>
</div>
</div>
</div>
the .show-note has a css of display:none; as well.
the clickable link:
(0)
Add the complete callback to .load():
$(".show-note").load("scripts/notifications.php", function(response, status, xhr) {
alert(status);
});
http://jsfiddle.net/9M396/
html
<div style="width:500px; margin:0 auto;">
<div style="width:250px; float:right;">
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>
<div class="notif_barline"></div>
<div id="notifyContent">
<div class="show-note"></div>
</div>
</div>
</div>
</div>
</div>
(0)
js:
// show notifications
$(".noti_bubble").click(function () {
var div = $(".show-note");
if(div.is(":hidden")) {
div.show();
div.load("/echo/json/?json={}");
}else{
div.hide();
}
return false;
});
css:
div
{
border: 1px solid black;
}
.show-note
{
min-height: 100px;
display:none;
}