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.
My flex container holds three divs, arranged in two rows: First row: One div with a fixed width Another div that should stretch to fill the remaining space Second row: Just one item However, the first div stretches to 100% width and pushes the seco ...
I have a DataGrid set up with at least 20 rows. My goal is to limit its height and allow users to navigate through the remaining rows using the scroll bar within the component. However, I'm facing an issue as the scrollbar for the DataGrid itself is n ...
I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...
Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...
Recently, I implemented a custom directive for an input field that adds a calendar icon with a datepicker to the input. I have used this directive in various sections of my application and now I am interested in incorporating ui-mask - another directive I ...
I'm attempting to complete a straightforward exercise: The task involves entering two numbers in separate inputs, clicking a button, and seeing the result appear in a third input. sum.html: <html> <head> <title>Sum</tit ...
configurations.py INSTALLED_APPS = [ ... 'myapp', 'django_bootstrap_icons', ] ... STATIC_URL = '/static/' MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR,'static,'media') STATIC_ ...
How can I modify this code to only accept 0 and 1 in the input field, while also adding spaces after every 4 digits? Currently, it accepts all digits. I'm struggling with creating a pattern that restricts it to just 0 and 1. document.getElementById(&a ...
I'm attempting to create an expanding effect in my navbar using Angular. When I click on "show information," the content should slide up. The issue is that the top part of my footer does not follow the effect. I have tried something like: <foot ...
Is there a method to use CSS to invoke a div id function that will highlight text when the mouse hovers over it? <ul class="sub-menu"> <li id="menu-item-1721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1721">< ...
Can someone assist me in configuring the bootstrap div col-xs-2 to match the layout shown in the images provided? Your help would be greatly appreciated! Thank you in advance. https://i.stack.imgur.com/afd0p.png https://i.stack.imgur.com/0BGum.png ...
I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...
I seem to be encountering an issue with loading any modules. Despite reinstalling my operating system, I continue to face the same error when attempting to use any module. I have tried reinstalling node, clearing the cache, and more. To view the code, pl ...
I'm having an issue with my contenteditable div. Whenever I click the button, a span is inserted into the div. However, when I start typing, the text goes inside the span instead of outside it: jQuery(document).ready(function($) { let input = $(" ...
I have a website built with ASP.NET (.aspx) that I access from an ASP.NET MVC 4 mobile site (.cshtml) to retrieve its HTML response string. Both sites are hosted on a Windows Server 2008 R2 system and were developed using VS2010 Professional. -When direct ...
I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...
Could someone assist me in changing the default background color of a selected element in the tree? Below is the XHTML code: <style type="text/css"> .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state- ...
I followed a tutorial to create a jQuery Carousel, but made some modifications. You can find the tutorial here. This is the code I have: (function ($) { $.fn.infiniteCarousel = function () { // Function to repeat a string function repeat(str, num ...
I am struggling to parse a RSS feed because all the information is contained within the description element. The CSS formatting makes it challenging to extract the actual strings. For example, below is a snippet of the description element: <table style ...
Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...