Tips for adjusting the text color of input fields while scrolling down

I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background hue.

The search icon or image is located next to the menu (where the input text is initially hidden). When clicked, it reveals the input text field covering all the menu options.

Our site is built using Wordpress and we are using the Hi-response theme.

Thank you for your help in advance.

javascripthtmlcsswordpress

Answer №1

// This code has not been tested
    <script>
    $(window).scroll(function(){
            if(document.getElementById("searchBar").scrollTop() > 10){
    document.getElementById("searchBar").style.color = "Red"
    }
    else {
    document.getElementById("searchBar").style.color = "Blue"
    }
        });
    </script>

Edit:

When the background and search bar have the same id.

<style>
    #pageTheme {
    background-color:red;
    }
</style>
    <body class="bodyTheme" id="pageTheme">
    <div class="searchBarTheme" id="pageTheme">SearchBar Stuff</div>
    </body>
ID takes precedence over class, so the background color of pageTheme will be applied to both elements.

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

Exploring the world of JSON files using JavaScript

Basically, my bot responds to a command (!accounts) by providing users with information based on their ID. For example, if an ID of 662 sends the command !account, the bot will search for steamID 662 in the json files and display the currency and correspon ...

javascriptarraysjson

Utilizing HTTP POST method in vanilla JavaScript with AJAX

Having some trouble sending a post request to my PHP file as it keeps saying 'undefined index'. Here is my JavaScript code: document.getElementById("btn1").addEventListener('click', xh ); function xh(){ xhr = new XMLHttp ...

javascriptphpajaxpost

Having trouble with the image compressor not being imported correctly in Next.js?

I've been attempting to compress an image, but when I try to import the ImageCompressor normally like this: import ImageCompressor from "image-compressor.js"; It throws an error: Uncaught ReferenceError: window is not defined This is the s ...

javascriptnext.jsimportimage-compression

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...

javascriptreactjsmaterial-ui

Using Selenium and Python to showcase the source of an image within an iframe

My goal is to automatically download an image from shapeNet using Python and selenium. I have made progress, but I am stuck on the final step. from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.s ...

javascriptpythonseleniumiframe

Clicking on a column or x-axis category in Highcharts will automatically include the job number in the page URL

Check out the code I've put together: http://jsfiddle.net/a9QwS/ I'm looking to add functionality where clicking on a column or x-axis label will append its data to the URL. For example, in PHP, I can do something like this: echo " <td sty ...

javascriptphpjqueryhighcharts

What could be causing Jquery to not function properly in an Angular controller?

Can someone please help me understand why my code is not working in JSFiddle? Any assistance would be appreciated! UPDATE: I have to admit, the negative feedback is disheartening. I may not know everything, but asking questions is how we learn. What' ...

javascriptjqueryangularjs

React is failing to display identical values for each item being mapped in the same sequence

I have implemented some standard mapping logic. {MEMBERSHIPS.map((mItem, index) => ( <TableCell className="text-uppercase text-center" colSpan={2} padding="dense" ...

javascriptreactjsmappingmaterial-ui

Fetching Information From Database Using PHP

I am encountering an issue while attempting to transfer data from my HTML table to my modal (without using bootstrap). In the image below, you can see that I have successfully displayed data from MySQL database in the table. The problem arises when I clic ...

javascriptphpjqueryhtmlmysql

The component fails to update even after changes are made to the Redux state

I currently have 4 buttons, each with a different color, and I want to display the last 10 button clicks as colors on 10 squares. The redux state is being used to map and display the square colors, which are also stored in localStorage. When a button is c ...

javascriptreactjsreduxreact-redux

Safari enables seamless text flow into the footer without triggering scrolling as long as the length is manageable

Encountering a unique issue solely in Safari 6.0.5 on OS X 10.8.4 within certain conditions, which doesn't exist when tested on Firefox or Chrome under various scenarios in OS X. The column layout with floats is the crux of the problem. When the text ...

htmlcsssticky-footersafari

Using TypeScript and Angular to modify CSS properties

I'm trying to figure out how to change the z-index CSS attribute of the <footer> element when the <select> is open in TypeScript (Angular 10). The current z-index value for the footer is set to 9998;, but I want it to be 0;. This adjustmen ...

htmlcssangulartypescriptfunction

How can I consistently position a dialog box (tooltip) on top of a JQuery UI modal Dialog?

Utilizing CSS and Javascript to display tooltips upon mouseover for various inputs has been effective in most cases, however I am encountering an issue with inputs within a Jquery UI Dialog modal. The tooltips appear correctly in front of the dialog when i ...

jquerycssjquery-ui

Crushing jQuery's Sortable/Droppable

Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...

javascriptjquerycssjquery-pluginsjquery-ui-sortable

Error: monaco has not been declared

My goal is to integrate the Microsoft Monaco editor with Angular 2. The approach I am taking involves checking for the presence of monaco before initializing it and creating an editor using monaco.editor.create(). However, despite loading the editor.main.j ...

javascriptangulartypescriptmonaco-editor

What is the process for adding an event listener in React?

Currently, I am working on a chat application that involves both users and agents. I am facing an issue where I need to retrieve messages when the agent responds using a separate Rainbow UI. According to the documentation, this can only be achieved using a ...

javascriptreactjsexpressdomecmascript-6

How can one smoothly rewind X frames in a video or animation on a webpage without experiencing lag?

For my thesis presentation, I decided to make it available online as a video with custom controls resembling a powerpoint slideshow. The challenge I encountered was with transitions between slides in an animated video. Certain transitions needed to loop fo ...

javascriptjqueryperformancehtml5-video

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

What is the best way to incorporate server-side rendered content from a CMS to hydrate Vue.js?

Consider this scenario: content is managed through a traditional CMS such as Joomla or Drupal content is provided by the CMS as fully rendered HTML and CSS In the Frontend React.js should be utilized for all UI interactions. Despite going over most of R ...

javascripthtmlnode.jsvue.jsvuejs2

This error message 'React Native _this2.refs.myinput.focus is not a function' indicates that

When working with React-Native, I encountered a specific issue involving a custom component that extends from TextInput. The code snippet below demonstrates the relevant components: TextBox.js ... render() { return ( <TextInput {...this.props} ...

javascriptreactjsreact-nativeecmascript-6