I am trying to render an image inside a div tag using styling as I want the image to dynamically resize based upon the size of the window.
Here is the JSX code
const heroImage = "pathToImage";
const heroImageStyling = {
backgroundImage: `url(${heroImage})`
};
ReactDOM.render(
<div style={heroImageStyling}></div>,
document.getElementById("root")
);
Running this doesn't render anything on the page
If text is added to the div tag like so, a small portion of the image is rendered to the screen (a long strip the same height as the text)
<div style={heroImageStyling}>Test Text</div>
How could I correct this problem and render the image to the screen?
div without content and width height won't render. You can have 2 approaches here:
put inside div (when you don't want to define width/height)
ReactDOM.render(
<div style={heroImageStyling}> </div>,
document.getElementById("root")
);
define either width or height or both in div styling
const heroImageStyling = {
backgroundImage:url(${heroImage}),
height: 200px,
width: 200px
};
ReactDOM.render(
<div style={heroImageStyling}></div>,
document.getElementById("root")
);
Try set height style to div like this
const heroImageStyling = {
backgroundImage: `url(${heroImage})`,
height: 300px,
};
Solved by manually adding a height property to the div tag using Jquery to get the window height
let screenHeight = $(window).height() + "px";
const heroImageStyling = {
backgroundImage: `url(${heroImage})`,
height: screenHeight
};
Related
Basically I want to render a div next to where I click.
I have done that works perfectly but my problem is when I scroll down its not following and render relevant to the page and not the screen.
Any work around my code if this so far:
const [position, setPosition] = useState([0,0])
const renderGuess = (event) =>{
if(guessed){
setPosition([0,0]);
setGuessed(false);
}else{
setPosition([event.clientX, event.clientY]);
setGuessed(true);
}
}
function Guess (position){
const {location} = position
console.log(location)
return(
<div id="guess-div" style={{top: `${location[1]}px`, left: `${location[0]}px`}}>
Note: I'm using react the render works fine only problem is when I scroll down it renders for example 150px from the top of the page not 150px from the screen.
I have tried 150 / 10, with vh and vw.
The event.clientX and event.clientY will get the viewport coordinates, not the document coordinates as you want.
You can replace the
setPosition([event.clientX, event.clientY]);
by
setPosition([event.pageX, event.pageY]);
to get the coordinates relative to the entire document instead.
References:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX
I'll try to simplify my question:
I have a div container with a fixed height of 200px. Inside, I have a flexbox that shows vertical items. Each item has a FIXED height which should not change. I use overflow: hidden to prevent the last item to break out of that 200px. This works well.
This is what I have with overflow: hidden
This is what I have without overflow: hidden
But now, I'd like to take one step forward and prevent the rendering of the last item, if it's about to be cut and not displayed fully due to the container fixed height limitations and overflow: hidden
This is what I really want, show only those items which are not cut fully or partially by the overflow: hidden;
What's the best practice of achieving that? a kind of "make sure all items fit in their fixed height inside the fixed height component and if one doesn't fit, don't show it at all".
Using the lastest React. Probably doesn't matter but still.
I've made a small example here.
https://jsfiddle.net/hfw1t2p0/
Basically, I want to keep enforcing the 200px max height of the flexbox, but have some kind of automation that kills all elements which are partially or fully invisible, like items "4" and "5" in the example.
Please note the 200px flexbox height, and 50px item height are just examples. In reality, I need a flexbox that can weed out any item that doesn't fit fully in it... the max height of the flexbox or minimum height of elements is unknown until runtime.
First Thing : you should get benefits from using react:
To make Content Dynamically I'll add gridItem to state so that they're rendered dynamically.
state = {
items: [
"1",
"2",
"3",
" 4 I want this hidden, its partially visible",
"5 I want this hidden, its partially visible"
]
};
And For render:
render() {
return (
<div className="test">
<div className="gridContainer">
{this.state.items.map(el => {
return <div className="gridItem">{el}</div>;
})}
</div>
</div>
);
}
.
First Demo
Here is the Cool Part:
Based on:
Each item has a FIXED height which should not change
So that all items should have same height. The solution is to add:
1- ItemHeight
2- ContainerHeight
3-BorderWidth
to the state. Now with Some calculations + inline Styling You can achieve Your Goal:
first Your state will be:
state = {
containerHeight: 200, // referring to Container Height
gridHeight: 50, // referring to grid item Height
border: 1, // referring to border width
items: [
"1",
"2",
"3",
" 4 I want this hidden, its partially visible",
"5 I want this hidden, its partially visible"
]
};
in your render() method before return add this:
let ContHeight = this.state.containerHeight + "px";
let gridHeight = this.state.gridHeight + "px";
let border = this.state.border + "px solid green";
let gridStyle = {
maxHeight: ContHeight,
};
These are the same styles used in css but They're removed now from css and applied with inline styling.
Container will take it's max height property as:
<div className="gridContainer" style={gridStyle}> //gridStyle defined above.
let's see How gridItems will b e renderd:
//el for element, index for index of the element
{this.state.items.map((el, index) => {
// i now will start from 1 instead of 0
let i = index + 1,
// current height is calculating the height of the current item
// first item will be like: 1*50 + 1*1*2 = 52
// second item will be like: 2*50 + 2*1*2 = 104
// and so on
CurrentHeight =
i * this.state.gridHeight + i * this.state.border * 2,
// now we should determine if current height is larger than container height
// if yes: new Class "hidden" will be added.
// and in css we'll style it.
itemStyle =
CurrentHeight <= this.state.containerHeight
? "gridItem"
: "gridItem hidden";
return (
// YOU'RE A GOOD READER IF YOU REACHED HERE!
// now styleclass will be added to show-hide the item
// inline style will be added to make sure that the item will have same height, border-width as in state.
<div
className={itemStyle}
style={{ height: gridHeight, border: border }}
>
{el}
</div>
);
})}
Finally! in css add this:
.gridItem.hidden {
display: none;
}
Final Demo 1
Final Demo 2 with 40px gridItem height
Final Demo 3 with 300px container height
You could use the flexbox columns to send the overflowing items to another column and set the width to the width of the container to hide the items if you want to achieve this by plain flexbox css properties like you mentioned in the question. https://jsfiddle.net/kna61edz/
.gridContainer {
display: flex;
flex-direction: column;
background: yellow;
max-height: 200px;
overflow: hidden;
flex-wrap: wrap;
width: 52px;
}
The only difference is that you won't be seeing the yellow background of the gridContainer but you can set the background in the enclosing div like in the picture below but it will adapt to the height of the child divs.
why not test elements with document.getElementById('element').clientHeight?
check the container size and find which element is visible or not.
Good afternoon
Is simple, i need the white box height and width fit with the iframe text, how i can do it?
function resizeIframe (iframeContentWidth, iframeContentHeight) {
var container = window.frameElement.parentElement;
if (container != parent.document.body) {
container.style.width = iframeContentWidth + 'px';
container.style.height = iframeContentHeight + 'px';
}
window.frameElement.style.width = iframeContentWidth + 'px';
window.frameElement.style.height = iframeContentHeight + 'px';
return;
}
html {
background-color: #fff
}
div {
background-color: #000;
display: inline-block;
}
<div>
<iframe src="http://190.216.202.35/rxp/mobilpxr.php?stopid=502102" height="85px" width="250px" scrolling="no" frameborder="0">
</div>
At first, it's good to know, how the elements you've used in your HTML work.
Every browser has its own default size for iframes, which is used, if the size is not given by attributes or CSS. Usually the size is nearby 300x200. The body of a document loaded into iframe adapts the width of the iframe it was loaded into, and the height is defined according to the content, if any sizing for the body haven't been defined.
A div element is a block level element, which by default takes a width of 100% of its parent element, and the height depends on the content height. However, this can be changed by setting a CSS property display: inline-block for a div, when the width will be set according to the content of a div.
There's no simple way at client side to detect the size of an arbitrary content to be loaded, before it has been parsed, hence we have to wait that happen. We can wait the iframe to finish loading and parsing on a parent page (= the page containing the iframe), or we can do that in the iframe itself. The latter simplifies referencing, so we'll use it in the following example, i.e. all the following code must be included in the file which is loaded to the iframe.
The body of the iframe:
<div>
<span class="title">Capri A2</span>
<br />
<span class="big">Rutas aquí: | P17 | E31 | T31 | E21</span>
</div>
Iframe resize in the iframe:
window.onload = function () {
var bodyWrapper = document.querySelector('div'),
size;
// Adapt the size of bodyWrapper to its content. If needed, an absolute size can be set too.
bodyWrapper.style.display = 'inline-block';
// Get the size information of bodyWrapper
size = bodyWrapper.getBoundingClientRect();
// Set the iframe size
frameElement.style.width = size.width + 'px';
frameElement.style.height = size.height + 'px';
// Done!
return;
}
Try this, hope it will resolve your issue.
Set iframe "height:auto"
I've got some code that adds a CSS class to an element when the user scrolls to a certain amount, to make a sticky menu bar (The distance to scroll is dependant on screen resolution so is calculated within the JQuery) - I want to add a CSS value to this class (.header_scroll) so that it changes the height of the element the class is being assigned to on scroll, to the height of another dynamic height element (#nav_wrap)
jQuery("document").ready(function($){
//Find the height of the header
var headHeight = $("#header_wrap");
var headerHeight = headHeight.innerHeight();
//Find the height of the nav bar
var menuFindHeight = $("#nav_wrap");
var menuHeight = menuFindHeight.innerHeight();
//Add value to class
$(".header_scroll").css({"height": menuHeight});
//Add class on scroll
var nav = $('#header_wrap');
$(window).scroll(function () {
if ($(this).scrollTop() > ( headerHeight - menuHeight )) {
nav.addClass("header_scroll");
} else {
nav.removeClass("header_scroll");
}
});
});`
The code to add the class is working fine, however no matter what variations on this I try, the:
//Add value to class
$(".header_scroll").css({"height": menuHeight});
Section will just not do anything at all. Looking in inspect element in chrome I'd expect to see
height: xxxpx;
appear in .header_scroll but it isn't
$(".header_scroll").css({"height": 200});
This will not add a height property to your CSS rule. Instead it will add style="height: 200px;" to the .header_scroll HTML element(s).
So you would end up with an HTML element like:
<div class="header_scroll" style="height: 200px;"></div>
Maybe you can't get the right value of headerHeight, that why it doesn't appear in your inspect tools.
Check that you get the correct height of your #headHeight element and try this:
$(".header_scroll").height(headerHeight);
Pretty simple javascript issue that I am not sure how to do:
When scrolling down on the website:
http://cerebral-supplements.myshopify.com/ (use password "aiglog")
the header shifts up into a minimalistic design. As the logo is too big it sticks out.
What javascript code would be needed to change the logo's div properties to resize the image?
Thanks
If you can add custom CSS, add the following:
/* scale logo down to ~75% size when scrolled sidebar is activated (fadeInDown class) */
.fadeInDown .template-logo img {
width: 225px;
height: 61px;
}
modify the functions values to your needs.
function onScrollChange()
{
if ( document.body.scrollTop > 500 ) {
var divElement = document.getElementById('divID');
// either change style properties directly
divElement.style.width = '100px';
divElement.style.height = '100px';
// or change the div's css class
divElement.classname = 'smallLogoClass';
}
}
than register it, so it executes on each scroll.
document.addEventListener('scroll', onScrollChange);