jquery page resize not working - javascript

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.

Related

Is it possible to use one jquery in one specific part of my page?

Sorry if my question is too easy, I just trying to learn how to be my self clear, and as a novice I Find this most dificult.
Well, for exemple, I need to use:
<script src="/jquery-1.12.3.min.js"></script>
<script>
my code (sortable funcions)
</script>
And that is ok for me! but once I add more < scripts xxxx.js> my all page freezes...
my console returns:
form:699 Uncaught TypeError: $(...).minicolors is not a function
or
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function
Uncaught TypeError: $(...).sparkline is not a function
So, here is my question:
1) How to solve this conflicts? Are they conflicts?
2) Is it possible to run this "jquery-1.12.3.min.js" in one small part of may page? like:
<script src="/minicolors.js"></script>
<script src="/nicescroll.js"></script>
<script src="/jquery-1.12.3.min.js">
my JS code (sortable funcions)
</script>
</script>
the rest of JS code( minicolors and nicescroll)
And by doing this, prevent erros?
you need to take care of the order in which the files are loaded...
Always load jquery library first, And then rest all plugin's can come through.
use this order
< script src="/jquery-1.12.3.min.js" ></script> // 1st load jquery library
< script src="/minicolors.js" >< /script > // other plugin after jquery
< script src="/nicescroll.js" >< /script > // other plugins after jquery
< script type="text/javascript"> //your custom code
my JS code (sortable funcions)
< / script>
Regarding the errors
form:699 Uncaught TypeError: $(...).minicolors is not a function
or
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function
Uncaught TypeError: $(...).sparkline is not a function
This happens because the jquery library is not loaded, So the plugins will also crash (As it is written in Jquery). If you change the order as mentioned everything should be fine
Try This
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
https://api.jquery.com/jquery.noconflict/
I recommend you to put your script-Code in the $(document).ready(function(){}) body. This will prevent the executing of yur script before the site is loaded completely.
I assume that you want to execute some functions when you clicked on a button or some <input> or <select> has changed.
Therefore you can do something like this:
$(document).ready(function(){
$('#'+yourButtonId).click(function(){
//do what you want to do when your button was clciked
});
$('#'+yourInputOrSelectId).on('change',function(){
//do whatever you want when the user typed sth in yout input or
//selected an item out of your <select>
myCustomFunction('NewOption');
});
function myCustomFunction(argument){
//do custom things with the argument
//you can also do things with your elements on the web site
$('#'+selecId).empty(); //just an example
$('#'+selectId).append( $('<option/>').val(argument) );
}
}

Javascript Conflict with PHP

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.

Using JavaScript to shrink navbar

I tried to use this example to add a shrink-on-scroll navbar to a webpage, but when I copied their Javascript and CSS rules across to my document, it no longer worked. The shrink class is not added to my <nav> elements like it is on their demo. When I downloaded their demo code, it didn't work either, despite working in the online example.
This is the JavaScript I've used:
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
});
I have also tried using this script with the first (and last) lines removed, as is shown elsewhere in the example.
The only answer I can think of is that Chrome refuses to execute JavaScript on local files. Is this the case, or have I missed something?
make sure you include jquery into your html BEFORE your external js file , ex:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Though seems you have already figured out the problem - just a small suggestion is to try writing your code like this - it will look much better :)
$(window).scroll(function(){
var liveview = $(document).scrollTop();
if (liveview > 120) {
$("nav").addClass("shrink");
} else {
$("nav").removeClass("shrink");
}
});

Prevent inline scripts loading until Jquery has been loaded

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

jQuery fadeout on scroll - what am I doing wrong?

I am trying to implement http://jsfiddle.net/NKgG9/6/ into my website.
It's supposed to fade out a div when the user starts scrolling down. Instead the div just sits there, comlpetely visible and unchanging. I'm a massive newbie to java so figure it's something really basic and fundamental I'm missing.
Here's what I'm doing:
Inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var targets = $(".scroll_note, .social");
if($(window).scrollTop() > 10){
targets.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 10){
targets.stop(true, true).fadeOut("fast" );
} else {
targets.stop(true, true).fadeIn("fast");
}
});
});?
</script>
And then inside the body tag:
<div class="scroll_note">Scroll down to see our amazing specials!</div>
Please help me!
Thanks, Alex :)
The other script you include, fadeslideshow.js, calls jQuery.noConflict which removes the global assignment of jQuery to the $ variable. You have a few ways around this:
Remove the call to jQuery.noConflict in fadeslideshow.js. This may break that slideshow script, however.
Use jQuery instead of $ in your JavaScript code above.
Wrap your code in a self-invoking function that remaps the global jQuery to $:
(function($) { /* your code here */ })(jQuery);
You have a ? at the end of your code that is going to throw an error and kill the script. Remove it and you should be all set.
Edit:
I see you posted your site. Your script tag pointing to the google API is malformed. It doesn't start with http:, just starts with //. Fix that, then see where you are
Edit2: Wyatt pointed out this is not true. See his answer.

Categories

Resources