I'm new to frond end development, and unfortunately have some issues calling a JavaScript function.
I have following function:
<script type="text/javascript">
$(document).ready(function () {
$("#table_div").scroll(function () {
alert("test successful");
jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
});
});
</script>
and HTML is defined as:
<div id="divHeader" class="firstpanel">
<div id="firstcol" class="firstcolumn">
<div id="table_div" class="contentpanel">
which is styled as:
.contentpanel {
overflow: scroll;
width: 300px;
height: 500px;
position: relative;
}
.firstpanel {
overflow: hidden;
width: 284px;
}
.firstcolumn {
overflow: hidden;
height: 500px;
}
and I'm experiencing a problem, since the "alert" in my JavaScript function is not triggered, when I debug my application. I have made a test in JSFiddle with exacly the same code, and it works very well, since the alert function is called, once I start scrolling my div.
I'm using JQuery 1.5.1 in my application and will prefer to prevent using a newer version in JQuery. Is the JQuery version the issue in this case ?.
You are attaching the event when the element is not render by DOM. You should wrap that code in a $(document).ready() or use delegation events:
$(document).on('scroll', "#table_div", function () {
// code
});
Related
I'm still learning jquery and I'm facing an issue that probably a lot of people have been facing which is just logic but I can't seem to find a good way to learn how to do that.
So my issue is the following:
I'm creating elements called .lieu on the page using jquery. Basically, when you enter a text and click "OK" you created another .lieu that is supposed to display the text "en passant par le bois des lutins" in the destinations tab.
The first one that is created with html is working but not the other ones.
It seems the script is able to execute on the elements created using html (that's probably due to:)
$( document ).ready(function() {});
How can I make that work using the good method?
Thanks a lot.
$(".validate").click( function(){
var name = $(this).closest(".envies").find("input[name='name']").val();
var lieu = $("<div />", {
"class": "lieu"
})
.css({
left: 0,
top: 0
})
.append($("<p>"+name+"</p>"))
.appendTo(document.body);});
$(".lieu").on("mouseenter", function(checklieu) {
var ordredestinations = $("<div />", {
"class": "lieuliste"
})
.css({
})
.append($("<p>en passant par le bois des lutins</p>"))
.appendTo(".destinations");
});
.destinations {
background-color: lightgrey;
position: fixed;
right: 0;
top: 0;
}
.envies {
background-color: grey;
position: fixed;
right: 300px;
top: 0;
width: 250px;
height: 50px;
}
.lieu{
position: absolute;
left:0px;
top: 100px;
background-color: red;
width: 200px;
height: 100px;
border-radius: 250px;
text-align: center;
vertical-align: middle;
line-height: 100px; /* The same as your div height */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="lieu"><p>bois des lutins</p></div>
<div class="destinations"></div>
<div class="envies">
<input type="text" id="name" name="name" size="10" placeholder="name">
<button class="validate">OK</button>
</div>
</body>
<script type="text/javascript"></script>
A think I see your problem.
When a document (webpage) loads, specific targeted jQuery functions like yours..
$(".validate").click( function() {
// ...
});
// and...
$(".lieu").on("mouseenter", function() {
// ...
});
..will only bind upon the document being ready, more than like because you are using these inside $(document).ready(function(). So when doc is ready, the above 2 functions run and bind.
Running functions like you are within doc ready is good practice.
However, if you intend to automatically bind existing executed functions to newly added document elements.. then your first 2 functions are out of scope.
You need to look into .on() https://api.jquery.com/on/
For example, if you want newly added document elements like .lieu divs, to be hit by your mouseover function, then you use .on function like this...
$(document).on("mouseenter", ".lieu", function()
The .on() second param is the .lieu selector, within $(document) as the main jQuery selector object.
Meaning if you append any number of new .lieu divs to the document html, using .on() selector param within $(document) will always be in scope of the mouseover event on this selector.
Here a simple example:
$(function(){ ///scope
function alerter(number){
switch(number){
case 1:
alert("first");
break;
case 2:
alert("second");
break;
}
}
});
#first{
width: 300px;
height: 300px;
background: red;
}
#second{
width: 300px;
height: 300px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="first" onclick="alerter(1)">
</div>
<div id="second" onclick="alerter(2)">
</div>
The error message says: "alerter is not defined"
I cant use the js .click() function (or an eventlistener) in my project, bacause there are not permanent piece of divs.
Of course it would work if the "alerter" function wasn't be inside the scope function, but i don't want to declare global variables.
Thanks for the help!
If you won't declare it as a global function the html won't be able to call it. If you wan't you can reverse your logic and do something like the following.
$(function() { ///scope
$("#first").on("click", function() {
alerter(1);
});
$("#second").on("click", function() {
alerter(2);
});
function alerter(number) {
switch (number) {
case 1:
alert("first");
break;
case 2:
alert("second");
break;
}
}
});
#first {
width: 300px;
height: 300px;
background: red;
}
#second {
width: 300px;
height: 300px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
</div>
<div id="second">
</div>
This way you can keep your global scope clean and yet you'll have the same functionality.
The problem here is that "alerter" is defined into the temporary scope created by the call to the anonymous function.
If you want it outside of its scope you need to do something like
window.alerter = function alerter...
[Edit]
Since you don't want to declare a "global" variable, you'll need to stick the event using js, cf comment.
And you can do it using delegated events aka jQuery's "on" method. It does not need permanent divs for it to work.
It may help if you explained what you are trying to achieve with this code. Is there a specific reason for using switch statements? You may want to consider using jQuery .on event as #dader pointed out. An example being:
$("#first").on('click', function() { alert("First") })
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
I want to hover all div under .wrapper div in order with a delay when the page is loaded. How can I do this with using jquery?
HTML
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Jquery
$('.wrapper').children().each(function(){
$(this).trigger('hover');
});
https://jsfiddle.net/drxvr1hn/
.trigger('hover') has been deprecated as it caused a great deal of maximum stack exceeded errors.
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Trying to trigger the hover state via jQuery is a very browser/cpu intensive process and a lot of re-rendering of a page to ensure that your call is correct. Therefore the ability was removed but is possible with some JS but will almost certainly cause speed issues and/or stack issues which can cause browser crashes.
A good alternative would be to use classes like below:
$(document).ready(function() {
$('.wrapper div').on('mouseover', function() {
$('.wrapper div').addClass('hover');
}).on('mouseleave', function() {
$('.wrapper div').removeClass('hover');
});
});
.wrapper > div {
width: 100%;
height: 20px;
margin-bottom: 20px;
}
.first {
background-color: #468966;
}
.second {
background-color: #FFF0A5;
}
.third {
background-color: #FFB03B;
}
.first.hover {
background-color: #B64926;
}
.second.hover {
background-color: #8E2800;
}
.third.hover {
background-color: #464A66;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
you need to set the timeOut interval
$(window).scroll(function() {
$('. wrapper'). children().each(function(index){
var _this = this;
setTimeout( function(){ $(_this).trigger('hover'); }, 200*index);
});
});
I'm a little new to HTML, CSS et al. I'm having trouble with the click event on a html page.
HTML
<div class="Box1 DaddyBox"></div>
<div class="Box2 DaddyBox"></div>
<div class="Box3 DaddyBox"></div>
CSS
.DaddyBox{
border:thick;
border-color:#FFF;
}
.DaddyBox:hover{
background: green;
}
.Box1 {
position: absolute;
left: 16px;
top: 96px;
width: 320px;
height: 96px;
z-index: 1;
background-color: #F5E255;
}
JS
$('.Box1').click(function(){
alert(Alert)
});
Is there something glaringly obvious that I'm missing? I am not getting the alert on click of the Box.
If clarity is required, I'm trying to create a grid like interface for a website. Each box will link to a new page. Again, I'm new to this and am only attempting what I have learned so far, so perhaps I am way off, feel free to point me in a new direction.
Thanks
you missed quotes for the message in alert(), change to:
....
alert("Alert");
...
and include jQyery library, and wrap your code in $(document).ready(function(){ ... }); if not already done, as:
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes to your message Alert
});
});
include java library in header
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes
});
});