I am using fancyBox to load Ajax content as:
Example
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
The documentation says that you can prevent outside scrolling if you set:
scrollOutside = false
But this does not work when loading ajax content.
How can I prevent that the scrolling outside of the fancyBox does not appear when the fancyBox is visible?
Try this:
$(document).ready(function() {
$('.fancybox').fancybox({
scrollOutside: false
});
});
Related
I am using a plugin in my site called AnimateScroll, it works fine but I want the page to scroll to the element (with effects) as and when the page loads.
I tried the following code:
$(
$("#element-id").animatescroll();
);
But its not working?
The correct way for DOM ready handler is to wrap your code inside$(document).ready(function() {...}) or $(function() {....}); not $();, so you can use:
$(document).ready(function() {
$("#element-id").animatescroll();
});
or:
$(function() {
$("#element-id").animatescroll();
});
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<a class="trigger" href="#">Shoutbox</a>
<div class="shoutpanel">
<iframe id="shoutbox" name="shoutbox" width="350" height="480" src="tchat.php">
</iframe>
</div>
This script will toggle a sliding panel with a shoutbox in it.
If i put the shoutbox outside of the sliding panel then it will automatically scroll down as soon as it is loaded (to display the last shout)
But for some unknown reason when i put the shoutbox inside the sliding panel, it won't scroll down unless i manually refresh it.
So i am trying to find a workaround and i thought about setting the trigger script to automatically refresh the shoutbox iframe when it is executed. So when you click the trigger it would refresh the shoutbox after opening the sliding panel
i'm not a jquery pro so i have not been able to do it myself... Basically i just need something like this:
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
document.getElementById(shoutbox).contentDocument.location.reload(true);
});
});
Couple of issues:
You have a return false in your click event (which is not required) and also it is before your reload statement. So it never executes.
document.getElementById(shoutbox) should have the id in quotes.
With this you are always reloading the iframe even during slideUp.
Try this:
$(document).ready(function () {
$(".trigger").click(function () {
$(".shoutpanel").toggle("fast", function () { //Use toggle's complete function
if ($(this).is(':visible')) { // check if this is in visible mode
document.getElementById("shoutbox")
.contentDocument.location.reload(true); //reload the iframe
}
});
$(this).toggleClass("active");
});
});
Fiddle
I'm trying to figure out why my jquery isn't working correctly. I click on my navbar link and the content space shows for .0923202 of a second and goes back to be hidden. Thank you.
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
});
});
http://jsfiddle.net/NHgpg/
While anchor tags are meant to send users to another page, you're using it to show new content on the page. You will want to return false to override the default behavior of the anchor tag
$(document).ready(function() {
$(".content").hide();
$("a").click(function() {
$(".content").show();
return false;
});
});
Is there any way to run some function before and accordion it's fully opened?
Here's the code:
$.each($('.accordion-toggle'),function(){
$(this).click(function() {
if($(this).hasClass("collapsed")){
//loading content via ajax
};
});
I tried to use .on('show') functions and changing data-toggle with javascript opening and closing content, but it seems to be very complicated due to existing code.
Try this...
$.each($('.accordion-toggle'),function(){
$(this).click(function() {
if($(this).hasClass("collapsed")){
\\loading content via ajax
}
});
});
You forget the ";"...
I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.
Page I'm working on is here: http://turningpointpro.com/page.php?id=10
I ended up finding two solutions. The first and best was to put this whole bit:
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
into the ajax callback, not the prettyPhoto.init(); function I was calling before.
I also had some luck with using the API instead of re-loading prettyPhoto again.
Hope this helps someone.
If you are using ASP.NET with Ajax, the scriptmanager will allow you to use a function called pageLoad() that is called every time the page posts back (async or otherwise).
your code:
function pageLoad()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$(function() {
$('#navigation a.button').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('#portfolio').quicksand( $(data).find('li'), { adjustHeight: 'dynamic' }, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); } );
});
e.preventDefault();
});
});