We Keep Coding

How to change onClick button in knockoutjs

I have a html with some css:
<label class="label-checkbox">
<input type="checkbox" data-bind="click: clickedMultipleServicesButton, checked: checkedMultipleServicesButton, css: {checked: true}">
<span style="font-size:14px !important">Test Button</span>
</label>
<style>
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 8px 11px;
border: 1px solid #ccc;
display: inline-block;
color: #ffffff;
border-radius: 6px;
margin: 7px;
background: #253965;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #ffd800;
}
</style>
It works when I remove data-bindings. On click it colors the blue button a yellow one and opposite.
But however, when I add data-binding: click it doesnt work anymore.
I assume that I need to dynamically attach css classes on click event?
Desired behavior:
I want to have data-bind="click: someFunction" but when I click, to have css behavior, and to have function that will catch when is the button checked, and when it is not.

Yes I'm not sure how to manipulate pseudo-classes in the knockout but you can dynamically add and remove CSS class:
<label class="label-checkbox" >
<input type="checkbox" data-bind="click: clickedMultipleServicesButton, css: checkedMultipleServicesButton() && 'checked'"/>
<span style="font-size:14px !important">Test Button</span>
</label>
<style>
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 8px 11px;
border: 1px solid #ccc;
display: inline-block;
color: #ffffff;
border-radius: 6px;
margin: 7px;
background: #253965;
user-select: none;
}
label.label-checkbox input.checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #ffd800;
}
</style>
note that I turned your input:checked into input.checked.
Code in the view model:
self.checkedMultipleServicesButton = ko.observable(false);
self.clickedMultipleServicesButton = function (e) {
self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton());
}

Why hover selector doesn't work with clases?

I have set the styles for links (active, link, etc), but then I want to do a button with totally different styles so I tried something like this:
.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}
.r-button:hover { cursor: selector; color:ivory;}
<a class="r-button" onclick="document.getElementById('menu').style.display='block'"> Click button </a>
But then I realized that :hover doesn't work with clases. Why is that? What others chances do I have to do the same?

You will need to either REMOVE !important from your color in .r-button or add it to .r-button:hover 's color
.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}
.r-button:hover { cursor: selector; color:ivory !important;}
<a class="r-button" onclick="document.getElementById('menu').style.display='block'"> Click button </a>

It does, your color: black !important; is overriding the hover and that selector isn't a valid cursor. Try pointer on hover.
.r-button:hover { cursor: pointer; }

Your :hover pseudo element was being overwritten with !important. Avoid using !important rules within your default class.
Bonus tip! Remove cursor: pointer for anchor tags, and simply have an empty href="#" attribute for better accessibility.
.r-button {
padding: 4px 52px;
display: inline-block;
text-align: center;
font-size: 16px;
text-decoration: none;
color: black;
border-radius: 12px;
border: 1px inset #282c37;
}
.r-button:hover {
background-color: #282c37;
color: ivory;
}
<a class="r-button" href="#" onclick="document.getElementById('menu').style.display='block'">Click button</a>

jquery setinterval not working no console error

im trying to add and remove class every 1 second but its now working and there is no console error
im actually trying to change one of my menu items color and background color to make attention i cant solve :(
there is my jquery html and css code
jquery
function ds1() {
$("#h").addClass("ds");
};
function ds2() {
$("#h").removeClass("ds");
};
function ds() {
if ( $("#h").css("color") == ("#000000") ){
$("#h").addClass("ds");
}else{
$("#h").removeClass("ds");
}
};
setInterval(ds , 1000);
html
<ul id="alt_menu2">
<li>Ana sayfa</li>
<li>Modlar</li>
<li>Kaynak paketleri</li>
<li>Haritalar</li>
<li>Kendin yap</li>
<li>Her ay premium</li>
<li>Yardım</li>
</ul>
css
#alt_menu2{
width: 1020px;
height: 50px;
list-style: none;
display: block;
}
#alt_menu2 li{
display: block;
float: left;
cursor: pointer;
border-style: solid;
border-width: 0px 1px 0px 0px;
border-color: #cccccc;
}
#alt_menu2 li a,.heraypremium{
padding: 16px 18px 15px 17px;
text-decoration: none;
display: block;
text-align: center;
color: #000000;
background-color: #ffffff;
/*transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s
-o-transition: 0.5s;*/
}
#alt_menu2 li a:hover{
padding: 12px 18px 15px 17px;
border-width: 4px 0px 0px 0px;
border-color: #cccccc;
border-style: solid;
}
.ds{
background-color: #303030 !important;
color: #ffffff !important;
}

