Ensure the continuous flow of text using the Div element

I've successfully implemented a fading image on scroll as desired.

However, upon closer inspection here, I've noticed that the text and menu below the image are positioned too far away, especially when resizing the browser window.

My goal is to maintain the overlay effect of the scrolling text on the image, similar to the style used in this example.

I apologize for not providing a JSFiddle link; I encountered issues with it.

While I attempted to make adjustments using this solution, the text no longer scrolls over the image as intended (like the FearTheGrizzly reference).

In essence, my objective is to have the text near the top of the image and ensure it remains aligned when resizing the browser window.

jqueryhtmlcss

Answer №1

One issue arises when the background image changes height during browser resizing because of background-size:100% auto;, while the element itself remains static. To address this, one could potentially resolve it by modifying the div's size through CSS rather than just adjusting the background-image. Assuming you prefer not to take that approach, another solution involves using JavaScript to dynamically resize the div so that all content aligns properly:

$(document).ready(function() {
    $homeDiv = $('.home'); 
    $(window).resize(); //execute this on page load to ensure correct initial div sizing
});
$(window).resize(function() {
    ($homeDiv).height($(window).width()/1440 * 600);
    console.log($(window).width()/1440 * 600);
});

However, keep in mind that this modification may impact how your fading effect operates. Therefore, adjust the 'opacity' line in your JavaScript accordingly:

 'opacity' : 1 - windowScroll / ($(window).width()/1440 * 600 - 30)

This method assumes consistent dimensions for your image. While there are alternative approaches available regardless of image dimensions, this is considered the simplest solution.

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

How can I modify the style of a cell in jqgrid when the mouse hovers over it?

I need to change the class of cells in the first column of my grid. Currently, I set them using this code: $("#myGrid").jqGrid('setCell',rowid,'column_1', '', '**ui-state-default**'); Is there a way to modify the c ...

jqueryjqgrid

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

jqueryhtmlcsstwitter-bootstrap

Using jQuery to eliminate any symbols from a text field

I am working on a text symbol removal function. However, I want to make sure that commas and periods ( . , ) are retained in the text field. Currently, the function is removing everything except digits. How can I modify it to keep the commas and dots int ...

javascriptjquery

Exploring the html element through Xpath

I am currently attempting to locate an HTML element using Selenium XPath and C#. Here is the code snippet of what I have experimented with: var element = Driver.FindElement(By.XPath("//img[text()='logo-home.png']/@href")); if (element.Display ...

c#htmlseleniumxpath

Creating a popup dialog form using ASP.NET and jQuery within an ASP:FormView control

I'm currently facing an issue where I am utilizing a jQuery popup dialog with an asp:FormView. The purpose of this popup is to allow the user to input a hyperlink, which is then placed in a textbox control within the FormView. The popup dialog div i ...

asp.netjquerydialogpopupformview

Change the position of the specified footer on the one-page website

I am currently in the process of creating a single-page layout website. What I want is to have the elements with the class "footer-bar" positioned absolutely on each page, but on the #Home Page, it should be position relatively. Does anyone have any sugge ...

htmlcss

Ways to resolve the issue of a website displaying with extra whitespace at the bottom

Seeking assistance to resolve the issue with a blank space at the bottom of the web page. Refer to: http://www.khohanghoa.com I have dedicated the entire day to search for a solution and attempted to fix the problem. I have attempted to configure the CS ...

javascriptphphtmlcsswordpress

Determine the minimum and maximum width of jQuery UI resizable during the "resizestart" event

As a newcomer to Javascript, I am facing challenges navigating my way around. Currently, I am attempting to create a jQuery plugin that will facilitate resizing elements using the jQuery UI resizable plugin. My goal is to implement logic that dynamically ...

javascriptjqueryjquery-ui

Submit information into mysql using an html form (and beyond)

Hey there! I'm new to the world of MYSQL/PHP and currently working on a simple script to enhance my skills in php/mysql. However, I've hit a few roadblocks along the way. I apologize if some of these questions have already been asked before, but ...

phphtmlmysqlformsrow

Revamp List Model through Ajax Integration in ASP .NET MVC5

Could someone please provide a hint on how to update the Model list in the view page after calling the Action Result with an Ajax request? Specifically, how can I refresh the current list model with the result of the Ajax call back? Here is the code for m ...

javascriptjqueryajaxasp.net-mvcasp.net-core

Exploring the Iteration of Ajax in ASP.NET MVC

I am trying to extract data from an object retrieved in my view through the use of $.getJSON. This object consists of several Lists that require iteration. Can someone please guide me on how this can be achieved? Here is the snippet I have so far: $.getJS ...

jqueryasp.netajaxjson

Extracting information from HTML and transferring it to Javascript using jQuery

My goal is to utilize jsGrid for showcasing database data without repeating code extensively. I aim to generate separate grids for each <div> with a specific id while passing on relevant values accordingly. To clarify my objective, here's a sni ...

javascriptjqueryhtml

Encountering a 400 bad request error while trying to upload a file using a flask Ajax call

Currently, I am experimenting with Flask and jQuery to develop a file upload feature. However, the issue I am facing is that whenever I try to upload a file, I receive an error message stating "POST 400 (bad request)". Below is my form.html: <!DOCTYPE ...

jquerypythonajaxfile-uploadflask

Interactive navigation with jQuery

I am currently utilizing a jQuery menu script that enhances the navigation structure on my website: (function($) { $.fn.blowfish = function() { // concealing the original ul dom tree $(this).hide(); // constructing a container from top-l ...

jqueryhtml

How should Bootstrap containers, rows, and columns be properly configured?

As a beginner in Bootstrap, I am still trying to grasp the concepts. Understanding how rows, columns, and containers work is clear to me so far. However, I am struggling with the syntax for setting up the div elements. Should my code look something like t ...

htmlcsstwitter-bootstrap-3

What seems to be the issue with the scroll bars on my website?

I recently created a website using HTML and Dreamweaver. However, I've encountered a frustrating issue where the page continues scrolling endlessly when I reach the bottom, making it impossible to scroll back up. In addition, there is an annoying ho ...

htmlscrolldreamweaver

Coding in HTML for the Font Awesome Plus/Minus Icon Toggle

In my role as a knowledge base manager, I primarily use Adobe RoboHelp and rarely need to utilize HTML outside of the standard editor. However, I am currently working on implementing a dropdown feature that involves changing the font awesome icon from fa-p ...

htmlfont-awesomerobohelp

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

Looking for a solution to keep multiple buttons toggled on? I'm not very familiar with JavaScript, but I know that adding a class on click won't work if there's already a class set. Maybe giving the element an ID could be a possible solution ...

javascripthtmlcssbutton

Show the most recent image from a folder in real-time

Looking for a solution to automatically display the latest image from a folder without refreshing the page? Check out this code snippet that achieves just that: <?php foreach (glob('/home/pi/camera/*.jpg') as $f) { $list[] = $f; } sort( ...

phphtml

Creating a WordPress post popup using Ajax with SimpleModal and jQuery

I tried to follow the instructions provided in this tutorial but unfortunately, I couldn't get it to work. This is the process I followed: 1 / Including in the header <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ...

javascriptphpjqueryajaxwordpress