JS/jQuery not working in CodePen - javascript

I'm on CodePen, trying to practice using JS and jQuery in conjunction with HTML.
HTML:
<button>asdasads</button>
JS:
$('button').on('click', function() {
alert('woot');
});
Link to the pen, which doesn't work.
It's meant to display an alert when the button is clicked. But it does nothing.
Here's another one, with the same HTML/JS. The only difference is that I edited this second one out of a "make this paragraph disappear by clicking a button" example CodePen pen.
This CodePen pen works 100%.
which works just beatifully. The code is identical. What is going on here? I cannot find anything on Google, there's no mention of having to configure CP in any way to make your JS mingle with your HTML.
Then again... As a child there was a room in my parent's house that was being renovated and the floor was gone, leaving a fall to the basement. I played a game of opening and closing a door to the room, pretending to be surprised that the floor was gone. Until one time I actually forgot and ran in (yes, I fell), and that was only like the 4th time I opened the door. So, yeah.
Thank you in advance. This is my first go at asking here. Be gentle! :E

You need to add the jQuery library to the Pen. Just click the gear in the JS block, then click Quick Add, like in this photo

You need add JQuery (Add External JavaScript)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

Related

Windows with space to write text dont appear AJS

I have created custom Issue Tab Panel with field, where I can add comment when Ill press my custom button “add comment”
In my VM template I have
AJS.$("#add-comment-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#add-status-comment").show();
});
This button works fine and window to write text appears, but… In other section in Issues --> Current Search —> Views (Detail Views), windows with space to write text dont appear when I click button “add comment”. It only appers in normal view of issue… Whats problem?
I'm not sure if I understand your question right so I'll give it a try. Maybe it helps in one or the other way.
As you didn't provide the code affecting the window I assume it is possible you are retrieving the issue key or issue id. There are some Jira JS calls that don't work in every view. The reason is unknown to me, but maybe if you use different calls it will work.
Here is the question and answer to this field availability problem on the atlassian community: https://community.atlassian.com/t5/Jira-questions/Get-issueID-in-JavaScript-in-Project-Screen-viewing-issue/qaq-p/824175
Otherwise you should provide some more information.
Regards
Chris

Why are my JQuery Modal boxes not in there default position?

Until recently any modal box I displayed was dead center in the page. Which I assume is the default and is what I wanted.
Recently some change I made someplace in my code is causing the modal to open on the left bottom of the page, just poking up above the bottom of the screen.
I've explored all the code I've changed in the past weeks and can't find it. I also had updated the 'jquery.modal.min.css' file to the current version v0.9.1 so replaced that with the previous version. But that didn't fix it either.
I'm the first to admit I do not understand how to use the 'Web Inspector' effectively. If this is how I can track down the issue please be specific on its use.
well, you need to provide a fiddle so we can see any example of your code. That been said:
do you use GIT( you might be able to version back ALL files that might have been touched, keep in mind any new changes are gone).
are you the only Developer working on this? is there another developer, who could have added something locally with a !important? May be someone forgot to open or close a bracket, in your css/html/structure
my 2 cents

Navigation: Setting page Anchor tag (javascript or css)

Newbie here trying to build a template for spring class quarter which begins next week. Everything is working as hoped except that when i click the chevron (the little downward pointing arrow) the page does not slide to the element as hoped. If I set the id of the first assignment to 'profile' it will work, other wise if i leave it as 'a01' for assignment 01' it does not work and i have to manually scroll down to the first assignment which is not a great user experience.
I want to find how this is happening as the way i implemented it i missed something as it doesn't scroll down as hoped when i click on the arrow. I think that it's related to javascript files being used which i know little about, but I want to. Once i understand it, i believe that i can create a nice short tag and call the kind of anchor i want with php, but right now i'd like to just get it to scroll down to the a01 div.
See: http://kirby.max-o-matic.com
See: http://www.kirby.max-o-matic.com/itc216/
I believe that i have an error set in javascript somewhere as the anchor tag is created in the javascript (i think).
I've tried to be as specific as i can but i am a new and pushing my boundaries of what i understand in making this site for my upcoming class assignments.
thank you for any help or guidance given.
On kirby.max-o-matic.com/itc216/ change:
<a href="#profile" class="scroll-down">
to:
<a href="#a010" class="scroll-down">
Your div has an id of a010, so thats what you need to put into your anchor tag. I do not see it actually working when I load the itc216 page with #profile.
a010

Slding form does not show one form at a time

I'm creating a sliding form with jQuery, but the forms aren't being shown one at a time, they show all at once. Yet, jsfiddle corrects the problem. Not sure how.
If you view source from the viewing frame of JSFiddle, this is the difference: http://diffchecker.com/3q359BDH. A working example using JSFiddles code: http://teswo.tk/so/1.html

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Categories

Resources