Is it possible to have variables in the tag of a component with SvelteKit? For example I can get this to work:
<div class="mainContent" style="background-image: url('{backgroundImage}');">
But the following doesnt:
<style>
main {
background-image: url('{backgroundImage}');
height: 85vh;
}
</style>
Is it possible to get the latter to work? I ask because I want to be able to set a :before on that background image, which I don't velieve can be done inline.
Thanks!
From my knowledge, I would use
let backgroundImage = '..../../'
<div class="mainContent" style="--bg-img: url({backgroundImage})">
<style>
main {
position: relative;
background-image: var(--bg-img);
....
}
main::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-image: var(--bg-img);
....
}
</style>
You can use css property(variable) as
<style>
main {
background-image: var(--backgroundImage);
height: 85vh;
}
</style>
then you can set value to this property dynamically using javascript as
document.documentElement.style.setProperty(
"--backgroundImage",
"url(myimage.png)"
);
Related
I've started using Codepen for fun, and I wanted to try my hand out at this JavaScript code called "Croppie"(I'm new and still learning JavaScript).
I want to place an image on top of the div that contains the JavaScript. But the image does not show up and gets hidden behind the div. I also want to be able to move the image in the viewport even with the image on top of it.
I've tried messing around with the z-index, but the image I want on top keeps getting hidden behind the div. Here is the CodePen. (It wouldn't let me post without putting any code in my question so this is what I'm talking about in the CSS).
.mask {
max-width: 100%;
max-height: 100%;
background-image: url('http://eprogramers.com/triangle.gif');
position: absolute;
z-index: 1;
}
#demo-basic {
width: 300px;
height: 300px;
margin: auto;
z-index: -1;
}
I changed the style of mask CSS class as follows:
.mask{
width: 100%;
height: 100%;
background-image:url('http://eprogramers.com/triangle.gif');
background-repeat:no-repeat;
position:absolute;
z-index:99;
}
Please check the following code snippet:
//create a variable called basic, the variable attaches to div called demo-basic, which is an instance of croppie
var basic = $('#demo-basic').croppie({
//awknowledge the viewport
viewport: {
width: 150,
height: 200
}
});
//basic variable.croppie binds with url of cat
basic.croppie('bind', {
url: 'https://foliotek.github.io/Croppie/demo/cat.jpg',
points: [0,0,0,0]
});
body {
background-color: pink;
}
.mask{
width: 100%;
height: 100%;
background-image:url('http://eprogramers.com/triangle.gif');
background-repeat:no-repeat;
position:absolute;
z-index:99;
}
#demo-basic {
width: 300px;
height: 300px;
margin: auto;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.4.2"></script>
<script src="https://foliotek.github.io/Croppie/croppie.js"></script>
<link rel="Stylesheet" type="text/css" href="https://foliotek.github.io/Croppie/croppie.css" />
<div id='demo-basic'>
<div class="mask"></div>
</div>
I need to change the size of a background image during an animation but it doesn't work.
Here is a simple version of my code:
document.querySelector("#Box").backgroundSize='cover';
#Box {
background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
width: 220px;
height: 220px;
}
<div id="Box"></div>
You should target the .style
document.querySelector("#Box").style.backgroundSize='cover';
#Box {
background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
width: 220px;
height: 220px;
}
<div id="Box"></div>
You were missing the .style declaration in your query selector
document.querySelector("#Box").style.backgroundSize='cover';
#Box {
background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
width: 220px;
height: 220px;
}
<div id="Box"></div>
Just missing style from your js...
document.querySelector("#Box").style.backgroundSize='cover';
#Box {
background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
width: 220px;
height: 220px;
}
<div id="Box"></div>
The #Box element have no backgroundSize property. You should just refer to its style property and then to backgroundSize
document.querySelector("#Box").style.backgroundSize = 'cover'
I am using a preloader for my website. I simply designed it using CSS and coded the logic to hide the preloader when the website gets completely loaded.
The whole thing works on my local machine but when i put it online it doesn't work.
This is the link to the website : http://deepanshubatra.tk (Use google chrome please)
I am mentioning the HTML,CSS and javascript code:
CSS:
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
Javascript
<script >
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>
HTML
<div id="preloader"></div>
You have error in console:
Uncaught ReferenceError: jQuery is not defined
Add <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> to your head tag.
The error that is in the console on the page is jQuery is not defined. So you need to load jQuery in your scripts. Here is how you can use it with CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You can try this code.
Add HTML inside the body.
<div class="se-pre-con">
<img src="../images/logo-02.svg">
</div>
Add this CSS Code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
margin: 0 auto;
text-align: center;
}
div.se-pre-con img{
max-width: 300px;
top: 20%;
position: relative;
}
div.se-pre-con.highlighted{
display:none;
}
And this jQuery code in the footer:
<script>
jQuery(function() {
jQuery(this).addClass('highlighted');
setTimeout(function () {
jQuery('.se-pre-con').addClass('highlighted');
}, 2000);});
</script>
I need some help with this project. I'm trying to get a picture as a background on a div element, that could be expanded and hid when clicked on. I don't know how to make the image a background for the div element, and I don't know how to make the div toggle from left to right.
I really appreciate any help. Thank you.
<html>
<body>
<div id="couch">Info about this couch</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
</html>
#couch {
height: 95px;
width: 65px;
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}
Add this code to your page
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
test : http://jsfiddle.net/Ss86Q/1/
I have looked through your code and formatted it while also setting up a jfiddle. I hope this works and if not hopefully its a starting point. Please check my JSfiddle.
http://jsfiddle.net/jmcH8
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
JSBIN DEMO
At first, the CSS
#couch {
height: 95px;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Now Jquery:
If you want to change the width:
$("#couch").click(function() {
$(this).toggleClass("big");
});
Add this to your css:
.big {
width: 400px !important;
}
If you want to hide the div itself
$("#couch").click(function() {
$(this).toggle();
});
In this example, if you toggle the div is hidden. How you want to restore it back.
I guess you are looking to collapse the div and expand it again.
In that case, change the height of the div based on click.
Hope its useful to you :)
Please try inserting the scripts inside the <head></head> tag
try this
html
<body>
<div id="couch" class="collapseRemoved">Info about this couch</div>
</body>
css
#couch {
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
background-size:100%
}
.collapseRemoved{
width:200px;
height:100px;
}
.collapse{
width:100px;
}
js code
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});
When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
$(window).load(function() {
$('#loading').hide();
});
This is what I did
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
<div id="page">
<body>
//whatever you page code is
</body>
</div><div id="loading"></div>
3.) Setup CSS.
<style type="text/css">
#page {display: block;}
#loading {display: none;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.5);
background-image: url('../Images/nameofgifimage.gif');
background-repeat: no-repeat;
background-position: center;}
</style>
4.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= btnSearch.ClientID %>").click(function () {
$('#loading').show();
return true;
});
});
</script>
If this does not work for you, let me know and I will try to figure out what is wrong.