when do ds() with the parentheses, you're actually calling the action then.
try
setInterval(function(){console.log('interval ran')},1000) //in your case, you already have a function you want to call so
setInterval(ds,1000);

jQuery dragenter or dragover to include children

I am working on an upload script at the moment, and of course it has drag and drop capabilities.
However I am trying to get this to work when I drag a file over my element it adds the class drag-over however because my element has children it is constantly firing because it enters and leaves the element.
What I want to know is how can I expand the *dragenter* / *dragover* to include the main elements children also?
Here is a trimmed down version of my code (please note I have disabled the file input):
$(document).ready(function(){
$(window).on('dragenter', function(){
$(this).preventDefault();
});
$('#drag-and-drop-zone').on('dragenter', function(){
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').on('dragleave', function(){
$(this).removeClass('drag-over');
});
});
.uploader
{
width: 100%;
background-color: #f9f9f9;
color: #92AAB0;
text-align: center;
vertical-align: middle;
padding: 30px 0px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 200%;
box-shadow: inset 0px 0px 20px #c9afb2;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.uploader div.or {
font-size: 50%;
font-weight: bold;
color: #C0C0C0;
padding: 10px;
}
.uploader div.browser label {
background-color: #ffffff;
border: 2px solid #f44;
padding: 5px 15px;
color: #f44;
padding: 6px 0px;
font-size: 40%;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
position: relative;
overflow: hidden;
display: block;
width: 300px;
margin: 20px auto 0px auto;
transition: all 0.3s linear 0s;
}
.uploader div.browser span {
cursor: pointer;
}
.uploader div.browser input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
.uploader div.browser label:hover {
background-color: #f44;
color: #fff;
border: 2px solid #fff;
}
.drag-over{
border: 2px solid #00aef0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
<div>Drag & Drop Images Here</div>
<div class="or">-or-</div>
<div class="browser">
<label>
<span>Select Image</span>
<input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
</label>
</div>
</div>

Solved it!!
It is a simple case of instead on on('dragenter') I needed to use bind('dragover')
$(document).ready(function(){
$(window).on('dragenter', function(){
$(this).preventDefault();
});
$('#drag-and-drop-zone').bind('dragover', function(){
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').bind('dragleave', function(){
$(this).removeClass('drag-over');
});
});
.uploader
{
width: 100%;
background-color: #f9f9f9;
color: #92AAB0;
text-align: center;
vertical-align: middle;
padding: 30px 0px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 200%;
box-shadow: inset 0px 0px 20px #c9afb2;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.uploader div.or {
font-size: 50%;
font-weight: bold;
color: #C0C0C0;
padding: 10px;
}
.uploader div.browser label {
background-color: #ffffff;
border: 2px solid #f44;
padding: 5px 15px;
color: #f44;
padding: 6px 0px;
font-size: 40%;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
position: relative;
overflow: hidden;
display: block;
width: 300px;
margin: 20px auto 0px auto;
transition: all 0.3s linear 0s;
}
.uploader div.browser span {
cursor: pointer;
}
.uploader div.browser input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
.uploader div.browser label:hover {
background-color: #f44;
color: #fff;
border: 2px solid #fff;
}
.drag-over{
border: 2px solid #00aef0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
<div>Drag & Drop Images Here</div>
<div class="or">-or-</div>
<div class="browser">
<label>
<span>Select Image</span>
<input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
</label>
</div>
</div>

Apparently this problem is more recurrent than I thought since I found at least 5 questions associated with the same topic.
Unlike "mouseover", the events "dragover" and "dragleave" do not consider the child elements as a whole, so each time the mouse passes over any of the children, "dragleave" will be triggered.
Thinking about the upload of files, I created a widget that allows:
Drag and drop desktop files using $ _FILES
Drag and drop to browser images/elements or url using $ _POST and cURL
Attach a device file using button using $ _FILES
Use input to write/paste url images/elements using $ _POST and cURL
The problem: As everything, both form inputs and images, are within DIVs children, "dragleave" was triggered even if it did not leave the dashed line. Using the attribute "pointer-events: none" is not an alternative since methods 3 and 4 need to trigger "onchange" events.
The solution? An overlapping DIV that covers all the drop-container when the mouse enters, and the only one with child elements with "pointer-events: none".
The structure:
div #drop-container: main div, keep all togheter
div #drop-area: "dragenter" listener and inmediate trigger #drop-pupup
div #drop-pupup: at same leval as #drop-area, "dragenter", "dragleave" and "drop" listener
Then, when the mouse enters by dragging an element to #drop-area, inmediatly shows #drop-pupup ahead and successively the events are on this div and not the initial receiver.
Here is the JS/jQuery code. I took the liberty to leave the PoC so do not lose all the time I lost.
jQuery(document).on('dragover', '#drop-area', function(event) {
event.preventDefault();
event.stopPropagation();
jQuery('#drop-popup').css('display','block');
});
jQuery(document).on('dragover dragleave drop', '#drop-popup', function(event) {
event.preventDefault();
event.stopPropagation();
console.log(event.type);
// layout and drop events
if ( event.type == 'dragover') {
jQuery('#drop-popup').css('display','block');
}
else {
jQuery('#drop-popup').css('display','none');
if ( event.type == 'drop' ) {
// do what you want to do
// for files: use event.originalEvent.dataTransfer.files
// for web dragged elements: use event.originalEvent.dataTransfer.getData('Text') and CURL to capture
}
}
});
body {
background: #ffffff;
margin: 0px;
font-family: sans-serif;
}
#drop-container {
margin: 100px 10%; /* for online testing purposes only */
width: 80%; /* for jsfiddle purposes only */
display: block;
float: left;
overflow: hidden;
box-sizing: content-box;
position: relative; /* needed to use absolute on #drop-popup */
border-radius: 5px;
text-align: center;
cursor: default;
border: 2px dashed #000000;
}
#drop-area {
display: block;
float: left;
padding: 10px;
width: 100%;
}
#drop-popup {
display: none;
box-sizing: content-box;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(to BOTTOM, rgba(245, 245, 245, 1) , rgba(245, 245, 245, 0));
height: 512px;
padding: 20px;
z-index: 20;
}
#drop-popup > p {
pointer-events: none;
}
<html>
<head>
<title>Drag and Drop</title>
</head>
<body>
<div id="drop-container">
<div id="drop-area">
<p>Child paragraph content inside drop area saying "drop a file or an image in the dashed area"</p>
<div>This is a child div No. 1</div>
<div>This is a child div No. 2</div>
</div>
<div id="drop-popup">
<p>This DIV will cover all childs on main DIV dropover event and current P tag is the only one with CSS "pointer-events: none;"</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
</body>
<html>
About jQuery "on", use it with the div id inside on, so you can start event triggers starting "uploading box" hidden.
Finally, I preferred to use "dragover" over "dragenter" because it has a small delay (milliseconds) that favors performance
(https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event).

You can simply hide elements from the mouse interaction with styling:
e.g. add this to the child elements:
pointer-events: none;
Unfortunately support is not great in IE for this: http://caniuse.com/#feat=pointer-events

I found 2 other working solutions.
It works only if you do not have other controller elements (edit, delete) inside the area, because this solution blocks them too:
#drop * {pointer-events: none;}
There is a better solution.
The idea is that you increase a counter every time you enter/hover into/on a new child element and decrease the counter when you leave one of them.
$(document).ready(function(){
var dropzoneCounter = 0;
$('#drag-and-drop-zone').on('dragenter', function(){
dropzoneCounter++;
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').bind('dragleave', function(){
dropzoneCounter--;
if (dropzoneCounter === 0) {
$(this).removeClass('drag-over');
}
});
$('#drag-and-drop-zone').bind('drop', function(){
dropzoneCounter = 0;
$(this).removeClass('drag-over');
});
});

Which CSS should I apply to appear tool tip over a text box?

I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.

you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/

First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.