Been making this websites for a bit today as I've been getting back into making websites. I'm trying to use jquery and have even tried pure javascript to get this click button to work. I went through and copied and pasted the entirety of this pages code into jsfiddle and for some reason it refuses to work in my code but works just fine when I put it into jsfiddle.
So when you click the button on the top right, its going to give the div below a new class. You can see it works here in jsfiddle but for some reason it refuses to work in my copy on my computer.
My html page is correctly loading jquery because I've used .resize() already but it refuses to allow me to use any version of click in any way or form.
Does anyone have any insight as to what may cause this click function to stop working?
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
https://jsfiddle.net/nathanahartmann/a3s9zjk6/3/
Browser plugins? I know I've shot myself in the foot because my ad blocking or social media blocking plugins mess with frameworks and other java-script behavior.
Seems to work fine now: JS Fiddle
You were missing a lot of ';'s throughout this function:
var banner = $("#banner-message");
var button = $("#rHotBar");
// handle click and add class
button.on('click', function(){
banner.addClass("alt");
});
Similarly, you were referencing the image for var button, not the outer class, the click was registering on the outer div, not the image itself! :)
Weirdest thing ever, It's where it's referencing Jquery in relation to my javascript. For some reason I just posted
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
a second time down below to see what it would do and for some reason it started working. Not really sure why it's doing this but it seemed to work for some reason. It's not referencing Jquery correctly somehow?
Related
I have the following page https://german-academic-institute.eu/faqs/ with the WPBakery plugin that has the Accordion menu for FAQs in the middle of the page. All those menus are made to be closed, but for some reason, they are not, and the option to close/open them doesn't work when I click on them. I tested also other collapsable menus and the same thing happens. SO I assume it has to do something with Jquery but can't figure it out.
I could use any help
Thanks.
Dev Tools and browser Console is your friend. You can reach it by right-clicking on the page and from the menu shown chosing Inspect/Inspect Element (the actual text varies accross browsers). In the Dev Tools if you click on the Console tab, you will see the errors in the browser and can experiment with scripts. Kindly look at this image:
You have rightly guessed that the problem is with jQuery, as your page attempts to reach jQuery with that variable name, however, in your case jQuery is called $.
A quick fix is to create the variable before it is being attempted to be used:
var jQuery = $;
or replacing jQuery with $ in all its occurrence. Kindly note the thought process of the solution:
I looked at the error and figured out that the variable is missing
I checked whether the variable is called $ instead of jQuery
Based on the acquired knowledge I have made a plan and written an answer to you
The datepicker appears to be blocking the accordion functionality from being available.
This is the datepicker "script" in the <head> of the page markup. Searching the page, this is the only instance of datepicker in the markup and as the console shows, blocks other code - such as the accordion - from running
Console showing the error. Since the datepicker is basically at the top of the page, it will prevent JavaScript that is below it from executing
I was unable to even find anything related to the accordion functionality (in terms of the actual script that would have the accordion functionality in it), but after a bit of time in the console, I came up with this ugly jQuery - jQuery(".vc_tta-panel-heading a").click(function(e){e.preventDefault; jQuery(e.target).parents('.vc_tta-panel').children('.vc_tta-panel-body').toggle()}). Which is what the plugin should do. Not exactly an answer, but you might have better luck contacting the plugin author for advisement.
Go ahead.
<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
you can update!
<script type="text/javacript">
//replace
jQuery( function() {
jQuery( "#datepicker" ).datepicker();
});
$(document).ready(function(){
//include you datepicker function.
})
</script>
<!-- Nice once -->
> note : is good practice include in section
> styles
> html sections
> tags lines javascript and includes
I have an .aspx page and a separate .js file that contains all of my JavaScript and jQuery. The page also has a UserControl that doesn't exist on page load and that only appears when a certain button is clicked. And the UserControl contains, among other things, a JavaScript button.
The problem I'm having is connecting the newly-created JavaScript button that didn't exist on page load to my .js file.
At first I tried adding a jQuery select to get the button that lives inside the UserControl to the document.ready() that's in my existing .js file like this:
$(".TheClassOnMyUserControlButton").click(function () {
// do stuff here
}
But I couldn't get it to respond to anything I tried. So I put my jQuery inside a <script> tag in the UserControl page itself and the button suddenly started responding.
I have since come to understand that the reason the jQuery select wasn't working from the .js file is because the button didn't exist on page load and you can't select a thing that doesn't exist, and that makes sense now.
So my pseudo-newbie developer brain started trying to figure out how I could refresh the document.ready() in my .js file once the UserControl was on the page so that it would become aware of the newly-created UserControl and its buttons.
I asked another developer that I work with about it and they said to try bind.jquery without explaining how.
Googling that led me here as usual and I saw in the jQuery documentation that their bind() method has been deprecated and they suggest using on() instead.
I think I understand what the other developer meant and I know what I want to do, but I'm getting a little fuzzy on the details and I'm not exactly sure how to use on() to achieve what I'm trying to do.
I know I could just leave the <script> tag inside the UserControl, but I'd like to keep all my JavaScript and jQuery in one place if I can.
Does anyone have any suggestions or things I could try?
I appreciate any help anyone can offer.
Thanks
You have many options to bind an event to a button.
1.) simply write a function and bind it to the button on the event you want. For example:
<script>function doStuff(){
....
}
</script>
<button onclick="doStuff()">Do Something</button>
2.) You have to bind your function at the moment you have created the button. For example:
$('#Container').append('.button');
$('.button').on('event',doStuff);
For a more in depth answer i have to see your code
You can bind jQuery methods or events using the "on" method by looking at the entire document and then in the "on" method specifying the correct selector. Hope that makes sense. You can check the example below.
$(document).on("click", ".className", function (){ /*code here*/ });
Create the button beforehand and hide it. Then, show that button/section/panel on the event of other actions.
C# code behind
control.Visible = false;
control.Visible = true;
or
Jquery/bootstrap front end
$('#myElementID').addClass('hidden');
$('#myElementID').removeClass('hidden');
I have bootstrap site I am working on and it has very typical, straight from bootstrap navbar. One of the links in the navbar menu drops down to a login form. However, as soon as I click inside the form, it collapses back as if it was a hyperlink. I tested it alone in a FIDDLE so I know that is not something else conflicting in my code and as you can tell it is still not working as it should.
Does anyone know what is going on here? and how to fix it.
Do I need to add a JS hook passing a show function? SOmething like this didn't work
<script>
$(document).ready(function () {
$('.dropdown-toggle').show('click') //I also tried 'focus'
});
</script>
The fiddle works for me, but apparently not for others. So I created a video showing you the fiddle and the bootstrap implementation as they have it in their own website (which of course it works for them )
SEE VIDEO HERE
AH! I found it! Well, anyway, here it is for anyone who may have this problem in the future, which I can see that there are many already asking this question and many using Bootstrap.
Add the following at the bottom:
<script>
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation()
})
</script>
Make sure the classes match and you are on your way!
I'm trying to create a voting/polling system and I want to make sure my idea is even possible before I dig in. I really like how the Colorbox examples look and work for a "popup" window/display, and I'm also really interested in this jqBarGraph plugin for displaying voting results. What I'd like to do when the user votes, is have the Colorbox "popup" come up and have the animated bar graph show up inside. I'm not sure how this would be implemented because in the examples of jqBarGraph that I've seen, the "graph" gets hooked up to a <div> tag or some other element. I know you can set up inline HTML in the Colorbox so maybe I would need to set up my <div> element with that, and then have the jqBarGraph use it?
So my question is: Is it possible to 1) Execute javascript when initializing my Colorbox (maybe in onOpen:function(){ ?) and 2) Is there a (easy?) way to display an instance of jqBarGraph inside my Colorbox popup?
Here is my (pseudo) code example so far of how I see this maybe working:
//This would happen in my bntVote click event?
$(".btnVote").colorbox({width:"50%",
inline:true,
href:"#myGraph",
function(){
var arrayOfData = new Array(
[[75],'voter 1'],
[[25],'voter 2']);
$('#myGraph').jqBarGraph({ data: arrayOfData });
}});
<div id="myGraph" style="display:none;"></div>
The idea for the function() above in my code sample where I'd like to execute the javascript for the jqBarGraph, came from here. I'm also open to any other suggestions, I just think these two plugins look very slick and would love to be able to implement them together.
Also, for what it's worth, I'm using VB.NET (.NET 3.5) and VS2010.
Many thanks in advance!
I think you already have all the pieces you need. Colorbox does support using inlined content, so your graph div would go there, and if you need to do any initialization when Colorbox opens, you can specify that in the onOpen function.
I've got the following... http://jsfiddle.net/yUVF4/3/ Basically it's just a form which when the button is pressed a loading screen should appear using the javascript there and the resource I've added jquery.loader.js. However, It's not working and I can't seem to grasp why. Anyone got any ideas?
Just add div wrapper in the content parameter of the plugin, it works
content:'<div>Loading...</div>'
See jsfiddle