We Keep Coding

jQuery bxslider dynamic update not working

I am having issues with dynamically updating content with bxslider. I am able to successfully load the content by entering the li items in HTML. When I attempt to append or replace the ul html with new li content from my database, it fails to reload the slider. Here is the important markups from my script. Is there any reason why I get no errors in the console.log and no images or slides?
var url = 'image/picture.jpg';
updateSlider('<li><img src=\''+url+'\'></li>');
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function(){
$('.bx-viewport').css({'height':'100% !important'});}}
$(function(){
slider = $('.bxslider').bxSlider(sliderConfig);
});
function updateSlider(data){
$('.bxslider').html(data);
slider.reloadSlider(sliderConfig);
}

I found the answer, thank you for your suggestions.
The issue lies with the CSS. Once i reloaded the slider, the CSS was setting to 0 on the .bx-wrapper, .bx-viewport, .bxslider and .bxslider li elements. Once i reset them to the necessary heights it resolved my issue.
$(".bx-wrapper,.bx-viewport,.bxslider,.bxslider li").css("height",newHeight);

Try like this, means call the updateSlider('<li><img src=\''+url+'\'></li>'); only after you are having data using any delayed function like as ajax. I have put on document ready but you need to run after successful ajax request:
var url = 'image/picture.jpg';
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function () {
$('.bx-viewport').css({'height': '100% !important'});
}
}
function updateSlider(data) {
$('.bxslider').html(data);
}
$(function () {
slider = $('.bxslider').bxSlider(sliderConfig);
//update slider on load or after any ajax call success
updateSlider('<li><img src=\'' + url + '\'></li>');
});
$('document').on('click', 'a', function () {
slider.reloadSlider(sliderConfig);
});

slow query infinitescroll respond on tumblr?

I'm using this code which I found was faster than the one I used to have:
<script type="text/javascript">
$(window).load(function(){
var $wall = $('.posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry',
isAnimated : false
});
});
$wall.infinitescroll({
navSelector : "div#navigation",
nextSelector : "div#navigation a#nextPage",
itemSelector : ".entry",
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('.posts').show(500);
});
</script> <script>
$.fn.changebackgroundColor = function(msg) {
$("#perma").css("#000"); }; </script>
But it's still rather slow, there is a delay for the posts to load and I wondered what is it that I could change. I use 3 columns with about 1100px large in total.

From the docs: the issue is probably related to the bufferPx property.
bufferPx : 40,
// increase this number if you want infscroll to fire quicker
// (a high number means a user will not see the loading message)
// new in 1.2
// default: 40
If adjusting that value doesn't have a noticeable impact, it could just be the loading time, depending on how much data is being loaded.

jquerytools tooltip on ajax issue

Ok im doing an ajax call every 15 seconds, this the first time "disable" the tooltip when ajax call was made, i fix this running a function an calling again the function that starts tooltip.
The problem is.. If there is one tooltip "open" when the ajax call is made, this and only this tooltip of this item is destroyed forever, the rest is working fine. until again you are on a open tooltip when the ajax run.
How can i fix this..
here is my code
function notifications() {
$.ajax(
{
type: "POST",
//data: dataparam,
url: "<?php echo $notifurl;?>",
success: function(msg)
{
if(msg !="")
{
$("#ajaxnotif").empty().html(msg);
$('.tooltip').remove();
ttp();
//$("#suggestDiv").show();
}
else
{
$("#ajaxnotif").empty().html(msg);
$('.tooltip').remove();
ttp();
//$("#suggestDiv").hide();
}
}
});
}
$(document).ready(notifications);
window.setInterval(function(){
notifications();
}, 15000);
var $tooltip = null;
var $tooltip2 = null;
var $tooltip3 = null;
function ttp() {
$tooltip = $('.marcleidnot[title]').tooltip({
delay:0,
slideInSpeed: 300,
slideOutSpeed: 200,
bounce: false,
/*bounce: false*/
relative: false, // <-- Adding this should sort you out
slideOffset: 5,
/* effect: 'slide',
direction: 'down',
slideInSpeed: 300,
slideOutSpeed: 200,*/
position: 'top center'
});
$tooltip2 = $('.fav[title]').tooltip({
delay:100,
slideInSpeed: 300,
slideOutSpeed: 300,
/*bounce: false,*/
relative: false, // <-- Adding this should sort you out
effect: 'slide',
direction: 'down',
/*slideInSpeed: 300,
slideOutSpeed: 200,*/
position: 'top center',
offset: [10, -2]
});
$tooltip3 = $('.nofav[title]').tooltip({
delay:100,
slideInSpeed: 300,
slideOutSpeed: 300,
/*bounce: true,*/
relative: false, // <-- Adding this should sort you out
effect: 'slide',
direction: 'down',
/*slideInSpeed: 300,
slideOutSpeed: 200,*/
position: 'top center',
offset: [10, -2]
});
}
$('body').click(function() {
$('.tooltip').remove();//remove the tool tip element
});

