Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px?
Below is the jQuery code I'm attempting to use:
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
I'm having trouble getting it to work - Am I missing something here?
It doesn't make much sense to use javascript/JQuery in this situation. Instead, consider using CSS media queries like this:
.mobile-section {
display: none;
background-color: orange;
}
@media screen and (max-width: 700px) {
.mobile-section {
display: block;
}
}<div class="mobile-section">
hello mobile section
</div>width() is a useful function provided by jQuery that allows you to access the width property of elements like document or window. In this scenario, it specifically refers to the width of the document.
It's worth noting the distinction between jQuery's .width() and screen.width - screen.width is a built-in DOM property that gives you the width of the entire screen. For example, if your monitor has a resolution of 1920x1200, screen.width would be 1920.
$(document).ready(function() {
if (($(this).width() > 701)) {
$(".mobile-section").css('display', 'none');
$(".yourClass").hide();
}
else {
$(".mobile-section").css('display', 'block');
}
});Implement responsive design using media queries, all without the need for JavaScript.
@media only screen and (min-width: 700px) {
#hideMe{
display:none;
}
}<div id="hideMe">This content will only show on screens smaller than 700px</div>For more information on media queries, check out this link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Check out this simple code snippet:
// Get the width of the browser viewport
$( window ).width();
// Get the width of the HTML document
$( document ).width();
$(document).ready(function() {
if ($(window).width() > 701) {
$(".mobile-section").css('display', 'none');
} else if ($(window).width() <= 700) {
$(".mobile-section").css('display', 'block');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>Hope you find this helpful!
I created a shiny app with a specific layout on my desktop computer that fits perfectly on the screen. However, when I run the app on my notebook, only the top left boxes are visible, making the app too large for the screen. Even after resizing with Ctrl ...
Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...
Currently, I am facing an issue with two elements in my design. The first element consists of dotted circles that should have a z-index of -999 so they remain in the background entirely. The second element is a login form that needs to have a z-index of 99 ...
Compatibility with IE7 and FF2.0 Suitable for IE8 and Opera 9+ Works only on IE7 Optimized for IE8 and FF3.5 Supports IE7 and Safari This question came up in a quiz, but I don't have all the browsers to test it. Any assistance would be greatly apprec ...
Currently, I am working on a project using three.js where users have the ability to modify the dimensions of a 3D model dynamically. The issue I'm encountering is similar to a problem I previously posted about stacking cubes together, which you can fi ...
I encountered an error while building a website using next.js. The site is set up for production, and after the authentication process with MSAL for Azure AD integration, I am facing the below error during the OAuth loop. As a beginner in next.js coming fr ...
How can I extract values from a specific line in a TextArea and use them to submit a form? <!DOCTYPE html> <html> <body> <input type='button' value='submit' onclick='document.getElementById("submit-line-3") . ...
Having some trouble getting dynamic routes to work with react router. Whenever I enter a URL like localhost:3000/5, I receive the error message "cannot GET /5". Here is how my router is configured: class App extends Component { render() { retu ...
I have created a repeater that displays a headline and description for each item. I implemented a checkbox to hide all descriptions at once, which worked perfectly. However, I also wanted to allow users to hide or show each description individually. I almo ...
My objective is to transfer a Float32array to my fragment shader using a texture in order to process the data within the shader and then send it back to JavaScript. Since the data is not in the form of an image, I opted to transmit it as 'gl.R32F&apos ...
Can the attribute of an anchor element that is found using find() be set? I attempted this: $(this).children('a').setAttribute("href","a link"); Although it does locate the anchor element, why am I receiving an error when trying to use setAttr ...
I have a dilemma with displaying my logo images. I have more than 10 logos, but I want to showcase only 6 of them on page load. The rest of the logos should slide horizontally from right to left in an infinite loop. Can anyone assist me with creating keyf ...
My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...
Embarking on a new project that requires support for multiple languages. My plan is to create a jQuery/AJAX based application with all the code in jQuery, simply calling JSONs for data. What would be the most effective approach for implementing multi-lan ...
I'm currently working on a function that utilizes typings to extract values from a nested object. With the help of this post, I managed to set up the typing for two levels successfully. However, when I introduce a third (known) level between the exis ...
I've been attempting to create a smooth scroll effect to move to the next section using Javascript. However, I'm encountering issues with the window's top distance not being calculated correctly. I'm looking to have the full screen div ...
Struggling to integrate redux-saga into my react app, I keep encountering this error: Actions must be plain objects. Use custom middleware for async actions. The error appears at: 15 | changeText = event => { > 16 | this.props.chan ...
I've come up with this code so far: var isMatch = viewedUserLikedUsersArray.indexOf(logged_in_user); if (isMatch >=0){ console.log('is match'); } else { console.log('no match'); } When an element is ...
I may be new at this, so excuse the silly question, but I'm currently working on developing an app with phonegap. In order to ensure that my app looks consistent across all devices, I need to define the height of each device. I know that JavaScript ca ...
After some research, I have managed to solve the issue I was facing. On my jsp page, I have three text boxes. When I enter data into the first text box, it triggers a call to get.jsp to fetch data from the database and populate the second text box. However ...