Check out my website at www.wostokhr.pl
I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. Any suggestions on how to troubleshoot this issue?
See the demo below:
implement the following modifications
In HTML
<div class="parallax-mirror" style="z-index: 0 !important">
<img class="parallax-slider" src="http://www.wostokhr.pl/pics/hero.jpg">
</div>
In CSS
.parallax-slider{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
In JavaScript
var strength3 = 200;
$("html").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = 1*pageX * -1;
var newvalueY = 1*pageY * -1;
$('.parallax-slider').css("left", (strength3 / $(window).width() * pageX * -1) + "px");
});
My recommendation would be to utilize CSS instead of using data-image-src="pics/hero.jpg", by setting the background-image property to your pics/hero.jpg path.
In order to achieve this, you can simply include:
.hero { background-image: url("pics/hero.jpg"); }in your CSS file. This will assign the background image of hero.jpg to the div class hero.
I hope this insight proves helpful!
Make sure to update the z-index: -100; to z-index: 0; specifically within the class="parallax-mirror"
This adjustment should allow your parallax effect to properly function.
I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...
Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling ...
I have a variety of links and buttons on my webpage, and they are generated dynamically. I am unable to assign an onclick event to each one individually. My goal is to submit form data to the next page whenever any link or button on the page is clicked. ...
I'm encountering an issue with submitting a file through a standard HTML form. After uploading the file, the process seems to get trapped in a continuous loop where the file keeps uploading repeatedly. The submission of the form is done using jQuery, ...
In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...
Looking for an online tool to easily convert a few lines of SASS into pure CSS. Despite searching on Google, all the links I found talk about converting CSS to SASS. Below are the specific lines I need assistance in converting to CSS: =text-shadow($color ...
While experimenting with SVG and PHP codes, I encountered a frustrating issue that has me stumped. I have an SVG image containing some shapes. Using the fill attribute and the def tag, I can easily apply textures to specific shapes using a simple GET var ...
After searching online, I couldn't find the solution I was looking for. My goal is to have the visible part of the page load halfway down the actual page. This way, when users visit the site, they can immediately scroll up to see more content. I hope ...
I need a function to trigger every time there is any modification in my textarea, such as characters being typed, deleted, cut, pasted, etc. Currently, I am using: onkeyup || onmousemove = function(); It appears that only onmousemove is being triggered. ...
As I develop a shopping cart for an e-commerce site, I aim to utilize browser localstorage to store the products. The functions that have been added to my code include: - addToCart(): triggered when the "Add to Cart" button is clicked. - addProduct(): ...
I'm currently dealing with an issue related to the input field below: <input id="name" name="real_name" type="text" placeholder="ie. Your full name or company name" class="form-control input-lg parsley-validated" data-required="true" parsley-er ...
When I have a table (standard markup) with a radio select in each row, I want to highlight the selected radio button. It seems simple, but for some reason it's not triggering as expected. Here is the example of the markup: The Table Row: <tr> ...
I am attempting to retrieve data from an SQLite database table in order to populate a dropdown menu list. My thought process is outlined below. The main issue I am facing is how to integrate the JS function with the HTML section. HTML.html <label ...
Recently, I developed a webpage to serve as a survey for end users to provide feedback on the helpdesk technician's performance in resolving tickets. The webpage was constructed using HTML, CSS, JS, and PHP. Currently, the page requires access to two ...
I've been struggling to implement a horizontal scroll for a DIV on my site, but none of the common solutions like overflow-x or white-space:nowrap are working for me. This is the section of my website where I need a horizontal scroll bar If you want ...
Currently, I have an array filled with different src values like [path1, path2, path3], and a corresponding HTML collection which has the same number of elements as the array. I am looking for a way to assign each value from the array to set the src attrib ...
Currently, I am attempting to display a bootstrap modal with dynamic content. One of the values being passed to the modal is the HTML that should appear inside it. The issue I am facing is that within the HTML content being passed, there is a script tag t ...
When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...
In my project, I have a string of text retrieved from the SQL database which is then sanitized using PHP's strip_tags and htmlspecialchars functions to eliminate any HTML formatting that users might try to inject. This processed text is displayed in b ...
When I use a particular font and find that its loading time is too high, I want to set a default font. So I experimented with the following code: font-display: fallback; It seems to be working fine (although I haven't checked compatibilities yet), ...