Using Jquery to set values for css properties

I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with:

if (scrnwidth <= 761) {
        if (display was block) {
            //Defaultly testi has display:none property.
            testi = make testi display
        }
        else{
            return false;
        }
    }

I haven't been able to get this task to work properly. How can I add CSS properties? I have checked for errors in the code but couldn't find any issues. Here's what I have so far:

jQuery('.menu_toggler').click(function () {
    var scrnwidth = jQuery(window).width();
    var display = jQuery('.mobile_menu_wrapperr');
    var testi = jQuery('.main_header');
    if (scrnwidth <= 761) {
        if (display.css("display") === "block") {
            testi = testi.css("display" == "none");
        }
        else{
            return false;
        }
    }
});

Any help would be greatly appreciated. Thank you.

javascriptjquerycss

Answer №1

If you want a div to appear, simply use the following code:

$('#id-of-div').show();

To hide a div, execute:

$('#id-of-div').hide();

And for toggling between show and hide, try this:

$('#id-of-div').toggle();

Answer №2

Your method of concealing the element is slightly incorrect, make sure you provide the rule and value as separate parameters:

testi.css("display", "none");
// or testi.hide()

However, I would recommend avoiding JavaScript for this task and opt for CSS media queries instead:

.main_header {
  display: block;
}

@media (max-width: 760px) {
  .main_header {
    display: none;
  } 
}

Answer №3

There is a mistake in the syntax

 var element = testi.css("visibility" == "hidden");

The correct syntax should be

 var element = testi.css("visibility","hidden");

Alternatively,

testi.hide();

Answer №4

Perhaps jquery isn't necessary...

document.querySelector('#element').style.visibility = 'visible' // 'hidden'

Answer №5

jQuery('.menu_toggler').click(function () {
    var windowSize = jQuery(window).width();
    var menuWrapper = jQuery('.mobile_menu_wrapperr');
    var header = jQuery('.main_header');
    if (windowSize <= 761) {
        if (menuWrapper.attr("style")=="display:block") {
            header = header.attr("style","display:none;");
        }
        else{
            return false;
        }
    }
});

Answer №6

Fix the Syntax :

jQuery('.menu_toggle').on('click', function () {

    var screenWidth = jQuery(window).width();
    var display = jQuery('.mobile_menu_wrapper');
    var header = jQuery('.main_header');
    
    if (screenWidth <= 761) {
        if (display.css("display") === "block") {
            header.css("display", "none");
        } else {
            return false;
        }
    }
});

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

Experiencing a 404 ERROR while attempting to submit an API POST request for a Hubspot form within a Next.js application

Currently, I am in the process of developing a Hubspot email submission form using nextjs and typescript. However, I am encountering a couple of errors that I need help with. The first error pertains to my 'response' constant, which is declared b ...

javascriptreactjstypescriptnext.js

Tips for transferring data from Express to .ejs file during redirection in Node.js

When I submit the login form in my login.ejs file, the page redirects if the details are correct. If the password is wrong, however, I want to display a message in the .ejs file indicating this. Below are the details: Here is the code in my app.js file - ...

javascriptnode.jsexpress

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

javascripthtml

Inverted Scrolling Problem in Firefox

I am facing an issue with a script that inverts mouse movement for horizontal scrolling. It works fine in most browsers except Firefox. I could use some advice on how to troubleshoot this problem! $("body").mousewheel(function(event, delta) { ...

javascriptjquery

Unexpected box-shadow issue with Material UI's Box component

During the development of my application, I encountered an issue with rendering a list of items. The state consists of a simple array containing elements with a name, an identifier, and a selected key that determines whether special styles should be applie ...

javascriptreactjsmaterial-ui

Tips for achieving horizontal alignment of headers

My webpage has two headers positioned as 'CompanyName' on the top left and 'Date' at the top middle but I am struggling to align them horizontally. I attempted to enclose them inside a div element, however, this did not work. Can someon ...

htmlcssasp.net-mvc

Searching for a way to retrieve all information based on the parent in a dynamically dependent Laravel system?

Is there a way to fetch all child data by default in a dropdown list, but still have the option to select parent data when needed? I am using AJAX and I'm new to it. Edit: I have a 'category' dropdown with dynamically loaded parent data fro ...

jqueryajaxlaravel

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

htmlcsssvghigh-contrast

Is there a way to remove the bold styling from text next to JavaScript?

I recently launched a website at www.mvscaccounting.com, and I added a search engine made from javascript at the bottom of the page. Next to it, I wanted to put a "all rights reserved" notice. However, whenever I try to add any text next to the search engi ...

javascripthtmldreamweaver

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

What purpose does Webpack serve in injecting React?

Within my webpack entry file, I have the following code snippet: import ReactDOM from 'react-dom'; import Layout from './components/Layout'; // ... dialog = document.createElement("dialog"); ReactDOM.render(<Layout dialog={dialog} ...

javascriptreactjswebpack

What are the possibilities of utilizing a variable that is stated within composition to enable dynamic rendering?

I'm working on a Vue.js v3 project using the composition API. I have defined a variable in my setup like this: setup() { const showInvoiceItemForm = true; return { showInvoiceItemForm }; }, Now, I want to show a form when a button is click ...

javascriptvue.jsvuejs3

@page Css not displaying properly on the Mozilla Firefox browser

In order to fulfill my requirement, I need to ensure that there is a consistent 10cm margin on all pages when printing. Printing on my web page involves utilizing the window.print() function. However, due to the dynamic nature of the content, the number o ...

cssasp.net-mvcprinting

When using .live("click", function() {}), my button fails to update and transition to a different page in jQuery Mobile

When I try to click my button anchor tag, the page does not load a new one. This issue has cropped up for me today even though I am using the most recent version of Jquery mobile. My code snippet: $("a[href=#Page1").live("click",function() { upd ...

jqueryjquery-mobile

Creating consistent image sizes in Bootstrap

I'm currently using Bootstrap 4 to showcase multiple images on my website. I have attempted to apply the Grid system as per Bootstrap's guidelines, but the display of the images is not aesthetically pleasing due to their uneven sizes, which can b ...

htmlcssfrontendbootstrap-4

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this? Below is the code for my dynamic table where I ...

javascriptjquerycssdynamicclick

Running CesiumJS is a straightforward process that can be done by

After diligently following the provided instructions, I managed to get cesium running locally. I then attempted the hello world example as shown: However, despite clicking on "open in browser," I couldn't see anything. It has been a constant struggl ...

javascripthtmlcssconfigurationcesiumjs

What is preventing my function from retrieving user input from an ngForm?

I'm currently working on my angular component's class. I am attempting to gather user input from a form and create an array of words from that input. The "data" parameter in my submit function is the 'value' attribute of the ngForm. Fo ...

javascriptangulartypescript

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

htmlcsscss-tables

Is it possible to have several forms triggered by the same AJAX call but produce varying results

If I have multiple PHP-generated forms and want to include a "Reply" button on each form that sends its content via ajax to another PHP page, can I use the same JavaScript code snippet for all of these elements? <form id="foo"> <label for="ba ...

phpajaxjquery