so I've been tasked with making a website using Wordpress and on the homepage there's a slider that if you click on the buttons below, it's displays another image, simple right? Well, I've got the slider and I've got the buttons, I've added the jQuery and it doesn't want to work.
I first tried making the buttons actually buttons:
<button type="button" class="btn btn-success" id="hideshow-healthcare">Healthcare</button>
and that worked fine when I used this:
jQuery(document).ready(function() {
jQuery('#hideshow-healthcare').on('click', function() {
jQuery('#healthcare').show();
};
};
So after having it working like that, I moved on to making the buttons in to li's instead so that I could follow the design. Upon doing this, the slider no longer works. I've tried mulitple different things including adding the ID to everything in the li to see if that would work, and sadly not. I did some research and tried to change
jQuery('#hideshow-healthcare').on('click', function() {
to
jQuery('li#hideshow-healthcare').on('click', function() {
but still, no luck. I was hoping someone would be able to provide a solution to this problem.
Also, this is the li code I'm currently using:
<li><a id="hideshow-healthcare"><h5>HEALTHCARE</h5> Lighting to create a feeling of well being</a></li>
You need to add space after li element to find its descendants #hideshow-healthcare. It should be
jQuery('li #hideshow-healthcare').on('click', function() {
#hideshow-healthcare is child of li. Use descendant selector in jquery
jQuery('li a#hideshow-healthcare').on('click', function(event) {
event.preventDefault(); // prevents default action
// your code
});
Id be unique in html you just straightly write with id
jQuery('#hideshow-healthcare').on('click', function(event) {
event.preventDefault(); // prevents default action
// your code
});
Related
I have an issue with two buttons that share common html classes. Both buttons are part of a tutorial. As the tutorial goes through the steps the Skip button appears first. as the tutorial gets to the last step before moving on to anew tutorial page, the 3rd party JS package dynamically adds another class to the skip button and changes the inner html to Continue. My issue is below
One button is:
<a class="introjs-button introjs-skipbutton" role="button" tabindex="0">Skip</a>
The other button is
<a class="introjs-button introjs-skipbutton introjs-donebutton" role="button" tabindex="0">Continue</a>
These buttons are part of a tutorial guide with certain steps. They are not displayed at the same time. However, clicking the Skip button fires the same action as the Continue button, as displayed in the JS code below. I'd like the action to only Fire when the Skip button is clicked but it keeps firing on both and I cant figure out how to figure it out.
I'd like a certain action to fire but only fire when <a class="introjs-button introjs-skipbutton> is fired and NOT <a class="introjs-button introjs-skipbutton introjs-donebutton> is fired.
$("a.introjs-button.introjs-skipbutton").not(".introjs-donebutton").click(() => {
console.log('skipbuttontriggered')
this._app.skipTutorial = true;
})
I've tried various combinations and was hoping to get some insight on using the not() selector for triple stacked html classes.
You don't need to use :not(). You could just check it doesn't have the class.
$("a.introjs-button.introjs-skipbutton").click(() => {
if ( ! $(this).hasClass('introjs-donebutton') {
console.log('skipbuttontriggered')
this._app.skipTutorial = true;
}
})
The hasClass() documentation can be read here.
If you're adding and removing the introjs-donebutton class dynamically, you can do it with event delegation and a selector with :not().
$(document).on("click", "a.introjs-button.introjs-skipbutton:not(.introjs-donebutton)", () => {
console.log('skipbuttontriggered')
this._app.skipTutorial = true;
})
So I have a few "boxes" with an onclick function:
<div class="box" onclick="load(1);return false;"></div>
<div class="box" onclick="load(2);return false;"></div>
The onclick functions trigger a function that reads the content of a few seperate .php files (example1.php and example2.php).
These files contain other boxes made with fieldset instead of a div.
function load(num){
$("#loadthis").load("example"+num+".php");
}
And the function above is changing the content of this div down here:
<div id="loadthis">Load my fieldset boxes</div>
So far everything works, until I click on the fieldset boxes.
The background color of the fieldset should change when I click it and the radio inside the fieldset should be selected too (because of css styling), but both of this does not happen. But I can still select the radio when clicking the radio (not the box).
I have tested it in IE and in Chrome, this code works there most of the time.
But in firefox I cannot select the fieldset box 50% of the time.
I tried to experiment with the .on( class but it gives me the same effect.
$('fieldset.type-a').children('.row').children('.box.col-4').on("click", load);
function load(){
var index = $('fieldset.type-a').children('.row').children('.box.col-4').index( this );
index+=1;
$("#loadthis").load("fs"+index+".php");
}
Okay so after some searching I found that there is already an onclick function in a different .js file that being called:
function handleStep2() {
$('.step-form-2 input[type=radio]').change(function () {
$(this).closest('fieldset').find('.box').removeClass('active');
$(this).closest('.box').addClass('active');
$(this).attr('checked', 'checked');
});
$('.step-form-2 .select-box .box').click(function () {
$(this).find('input[type=radio]').trigger('change');
});
}
I am now going to try to merge the codes and see if that gets rid of the bug with the active class not being activated on click.
SOLVED: I solved it by indeed merging both the codes to 1 click function. Thanks for all your help guys, But I still wonder if this could be done a different way?
Look into event delegation, and if you're using jQuery it's easy
look into the jQuery API for .on(
Also you want to make sure you're using unobtrusive JS, so pull that out of your HTML, put it in a .js file as an event listener and load the script after the DOM has loaded as the last thing before your closing </body> tag
It should be a delay about loading php files content.
Is it work when you click one of them even takes time?
Maybe you should ajax for loading php files. By the way you can send data to php files using GET or POST methods.
You can check this examples.
If your function is initalized in an IIFE, inline js can´t access this function.
It´s weird that you say this sometimes works..
IIFE is a wrapper function to create capsules, so the client can´t modify your script in runtime.
Looks like this:
(function(){
/* code */
}());
It would be much better to create js-events:
on('body', 'click', '.box', function(e) {
console.log(e.target); // this is the clicked list item
});
Hope it helps..
alrighty Ive got what I hope is a rather easy question today for people knowledgeable in jquery. I have an toggle that activates on clicking a specific element, in this case I have targeted my logo image with an id of #logobutton. it works wonderfully however theres a problem, the animation also activates whenever I click on any and all other links on the page and even some random div boxed (like my nav bg). please note im very new to this javaScript jazz so I may be missing something you would consider quite obvious. thanks for the help!
here is the fiddle with all relevant code http://jsfiddle.net/tRf36/1/
jquery:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
hopefully someone can see if I have something targeted incorrectly or whatever is causing the issue of my generic rather than specific selection of clickable area to activate this bg animation.
My previous answer was completely off base, sorry for that. Looking at the jsfiddle that you posted it appears that you have the logo button like this <button ... /> the browser is then ignoring the /> and just wrapping everything in a button. So that means that both the gallery box and the nav bar are surrounded by the button that is activating the animation. Changing the button to be like this should fix it:
<button type="button" class="logo" id="logobutton" value=""></button>
close <button> tag properly using </button>
All elements below button are treated as children if you do not close properly.
Two aspects conspire to cause the effect:
You have nested your nav bar divs inside the #logobutton button.
Event bubbling causes events triggered on an embedded element to eventually reach the #logobutton button, being processed by the registered event handler.
A solution is to check for the triggering element of the click event:
$("#logobutton").click(function (eve) {
if ($(eve.target).attr("id") === "logobutton") {
$(".galbox").toggleClass("galbox-change");
}
});
You can test this modification with this fiddle.
You can learn more about event bubbling in particular and event processing in browsers following these links:
quirksmode (ppk)
MDN
In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?
You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});
I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.
I am working on a hand me down project that was written by someone who was clearly better at HTML and JavaScript than myself. The html has AJAX links like this:
<ul class="subNav">
<li><a link="contacts.html">Contacts</a></li>
<li><a link="contacts_add.html">Add Contact</a></li>
</ul>
Which I think are handled in this code:
$('.subNav li a').click(function() {
var href = $(this).attr('link')
$('#mainStage').load(href, function() {
pageLoad();
})
})
All of the code above works perfectly.
My problem is I can't seem to recreate this functionality. I am using this HTML:
<div class="nameTitle colorOne"><a link="contacts_add.html">
<span class="firstNameField">Contact Name</span>
</a></div>
and this JavaScript:
$('.nameTitle').click(function() {
alert('')
$('#mainStage').load("contacts_add.html", function() {
pageLoad();
})
})
When I click the "nameTitle" class it should load contacts_add.html into the mainStage section of the page but I cannot see anything happen. I am sure someone fluent with this style of coding could tell me why my event never fires but the earlier code does.
Thanks in advance,
You should try altering your code to something like this:
$('.nameTitle').click(function() {
//This line finds the address to load
var address = $(this).children("a").attr("link");
//This line loads the address and then runs the pageLoad function when it has completed
$('#mainStage').load(address, function() {
pageLoad();
});
});
If this doesnt work it may be because the html is loaded dynamically. In this case you need to use .on, see this link here.
In response to Brett's comment below ive put together a jsfiddle showing .on in action here. Also i added .preventDefault as this could cause a problem.
try with
$('.nameTitle a').click(function() {
It can be that you're trying with a browser which accepts click only on 'a' tags, albeit they're getting rare hopefully.
The 'click' event will never be raised on your div, since there is an inner a element with an href defined. Once you click, the event will be raised on the anchor link first which will, by default, redirect to the location specified by the href. In order to get this working, catch the click when it is raised at the a:
$('.nameTitle a').click(function(e) {
e.preventDefault(); // prevent browser from following href
alert('');
$('#mainStage').load("contacts_add.html", function() {
pageLoad();
});
});
Demo -- Commented out the load, since that page isn't on this server. Also notice I changed your a element to have attribute href instead of link.