I have a bootstrap modal. after it's shown, I run the ajax to get remote content. after ajax get success. Response shown but bootstrap modal not allow me to scroll. I've already search for resolution but nothing. Help me please!
JS:
$("#episodenext").modal('show');
$("#episodenext").on("shown.bs.modal", function() {
$(this).find(".modal-body").load('/content.php');
});
You can make this work by setting the .modal-body height to be 70% of the document height before it loads the page content.php.
Try this code here
$("#episodenext .modal-body").css({
'overflow': 'auto',
'height': $(document).height() * 0.7
});
$("#episodenext").on("shown.bs.modal", function() {
$(this).find(".modal-body").load('/content.php');
});
$("#episodenext").modal('show');
And you can check my example here: http://zikro.gr/dbg/html/bootstrap-modalscroll/
UPDATE
Here is the screen capture with the modal after applying 70% height:
Related
I'm trying to mantain a container div behind my colorbox fixed while the user scrolls inside the colorbox itself.
I Google´d about it and found, quoting Jake Moore:
Example:
$().bind('cbox_open', function(){
$('body').css({overflow:'hidden'}); }).bind('cbox_closed', function(){
$('body').css({overflow:'auto'}); });
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
But the previously aint working for me, the scroll locks in the div behind but also in the colorbox, so the user cant scroll anywhere!
I am guessing the iframe has something to do with it since im calling colorbox this way:
$(document).on("click", ".some-link", function(e){
e.preventDefault();
var url = $(this).attr('href');
$.colorbox({
onComplete: function(){
some other stuff()
$.colorbox.resize();
$('body').css({overflow:'hidden'})
},
onCleanup: function(){
some other stuff()
$('body').css({overflow:'hidden'})
},
href: url,
});
});
Any ideas? Is there any other way to disable the scroll within a div, but allowing it in another one ?
Im using colorbox with something like infinite-scroll so when the user scrolls down more information keeps showing up (div boxes actually). Those boxes are the ones that fire the colorbox, ".some-link" is a link within the box.
Hope my english is tuned. Regards! Agustin
I am using Jquery UI ajax tabs to display the content on my site. The tabs are working great. On each on of my Ajax tabs I have an image rotator that is not working so great.
The image rotator requires jquery to work properly. All of the jquery image rotator plugin files seem to be working fine except for this code...
jQuery(document).ready(function($) {
var banner1 = $('#banner-rotator1').royalSlider({
imageAlignCenter:true,
imageScaleMode: "fill",
hideArrowOnLastSlide:true,
slideSpacing:20,
autoScaleSlider: true,
autoScaleSliderWidth: 1150,
autoScaleSliderHeight: 400
}).data("royalSlider");
var banner2 = $('#banner-rotator2').royalSlider({
imageAlignCenter:true,
imageScaleMode: "fill",
hideArrowOnLastSlide:true,
slideSpacing:20,
autoScaleSlider: true,
autoScaleSliderWidth: 1150,
autoScaleSliderHeight: 400
}).data("royalSlider");
var banner3 = $('#banner-rotator3').royalSlider({
imageAlignCenter:true,
imageScaleMode: "fill",
hideArrowOnLastSlide:true,
slideSpacing:20,
autoScaleSlider: true,
autoScaleSliderWidth: 1150,
autoScaleSliderHeight: 400
}).data("royalSlider");
var banner4 = $('#banner-rotator4').royalSlider({
imageAlignCenter:true,
imageScaleMode: "fill",
hideArrowOnLastSlide:true,
slideSpacing:20,
autoScaleSlider: true,
autoScaleSliderWidth: 1150,
autoScaleSliderHeight: 400
}).data("royalSlider");
});
I know the code works because if I cut and paste it into the ajax pages it works fine, but I can't seem to get the image rotator to work when the code is placed in the "master page". Does anyone have any idea what I am doing wrong?
Here is a link to my page http://dl.dropbox.com/u/14080718/Ajax-Test/Ajax-stripped.html
It's because this code is run when the DOM is ready, that is, the master page DOM is ready. You later load your ajax content and the javascript code has already run prior to the ajax content loading. What you can do is place that code in a function. Then in your ajax loaded content run that function on document.ready
E.g
In your masterpage
function code_to_run(){
// your code here
}
In your ajax loaded content
$(function(){
code_to_run() // call the function in your masterpage
});
The interaction of Master Pages and Content Pages is complex and may be understood better by looking at http://www.codeproject.com/Articles/36107/Master-Page-and-Content-Page-Interaction.
Therein you find a paragraph describing how to reference Content Pages from the Master Page.
I hope this helps
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.
I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video won't start from beginning after every page load. The only way I was able to do this was with this sort of code:
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//For loading
var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";
// Var
var loadPage1 = "page1.html";
// Load page
$("#page1").click(function(){
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1);
$("#content").show(2000);
});
All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).
So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.
Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.
Thanks.
Show the element in the load callback handler.
i.e:
$("#page1").click(function(){
$("#content").hide();
$("#content").html(ajax_load).load(loadPage1, function(){
$("#content").show(2000)
});
});
.load() takes 2 arguments, the URI and a callback to fire after load.
API is found here: http://api.jquery.com/load/
function() {
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1, function() {
$("#content").show(2000);
});
}
i want to apply jquery tooltip plugin from jQuery Tools website
(http://flowplayer.org/tools/tooltip/index.html) to some elements loaded by ajax in my page.
i know that delegate(0 and live() methods are used for applying events to ajax loaded elements but i don't know how i can apply a plugin to these kind of elements.
the code is:
$("#mytable img").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: 'down', bounce: true } });
would someone help me?
thank you.
Apply the call to a hover function portion of your script like:
$("#mytable img").live('hover', function() {
//your function here
});
Alternatively you can use the script directly inside the ajax page you're loading in, in which case the script is directly in the same layer as the content.
You have to initialize the tooltip plugin on the new content on the success function of your ajax call.
it is solved now.i wrote it here:
jQuery Tooltip plugin error