Expanding Logo on Mobile with Javascript

I'm encountering some difficulties with the site. When viewing it on a mobile device or resizing the browser to phone size, if you scroll down and then back up, the logo appears oversized. I want it to remain small like it was at the beginning (refreshing the page helps):

Although I have CSS breakpoints in place, I am using JS for a specific reason. Here is the JavaScript code that I am using:

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {        
        $('.logo').attr('src', '/birdie4baycrest/images/logobig3.jpg');
        $('.logo').width(203);
        $('.logo').height(293);
     } else {

        $('.logo').attr('src', '/birdie4baycrest/images/logobig.jpg');
        $('.logo').width(108);
        $('.logo').height(70);
     }
});
javascriptjqueryhtmlcss

Answer №1

After some testing and tweaking, I have come up with a solution inspired by my previous suggestions. This code has been tested thoroughly in the Chrome Inspector tool on your website.

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {

        $('.logo').attr('src', '/birdie4baycrest/images/logobig3.jpg');

        if( $(window).width() < 768 ){
            // Adjust logo dimensions for small screens
            $('.logo').width(104);
            $('.logo').height(150);
        } else {
            // Set default dimensions for larger screens
            $('.logo').width(203);
            $('.logo').height(293);
        }

    } else {

        $('.logo').attr('src', '/birdie4baycrest/images/logobig.jpg');
        $('.logo').width(108);
        $('.logo').height(70);

    }
});

Answer №2

If you're curious about bootstrap, it offers a simple way to build responsive webpages. Click here for more information and get started on the right path.

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

Essential use of async-await with IndexedDB operations

Within my React TypeScript App, I utilize IndexedDB for data storage. To work with IndexedDB, I have a dedicated class called DB. One of the methods in this class is used to retrieve all data. public getAll(){ const promise = new Promise((resolve,reject ...

javascripttypescriptasync-awaitpromise

Reloading the ASP.NET MVC bootstrap modal using Ajax for a fresh look

I'm struggling with my bootstrap modal. Whenever I click the submit button, the page refreshes and the modal disappears. How can I keep the modal open after clicking the submit button to display either a success or error message? I am new to MVC and h ...

javascriptasp.netajaxtwitter-bootstrap

Does a formal gapi library exist specifically for web browsers?

At the moment, I am integrating the "google api" into a web application by linking to the script "". However, I am incorporating it into an "angular4" application that is being bundled with "webpack" and I wish to include and bundle the gapi package as wel ...

javascriptangularjsgoogle-apigoogle-api-js-client

Typeahead AJAX in Bootstrap 3

I have implemented the Bootstrap 3 Typeahead plugin This is my current code: <input type="text" class="typeahead" autocomplete="off"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script&g ...

jqueryajaxtwitter-bootstrapbootstrap-typeahead

Updating token using an Ajax request in a PHP webpage

Currently, I am encountering an issue with my token system for requesting PHP pages via Ajax. The problem arises when attempting to make multiple Ajax requests from the same page as I am unable to refresh the token on the initial page. To elaborate furthe ...

javascriptphpjqueryajaxtoken

"Utilizing a unique jQuery grid numbering system for organizing and categorizing each

I am attempting to implement a numbering system for elements that mimics a grid layout, similar to an Excel spreadsheet. Within a container, my elements are structured like this: <div class="container"> <div class="ele"></div> & ...

jqueryhtml

A TypeScript class transferring data to a different class

I have a set of class values that I need to store in another class. function retainValues(data1,data2){ this.first = data1; this.second = data2; } I am looking for a way to save these class values in a different class like this -> let other = N ...

javascriptarraystypescriptclass

Issues with negative margin causing background image to not display correctly

Hey there, I'm currently trying to add a background image to the bottom left of my webpage. The layout includes both left and right sidebars. Unfortunately, I've encountered some issues with positioning the image using CSS in both the left sideba ...

cssimagebackgroundmargin

Challenges with React Native's AsyncStorage

When I try to access data stored in asyncStorage using the 'getToken' and 'getMail' functions in the code snippet below, I encounter an issue where the data appears empty when I initially open the page on the emulator. However, upon sav ...

javascriptreact-native

Adjusting print page size according to the class of a specific element using CSS

I am currently working on a single page application and I have the need to print the page with either landscape or portrait orientation based on the class of a specific div element. The challenge is that I want to achieve this using only CSS and without an ...

htmlcss

Utilize Webpack to integrate redux-form as an external library

I currently have a range of imports in my project, such as: import {Field, reduxForm, FormSection, formValueSelector} from 'redux-form'; My goal is to treat the redux-form imports as an external library so that they do not get included in the b ...

javascriptwebpack

Having difficulty using JavaScript regex to replace the middle of content?

I am working with a text name[one][1][two][45][text] Through this pattern, I am able to extract the number "45" /(.*?)rows\]\[([0-9]*)(.*)/; Now, my challenge is how can I change the only 45 to a different digit? Using the same pattern and re ...

javascriptregex

Error message from sails.js: `req.target` is not defined

Experiencing a problem where req.target sometimes returns undefined, causing issues with other functionalities dependent on req.target. Seeking assistance to resolve this issue. Appreciate any help! ...

javascriptnode.jssails.js

Ensure a minimum width is applied to a specific tooltip in Bootstrap that has a dynamically generated ID

I am working on an html view using Thymeleaf. The view contains a large table with various tooltips that have a style applied which is functioning correctly. However, I am now facing the challenge of adding a min-width specifically to the tooltips within a ...

javascriptjqueryhtmlcssbootstrap-4

Identifying the specific promise that failed within a chain of .then statements

I am currently working on setting up a chain of promises with an error catch at the end within my node and express application. One issue I have encountered is that if any of the 'then' functions encounter an error, it can be difficult to trace b ...

javascriptnode.jsexpresspromisees6-promise

utilize multiple submit buttons within a single form

For some reason, I am only able to access the Histogram button from the frame. All other buttons do not seem to be working properly when clicked. Below is the form that I am trying to access in the Post method: <form id="package_form" action="" method ...

pythonhtmlflask

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

htmlcss

What is the method for fetching and executing an external Javascript code using Ajax/jquery?

I need some help solving a problem I'm facing. I have data in a database that I am trying to plot. In my web UI, I am using Ajax to call another page that handles all the rendering. Essentially, I have a profile.php page where users can select a graph ...

phpjqueryajaxgoogle-visualization

Achieving this result in HTML using a jQuery accordion component

Hey there, I'm looking to create a full-height accordion that extends from the bottom to the top of the page, similar to what you see on this website: . I also have a footer positioned below the accordion. The content should load when the page loads ...

javascriptjqueryhtmlcssjquery-ui-accordion

Setting up external routes in Express: A step-by-step guide

For my Express application, I successfully set up the index route. Now, I'm facing an issue with adding a new route named cart for the shopping cart page. Whenever I try to access the cart route, I encounter a 404 error, which is odd considering it&ap ...

javascriptnode.jsexpresshyperlinkroutes