I think you aren't properly using the tooltip api. So instead of
$('.tooltip').remove();
do
$tooltip.tooltip("destroy");
$tooltip2.tooltip("destroy");
$tooltip3.tooltip("destroy");

Thanks to user3352495, i figure out what the problem was, then i figure out this
$tooltip = $('.marcleidnot[title]').tooltip("destroy");
$tooltip2 = $('.fav[title]').tooltip("destroy");
$tooltip3 = $('.nofav[title]').tooltip("destroy");
Wich is working fine until now
ACtually i found out i just need to delete this!
just restarting the function doing
ttp(); in the ajax solve this :D

The problem is that the tooltip in Jquery Tools doesn't create the .tooptip elements by default but only creates them when the tooltips appear for the first time. So in your case, when $tooltip appears there's only one .tooltip element associating with it, the other 2 haven't appeared yet.
To comprehensively remove all tooltips, you can use this plugin. It removes the .tooltip element if it's already there or unbinds the mouse events if it's not. After adding the plugin you can simply call $tooltip.tooltip('remove').

Why this code doesn't work (and how to repair it)?

This question is a consequence of another question of mine.
The code is:
<script type='text/javascript'>
var scripts = [
"http://www.---.com/include/jquery-1.8.3.min.js",
"http://www.---.com/include/functions.js",
"http://www.---.com/include/myjs.js",
"http://www.---.com/include/plugins/bxslider/bxslider.js"
];
function downloadJSAtOnload() {
for( var i=0; i<scripts.length; i++ ) {
var element = document.createElement('script');
element.src = scripts[i];
document.body.appendChild(element);
}
$(document).ready(function(){
$('#mainslide .bxslider').bxSlider({
slideWidth: '960',
mode: 'vertical',
speed: '500',
captions: false,
pager: false,
controls: false,
nextText: 'Next',
prevText: 'Prev',
auto: true,
autoHover: true,
pause: 3000
});
});
}
if (window.addEventListener) window.addEventListener('load', downloadJSAtOnload, false);
else if (window.attachEvent) window.attachEvent('onload', downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
The error generated is "Uncaught ReferenceError: $ is not defined ".
The strange is that everything works perfectly (slideshow, lightbox, ...) in lots of browsers and verions. Just in IE8 and Safari 4 an alert is showed to the user.

Since you are dynamically adding the JS libraries to the document, you will required a callback function after the scripts are loaded in order to initialize the bxSlider. Ideally the callback should be called after the bxSlider has loaded.
element.setAttribute("type","text/javascript");
element.onload = callBackFunction;
document.body.appendChild(element);
var callBackFunction() {
$('#mainslide .bxslider').bxSlider({
slideWidth: '960',
mode: 'vertical',
speed: '500',
captions: false,
pager: false,
controls: false,
nextText: 'Next',
prevText: 'Prev',
auto: true,
autoHover: true,
pause: 3000
});
}

Those browsers may well be too slow to actually load the jQuery files after the script elements are created in the body before they get to the first $.
Why not declare them in script tags in the head of your document?

You add your scripts to the document body (they should really be in the head) but don't wait for them to be downloaded and executed before accessing jQuery in $(document).ready(...) so I would expect this to fail at least some of the time. You need to attach to the document onready event without using jQuery.

separate import the jquery example
<script src="http://www.---.com/include/jquery-1.8.3.min.js"> </ script>

Take your function out of document.ready() and add it to the end of your jQuery.js file. That way it will only be run after jQuery loads.

How to change pager text in jquery cycle

I am trying to change the text of the jquery cycle pager element. By default is is 1, 2, 3 etc. I would like to just make a customized name for each one. Here is the url:
http://www.rockymountainsports.ca/web/layout.html
Any help is great,
Thanks

Try this:
$(document).ready(function () {
var titles = ['Pentiction Summer Classic', 'Ryan Kesler', 'Trevor Linden'];
$('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
fx: 'fade',
timeout: 5000,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});