I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.
Hovering over the items some information appear. That works until I use the paginator to go to the next page.
The pagination reloads the content. But it has the same structure as when I refresh the page.
Here's my code:
$(document).ready(function() {
$(".cornerize").corner("5px");
$('a#verd').live('click', exSite);
$("a.tp").live('click', thumpsUp);
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
$('a.ppname[rel]').each(function(){
$(this).qtip( {
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
}
});
});
});
The html/dom does not change:
<a class="ppname" rel="link" href="#">...</a>
qTip takes from every a.ppname the rel value end loads the content.
This is happening because new elements are not automatically "qTiped" when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().
This has been solved before (judging from the comment): Problem with qTip - Tips not showing because elements load after the script.
The correct way to do it is (from that answer):
$('a.ppname[rel]').live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip({
overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
show: {
ready: true // Needed to make it show on first mouseover event
},
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
});
target.trigger('mouseover');
});
Related
i have realized a "help"-view in a fancybox.
In this fancybox i've got a navigation menue. This menue works with anchor links. So far so good.
Now i want to open this fancybox and directly scroll to a spezific anchor.
Here my code, how i open the fancybox:
$.fancybox({
width : 1000,
height : 800,
minHeight : 800,
maxHeight : 800,
minWidth : 1000,
maxWidth : 1000,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'yes',
href : "#idofview",
})
I tried a few things, but nothing works.
I tried:
location.href = "#anchor";
//or
location.hash = "#anchor";
//or
afterShow: function() {
$(this).closest('.fancybox-inner').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#anchorid").offset().top
});
//or
$(document.body).scrollTop($('#anchorid').offset().top);
I also tried to trigger the click of my anchor link:
$("#btn_link").trigger('click');
Is there any reason to direktly scroll to the anchor in a fancybox?
You may need to find the offset().top of your targeted anchor first, then just animate the .fancybox-inner selector to that position (you don't need this $(this).closest() method at all) so :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// API options
afterShow: function () {
var toScroll = $(".fancybox-inner").find("#anchor2").offset().top - 35;
$(".fancybox-inner").animate({
scrollTop: toScroll
}, 1000);
}
}); // fancybox
}); // ready
Notice that I am subtracting 35px from the offset (in var toScroll) because the fancybox's padding, but this is a variable you may need to play with.
See JSFIDDLE
It seems like a trivial task to do but I'm still unable to accomplish it.
I'm building an application with ExtJS 5 and I have a panel with an image component on it. The panel has to resize (shrinkWrap : true) to the original size of the image. The problem is that when the layout manager is calculating the size of the panel, the image isn't yet loaded completely so it's size is 0,0. I tried to add different listeners like afterrender, render, boxready and practically all of the rest but nothing seems to work fo me - the image size is always equals to 0. I also tried to bind the sizes of the two components as you'll see in the code below, but this doesn't worked either. If i configure the boxready event with a delay of 1 second the image size is finally computed and I can call updateLayout() but this is a very unreliable solution because the image is loaded from remote server and I'm unable to predict the exact time of server response. I know that at some point of the application lifecycle the image is loaded and I need to find which event is being fired in order to resize my panel.
Example code
Ext.application({ name : 'MyApp',
launch : function() {
/*
* I was hoping that taking the image out of the panel
* will 'force' it to be created earlier.
*/
var img = Ext.create('Ext.Img', {
src : 'img.jpg',
reference : 'bgimg',
publishes : {
width : true,
height: true
}
listeners : {
boxready : { fn : 'imgReady', scope : this, delay : 100 }
}
});
Ext.create('Ext.Panel', {
renderTo : Ext.get('extjs-content'),
width : 1000,
height: 700,
defaults : {
border : true
},
layout : 'border',
items : [{
region : 'north',
height : 80,
}, {
region : 'east',
width : 200,
collapsible : true
}, {
region : 'center',
autoScroll : true,
items : [{
/*
* This is the container of the image. Please note that
* I need it to preserve its absolute layout.
*/
id : 'canvas',
layout : 'absolute',
shrinkWrap : true,
// bind : {
// width : '{bgimg.width}',
// height: '{bgimg.height}'
// },
items : [img]
}]
}]
});
},
/*
* If I call this with delay of 1000ms the image size is 'ready'
* otherwise it is 0, 0.
*/
imgReady : function(img) {
console.log('Image size: %o', img.getSize());
Ext.ComponentQuery.query('#canvas')[0].updateLayout();
}
});
You can track when the image is loaded with the load event of the img element.
var img = Ext.create('Ext.Img', {
src : 'img.jpg',
reference : 'bgimg',
publishes : {
width : true,
height: true
},
listeners : {
load : {
element : 'el',
fn : 'imgReady'
}
}
});
I have an html page with some inputs and textareas.
I want them to have qTip with different texts.
Here is my attempt
First I add a qTip to every element,
$('input, textarea').each(function() {
$(this).qtip(
{
content : 'generated', //this is for debug
position : {
my : 'center left',
at : 'center right',
adjust : {
x : 90
}
}
});
});
and then I'm trying to change an qTip text like this
$("#firstName").qtip('option', 'content.text', 'adwd');
but it is not working.
I tried this
$("#lastName").qtip({
content : 'text text'
});
which is working fine but it overrides the position
This code working for me:
$("#firstName").qtip('option', 'content.text', 'new tooltip content')
If you have to change it on an event (eg over or similar) try using this code:
// make sure you target a specific tip
var qapi = $('#firstName').data('qtip'),
newtip = 'new tooltip content'
qapi.options.content.text = newtip; // update content stored in options
qapi.elements.content.text(newtip); // update visible tooltip content
qapi.redraw(); // redraw to adjust tooltip borders
The code update only a specific option and leave the others as are.
Demo: http://jsfiddle.net/IrvinDominin/L7fs5/
Is there a simple way to show the spinner ($.mobile.showPageLoadingMsg()) on just one element/region ?
I'm loading this element's content via AJAX, so until it's finished I have to block it and show this spinner.
You can set the CSS position of the loading spinner to appear over a certain region. Here is a code example that both shows and hides the loading spinner over an element:
//this is an IIFE, it creates an enclosure around the code that separates it from global code
(function ($) {
//a flag so we know what state the loading spinner is in
var isShowing = false;
//this example is binding to all link elements
$('a').on('click', function () {
//check if the loading spinner is already showing
if (isShowing === false) {
//the loader is not showing, so create an overlay in the container element
var $con = $('#container').append('<div class="container-overlay"></div>');
//now position the loader over the container
$('.ui-loader').css({
position : 'absolute',
top : ($con.offset().top + ($con.height() / 2)),
left : ($con.offset().left + ($con.width() / 2))
});
//fade-in the overlay and show the loading spinner
$con.children('.container-overlay').fadeIn(500);
$.mobile.showPageLoadingMsg();
//set the flag so next time around we hide the spinner
isShowing = true;
} else {
//fade-out the overlay
$('#container').children('.container-overlay').fadeOut(500, function () {
//remove the overlay from the DOM
$(this).remove();
//hide the loader
$.mobile.hidePageLoadingMsg();
//reset the CSS of the loader element
$el.css({
position : 'fixed',
top : '50%',
left : '50%'
});
});
//set the flag so next time around we show the loading spinner
isShowing = false;
}
});
})(jQuery);
Here is a demo: http://jsfiddle.net/CkUZf/
For the demo (link) above, I used this CSS for the overlay element:
#container .container-overlay {
display : none;
height : 100%;
background : #000;
background : rgba(0, 0, 0, 0.75);
}
It would also be possible to append the loader element to whatever container you want to "load" but $.mobile.showPageLoadingMsg() automatically resets the loader element so you'd have to disable that code in the jQuery Mobile include (which is why I went this the lighter CSS version above).
Update
This is probably more like what you were thinking:
$.fn.customMobileSpinner = function (options) {
var defaults = {
url : null,
fadeDuration : 500,
bgColor : 'rgba(0, 0, 0, 0.75)',
bgColorFallback : '#000'
};
//merge the defaults and options objects
options = $.extend({}, defaults, options);
//make sure the URL is specified
if (options.url !== null) {
//only work with the first element passed-in
var $element = this.eq(0);
$element.append(
$('<div class="container-overlay" />').css({
display : 'none',
height : '100%',
width : '100%',
background : options.bgColorFallback,
background : options.bgColor
})
).children('.container-overlay').fadeIn(options.fadeDuration);
//update loader CSS
$('.ui-loader').css({
position : 'absolute',
top : ($element.offset().top + ($element.height() / 2)),
left : ($element.offset().left + ($element.width() / 2))
});
//show spinner
$.mobile.showPageLoadingMsg();
//create AJAX call
$.ajax({
url : options.url,
success : function (response) {
$element.fadeOut(options.fadeDuration, function () {
$element.html(response).fadeIn(options.fadeDuration);
$.mobile.hidePageLoadingMsg();
//reset loader CSS
$(".ui-loader").css({
position : 'fixed',
top : '50%',
left : '50%'
});
});
}
});
}
};
Then you just call this method on a jQuery object:
$('#some-container').customMobileSpinner({
url : 'some-url'
});
I'm afraid you can't. Take a look at the docs, you can just customize the message or hide the spinner, but not making it fit to a element.
If you just want to show a spinner on some element loading, use the beforeSend and complete options of the ajax method to hide/show it
this kind of emergency, so please, can someone help me...
I'm using movingboxes plugin for slideshow(this is the original plugin:http://css-tricks.com/moving-boxes/)
I need help with setting callback function add to the end of animation. I need to add fading effect, when currentSlidecomplete sliding,it should start fading into another view of the same image, for example,surrentSlide src is images/dr1.jpg and i need it to fade to images/dr1b.jpg and come back to images/dr1.jpg. looping through each current Slide
something like
completed :
function(e, slider, tar){
//fading for each currentSlide goes here;//
}
Something like you describe is already in the documentation
see the documentation here [1] and more specifically here [2].
EDIT: check jsfiddle here, i used a jquery add-on http://jsfiddle.net/r6yWC/157/
the add-on is here http://jqueryfordesigners.com/image-cross-fade-transition/
I also edited the code section below. I added the class "fade" to the img tag like this:
<img class="fade" src="http://chriscoyier.github.com/MovingBoxes/demo/4.jpg" alt="picture" style="background: url(http://chriscoyier.github.com/MovingBoxes/demo/2.jpg);"/>
In the 2nd link you will find a movingBoxes sample with a completed callback.
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
// cache the copy of jQuery(this) - the start image
var $$ = $(this);
// get the target from the backgroundImage + regexp
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
// nice long chain: wrap img element in span
$$.wrap('<span style="position: relative;"></span>')
// change selector to parent - i.e. newly created span
.parent()
// prepend a new image inside the span
.prepend('<img>')
// change the selector to the newly created image
.find(':first-child')
// set the image to the target
.attr('src', target);
// the CSS styling of the start image needs to be handled
// differently for different browsers
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
// Browser sniffing is bad - however opera < 9.5 has a render bug
// so this is required to get around it we can't apply the 'top' : 0
// separately because Mozilla strips the style set originally somehow...
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
// similar effect as single image technique, except using .animate
// which will handle the fading up from the right opacity for us
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};
})(jQuery);
$('#slider').movingBoxes({
// **** Appearance ****
// start with this panel
...
...
//-----> here is your callback
// callback after animation completes
completed: function(e, slider, tar){
var img = slider.$panels.eq(tar).find('img');
img.cross();
img.stop().animate({opacity: 0}, 1250).delay(500).animate({opacity: 1}, 2550);
}
});
[1] https://github.com/chriscoyier/MovingBoxes/wiki
[2] http://jsfiddle.net/Mottie/r6yWC/2/