I am not sure what is causing the issue with my mobile menu system here.
I have two pages with an identical function to condense the nav systems into a mobile menu (below)
<script type="text/javascript">
$(document).ready(function() {
$('.main_nav nav ul').clone().appendTo('.top_menu');
$('.sec_nav nav ul').clone().appendTo('.top_menu');
$('.bottom-links ul').clone().appendTo('.top_menu');
$('.footer-links ul').clone().appendTo('.top_menu');
$('.rfi_nav').clone().appendTo('.m_form');
// For Menu-----------------
$('.menu, .m_close, .rfi_nav label.title').click(function(e) {
$('body').toggleClass('m_open');
});
// For Menu On window resize------------------
function checkwindowSize() {
var windowSize = $(window).width();
if(windowSize > 320 && windowSize < 1023) {
//$('body').toggleClass('open');
}
else{
$('body').removeClass('m_open');
}
}
checkwindowSize();
$(window).resize(function(){ checkwindowSize() });
// For BT Select DropDown-----------------
$('select').selectpicker();
// For content Scroll bar-----------------
(function($){
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"continuous",scrollSpeed:40,scrollAmount:40},
advanced:{updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:true, autoScrollOnFocus:true }
});
});
})(jQuery);
// BT Accordian------------
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
});
</script>
My script works perfectly on my homepage (http://dev.oru.edu) but my internal pages (http://dev.oru.edu/generic-hf.php and http://dev.oru.edu/generic-hfs.php) seem to be conflicting somewhere and I cannot detect where or why.
Can someone please help me identify what is causing the conflict resulting in my mobile menus not loading? I am not familiar with JavaScript so I am fumbling around and don't want to mess the code up from the original developer since it is still working on the homepage.
The furthest I have been able to detect is that the problem is not restricted to only mobile devices but desktop browsers as well when scaled to mobile sizes. At first I thought it may be relevant to the device type but the issue is persistent with the desktop browsers as well.
Looking at the error console is very telling:
Many of your scripts depend on JQuery being loaded before they run. You're loading JQuery, but doing it asynchronously:
<script async type="text/javascript" src="js/1.11.3.jquery.min.js"></script>
Your scripts are then immediately calling window.$ and window.jQuery which haven't been loaded yet.
Remove the async attribute and it should work.
I had an "async" on my primary jquery library which was causing the function to not load the library properly.
Related
I have jQuery-2.1.4.min.js called before the tag, but when I write something like:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert('hi, world.');
});
</script>
On my PC it is fired of course, but on ten different Android devices it just does not. This is purely HTML/CSS/jQuery rendered site (no phonegap, or anything).
My goal was to have a button do ajax request after it's being tapped, but I can't even test that, because the .ready() function is not firing at all on mobile chrome.
The jQuery is being served from the official CDN, any help would be very much appreciated.
Tried both:
$(function() {
alert('hi, world.');
});
And
jQuery(document).ready(function() {
alert('hi, world.');
});
Same thing.
As suggested I also tried:
window.onload = function()
{
if (window.jQuery)
{
alert('jQuery is loaded');
}
else
{
alert('jQuery is not loaded');
}
}
And it alerts 'jQuery is loaded'.
As per jQuery docs it says: "Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute" - which would mean that DOM is not ready for JavaScript code to execute? But when I try like:
<script type="text/javascript">
alert('hi world');
</script>
It executes on mobile Chrome.
Okay, after extensive investigation it seems that JS breaks on mobile chrome if you have document.ready() function twice, I had one in my core.js file and one in-line on the page.
It works okay on PC (all browsers), but on mobile it works up to the point of second ready() call and breaks all JS after that.
Hopefully this saves some time to others in the future.
JS breaks on mobile view becouse same js use multiple time in file. Check and remove redundancy.
I've seen topics on disabling javascript for mobile but it's a little over my head. I know just enough to be dangerous. I have a hover effect for captions on photos using a script but on a mobile I've set the css so that it displays by default. Only problem is when you click the image to view a lightbox it tries to fire the hover effect. How do I disable that?
<script type="text/javascript">
$(document).ready(function() {
$('.fade').hover(
function(){
$(this).find('.caption').fadeIn(250);
},
function(){
$(this).find('.caption').fadeOut(250);
}
);
});
</script>
You can disable (without much effort or danger) that particular behaviour for touch devices checking the existence of the 'ontouchstart' property on the window object like this:
$(document).ready(function() {
if (!('ontouchstart' in window)) {
$('.fade').hover(
function(){
$(this).find('.caption').fadeIn(250);
},
function(){
$(this).find('.caption').fadeOut(250);
}
);
}
});
Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});
Hey guys I'm just starting out with JQuery so I'm an utter noob, but I've been following the codecademy tutorial and am trying to implement a page resize function to fit into a resized browser. However nothing is working inside the script tags with jquery inside - even alerts aren't happening. The first script runs fine and says hi, but neither of the other two alerts work, nor any of the Jquery stuff. I'm not sure if it makes a difference, but there are two soundcloud widgets on the page as well, one which is a programmable widget.
<script type="text/javascript">alert("Hi");</script>
<script type="text/javascript">
alert("Hello");
$(document).ready(function() {
alert("Jquery");
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
)};
});
</script>
Apart from figuring out why nothing happens, I'd also like to know if this resize thing works.
You got syntax error : window.resize should close with }); not )};
And be sure you called jQuery first.
By the way : why don't you simply use Media Queries ?
#media screen and (max-width: 1020px) {
#page {
width: 500px;
}
}
Without seeing the head section of your page, it sounds like you do not have the jquery library loaded. You must include a reference to the library, you can download it to your server of reference it by including <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> on your page (before any calls to $)
If your script isn't doing anything, almost certainly you have a syntax error somewhere within your <script> tag that is causing the code to be invalid and fail to run.
In this situation, your problem is that you haven't closed your resize call / function parameter properly:
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
)};
should be
$(window).resize(function() {
if ($(window).width() < 1020) {
$('#page').css("width", "500px");
}
});
Note that the parentheses and curly braces at the end of the function must be closed in exactly the opposite order as they were opened at the start.
If you are sure that you have included the jquery library
*try this code:*
<script>
$(function () {
var oldY = document.documentElement.clientWidth;
if (oldY <= 1020) {
$('#page').css({'width', '500px'});
}
});
</script>
First correct the syntax by changing )} into }). Than make sure you are including the jquery.js file before using jQuery code. Something like:
<html><head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>//jQuery Code here</script>
</head>
<body>
<script>//jQuery Code here</script>
</body></html>
Maybe open the console and check the javascript error messages (i.e. Ctrl + Shift + I in Chrome/Firefox others might be different). Also enter $ === jQuery into the console and see to which it is evaluated (should be true if jQuery is bound to $).
It is a common shortcut in jQuery to use $( function() { ... } )); for document.ready see jQuery API
If you are using other JavaScript libs that might overwrite the $ use
jQuery( document ).ready(function( $ ) {
// Code using $ as usual goes here.
});
to ensure $ is bound to jQuery.
My jQuery script below works perfectly on all devices and PC except Windows Phone. I think it's a pretty standard coding but it gives me a problem. The #feed with the engine.php in it, does not update when I press refresh. ( only on Windows Phone)
A workaround I found is that if I cap +=1; on the #refresh click function then it works.
I am using the latest jQuery.
How can I fix this? Is there anything special about Windows Phone to make use of it ? It seems that there is something like cache, because when I refresh the page it does not chaneg. When I close the tab and open it again it takes me to the updated page.
<script type="text/javascript">
var cap = 18;
$(function() {
function loadfeed() {
$('#feed').load('engine.php?cap=' + cap, function() {
$("#loadmore").val('Show More');
});
}
loadfeed();
$("#refresh").click(function() {
loadfeed();
});
});
</script>
<div id="nav_bar">
refresh
</div>