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

JQuery failing to display image within set timeframe

In my website, I have implemented a feature that displays data from a database using auto-scrolling. As the user scrolls down the page, an AJAX function is triggered to fetch the next set of records from the database and append them to the existing content ...

jqueryhtmlajaxsettimeoutautoscroll

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

htmlcssbootstrap-4

Tips for working with JSON in jQuery/JavaScript

My setDefaultPoint controller returns a map in JSON format. Below is the code: def setDefaultPoint = { if (springSecurityService.isLoggedIn()) { def officeId = params.officeId def officeRoleInstance=OfficeRole.get(officeId) ...

jqueryajaxjsongrails

Encountering issues when passing a string as query parameters

How can I successfully pass a string value along with navigation from one component to another using query parameters? Component1: stringData = "Hello"; this.router.navigate(['component2'], { queryParams: stringData }); Component2: ...

javascriptangulartypescript

Looping through jQuery, I am adding divs, but frustratingly I can only insert text into the initial div created. Why

var numPills = 3 for(var i=0; i< numPills; i++){ //var currentPill = JUser.pill1.; $(".col-r-in").append( $('<div/>') .attr("id", "medsProgress") .addClass("roundedBar") ); $('#medsProgress').append( $('<div/>&apo ...

javascriptjquery

Having trouble with Lerna bootstrap? You might be running into the dreaded npm error code E401

Every time I run Lerna bootstrap on Jenkins, it fails with an error, but it works fine on my local machine. npm ERR! code E401 npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager" Package.json in the main folder ...

javascriptnode.jsnpmmonorepolerna

Embedding image URLs fetched from JSON data within <li> elements

I have successfully retrieved a JSON response, which is displayed using the code below: Within my HTML document, I have the following structure: <ol id="selectable"></ol> In my JavaScript code, I make use of the following: <script type=" ...

javascriptjqueryjsonjquery-uitags

jQuery-powered automatic horizontal scrolling

Does anyone know of a jQuery plugin that allows for scrolling of a div element when hovering over an arrow? The desired functionality is similar to the following image: , where the content inside automatically scrolls left or right when the user hovers ove ...

jqueryscroll

MongoDB has incorrect date and time records

I've been working on a blog site where entries are logged with the time and date they were posted and stored in MongoDB. Everything was working fine on my local machine, but when I deployed the site to Heroku, I noticed that the date displayed is 8 ho ...

javascriptnode.jsmongodbexpress

Having trouble making md-data-table directives function properly

I'm struggling to incorporate the md-data-table library from https://github.com/daniel-nagy/md-data-table into my webpage. Despite loading the library in Chrome, none of the directives seem to be working. Here's a snippet of my code - can anyone ...

javascriptangularjs

Generating dynamic input field values using jQuery in a CodeIgniter PHP framework application

I am facing an issue where I am unable to display the value from a dynamically created input field in the page controller. Below is the jQuery code used to append the dynamic input fields: var tableRow='<tr>'; tableRow+=' ...

javascriptphpjqueryhtmlcodeigniter

Using the <blink> tag on Internet Explorer

Unfortunately, Internet Explorer does not support the <blink> tag or the text-decoration:blink; style in CSS. Are there any alternative methods for creating blinking text in IE? ...

htmlcssinternet-explorer

Establishing the state in a separate React component

I've tried various solutions found in other posts, but I still can't seem to resolve this issue. My main goal is to update the state of one component from another component. Below is a simplified version of my code: function updateOtherState(n ...

javascriptreactjs

attempting to utilize jQuery to call a controller method, but encountering an issue where the method is failing to

In one of my pages, called "GetData.cshtml", I have a requirement to input data into some textboxes and send it to a controller method using jQuery. Here is the code snippet: //GetData.cshtml $(document).ready(function () { $('#btn_sbmt_recommenda ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

Objects array - does not support the 'push' function

In my code snippet, it looks like this: var result = {}; for (var i = 0; i < questions.length; i++) { if(result.hasOwnProperty(questions[i].group)) { var questionsInGroup = result[questions[i].group]; log.debug(typeof questionsInGroup); ...

javascriptnode.js

acquire data from a JSON array

Attempting to extract the SKU from a URL www.mbsmfg.co/shop/coles-grey/?format=json-pretty in JSON format, and display available values under variants for that specific product to users. For example, when a user visits www.mbsmfg.co/shop/coles-grey/, th ...

javascriptjsonyui

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui

I am looking to dynamically fill my form fields with data retrieved from my database through an AJAX call to another PHP file

I am attempting to dynamically populate my form fields with data retrieved from a database row using ajax. The goal is to send the id of the row I need when a specific button is clicked. Although I have managed to successfully fetch the desired row in the ...

javascriptphpajax

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

javascripthtmlcss

Placement Mismatch of Radio Button in Form.Check Component of React-Bootstrap

Recently, I've been working on implementing a payment method feature where users can choose their preferred payment option using radio buttons. However, there seems to be an issue with the alignment of the button. Below is the code snippet I have so ...

javascriptreactjsreact-bootstrap