Develop Reference

Click function in Jquery not functioning while using it on computer

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?

Bootstrap modal not showing completely

I am using bootstrap modal for my website. Recently, I used a jQuery plugin to build nav bar and some problems showed up. First, after I use jQuery.noConflict(), the program not recognize $ anymore and I have to replace all $ which jQuery. Second, when execute the command .modal("show"), the modal not showing completely, the whole screen is fade and I can type anything to modal's inputs. Here the screen capture:
Can anybody explain to me what happened here? Thanks very much.

It seems their is a problem with the css. Make sure that you are loading bootstrap css only once.

Form inside a menu-dropdown does not stay when clicked in the input field - Bootstrap3

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!

ImageMapster - jquery/html issue

I am having a few issues with the jquery plugin (ImageMapster). ImageMapster has provided a demo jsfiddle to test out their demo, they use one resource and the rest is right in front of you: http://jsfiddle.net/nYkAG/396/
If you hover over the image, you will be able to several small boxes and when you hover over them, you will see a description under the image. (if it doesnt work then try clicking on the image itself). It uses the area tag.
I tried to use the same method and implement it on a normal HTML site. However, its not working and i cannot understand what i have done wrong to the jsfiddle that is not working.
Example SIte: http://www.nina-naustdal.com/index1.html
Its Exactly the same site, which is annoying. Can someone shed some light onto this issue.
Thanks again for your assistance.

Just wrap your code in
$(function(){
// Your code
});
or
$(window).load(function(){
//Your code
});
You are accessing #beatles before loading it in DOM.
Its running under jsfiddle because it is wrapping in $(window).load(function(){

jHTMLArea locks up inside jQuery webform wizard

I previously posted this question JWYSIWYG or jHtmlArea within a Jquery Ui Tab about getting jHtmlArea to work inside jQuery Ui tabs.
I am now trying to get this same html editor to work inside the jQuery formtowizard plugin.
I am not sure if this is exactly the same problem or not. No errors are being thrown and the editor appears to load all buttons and its height and width correctly but the user is unable to type any text in the textarea.
I am generating the jHtmlArea like this...
$(function(){
$(".text-detail").htmlarea({ css: "/css/jHtmlAreaCustom.css",});
});
and then
$(document).ready(function() {
$("#addFaci").formToWizard({ submitButton: 'AddFaciSubmit' });
}):
Do I need to load the jHTMLArea from within a callback from the formToWizard script? I've tried for several hours and definetely need some guidance.
Thanks for your help.
Tim

The problem turned out to be jHtmlArea needed to be loaded in $(document).ready(function() { after the formtoWizard call.
Then jHtmlArea collapses onitself because it can't dynamically set it's height and width properties within a hidden container. Set these with jQuery CSS calls and your good to go!
Hope this helps someone else.