I have multiple buttons and when I click each one I want an element associated with that button to slide down and then when I click the same button the same element slides back up. The code below works but if I click one button it slides down then I click the second button nothing happens because it runs the else if part of the code. How would I fix this?
var moreOption = 1;
$(".more-button").click(function(){
var buttonNumber = $(this).attr('buttonNumber');
if (moreOption === 1) {
$("#more"+buttonNumber).slideDown();
moreOption = 2;
} else if (moreOption === 2) {
$("#more"+buttonNumber).slideUp();
moreOption = 1;
}
});
Just use a data-attribute on the button and switch the state manually like this:
<button class="more-button" data-showMore="1" data-buttonNumber="1"/>
$(".more-button").click(function(){
var buttonNumber = $(this).data('buttonNumber');
var moreOption = $(this).data('showMore');
if (moreOption == '1') {
$("#more"+buttonNumber).slideDown();
$(this).data('showMore', '2');
} else if (moreOption == '2') {
$("#more"+buttonNumber).slideUp();
$(this).data('showMore', '1');
}
});
Related
I have a Bootstrap Toggle element as follows:
<input id="neutralInd" type="checkbox" name="neutralSite" onchange="setEventSite('neutral')" data-toggle="toggle" data-on="Yes" data-off="No">
Upon clicking it, it will toggle between Yes and No, and it successfully executes a JavaScript function that does other stuff (code below).
Here's what I want to do:
Upon selecting a Radio Button elsewhere on the page, it will execute JavaScript that toggles the Bootstrap Toggle to No. Here is the code I have so far:
Defining the radio buttons:
<div class="radio">
<label><input type="radio" id="homeTeam<?php echo $row; ?>" name="homeTeam" onchange="setEventSite('team')"></label>
</div>
JavaScript function code:
function setEventSite(chosen) {
var neutralInd = document.getElementById("neutralInd"); // Toggle
var locationOverride = document.getElementById("locationOverride"); // Text field
var homeTeam = document.getElementsByName("homeTeam"); // Radio buttons
if (chosen == "neutral") { // Toggle was clicked (changed)
if (neutralInd.checked) {
locationOverride.readOnly = false;
for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; }
}
else {
locationOverride.value = "";
locationOverride.readOnly = true;
}
} else if (chosen == "team") // Radio button was selected
{
neutralInd.checked = false;
neutralInd.value="off";
locationOverride.value = "";
locationOverride.readOnly = true;
}
}
When I choose a Radio Button, it successfully sets the Text field to Readonly, but the Bootstrap Toggle does not appear to toggle (it remains set to Yes when it should switch to No). However, when I click the Toggle again, it stays on Yes yet executes the JavaScript as if it were being set to Yes. So that makes me think the value of the Toggle is successfully being set to No when I select a Radio Button, but the Toggle isn't displaying/animating the toggle to No. So maybe I'm asking how to make the Toggle show the animation of toggling to No.
Thanks!
Figured it out with the help of a good friend.
I needed to add the "off" class to the parent element of the Toggle when the radio button was selected. So I had to add 2 lines to the function, and it works as desired:
var parentInd = $("#neutralInd").parent();
parentInd.addClass("off");
So here is the resulting function code:
function setEventSite(chosen) {
var neutralInd = document.getElementById("neutralInd");
var locationOverride = document.getElementById("locationOverride");
var homeTeam = document.getElementsByName("homeTeam");
var parentInd = $("#neutralInd").parent();
if (chosen == "neutral") {
if (neutralInd.checked) {
locationOverride.readOnly = false;
for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; }
}
else {
locationOverride.value = "";
locationOverride.readOnly = true;
}
} else if (chosen == "team")
{
neutralInd.checked = false;
neutralInd.value="off";
parentInd.addClass("off");
locationOverride.value = "";
locationOverride.readOnly = true;
}
}
I am trying to copy the functionality of JSFiddle#1 into my JSFiddle#2
Brief Description of above two fiddles:
1) JSfiddle #1 : When a user selects third option from the dropdown menu, it displays the alert popup.
2) JSFiddle #2: I have tried to plug in the JSFiddle #1 code into this fiddle inside the html: $('#name_status_popup_dialog').html(), as shown in the fiddle (commented lines of code) but it doesn't work. The reason I am putting it inside html: $('#name_status_popup_dialog').html(), is because it is responsible for displaying the HTML contents in the dialog. Here is the documentation of html parameter used in the popModal library. Am I defining the function for the popup dialog correctly inside html() for JsFiddle #2? Please advise. Thanks
It's as simple as putting the code outside of html callback. See this Fiddle.
jQuery(function($) {
var id_value;
$(document).on('change', '#change_name_statusName', function checkSelection() {
const change_name_statusNameVal = this.value
console.log("Am I in change listner?");
if (change_name_statusNameVal == "First") {
id_value = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select third option?");
id_value = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value = 4000;
}
});
$("#change_name_status").click(function() {
$('#change_name_status').popModal({
html: $('#name_status_popup_dialog').html(),
onOkBut: function() {
var change_name_statusNameVal = $("#change_name_statusName").val();
if (change_name_statusNameVal == "First") {
id_value_ = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value_ = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select Third option?");
id_value_ = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value_ = 4000;
}
}
});
});
});
Also, notice that I attached the event listener on the document not the element itself since the element is dynamically generated.
I was trying to make more functions on one click button. I am trying to detect how much the user is clicking. If the user clicks onetime: do something, If the user clicks second time: do something. if the user clicks for the third time: do something. But my code is not working at all. can someone tell me what is going on?
var ButtonClickEen = document.getElementById("buttonEen");
var ButtonClickTwee = document.getElementById('buttonTwee');
var clicks = 0;
buttonC.onclick = function(event){
clicks += 1;
};
if (clicks === 1) {
/* 1st click, Do something */
} if (clicks === 2) {
/* 2nd click, Do something else */
};
You have many script errors, starting with selection of elements from DOM at beginning, but main error is your click event function, which has to look like this:
var buttonC = document.getElementById("buttonC");
var clicks = 0;
buttonC.onclick = function(event){
clicks += 1;
if (clicks == 1) {
alert('Click 1');
} else if (clicks == 2) {
alert('Click 2');
} else {
alert('Click 3 or more');
};
};
I have a search suggestion div that appears when you keyUp an input. This works fine, but now I am trying to make keyboard shortcuts in action.
I want a behavior like when you click down keyboard arrow button a span gets selected and if it is selected then another span that is after gets selected, similarly, if you click up arrow an upward span gets selected, when you click enter then link opens.
I am stuck because I could not remove a:hover and could not add classes to it. Even after I have basically no idea how to do it. But I really tried hard and a lot..
Here is a jsfiddle link (type anything in field). maybe somebody will help me.
This code should go when the request is made and data is being returned:
<script type="text/javascript">
$(document).ready(function(){
total = 3;
$(".result-item").mouseenter(
function(){
hovered = $(this).attr("id");
total = 3;
$(".result-item").each(function(){
$(this).children("a").css({
'background-color':'#e4e4e4',
'color':'#000000'
});
$(this).find(".searchheading").css({
'color':'#191919'
});
$(this).find(".searchcaption").css({
'color':'#555555'
});
});
$(this).children("a").css({
'background-color':'#b7b7b7',
'color':'#ffffff'
});
$(this).find(".searchheading").css({
'color':'#ffffff'
});
$(this).find(".searchcaption").css({
'color':'#f1f1f1'
});
}
);
});
</script>
And this code on a page where request is made:
$("#suggestions").hide();
$("#search").bind('keyup', function(event){
if (event.which == 40 || event.which == 38 || event.which == 13) return false;
else
{
hovered = undefined;
lookup($(this).val());
}
});
$("#search").bind('keydown', 'down', function(evt){
if ($("#suggestions").is(":visible"))
{
if (typeof hovered == 'undefined')
{
$("#result-item-0").trigger("mouseenter");
return;
}
count = parseInt($("#"+hovered).attr("count"));
next = (count + 1);
if (next == total)
next = 0;
$("#result-item-"+next).trigger("mouseenter");
}
});
$("#search").bind('keydown', 'up', function(evt){
if ($("#suggestions").is(":visible"))
{
if (typeof hovered == 'undefined')
{
$("#result-item-"+(total-1)).trigger("mouseenter");
return;
}
count = parseInt($("#"+hovered).attr("count"));
prev = (count - 1);
if (prev == -1)
prev = (total-1);
$("#result-item-"+prev).trigger("mouseenter");
}
});
$("#search").bind('keydown', 'return', function(evt){
if ($("#suggestions").is(":visible"))
{
if (typeof hovered == 'undefined')
{
str = $("#search").val();
window.location.href = urlencode(str); // urlencode is a custom function
return false;
}
count = parseInt($("#"+hovered).attr("count"));
current = count;
$("#result-item-"+current).trigger("mouseenter");
$("#suggestions").fadeOut();
window.location.href = $("#"+hovered).children("a").attr("href");
}
});
})
;
Also I removed onkeyup="" attribute on element, this approach is nicer.
I am designing a page where it displays the staff details in following structure :
user can click anywhere in the details box and the checkbox will get selected along with the change in the className of the details <div> box.
The problem i m facing is when i click anywhere in the details box it works fine.. but when i click on checkbox it only changes the className but doesnt make any changes to checkbox.
Also there is one condition, few users are allowed to selected limited staff at a time and few are allowed to select all of them..
I have assigned a myClick() function to the outer <div> box (one with red border)
and the function is :
var selectedCount = 0;
myClick = function(myObj,event)
{
var trgt =(event.srcElement) ? event.srcElement : event.target;
tgName = trgt.tagName;
//following statement gives me correct details element event though i clicked on any child tags
theElem = (tgName == 'DIV') ? trgt : ( (tgName == 'B') ? trgt.parentNode.parentNode : trgt.parentNode);
if(allowed_selection == 'unlimited')
{
if(theElem.className == 'details_clicked')
{
theElem.className = 'details';
theElem.getElementsByTagName('input')[0].checked = false;
}
else if(theElem.className == 'details_hover')
{
theElem.className = 'details_clicked';
if(tgName != 'INPUT') theElem.getElementsByTagName('input')[0].checked = true;
}
}
else
{
if(theElem.className == 'details_clicked')
{
theElem.className = 'details';
theElem.getElementsByTagName('input')[0].checked = false;
selectedCount--;
}
else if(theElem.className == 'details_hover')
{
if(selectedCount == allowed_selection ) return false;
theElem.className = 'details_clicked';
//i think, this is the suspicious area for errors
theElem.getElementsByTagName('input')[0].checked = true;
selectedCount++;
}
}
return false;
};
The problem is these return lines in your function:
return false;
When you connect an event to a form element that performs an action, such as a checkbox or button, returning false will prevent that default action. It stops the event from taking place as it regularly would.
You could try something like this at the top of your function:
var returnValue = (tgName == 'INPUT' && trgt.type == "checkbox") ? true : false;
And then when calling 'return ', use:
return returnValue;
If you return true you allow the checkbox to act as normal and check / uncheck itself.