So, I am trying to get backstretch.js to work with multiple divs that is loaded from the db.
but I can't get a separate image for each div.
This works perfectly, when I hover the boxes, the background shows up, but I wan't it to be loaded as soon as the page loads.
$(".tournament-thumb").hover(
function(){
$(this).backstretch($(this).data("url"));
}
);
I have tried this with .ready() without any result this it doesn't seem to register "$(this)" ? :
$(".tournament-thumb").ready(
function(){
$(this).backstretch($(this).data("url"));
}
);
Here is the HTML:
<div class="tournament-thumb" data-url="images/image.jpg"></div>
Please help me... If there is any better way than this, please respond with that then :)
From the docs:
The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted
So you can only use $(document) for the ready() method.
possibly best solution is to bind the delegation to the document object like
$(document).on('hover','.tournament-thumb',function(){
$(this).backstretch($(this).data("url"));
});
Okay, I solved it with jQuery.each
$.each($(".tournament-thumb"), function() {
$(this).backstretch($(this).data("url"));
});
Related
i have a script like accordion,
this my script
$(document).ready(function(){
$('.film').click(function(){
$('.film').attr('id','activeMenu');
$('#film').slideToggle();
});
$('#activeMenu').click(function(){
$('.film').removeAttr("id");
});
});
this is style of activeMenu when it clicked
.activeMenu{
background:#C9FF26;
}
if i click .film and click again , id=activeMenu isn't removed
anyone know this problem?
thanks
Your problem happens because at the time you call $('#activeMenu').click(...) the element you're targeting doesn't actually have that ID.
You could potentially use $(document).on('click', '#activeMenu', ...) (i.e. a delegated event handler) that will work even if #activeMenu doesn't yet exist but I can't help but feel that this would be the wrong solution. It's almost never necessary to dynamically add or remove an ID on an existing element. A proper solution would depend on exactly what it is you're trying to achieve.
You need to use .on method to register click event on #activeMenu
$('#activeMenu').on('click',function(){
$('.film').removeAttr("id");
});
How do i copy the contents of DIV1 to DIV2 on load of the page using jquery? I've tried
$('.buffer').html($("#beskeder_vis").html());
However i wasn't able to make it work out
Assuming your selectors are correct, you should put your code in the .ready() Event.
http://api.jquery.com/ready/
So something like:
jQuery(document).ready(function() {
jQuery('.buffer').html(jQuery("#beskeder_vis").html());
}
Otherwise jQuery won't be able to find your elements, since the DOM isn't loaded, when your function is executed.
You should bind event handler on ready event. See documentation: ready funciton
$(document).ready(function () {
$('.buffer').html($("#beskeder_vis").html());
});
$('#two').html($('#one').html());
See this live example
It works for me. It may have something to do with the jquery version your using
Proof jsfiddle
I have a simple jQuery('div#star').click(function.
The function works once when the DOM is initially loaded, but at a later time, I add a div#star to the DOM, and at that point the click function is not working.
I am using jQuery 1.4.4, and as far as I know, I shouldn't need to use .live or .bind anymore. There is never more than one div#star in the DOM at any one time. I tried changing from id="star" to class="star" but that didn't help.
Any suggestions on how to get this working or why it isn't working?
I've had the .click inside the jQuery(document).ready, and in an external js file, and neither works after adding the div to the DOM.
This works with jQuery 2.0.3
$(document).on('click', '#myDiv', function() {
myFunc();
});
As of jQuery 1.7, the .live() method is deprecated. The current recommendation is to use .on() which provides all functionality covering the previous methods of attaching event handlers. Simply put, you don't have to decide any more since on() does it all.
Documentation is handily provided in the help for converting from the older jQuery event methods .bind(), .delegate(), and .live()
You still need to use live events.
http://api.jquery.com/live/
try
.on('event', 'element', function(){
//code })
You need to use either live or delegate here. Nothing has changed in this department since jQuery 1.4.4.
Try to think of it like this: click and bind attach an event to the element itself, so when the element disappears, all the information about the event does too. live attaches the event at the document level and it includes information about which element and event type to listen for. delegate does the same thing, except it attaches the event information to whatever parent element you like.
user "live" method $("div#star").live("click", function() {});
Doc
You can use delegate instead on :
$(document).delegate('click', "selector", function() {
//your code
});
I hope it will help.
i made this using mootools:
$("fox").addEvent("click", function(){
alert("clicked");
});
and the html:
<p id="fox">A</p>
now if i try it here http://jsfiddle.net/5uJ54/3/ , it works but if i try it in a browser and thats all the code it doesnt, i get this in firebug:
$("fox") is null
and it doesnt work in chrome either.
why is this happening? i have also tried putting everything inside a function but it still doesnt work.
If you try to select your element before the document is ready then you will get null.
The JSFiddle sandbox you have is setup to run after the document has been loaded.
To get the code to work in your document you can listen for this MooTools event which will be triggered after the document is ready:
http://mootools.net/docs/core/Utilities/DOMReady
Your example would end up looking something like this:
window.addEvent('domready', function() {
$("fox").addEvent("click", function(){
alert("clicked");
});
});
Are you sure mootools is being loaded and you are putting the javascript within some sort of domready event? (Not sure what mootools's version of it is).
Because you didn't include the mootools javascript library anywhere?
So I have a script like this
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a[href*='http://']:not([href*='"+location.hostname+"'])").attr("target","_blank");
$("a[target!='_blank'][target!='_top']").click(function(){
var url=$(this).attr("href")+'?jquery=1';
ajaxpage(url,'actualcontent');
window.location.hash=$(this).attr("href");
return false;
});
});
</script>
and it works great. It means all my links load dynamically within the DIV - awesome. But, the links loaded in those div, don't load dynamically when clicked. and if I include this script in it, it still doesn't work. And on a similar note, is there a way of making javascript in pages, which have been loaded dynamically, work? Without including it in the original header?
Thanks.
Disclaimer: To use this solution, you'll need to upgrade to jQuery 1.3 or jQuery 1.4+
(But you should, there are many performance improvements and bug fixes since 1.2.6)
Instead of .click() you can use .live() here, like this:
$("a[target!='_blank'][target!='_top']").live('click', function(){
.live() works on dynamically added elements as well, since it's listening for the bubbling click event at document, rather than being a handler on the element itself.
Not sure what your problem is. You are saying that the links that are added after this function rn do not use this function? hint, you need to rescan the page to update the links in that div OR you can avoid that and use live().
Use .delegate()
// Don't need to put this in a $(document).ready() callback.
$(document).delegate("a[target!='_blank'][target!='_top']", "click", function(e){
var url=$(this).attr("href")+'?jquery=1';
ajaxpage(url,'actualcontent');
window.location.hash=$(this).attr("href");
e.preventDefault();
return false;
});
$(document).delegate("a[href*='http://']:not([href*='"+location.hostname+"'])", "click", function(){
// lazy attr setting, reduces query cost
$(this).attr("target", "_blank")
});