This question already has answers here:
jQuery : how to determine that a div is scrolled down
(7 answers)
Closed 9 years ago.
I want to call ajax function while scrolling inner scroll and append the results at the bottom of the existing results.
For refrence I've attached an image here.
How can I achive this?
You can use something like this without jQuery also
window.onload = function(){
if(window.addEventListener){
document.addEventListener('DOMMouseScroll', moveObject, false);
}
var myDiv = document.getElementById("myDiv");
myDiv.onmousewheel = ajaxFunction();
}
Related
This question already has answers here:
How to select an element inside "this" in jQuery?
(2 answers)
Closed 6 years ago.
<script type="text/javascript">
jQuery(".post-entry").click(function() {
window.location = jQuery(this).find("a").attr("href");
return false;
});
</script>
Is it possible to modify this script to find a href link that has a specific class? The reason is that some of these divs have multiple links within.
Absolutely.
$('.post-entry').click(function() {
window.location = $(this).find('a.example-class').attr('href')
return false;
})
If you want a hand cursor, you'll need a bit of CSS too:
.post-entry {
cursor: pointer;
}
This question already has answers here:
Direct vs. Delegated - jQuery .on()
(6 answers)
Closed 7 years ago.
I'm trying to target a button I've created by pressing another button. My code technically works, but due to the size of what I'm doing, I'm trying to put the function of the second button press in another js file. That where I'm running into problems. My code is below.
$("#webCoding").on("click", function() {
if ( $( ".webCodingID" ).length ) {
return false;
}
picture.attr("src", "img/webCoding.jpeg");
$(".target").empty();
$(".jumbotron").hide();
var buttonGroup = $('<div role="group" aria-label="...">').addClass('btn-group-vertical center-block')
var buttonPhilosophy =$("<button type='button'>").addClass("btn btn-default btn-lg").append("Design Philosophy")
var buttonStack =$("<button type='button'>").addClass("btn btn-default btn-lg").append("Visit My Stack Overflow Account")
var buttonGithub =$("<button type='button' id='git'>").addClass("btn btn-default btn-lg").append("Look at what I've been doing on Github")
var webCodingID =$("<div>").addClass("trainingID")
$(buttonGroup).append(buttonPhilosophy).append(buttonGithub).append(buttonStack);
$('.target').append(buttonGroup).append(webCodingID);
// code for pressing created button is below.
$("#git").on("click", function() {
prompt("herro");
});
});
but I put this in another file (and get rid of the same code in the original js file), and nothing happens.
$(document).ready(function(){
$("#git").on("click", function(){
prompt("jungle boogie");
});
I can't figure out why. The js file is linked to my main page, I just can't get it to recognize buttons created by JS in another file.
You should bind the on to the body like so:
$("body").on("click", "#git", function(){
That should solve your problem I believe :)
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have a webpage and it have html content with id.i am calling a function on onclick. Everything seems working if i am making changes into static content but when i am trying to call any jQuery function like html,append etc... with my dynamic content then it is not working .
As far as i understand it's because of Dom not getting updated with new content.So i would like to know how can i update dom after loading dynamic data.
A demo code below ..
jQuery( document ).ready(function($) {
var width=$( window ).width();
if(width <= 768){
$('#extraslidercontent').html("<div class='container html_mb' style='background-color:#f29a1f;width:100%;max-width: 100%;'><div class='template-page content av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-3291'><div class='entry-content-wrapper clearfix'>\
"+$('#testtt2').html()+"</div></div></div></div><div class='container css_mb' style='width:100%;max-width: 100%;'><div class='template-page content av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-3291'><div class='entry-content-wrapper clearfix'>\
"+$('#testtt3').html()+"</div></div></div></div><div class='container wp_mb' style='background-color:#493c59;width:100%;max-width: 100%;'><div class='template-page content av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-3291'><div class='entry-content-wrapper clearfix'>\
"+$('#testtt1').html()+"</div></div></div></div>");
updte();
}
after loading data in to testtt2 id i am trying to use an id which is in it's content.
Let me know if i missed anything to explain.
You will need to use event delegation for the new element.
$('body').on('click', '#some-id', function () {});
Or for older jQuery ( < 1.7)
$('body').delegate('#some-id', 'click', function () {});
This question already has answers here:
How to add click event to a iframe with JQuery
(13 answers)
Closed 8 years ago.
How to capture click on iframe using javascript.
I'm using this code:
document.getElementsByClassName('pin').contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
But it is not able to capture any click of the iframe. I can only use javascript.
I'm getting this error
"SecurityError: Blocked a frame with origin"
var i = 0;
//i represents the exact node since obtaining node by class name gives array of nodes.
var iframe = document.getElementsByClassName('pin')[i].contentWindow;
or
var iframe = document.getElementById("iframe_id").contentWindow;
iframe.document.body.onmousedown =
function() {
alert("iframe clicked");
}
This question already has answers here:
Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
(2 answers)
Closed 3 months ago.
I am trying to append multiple audio tags to the body of a document using jQuery:
$(function () {
var a = $("<div/>").text("hello");
$("body").append(a);
a.text("world");
$("body").append(a);
});
why isnt var a; being appended twice? I would at least expect "world" to appear twice (I understand I am overwriting "hello").
It's because the element in the a variable is already appended to the body, so the second line causes no change.
If you want two elements appended, you would need to create a second manually, or clone the first one:
$(function () {
var a = $("<div/>").text("hello");
$("body").append(a);
a.text("world");
$("body").append(a.clone());
});
basically you already inserted a div from one instance a variable
example: http://jsfiddle.net/kdKV8/4/
you could try cloning it.. clone()
$(function () {
var a = $("<div/>").text("hello");
$("body").append(a.clone());
a.text("world");
$("body").append(a);
});
http://api.jquery.com/clone/
you can also tried below code
$(function () {
$("body").append($("<div/>").text("hello"));
$("body").append($("<div/>").text("world"));
});
this might be easier...
$('body').append($('<div/>').text('Hello'), $('<div/>').text('World'));
made a fiddle: http://jsfiddle.net/filever10/Hh9hq/