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.
Related
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);
});
I'm using smoothState on a WordPress site, however I need to add a section of javascript to create a pop-up modal.
The javascript I currently have only works when the page is refreshed, I tried a few different methods I've seen posted on here and on stackoverflow. Anything I try either doesn't work or breaks the site.
This is my working smoothstate code:
jQuery(document).ready(function( $ ) {
'use strict';
var $page = $('#smoothstate'),
options = {
debug: true,
prefetch: true,
cacheLength: 4,
onStart: {
duration: 150, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
$container.addClass('fade--in');
}
}
}
});
This is my javascript I need to load:
(function($) {
$(".orange-btn").click(function(e){
$(".hidden").fadeIn( 500 );
$(".hidden").addClass( "click" );
e.preventDefault();
$(".closebox").addClass( "close" );
});
}(jQuery));
I'd be really grateful if anyone could help! Thanks!
I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.
var edit_div=document.createElement('div');
var me = this;
$(edit_div).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:
$(document).ready(function()
{
mfg_table.init();
}
And the init code to create the dialog
this.init = function()
{
//alert('initing');
var me = this;
$('#' +this.table_id + this.edit_table_name).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
}
So why can't I create the dialog on the DOM object before rendering of the page?
Is it possible your script is being called before your jquery.js files are being loaded by the browser?
Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.
You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.
I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.
I'm using the jQuery plugin RhinoSlider and have it working ok, however I want to load the content via AJAX to speed up the page load times. According to their site you need to change the call a little as per: http://rhinoslider.com/tricks/get-the-content-of-the-slider-via-ajax/
The default call is:
$(document).ready(function(){
// store the jquery object
var $slider = $('#slider');
$.get('content-of-slider.php', function(data){
$slider.append(data).rhinoslider();
});
});
That works fine, however I still need to include my options, I tried the below but it didn't work..
$(document).ready(function(){
// store the jquery object
var $slider = $('#slider');
$.get('content-of-slider.php', function(data){
$slider.append(data).rhinoslider(
showTime: 6000,
effectTime: 2500,
autoPlay: true,
showBullets: 'always',
showControls: 'never',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
);
});
});
Seems I was missing the curly braces after the rhinoslider( portion; I added them as below and it now works.
$(document).ready(function() {
// store the jquery object
var $slider = $('#slider');
$.get('content-of-slider.php', function(data){
$slider.append(data).rhinoslider({
showTime: 6000,
effectTime: 2500,
autoPlay: false,
showBullets: 'always',
showControls: 'never',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
});
});
});
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.