I am just trying to check the window width and based on the width I change some values using jQuery.
<script>
$(document).ready(function () {
var windowsize = $(window).width();
if (windowsize < 480) {
//DO SOMETHING
});
}
else {
//DO SOMETHING
}
});
</script>
I'm receiving the following error:
Name cannot begin with the ' ' character, hexadecimal value 0x20. Line 365, position 28
Only the if else condition having the error.
You have extra commas after the last parameter in both cases, and it looks like you have unprintable characters as well.
Delete the trailing commas, clean up the whitespace, and you should be good.
Like this:
moveSlides: 1
});
you have an incorrect )}; closing.
$(document).ready(function () {
var windowsize = $(window).width();
if (windowsize < 480) {
//DO SOMETHING
} else {
//DO SOMETHING
}
});
Your code is correct. You should try indenting your code so that the brackets line up
I've altered your code so that it outputs to the console for each of the if conditions. This is giving me the expected results whenever I call it.
$(document).ready(function () {
var windowsize = $(window).width();
if (windowsize < 480) {
console.log('less than');
}
else {
console.log('greater than');
}
});
Your code is incorrect });
<script>
$(document).ready(function () {
var windowsize = $(window).width();
if (windowsize < 480) {
//DO SOMETHING // }); // here no need to close this
} else {
//DO SOMETHING
}
});
</script>
Related
I need some help writing a function with multiple if statements (unless there is a better method). I basically want to truncate text length based on window size. So if the viewport is less than 400px and the text length is greater than 35, then truncate using this method below...
$('option').each(function () {
var text = $(this).text();
if (text.length > 35) {
text = text.substring(0, 35) + '...';
$(this).text(text);
}
});
The function for window resize (basically combine above with below):
$(document).ready(function(){
if($( window ).width() < 400){
//do something;
}else{
//do something else;
}
});
$( window ).resize(function() {
if($( window ).width() < 400){
//do something;
}else{
//do something else;
}
});
Did a little more research and got it working with this code:
$(document).ready(myfunction);
$(window).on('resize',myfunction);
$('option').each(myfunction);
function myfunction() {
var text = $(this).text();
if (text.length > 35 == ($(window)).width() < 400) {
text = text.substring(0, 35) + '...';
$(this).text(text);
}
}
I wonder if/how a math function could calculate viewport width as a range and change truncation up to a maximum breakpoint?
I ended up answering my own question. So, I am posting it here incase someone else has a similar need or can improve what I have done...
Basically, I am truncating select option boxes by applying character length and window width. This prevents very lengthy option text to flow past its container and beyond the screen. I am sure there is a more efficient way to code this, but my tests appear to be successful which works for now.
/**
* Truncate lengthy option text in select boxes
*/
var defaultString=$('option').text();
function checkWidth() {
if($(window).width() > 600){
$('option').each(function(i){
len=$(this).text().length;
if(len>65)
{
$(this).text($(this).text().substr(0,65)+'...');
}
});
return false;
}
if ($(window).width() > 451 && $(window).width() < 599 ) {
$('option').each(function(i){
len=$(this).text().length;
if(len>50)
{
$(this).text($(this).text().substr(0,50)+'...');
}
});
return false;
}
if($(window).width() < 450){
$('option').each(function(i){
len=$(this).text().length;
if(len>35)
{
$(this).text($(this).text().substr(0,35)+'...');
}
});
return false;
}
}
checkWidth();
$(window).resize(checkWidth);
$(document).ready(checkWidth);
The last three lines bind 'checkWidth' and window 'resize' (which can also be 'width' or 'height') depending upon what you are achieving. Binding must be done before you can execute the function events.
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});
How to switch hover and click when window size change
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
$(window).resize(checkWidth);
However I found hover is always on, so I had to change to this way
var windowsize = $window.width();
if (windowsize > 480) {
$('#clickPoint').on('click', function(){
......//code
});
}else {
$('#clickPoint').off('click', function(){
......//code
});
$('#clickPoint').on('hover',function(){
......//code
});
}
}();
but still doesn't work properly, if someone has a better solution?Thanks
Take a close look at $window.width(). I suspect that. Try changing it to $(window).width(). Make changes to the code that you provided at the top. Because the code at the bottom looks messed up.
Also make sure to check the window width by using an alert or log. Just to make sure that the if statement is working right.
Try it like this
var permit=2;
$('#clickPoint').on('click', function(){
if(permit==0)
{
......//code
}
});
$('#clickPoint').on('hover',function(){
if(permit==1)
{
......//code
}
});
function checkWidth() {
var windowsize = $(window).width();
if (windowsize > 480) {
permit=0;
}else {
permit=1;
}
}
$(window).resize(checkWidth);
I want to add some condition in jquery like media queries in CSS, anyone can help me with this? I try the code below but is not working:
jQuery(document).ready(function(){
if (jQuery(window).width() >= 320) && (jQuery(window).width() <= 479) {
}
if (jQuery(window).width() >= 480) && (jQuery(window).width() <= 567) {
}
});
You have parentheses around your individual conditions, but not around the if conditions as a whole.
Try this:
jQuery(document).ready(function(){
alert("Running");
alert(jQuery(window).width());
if ((jQuery(window).width() >= 320) && (jQuery(window).width() <= 479)) {
alert('Small screen');
} else
if ((jQuery(window).width() >= 480) && (jQuery(window).width() <= 567)) {
alert('Large screen');
} else {
alert("Biggest screen");
}
});
Note the extra parentheses after if and before {
You actually don't need mediaqueries in JS to do your task the right way. First of all: how to work with media queries in JS. You can use matchMedia. Here is a brief documentation.
Here is a simple example:
var smallMatcher = matchMedia('(max-width: 480px)');
var biggerMatcher = matchMedia('(max-width: 1024px)');
var run = function(){
if(smallMatcher.matches) {
//run code for small
} else if(biggerMatcher.matches){
//run code for bigger
} else {
//run code for else
}
};
//now run it
run();
//in case you need to dynamically change on resize
//use addListener
smallMatcher.addListener(run);
biggerMatcher.addListener(run);
But as said, you don't need this. What you actually need to do is simple separation of concerns. Don't mix your behavior with your CSS. Simply add focus/blur or focusin/focusout events, the add or remove a class and do everything else in CSS.
This should result in clean and simple code, here is an example:
$('#searchbox')
.on('focus', function(){
$(this).closest('form').addClass('focused-field');
})
.on('blur', function(){
$(this).closest('form').removeClass('focused-field');
})
;
Everything else can and should be handled in CSS.
And In case you need the modify the style for the input button also if the button itself is focused and not only the search input you can see the following fiddle.
I'm trying to limit the number of newline that can be enter in a dynamic textarea, but the codes I made is not working. I need to set atleast 4 newlines that the user can make. Also I set the maxlength to 40 characters.
here is my codes.
$(document).ready(function(){
$("[name='memo[]']").each(function(){
$(this).keydown(function() {
newLines = $(this).val().split("\n").length;
$(this).text(newLines);
if(e.keyCode == 13 && newLines >= 4) {
alert("Exceed");
return false;
}
});
});
});
Try this:
$(document).ready(function() {
$("[name='memo[]']").each(function() {
var textarea = $(this);
textarea.attr('maxlength', 40);
textarea.keydown(function(e) {
var newLines = textarea.val().split(/\r*\n/).length;
if (e.keyCode === 13 && newLines >= 4) {
e.preventDefault();
}
});
});
});
UPDATE:
Dont alert and the code works fine. Demo link is: http://jsfiddle.net/bobkhin/nJWk2/
get the lines in text area with the below example code and try...
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }