Hi I have an HTML page where I want to include CSS only if two conditions are met.
The HTML page will always have the div with id flipbook-page3-front
The HTML page will sometimes have the div with id pagesFlipbook
These divs are not siblings and are not after each other
I want to create some CSS on flipbook-page3-front only if the div pagesFlipbook is present. Is it possible. This is my CSS without any conditions:
.flipbook-page3-front{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
This will work only if you have class pagesFlipbook of parent div so it will affect.
Write conditional CSS like this.
.pagesFlipbook .flipbook-page3-front { /* write css */ }
Yes, it is possible, please see the code below...
const element = document.querySelector('#pagesFlipbook')
if(element != null){
document.querySelector('#flipbook-page3-front').classList.add('myconditionalclass')
}
You can declare in your CSS the following class to complete this...
.myconditionalclass{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
Related
I am trying to style the background of a react app page. So, naturally, I style the main div that has all the components in it with the background property in CSS. This main div has a className named Wrapper in my app. However, when I do that, only part of the screen changes the background whereas I expect it to take the full screen. Here's the code and here's how it looks:
JSX:
render() {
return (
<div className="wrapper" >
<div>Inner content</div>
</div>
) }
CSS:
.wrapper {
overflow: hidden;
background: linear-gradient(#42275a, #734b6d);
}
As you can see only the top part changes color, but the rest of the page is still white.
I have tried adding to the wrapper: "height: 100%;", "min-height: 100%" and/or "height: 100vh;", "min-height: 100vh" but nothing has worked.
I also tried to change the body property in CSS like so
body {
background: linear-gradient(#42275a, #734b6d);
}
but what I get is an ugly line that seems to separate the wrapper from the body like this:
My question is, why is the main div (wrapper) taking up only a small part of the screen when actually it is the main div which contains all that content that seems to go off into the white screen. Why doesn't it take up the entire screen?
Also, why is body separate from wrapper or vice versa?
And lastly, how do I change the background without any kind of separation like that line? Because what is even more weird is that the body seems to be fragmented as well. See this image where you can see the body of the document seems to be fragmented (notice the line that separates colors):
Some more code as requested. I am not sure if this is useful but I guess this is all that is relevant.
This is the App.js file's code:
render() {
if (this.state.loading) {
return null;
}
else {
return (
<div className='app'>
{this.state.user ?
<LoggedIn /> :
(<HomePage />)}
</div >
);
}
}
.app {
height: 100%
}
This is the Index.js's and Index.css's code:
ReactDOM.render(
<Elements stripe={promise}>
<BrowserRouter>
<React.StrictMode>
<ScrollToTop>
<App />
</ScrollToTop>
</React.StrictMode>
</BrowserRouter>
</Elements>,
document.getElementById('root')
);
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
align-items: center;
}
Here's a screenshot of the Elements section from the Developer tools:
I guess I have included everything that is higher up in the DOM, I suppose. Please let me know if anything specific can be of any use. Thanks.
I have removed all the CSS properties from wrapper as suggested by Dan Zuzevich in the comments. It did remove the wrapper and the screen is, indeed, filled with the gradient as set in body's CSS. However, the screen is still divided by lines or fragmented if you will. Any idea why? I want one whole body with the gradient color. Here are some screenshots:
Since no one seems to have been able to help me get rid of the lines, I kept doing my own research and found my answer here - CSS3 gradient background set on body doesn't stretch but instead repeats?.
Basically, here's what helped get rid of the lines:
body {
background-image: linear-gradient(to bottom, #42275a, #734b6d);
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Hopefully, this will be helpful to someone in the future.
Happy coding.
Don.
Need to change class in CSS for a DIV based on different screen sizes
<div id="tab" class="tab_small"></div>
I need to change class of DIV having ID "tab" to "tab_small","tab_medium" & "tab_large"
based on the screen size using css only
#media(max-width:450px){tab_small class will apply}
#media(min-width:450px) and (max-width:768px){tab_medium will apply}
#media(min-width:768px) and (max-width:990px){tab_large will apply}
Is that doable?
with JS I can do, Is there a way to do with CSS in bootstrap?
If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?
Thanks in advance!
I think you are trying to achieve a behavior like this. Try to resize the fiddle window. Please be aware that setting a property within #tab selector will override the #media queries, if you want to prevent this behavior just use #tab .tab_small, #tab .tab_medium, #tab .tab_large selectors inside the #media queries.
#tab{
width: 200px;
height: 200px;
}
#media(max-width:450px){
.tab_small{
background:red;
}
}
#media(min-width:450px) and (max-width:768px){
.tab_medium{
background: green;
}
}
#media(min-width:768px) and (max-width:990px){
.tab_large{
background: blue;
}
}
Fiddle Demo
There is not way to change DOM property value using CSS. There is only way to achieve this using javascript.
Try this jQuery js solution, probably this will resolve your issue..
<div id="tab" class=""></div>
<script type="text/javascript">
if($('body').width() < 450){
$('#tab').addClass('tab_small');
}else if($('body').width() > 450 && $('body').width() < 768){
$('#tab').addClass('tab_medium');
}else{
$('#tab').addClass('tab_large');
}
</script>
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I am using AjaxToolkit combobox in my page... I am trying to change the width of combo-button . But I couldnot. Because it has inline style by default..
I tried the following code to add style
//Combo css
.ComboClass .ajax__combobox_buttoncontainer button
{
border-radius: 0px;
box-shadow: 0px;
width :12px; height:12px;
}
But border-radius and Box-shadow styles are applying but Width& height is not applying ..
Because ComboBox Button got default inline styles.. I cant remove that line styles too..
Please post me some suggestions....
Add a javascript function to search for and strip the attributes on document ready.
The jquery way is:
$(document).ready(function()
{
document.find(".ajax__combobox_buttoncontainer").removeClass("ajax__combobox_buttoncontainer").addClass("myAwesomeClassWithCoolDimensions");
});
Make sure your css has a myAwesomeClassWithCoolDimensions class.
Finally it works.. Little change on my css. I just added !important property to override the default element (Inline styles)..
<style type="text/css">
.ComboClass .ajax__combobox_buttoncontainer button
{
box-shadow: 0px;
width: 14px !important;
height: 15px !important;
}
</style>
Now I can change width & height of the combo-button.
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.