I am trying to make jQuery dynamically change the background image by pulling the src attribute from the image tag (img#backSwitch) on the page (which i will make randomly pull from an array in php later), and change the div.background-image element's background-image property value to whatever the src attribute's value is. my console.log is working just fine, i would like to think what i am doing in jQuery is fine as well, but clearly I'm doing something wrong or overlooking a mistake that isn't showing an error. Any help would be great!
Here is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="background-image"></div>
<div class="content">
<img src="img/ped4.jpg" id="backSwitch" alt="Pedestal" />
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/js.js"></script>
</body>
</html>
HERE IS MY jQuery
(function() {
var backSwitch = $('#backSwitch').attr('src'),
theURL = 'http://staging.youknowphabo.com/';
$('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+');'});
console.log(theURL+backSwitch);
})();
HERE IS MY CSS
#import url(//fonts.googleapis.com/css?family=Roboto+Slab:400);
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.content {
position: relative;
z-index: 999;
}
.content img {
width: 100%;
max-width: 600px;
padding: 30px;
display: block;
text-align: center;
margin: 0 auto;
}
I think the problem is a typo:
$('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+')'});
Try removing the semicolon from the CSS url property.
You could also write it like this:
$('.background-image').css({'background-image': 'url('+theURL+backSwitch+')'});
Related
Is it possible to automatically zoom in an image to a certain position of the image itself?
I think that could be possible even with the animations but i don't figure out how could i get the specific point of the image (and then make it on mobile as well).
I'll make an example to be more explicit:<br
-In the following link i'd like to zoom into the person's eye automatically (no buttons), if you are wondering why it's because i'd like to use something like that as a preloader.
My questions are:
Which method could i use to zoom?
How am i able to indicate (and calculate) that specific point/pixel?
Link of the example:
https://jsfiddle.net/eL1sbotx/
Code: (requested by StackOverFlow[Also found on the link above])
HTML:
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;1,400&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<div class="preloader">
</div>
</body>
</html>
CSS:
html, body {
max-height: 100%;
max-width: 100%;
overflow-x: hidden;
height: 100%;
width: 100%;
margin: 0;
}
body {
background-color: #000;
color:#fff;
font-family: "Roboto";
}
.preloader{
height:100%;
background-image: url("http://www.freedigitalphotos.net/images/category-images/118.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?
This is my code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 100%;
}
div.nscr {
width: 100%;
padding-left: 10%;
background: #FFFFFF;
color: #000000;
}
div.content {
box-shadow: 0em 0em 1.25em silver;
clear: left;
height: 93%;
overflow: auto;
background: #ffffff;
color: #000000;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nscr">
<h1>Menu</h1>
</div>
<div class="content">
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</p>
</div>
</body>
</html>
I am trying to create a website that scrolls horizontally with a fixed character in the centre, similar to http://www.rleonardi.com/interactive-resume/.
When trying to change the css to resize the images it doesnt affect the website and I dont know if I need to use the position:fixed to fix the character in the centre.
background
floor
character
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Your title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background>
<character><img src="Photos/Character.png" alt= "Background image"/> </character>
<div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div>
</body>
and css:
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
For a complex project like this you're really going to have to wrap your head around the positioning of elements and how fixed/relative and absolute positioning work. This should set you on the right track. In this case I used chrome inspector to have a look at the example that you are trying to replicate and I can see that the character has position: absolute. Here's some css with the character resized. Hope it helps!
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
background img {
width: 100%;
}
floor img {
width: 100%;
position: fixed;
bottom: 0;
}
character img {
position: absolute;
width: 200px;
bottom: 140px;
left: calc(50% - 100px);
}
<div id="Dvloading" style="float: left;">
<i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i>
</div>
It is the code for showing a loading graphic while page is getting loading. It shows above a grid view. When the grid consist of large number of rows, when I scroll down the page, I can't see the loading graphic . But when I go to the top of the screen I can see the loading graphic. How I keep it always in the middle of the screen even while scrolling the page?
Please help me.
I went through my old answers to see if I could add something that is more modern. In my newer solution you do not need to specify the height or the width. Its a more generic solution.
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; //Half of the height of the loading graphic
margin-left: -50px; //Half of the width of the loading graphic
}
Here's my solution...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<style>
body {
height: 100%;
position: relative;
}
.k-loading-image{
position: fixed;
}
.longDiv {
height:1500px;
background: red;
}
</style>
<div class="longDiv">This is a long DIV...</div>
<script>
const showBusyIndicator = (show) => kendo.ui.progress($("body"), show);
$(document).ready(showBusyIndicator(true));
</script>
</body>
</html>
Placed popup mask in page. its showing white space while rotating mobile screen for a second.
please find the sample,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
html, body {
margin: 0px;
padding: 0px;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
.skMask {
height: 1500px;
width: 100%;
opacity: 0.9;
background-color: #000000;
}
</style>
</head>
<body>
<div class="skMask"></div>
</body>
</html>
i have tried using backface-visibility option. but still its showing on rotate.