jquery fadeIn function with as callback function with $("this") parameter [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
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.
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.
Improve this question
I'm trying to do a simple function so an element will fade in and then will fade out.
This is my code:
function ShowBoxes() {
$("#divTestArea21").fadeIn("fast", function () {
FadeThisOut($(this));
});
$("#divTestArea22").fadeIn("slow");
$("#divTestArea23").fadeIn(2000);
}
function FadeThisOut(sender) {
sender.fadeOut("slow");
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery test</title>
<script src="Scripts/jquery-2.2.0.js"></script>
<script type="text/javascript" src="Scripts/IndexScript.js"></script>
<link href="CSS/SiteStyle.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
Show boxes
</body>
</html>
Can someone please explain to me why it isn't working and how to fix it?
Edit: you are right, I had a paramater for FadeThisOut function , but I played with my code for a bit and tried other things so I forgat to bring it back. Anyway, I removed the double-quotes and now it's working. Thanks all.

First you call your function with $(this) as parameter but you declare it without, start by putting it this way :
function FadeThisOut(object) {
}
Secondly you use sender[0], but you don't show us what is sender array.
Thirdly in your function call, you should call the current object without quotes, ie: $(this)

Did you mean to use
FadeThisOut($(this));
(without the double-quotes)
As Vincent said, you also have no argument to the FadeThisOut function

Related

Only first button works. Not sure if its the script. It might be I'm missing a rule [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 2 years ago.
Improve this question
I know I'm a beginner at this, but I really need to learn the rules. I'm trying to make a simple example of javascript. Its a box with three buttons, but for some reason only one of them works. They do have different ID types, so there must be another rule I don't know.
<!DOCTYPE html>
<html>
<head>
<title>Javascript box</title>
</head>
<body>
<p>Press buttons to change the box</p>
<div id="box" style="height:100px; width:100px; background-color: limegreen; margin:50px"></div>
<br>
<button id="less">less</button>
<button id="more">more</button>
<button id="none">Reset</button>
<script type="text/javascript">
document.getElementById("less").addEventListener("click", function(){
document.getElementById("box").style.height = "25px";
});
document.getElementByID("more").addEventListener("click", function(){
document.getElementById("box").style.height = "150px";
});
document.getElementById("none").addEventListener("click", function(){
document.getElementById("box").style.height = "100px";
});
</script>
</body>
</html>
For the second addEventListener, there's a typo.
In document.getElementByID, the D should not be capitalised.
A good way to debug these issues is to look at the console in developer tools.

Electron - Jquery isn't working [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
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.
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.
Improve this question
Hello,
I downloaded electron and installed it on webstorm in order to learn it. I also installed Jquery using the terminal and including in my scripts but jquery isn't working but it is recognized in my code (I haven't got any error).
My code :
const remote = require('electron').remote;
let window = remote.getCurrentWindow();
function exitGame() {
alert("test");
$('exit').click(() => {
alert("closing");
window.close();
})
}
exitGame();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
<!-- RESET CSS -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- ADDING CSS -->
<link rel="stylesheet" type="text/css" href="css/main_menu.css">
</head>
<body>
<div id="exit">Leave the game</div>
<!-- ADDING JAVASCRIPT -->
<script>
// You can also require other files to run in this process
require('./renderer.js');
require('./js/jquery.min.js');
require('./js/main_menu.js');
</script>
</body>
</html>
The jQuery alert is working but the click isn't.
Even if I replace the "exit" id by "body" it's not working...
Can you tell me what's wrong ?
Thank you very much, best regards.
exit is an id and not some element. So you need to use # before it.
$('#exit').click(() => {
alert("closing");
window.close();
})
Better way to check jQuer is wokring or not could be:
if(!jQuery)
{
alert("Not working!");
}
Alright, made it working by editing the tag with the code requiere jQuery.
Before Electron's base script tag, I added a tag with my jQuery. It seems that it wasn't loaded

Fixed element at end of div [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 6 years ago.
Improve this question
I am searching a lot but don't know how to name it properly.
Idea:
We have two divs together. The first one on the left have a lot of content, more than the one on right side. The second one have only form to be filled up and send. When user scrolls the left div for more information, the right side with contact form will follow to the end of this div. And when user scrolls up, this form on the right will follow it too.
How to detect it? Is there any framework?
I have a lot of divs in website and each one must have this script.
Screen to show what I mean:
Link to page:
LINK
Check following links:
http://www.jqueryscript.net/layout/jQuery-Plugin-To-Fix-Element-Within-Its-Parent-Container-nail.html
Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Fix-Element-Within-Its-Parent-Container-nail/
http://www.jqueryscript.net/layout/Super-Tiny-jQuery-Plugin-For-Sticky-Elements-Sticky.html
Demo: http://www.jqueryscript.net/demo/Super-Tiny-jQuery-Plugin-For-Sticky-Elements-Sticky/
http://www.jqueryscript.net/layout/Multipurpose-jQuery-Sticky-Sidebar-Plugin-scrollWith.html
Demo: http://www.jqueryscript.net/demo/Multipurpose-jQuery-Sticky-Sidebar-Plugin-scrollWith/scrollwith-single-first.html
You can use the CSS position: fixed; for the right side.
is this what you want. the concept is to use position:fixed and right:0 and/or top:10px properties with your css. this is a small example for it.hope this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
width: 100%;
height: 1000px;
background-color: orange;
}
.right{
width: 30%;
position: fixed;
right: 0;
height: 500px;
background-color: gray;
}
.check{
position: absolute;
top: 900px;
}
</style>
<body>
<div class="right">
<h2>send an email</h2>
</div>
<h1 class="check">checkin the view</h1>
</body>
</html>
values are to get an idea, change those as your need.

jQuery doesn't seem to work when previewing [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 7 years ago.
Improve this question
I'm very new to coding so I need help from you guys!
I wrote these codes to run a test but I can't seem to get the jQuery to load when previewing in Chrome. (I use Atom to code)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link type="text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Hello</h1>
<p>This is just a test</p>
<div></div>
</body>
</html>
CSS
h1 {
color: #6D9CAE;
font-family: Futura;
font-size: 40px;
font-weight: lighter;
}
h2 {
color: #bb2025;
font-family: Futura;
font-size: 40px;
font-weight: lighter;
}
p {
color: #54748B;
font-family: Avenir;
font-size: 20px;
font-weight: bold;
}
div {
background-color: #223C4A;
height: 100px;
width: 100px;
border-radius: 100%;
}
.active {
background-color: #a5b000;
}
javascript
$(document).ready(function(){
$('div').hover(function(){
$('div').addClass('.active')
});
});
I'm trying to get the div to change a color when hover over but it just can't work. Not sure if I did anything wrong with the javascript.
I tried to copy a working code (html, css, script) from somewhere and preview it using chrome and safari and that won't work either.
So, how do I get the script to work when previewing??
Thanks!!
You need to remove the '.' from '.active' when you use '.addClass'
try this:
$(document).ready(function(){
$('div').hover(function(){
$('div').addClass('active');
});
});

Internal style and script in head are not applied [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 7 years ago.
Improve this question
I am using Joomla and the T3 template. I added the following "Custom Code" before the </head> tag:
<style type="text/stylesheet">
div.t3-sidebar.t3-sidebar-right{
background: #F8F8F8 none repeat scroll 0% 0%;
border: 1px solid rgb(238, 238, 238);
border-radius: 20px;
}
button.btn.btn-primary.off-canvas-toggle{
font-size: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button.btn.btn-primary.off-canvas-toggle i.fa.fa-bars").addClass("fa-user").removeClass("fa-bars");
});
</script>
When I use my browsers development tools I can see those tags in the head where they should be, but when I inspect the elements, the styles are not applied.
Edit: the style is working now, I foolishly used the wrong type. Thank you to everyone who proposed this change.
Concerning the script problem: I do not get any errors in the console.
Final Edit: The problem with the script is resolved. It was either a problem with the name of the jQuery function (jQuery instead of $) or a problem with the brackets of the document.ready function.
Your CSS is not working, because
<style type="text/stylesheet">
should be
<style type="text/css">
And your javascript is not working, because you did not import jQuery.
There are many ways to import jQuery, this is one of them:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
It should be text/css
Here is the modified code.
<style type="text/css">
div.t3-sidebar.t3-sidebar-right{
background: #F8F8F8 none repeat scroll 0% 0%;
border: 1px solid rgb(238, 238, 238);
border-radius: 20px;
}
button.btn.btn-primary.off-canvas-toggle{
font-size: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button.btn.btn-primary.off-canvas-toggle i.fa.fa-bars").addClass("fa-user").removeClass("fa-bars");
});
</script>

Categories