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);
});

How to add a lightbox to webpage links

Can anyone help me to show lightbox popup for links such as below,
1) test1
2) test2
3) test3
When anyone clicked below links it should show in jquery lightbox instead open in target blank or redirect on the same browser.

if you use fancybox plugin this will works..
<a id="manual1" data-image="/example-full.jpg,/example-full-2.jpg'><img src="/example-thumb.png" alt="example" /></a>
<script type="text/javascript">
$('#manual1').click(function() {
var data = $(this).data('images').split(','),
options = {
padding : 38,
nextEffect : 'fade',
prevEffect : 'fade',
type: 'image'
};
$.fancybox.open(data , options );
})
</script>
Fiddle is : http://jsfiddle.net/voigtan/jJpAM/2/

I think this will work
<script type="text/javascript">
$(document).ready(function() {
$("a", ".rest-menuitem").click(
function(event) {
event.preventDefault();
var elementURL = $(this).attr("href");
$.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
});
});
</script>
Set innerWidth and innerHeight according to your content.

JS: Slide open multiple divs

So I found a script to slide open multiple divs but I can't seem to get it to work. I thought it was something wrong with my main page, but I created a separate page and still can't seem to get it to work.
No messages in debugger, and no errors; but the DIV doesn't appear.
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript'>
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>

It is working, for me. You forgot to call function showHide(), actually, and you can do it on this way:
$(document).ready(function() {
$('.show_hide').showHide();
});
http://jsbin.com/amuhom/1/edit
I have added one div and one button more. I guess this is expected behavior?

Jquery modal box to open a link and be degradable

I had a couple of questions in regards to a modal box plugin which I have found online. The code for my link is below:
<li><span id="label">Country: </span><span id="strong">United Kingdom</span>
This is what I want to use to trigger the opening of the modal box but I can't work out how I point the link to the modal box, importantly so that if javascript is still disabled, it will still link to another page. I think e prevent default is what I need but I am not sure.
// Modal Box
// Version 0.1
(function ($) {
$.fn.extend({
leanModal: function (options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
}
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function () {
close_modal(modal_id);
});
$(o.closeButton).click(function () {
close_modal(modal_id);
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$('#lean_overlay').css({
'display': 'block',
opacity: 0
});
$('#lean_overlay').fadeTo(200, o.overlay);
$(modal_id).css({
'display': 'block',
'position': 'fixed',
'opacity': 0,
'z-index': 11000,
'left': 50 + '%',
'margin-left': -(modal_width / 2) + "px",
'top': o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
'display': 'none'
});
}
}
});
})(jQuery);

I will try to explain to you how does it work.
You need two parts. Element, that will trigger modal box and element that is modal box.
This two parts are connected with href, as you understood well. Now the tricky part is, that first character in href has to be "#". Also modalbox id has to be same as href, except "#" character. Here is the code:
<a href="#my-first-modal-box" id="country_link">
<span id="label">Country: </span><span id="strong">United Kingdom</span>
</a>
<div id="my-first-modal-box"> This is what appears in modal box </div>
Now javascript/jQuery code. You will simple call function on a href:
$(document).ready(function() {
$("#country_link").leanModal();
});
Now after click on link, modal box will appear. Because link start with #, it doesnt call new page or page reload ;) (yes it is tricky part). Also I suggest to you to put this modal box in your html code directly under the link. So if javascript is turned off, then modal box is just simple div under the link and it is always visible. So your javascript will look like this:
$(document).ready(function() {
$("#my-first-modal-box").hide(); // this will hide modal box with javascript.
// It appears only if you click on link and it
// is visible if javascript is turned off
// you can add some options, like close buttons
var myCloseButton = $("<div class=\"close-button\"></div>");
// you append close button only if it is with javascript
myCloseButton.appendTo("#my-first-modal-box");
$("#country_link").leanModal({ closeButton : myCloseButton });
});

I can't get 2 javascripts to work simultaneously

On a website im building on a Joomla CMS i call inside the head tag these javascripts :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');</script>
I have two javascripts inserted on my index.php
One for a slideshow (gallerific) and another one for a dropdown menu.
The slideshow javascript :
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.9;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
/****************************************************************************************/
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
And the dropdown menu:
<script language="javascript" type="text/javascript">
var axm = {
openMenu: function() {
$('#newmenuheader').stop().animate({ 'height':'140px'}, "fast");
},
closeMenu: function() {
$('#newmenuheader').stop().css({'overflow': 'hidden'}).animate({'height':'55px'}, "fast");
},
};
</script>
I can get only one script run at a time not both. If one runs the other doesn't. I need to have them both.
At the time the javascript for the slideshow is running. Is there a conflict of some sort ?
Thanks in advance.

The second chunk of javascript code with the var axm needs to be added to the
jQuery(document).ready(function($) {}
Otherwise the browser doesn't know to run it. And you should re-write this function, don't use
jQuery(document).ready(function($) {}
just use
$(function(){
//your javascript and jQuery here for binding events, styles, and functions
}
this is a function that will run once the page is ready.