I have this problem: I use colorbox to make those jQuery popups (colorbox). The problem is that I want to fade in the content smoothly via ajax without that loading div which you can see right before the content shows up.
When I disable the loading div via opacity it is gone, but I can't fade in my content smoothly. It just pop-ups suddenly.
<script type="text/javascript">
$(document).ready(function(){
$(".register_link").colorbox({
initialWidth:'886',
initialHeight:'410',
fixed:'true',
scrolling:'false',
transition:'fade',
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").css("opacity", 1);
}
});
});
</script>
You can use the jQuery animate() function, instead of the .css() function
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").animate({"opacity": 1});
}
Related
I have tinymce working well FIRST time you click the button, but after that it doesn't init anymore, no errors however.
To get editor again you need to refresh page.
Is it possible to get init editor to the text area every time you open the modal without refreshing page ?
$(document).ready(function() {
$(document).on('click', '.btn.modal', function() {
var title = $('.modal-title'),
content = $('.modal-body'),
footer = $('.modal-footer');
$.post('units.php', { addnew: 'unit' }, function(r) {
title.html(r.title);
content.html(r.content);
footer.html(r.btns);
tinymce.init({ selector: 'textarea' });
$('#modal').modal('show');
},'json');
});
});
The problem is you are using the general initialisating, which probably conflits with the textarea(s) which already have been initialised... .
The best way to solve this is by destroying all the initialised tinymce first using:
$('textarea').tinymce().remove();
and then initialising them again like this:
tinymce.init({ selector: 'textarea' });
In your example this would be:
$(document).ready(function() {
$(document).on('click', '.btn.modal', function() {
var title = $('.modal-title'),
content = $('.modal-body'),
footer = $('.modal-footer');
$.post('units.php', { addnew: 'unit' }, function(r) {
title.html(r.title);
content.html(r.content);
footer.html(r.btns);
$('textarea').tinymce().remove();
tinymce.init({ selector: 'textarea' });
$('#modal').modal('show');
},'json');
});
});
I am using jquery to open popups. My popup content consist of image and text.
When I click pop1 I get my pop1 content. When I click pop2 for few seconds I see my pop1 content and then my pop2 loads. How can I fix this?
my popup code:
$(document).ready(function(){
///////LINKS - POPUP////////
$('#all').delegate('a.pop-lnk', 'click', function(){
var page = $(this).attr('id');
$('#popup').empty();
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
$('#popup').load("../phpHandler.php?page="+ page);
})
$('body').delegate('.hide-it', 'click', function(){
$('.hide-it').hide();
})
});
my php that handles the links (phpHandler):
<?php
$page = $_GET['page'];
$pages = array('pop1',
'pop2');
if (!empty($page)) {
if(in_array($page,$pages)){
$page .= '.php';
require_once('../' . $page . '');
}
else require_once('../err.php');
}
else require_once('../err.php');
?>
That is because you first show the element containing the previously loaded pop1 content
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
and then you start to load the new content
$('#popup').load("../phpHandler.php?page="+ page);
It is not a caching but a timing issue :)
Show the popup in a .load callback so that the html is loaded before you show it.
$('#popup').load("../phpHandler.php?page="+ page, function(){
$('#popup').css({'display': 'block'});
});
When you hide your modal, clear out its contents.
$('body').delegate('.hide-it', 'click', function(){
$('.hide-it').hide();
$('#popup').empty();
})
});
The Question
How could I make it where when you pull <div id="content"> down, it does a function and shows a div at the top of the screen that says "Pull Down To Refresh"?
I know iScroll does this, but it won't work with what I'm trying to do. It only works with UL's.
Here is my HTML
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
</span>
</div>
<div id="content">
(There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>
<script>
$(function() {
var refreshCallback = function(loader) {
setTimeout(function(){
//loader.finish();
}, 1000);
};
var cancelRefreshing = function() {
};
$("#draggable").pulltorefresh({
async: true,
// event triggered when refreshing start
refresh: function(event, finishCallback) {
element = $(this)
setTimeout(function(){
alert("refresh");
// you must call this function if refreshing process runs asynchronusly
finishCallback();
}, 1000);
},
abort: function() {
alert("abort");
}
});
});
</script>
for full Demo Click Here
You can provide with iScroll plugin.
iScroll 4: http://cubiq.org/iscroll-4
Github Page: https://github.com/cubiq/iscroll
Demo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
try this
$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );
inside the function u can have the ajax call to load the content
$("#content").load("<something.php>");
that is on the whole
$( "#pullDown" ).on( "dragstart", function() {
$("#content").load("<something.php>");
} );
I'm using Twitter Bootstrap's Popover feature on a sidebar. The sidebar is fetched and reloads the content every 30 seconds. I'm suing XMLHttpRequest to reload the content of the sidebar by fetching a file called stats.php.
The following code is the "refresh" code which resides in the header of the page.
function onIndexLoad()
{
setInterval(onTimerCallback, 30000);
}
function onTimerCallback()
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("stats").style.opacity = 0;
setTimeout(function() {
document.getElementById("stats").innerHTML = request.responseText;
document.getElementById("stats").style.opacity = 100;
}, 1000);
}
}
request.open("GET", "stats.php", true);
request.send();
}
The above code works flawlessly, however, after it reloads the #stats div, the popover no long does what it's supposed to - popup.
The popover code is in the stats.php in a foreach() loop because I have multiple popover scripts I need because there are multiple popovers on the sidebar.
Here's my popover code:
$(document).ready(function() {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
The $id and $title are dynamic as they are pulled from the foreach() loop.
How can I fix it so after the div reloads, the popover function will reinitialize?
$("a[rel=popover_controller_$cid]").on({
mouseenter: function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
}
});
I have also tried:
$("a[rel=popover_controller_$cid]").on("mouseover", function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
.live is depreciated. use .on delegation
try something like this:
$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
This delegates the mouseenter event from #stats to a[rel=popover_controller_$cid] and because the event is delegated it will still fire when #stats contents are replaced.
be careful - you will keep initializing popover on each mouseover. that might be bad.
while you are at it - you should use jquery's ajax instead of native xhr. its easier and more cross browser.
$.get('stats.php', function(d){
$('#stats').html(d);
};
--
setInterval(function(){
$.get('stats.php', function(data) {
$('#stats').html(data);
});
}, 30000);
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});