jQuery script won't run [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a jQuery function that basically toggles a div on click but it doesn't work I can't tell if I maybe imported the library incorrectly or what but I can't get it to function at all. Please tell me if I am missing anything or messed up my code somewhere.
My exact code looks like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.notifications-dropdown-trigger").click(function () {
$('#post-notifications-dropdown').toggle('slide', {
duration: 100,
direction: 'up'
});
});
});
</script>
The HTML markup:
<a class="notifications-dropdown-trigger">click me</a>
<div id="post-notifications-dropdown">
.... code
</div>
Everything is coded directly onto servers and is live the moment I save.

You can simply use .slideToggle()
Description: Display or hide the matched elements with a sliding motion.
Code
$(document).ready(function(){
$("a.notifications-dropdown-trigger").click(function (event) {
$('#post-notifications-dropdown').slideToggle(100);
event.preventDefault();
});
});

Related

How To Disable Scrolling During Loading? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm working on my personal website and have implemented a preloader.
After adding a second div to my website, I noticed I can scroll during the page loading. I dunno about you but I find that ugly and disturbing.
Here is a quick video. (I use chromeOS)
Video
I really couldn't find anything on this because I think I was the only one with this problem. I'm not sure, however.
I used $(window).on("load",function(){$(".loader-wrapper").fadeOut("slow");}); as well
Here is the code (Github Repo)
Anyways, that's all I got.
Thanks in advance.
You can add by default a class to your body the class should be as follows.
// CSS
.no-scroll {
overflow: hidden;
}
<body class="no-scroll">
Once your script has completed or your function finishes you just call
document.body.classList.remove('no-scroll');
Make sure to add the following section at the end of your page.
<script type="text/javascript">
(function(){
function onReady() {
document.body.classList.remove('no-scroll');
}
if ( document.readyState === 'complete' ) {
onReady();
} else {
document.addEventListener('DOMContentLoaded', onReady);
}
})();
</script>
Or you can do it with jQuery
// Make sure this code is the last piece of code in your HTML.
$(window).on("load", function() {
document.body.classList.remove('no-scroll');
});
PS: Additionally to that consider the unlike scenario when someone does not have JavScript enabled so you add a default behavior. Take a look at <noscript> tag.

Jquery code not running in partial page [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got a jQuery script included in my MasterPage's <head> tags that runs whenever a link is pressed in the navbar. (I've made it trigger on any anchor tag.)
So I was thinking: since it triggers on any anchor tag it would also trigger on anchor tags that are in segment files (files that contain a little HTML and are inserted using AJAX) but it doesn't.
The only way to get it to work is to include the JavaScript file into all the segment pages.
example:
mainpage:
<br>
html
<br>
head<br> script src="script.js"/script<br>/head
<br>
body
div class="container"/div
All the partial html files are loaded into the container.
So one would think they also share the same <head> as the full page still contains that same header.
But the scripts don't work?
ps: to the unclear what i'm asking report: apparently some people understood me, thanks a lot to those who did :)
You will have to delegate the event to all current and future anchor elements using a particular version of on():
$(function() { // dom-ready
$(document).on('click', 'a', function(e) {
// handle click
});
})
If you load content dynamically then events won´t be hooked. Use "on" event instead of "click".
It would be something like:
$( "a" ).on( "click", function() {
alert( $( this ).text() );
});

Knockout Doesn't work on Fiddle [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
The following code does not work on jsFiddle even when have set the correct Framework and extension, i.e. jquery 1.7.2 and no-wrap in body.
HTML Code
Name:<input data-bind="value: name" />
<p>Hello, <span data-bind="text: name"></span></p>
<button data-bind="click: changeName">Change Name</button>
Javascript Code
$(function () {
var viewModel = {
name: ko.observable("bob"),
changeName: function () {
this.name("steve");
}
};
ko.applyBindings(viewModel);
});
Make sure you have included jQuery as well as KnockoutJS library while creating your JSFiddle. One of them will be in external resources section on left sidebar because JSFiddle does not provide feature to include both at one go in frameworks and extensions section..
http://jsfiddle.net/yLcqd06q/1/
$(function(){
var viewModel = {
name: ko.observable("bob"),
changeName: function () {
this.name("steve");
}
};
ko.applyBindings(viewModel);
});
Tip for you : Always mention the error you get in console while posting such questions :-)
Hope that helps..
Peace, RP

<script> Help on .click() [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I just recently got into coding and decided to just mess around before I started fully coding more in-depth. I am currently trying to make a simple game where you click an object, it does a little animation and it adds 1 to a counter.
I have the animation perfectly executed, however I am completely lost as to how I could make the counter. I am trying to use .js via the tags, mainly because the website never loads my script.js file, even though I reference it properly.
Anyways here is my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h3>0 Clicks</h3>
<img id="choco" src="http://cdn.shopify.com/s/files/1/0210/5354/products/Chocolate_Chip_No_Background_1_medium.png?v=1365686508">
<img id="whirl" src="whirl.jpg" style="width:25em; height:25em;">
</body>
<script>
$(document).ready(function() {
('#cookie').click(function() {
function toClick(clicks){
return (clicks + 1);
print clicks;
};
});
});
</script>
</html>
My is very messy, I was trying a plethora of options to try and get it to work but it simply doesn't.
So basically what I am trying to do, is everytime I click the object I want it to add 1 to a counter I have on the page. 0 Clicks
I am not even sure that's possible but I hope someone out there can help me out :)
Thanks!
First, give your h3 an inner element that holds the click counter (and give that an ID so you can access it easily):
<h3><span id="clicks">0</span> clicks</h3>
Next - your click handler is missing the $ in front - but also has to get the current clicks, add 1, then re-print:
$('#cookie').click(function() {
var currentClicks = parseInt($("#clicks").text(), 10);
currentClicks++; //increment
$("#clicks").text(currentClicks); //set it
});
$(document).ready(function() {
$('#cookie').click(function() {
incrementCount();
});
});
function incrementCounter() {
var previousCounter = parseInt($("#counter").text());
previousCounter = isNaN(previousCounter) ? 0: ++previousCounter;
$("#counter").text(previousCounter);
}
function resetCounter() {
$("#counter").text(0);
}
Change HTML to
<body>
<h3><span id="counter">0</span> Clicks</h3>
The above code will look after even if you don't specify 0 with the Span.
I have just given you some bonus function - resetCounter too :)
Seems You are missing the $ sing in:
$('#cookie').click(function() {

The Click event is not working. I can figure this out? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I can't seem to get my click trigger to work.
I've tried the following:
//Handle the Main Menu Button Press
$("button").click( function() {
alert('yep');
});
And I never get the alert when I click any button on my site....
Where did I go wrong?
might be one of these:
- you forgot to include jQuery.js script in your header
- you didn't wait till DOM loaded
try:
$( function() {
$("button").click( function() {
alert('yep');
});
});
Your code works just fine. Here is a fiddle
You need to ensure you have jQuery loaded, you have waited for the DOM to load using
$(function() {
//your code here
});
And if you have multiple buttons, you will need to use CSS selectors to differentiate.
I would HIGHLY suggest you read this document, provided by jQuery
The HTML could be
<button type="button" name="btnOk" id="btnOk">ok</button>
The jQuery code could be
$("button[type='button']").click(function(){
alert("yeap");
});
or
$("button[name='btnOk']").click(function(){
alert("yeap");
});
If HTML is
<input type="button" name="btnOk" id="btnOk" value="Ok"/>
the code could be
$("input[type='button']").click(function(){
alert("yeap");
});
At first, be sure that :has the jquery code in
$(document).ready(function(){
//jquery code
});

Categories