jQuery responsive hover and click swtich - javascript

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

Related

Combine Window Resize with Text Length

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.

Keyboard disappearing when input on focus - mobile

I have this code and everything works good, but when I open my search bar on mobile and click on input field, my keyboard opens and closes, I found that window.resize is the problem, but I haven't found any fixes for this, what should I do?
function appendSearchBar() {
if($(window).width() <= 769){
$('.search-bar').appendTo('.mobile-toolbar .global-search');
} else {
$('.search-bar').appendTo('.header-toolbar-nav .global-search');
}
}
$(window).resize(function() {
appendSearchBar();
});
When you appendTo the element is detach and re-attached to the DOM and thus loses focus.
You should only append if it is not where you want it.
let inMobile;
function appendSearchBar(firstTime) {
const windowWidth = $(window).width();
if (windowWidth <= 769 && (!inMobile || firstTime)) {
inMobile = true;
$('.search-bar').appendTo('.mobile-toolbar .global-search');
}
if (windowWidth > 769 && (inMobile || firstTime)) {
inMobile = false;
$('.search-bar').appendTo('.header-toolbar-nav .global-search');
}
$(window).resize(function() {
appendSearchBar();
});
appendSearchBar(true);

click function only available above 1024px breakpoint

I have a mute button that I only want to work above screen width 1024.
The function should not be available below the mentioned break point. I have tried a couple of ways but still not able to achieve this. Any pointers would be helpful. Please see my snippet below:
if($(window).width() > 1024) {
$("#mute").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Removed javascript error, It should work now.
if($(window).width() > 1024) {
$("#mute").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
});
}
I think, You should check for the window width if there was a resize and then perform the necessary action.
Something like this:
$(document).ready(function(){
$( window ).resize(function() {
if(window.width < 1024)
{
$("#mute").off("click");
}
else
{
$("#mute").click(function() {
. . .
})
}
});
$("window").trigger("resize"); // On trigger resize to make button active if window is already > 1024
})
You're adding click handler when executing the code, not when doing the click. when width > 1024px at the time you execute that code the handler gets created and will still work when width drops below 1024px. Similarly when execute that code and width < 1024px then the click handler will never be created!
So, try this code (inside $.ready or similar):
$("#mute").click(function() {
if ($(window).width() <= 1024) return; // maybe return false;
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).removeClass("fa-volume-off");
$(this).addClass("fa-volume-up");
} else {
$("video").prop('muted', true);
$(this).removeClass("fa-volume-up");
$(this).addClass("fa-volume-off");
}
});
EDIT: as already commented above while I was answering...
Just try to swap the if statement with the click event handler.
$(document).ready(function() {
$("#mute").click(function() {
if ($(window).width() > 1024) {
alert("Clicked");
}
});
});
Here's a Fiddle for you to test.

Animate some divs only once

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

Name cannot begin with the ' ' character in jquery if else condition

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>

Categories

Resources