Issue with hiding div using jQuery's length option

I'm currently using Drupal 7.0 along with the Galleria Javascript Image Gallery in fullscreen theme. My theme includes two navigation buttons, and here is the CSS code for them:

.galleria-image-nav {
  height: 159px;
  opacity: 0.8;
  position: fixed;
  right: 0;
  top: 65%;
  width: 82px;
  z-index: 11000;
}

My goal is to hide these navigation buttons with a fadeout effect when the browser reaches a width of 960px. Here is my attempted JavaScript code:

if ( $(".galleria-image-nav").length > 0 ) {
  if ( w_width < 960 ) {
    $(".galleria-image-nav").fadeOut(400);
  } else {
    $(".galleria-image-nav").fadeIn(400);
  }
}

However, this function is not working as expected. Can anyone help me identify the problem? Thank you. (Apologies for any language errors.)

jquerycssdrupal

Answer №1

$(window).resize(function() {
  if ( $(".gallery-image-nav").length > 0 ) {
     if ( $(window).width() < 1200 ) {
       $(".gallery-image-nav").fadeOut(300);
       }
     else {
       $(".gallery-image-nav").fadeIn(300);
       } 
     }
});​

That code snippet seems like it could do the trick!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a pause into a JavaScript function

Consider the following function: $(document.body).ready(function() { var o = $(".hidden"); $(".about_us").click(function() { o.hasClass("visible") ? o.removeClass("visible") : o.addClass("visible"); }); }); I am looking to add a delay to this f ...

javascriptjquerydelaysettimeout

Efficiently encode and decode JSON data between PHP and JavaScript

I am attempting to convert my array results into JSON format and then transmit them to an AJAX success event using JavaScript. PHP $results = array( "time1" => 1, "time2" => 2, ); echo json_encode($results); JAVASCRIPT ...

phpjavascriptjqueryajaxjson

Issue encountered during an asynchronous call to an ASP.NET web method using $Ajax

Currently, I am dealing with an async web method (asmx file) and I am trying to call this method within an ajax jquery method. However, I am encountering numerous issues because the method also utilizes Entity Framework for various functionalities. Below ...

c#jqueryajaxweb-servicesasynchronous

How can I ensure my custom CSS stylesheet takes precedence over Inline CSS when working with Bootstrap?

Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

htmlcssbootstrap-5

When the submit button on the signup form is pressed, two distinct actions are activated to achieve specific outcomes

I am seeking assistance in implementing code that will trigger the following action: Upon clicking the 'Submit' button on a signup form after the subscriber enters their email address and name, the signup page should reload within the same tab wi ...

javascriptphpjqueryhtmlforms

Struggling with generating forms using AJAX, Javascript, and HTML depending on the selection made from a drop-down menu

I am in need of a simple web form for work submissions within my organization. These submissions will fit into 4 Categories, each requiring unique information. Currently, I have a basic form set up with fields such as Requested Name, Requested Date, Acquis ...

javascriptjqueryhtmlcssajax

Sending an array and an object simultaneously through a single ajax request

I previously inquired about passing an object to an ajax request for my rest service. Now I am wondering if it's possible to pass both an array and an object within a single ajax request. Any insights on this matter would be greatly valued. ...

javascriptjqueryajaxarraysobject

Having trouble with uploading an image in Laravel using a modal?

For my laravel inventory system, I am facing an issue with uploading images for products. The old code I used for image upload is not working in my current project where I am utilizing a modal and ajax request to save inputs in the database. Can anyone pro ...

javascriptphpjqueryajaxlaravel

Problem involving non-breaking spaces

After changing the font-family of my website from Gotham Pro to Gotham, I encountered an issue with the styling of numbers that were formatted using my currency formatter function. Strangely, when the &nbsp character is removed, everything appears to b ...

javascripthtmlcssreactjs

Steps to activate and deactivate a submission button depending on input values

I want to ensure that the next button is enabled only when values are entered in the textarea and the textarea is not empty. Take a look at my code snippet below: <div class="preview_field content-post-1stpage-next"> <label class= ...

jquery

Transfer the selected value from the initial dropdown menu to the second dropdown menu seamlessly without the need to

My website features a repair pricing calculator that allows users to select a brand from a dropdown menu and then choose the specific model from a second dropdown. Currently, after selecting an option from the first dropdown, the page reloads and passes th ...

phpjqueryajaxwordpressdropdown

Is the JavaScript Base64 image data damaged or compromised?

My current task involves selecting an image through an HTML Input and then retrieving the image using Javascript to obtain its Base64/Image Data string. However, the code I have implemented is only returning a partially corrupt or invalid representation o ...

javascriptjqueryhtmlimagebase64

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

javascriptcsscookiesthemeschm

Comprehend PHP scripts within a separate JavaScript file

$(".btn-delete-news").click(function() { if (!confirm('Are you sure to delete ?')) return false; var idNews = $(this).attr('news-info'); console.log(idNews); $.ajax({ url:"<?php echo Yii::app()->createUrl( ...

phpjqueryajaxyii

Fetching data from multiple tables in CodeIgniter using PHP and jQuery and returning it asynchronously with Ajax

Currently, I am utilizing jQuery to retrieve JSON data through AJAX from a CodeIgniter backend and MySQL database, which is functioning correctly. However, the issue I am facing is that in addition to fetching the data returned to the jQuery function, I al ...

phpjqueryajaxcodeigniter

Struggling to display AJAX GET results on my webpage, although they are visible in the Google Element Inspector

I'm working on a basic invoice page where I need to populate a dropdown box from my MySQL database. The issue I'm facing is that when I select an item, the description box doesn't get prepopulated as expected. I've checked in the networ ...

javascriptphpjquerymysqlajax

Issue encountered when making several calls with the jQuery Ajax load() function

Hey there! I'm currently in the process of incorporating the jQuery load() method to dynamically load content into a web page based on the input value entered. However, I seem to be encountering an issue where multiple AJAX calls are being made simult ...

jqueryajax

Troubleshooting a Malfunctioning AJAX Request in a WordPress Plugin

After carefully reviewing this post about a jQuery Ajax call in a Wordpress plugin page, I found that it closely matched my current issue. My basic Wordpress plugin is designed to offer a specific membership form that passes payment details to PayPal for p ...

javascriptphpjqueryajaxwordpress

hover effect with fading transition while mouse is still hovering

Is there a way to create a fade-in/fade-out effect on a div without the mouse needing to leave the area? Let me provide a clearer explanation: When the mouse enters the object The object gradually fades in Then, after a delay, the object fades out while ...

javascriptjquerycsshover

Utilizing AJAX JSONP with Jersey for JAX-RS Restful service

I've searched high and low on various forums, including stackoverflow, but unfortunately, I haven't been able to find a solution to my specific issue. Below is the code snippet for my Restful service: @GET @Path("/GetAllProducts") @Produces(Med ...

jqueryajaxjsonrestjax-rs