Is there a way to manipulate text in document.write code? I'm currently doing this
if (score > 35) {document.write(output); document.write('<img src="images/Rabbit.jpg">')}
to print the output of the users choices, but you get a huge image and this tiny little text. Can someone at least point me to some information on how to, or (if even possible) the code to edit it in CSS?
Forgot to add that (output) outputs predefined text. That would probably help
Just add this inline CSS to the image tag:
<img src="images/Rabbit.jpg" style="width: 200px; height: 200px;">
If you can't change the HTML outputted then add this internal CSS in your HTML head.
<head>
<style>img { width: 200px, height: 200px; } </style>
</head>
Related
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
So I have been attempting different variations of trying to use #dc6820 in my code to change only one link source for a layout I'm helping someone with. Usually, I don't have too much trouble, but no matter what I've tried, it just remains the same (or I muck up the coding and have to redo it)
This is the section I'm attempting to change:
< div id="info" >
< br >posted < a href="{Permalink}">{TimeAgo}< /a> {block:RebloggedFrom}
**via < a href=" {ReblogParentURL}">{ReblogParentName}< /a>{/block:RebloggedFrom}
{block:ContentSource}(< a href="{SourceURL}">© < a href="{SourceURL}">{SourceLink}<
/a>){/block:ContentSource} {block:RebloggedFrom} < a href="{ReblogParentURL}"
target="_#nk">< /a>{/block:RebloggedFrom}**
with < a href="{Permalink}">{NoteCountWithLabel}< /a>
{block:HasTags}< div id="tags">♡{block:Tags} #< a href="{TagURL}">{Tag}< /a>
{/block:Tags}< /div>{/block:HasTags}</div></div>
{/block:Posts}
{block:PostNotes}< div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>
< /div>
I'm attempting to change the section between asterisks (via --> /block:RebloggedFrom}
Edit// I've attempted the style change referenced below to, unfortunately, no results :(
Here's a link to the pastebin with the section (hopefully) without the errors pastebin.com/qNAbZAhQ –
First, let's clean-up that HTML and make sure our tags are closed.
HTML
<div id="info">
{block:Date}
posted <a class="time" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
{block:RebloggedFrom}
via <a class="reblog" href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
(<a class="source" href="{SourceURL}">© {SourceTitle}</a>)
{/block:ContentSource}
{block:NoteCount}
with <a class="notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
{block:HasTags}
<div id="tags">
♡
{block:Tags}
#<a class="tag" href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
As you can see, in addition to closing tags (and removing unnecessary elements) and wrapping everything in its correct block, I added different class attributes to each type of link so that you can go into the stylesheet in the head and add your colors. For example...
CSS
<style type="text/css">
a.reblog {
color: #DC6820;
}
</style>
or
<style type="text/css">
.reblog {
color: #DC6820;
}
</style>
or even
<style type="text/css">
.reblog:link {
color: #DC6820;
}
</style>
That latter would allow you to use CSS state selectors to change the color of the link depending on the state of the link, e.g. active, hover, visited.
You can add a style attribute to your a tag as such
< a href=" {ReblogParentURL}" style="color: #dc6820;">
Of course you need to add this to all your a tags that you want to change.
I was able to change my homepage so that the images now stretch full width on the screen. Now I just need to fix the text and content so that it has a max-width of 960px. Below is an image of what I am trying to fix.
If I can get the "Mobile Job Search" section/text back to how the rest of the pages are on the website that would be perfect.
The two divs are .myLeftColumn2 and .myrightColumn2
Any help would be great. Thanks so much!
www.jobspark.ca
Just add that CSS to your code, I hope that work for other pages too...
CSS
#content{
max-width: 960px;
margin: 0 auto;
}
Put the whole text inside a new div, then write:
#newdiv{
max-width: 960px;
}
Into your style sheet. This should work perfectly!
You are probably going to have to enclose the content below the image in its own div, and restrict it's width.
Edit I looked at the source html, but it is quite messy.
Just to see if this changes anything, located all the divs like this:
<div class="row sqs-row" id="yui_3_7_3_1_1369586030814_180">
Here's the css :
.sqs-row { width: auto !important; *zoom: 1; }
edit that width to the width you want (960px)
.sqs-row { width: 960px; *zoom: 1; }
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.
Lets say I have some markup like this:
<html>
<head>
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: green;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Imagine "container" is filled with hundreds of a's for testing purposes of padding.
Now, what I want to do is to make an area of whitespace between the edges of "container" and its content on the left and right hand sides. So I add:
padding-left: 50px;
padding-right: 50px;
Now from what I (thought) I understood, this would mean that if 100 a's fitted per line before, only 80 or so would fit now. In other words, "container" would remain the same width but grow downwards.
However, what I am seeing is that the size of "container" is increasing horizontally and not vertically.
How can I get "container" to grow down vertically and stay the same width horizontally?
You need to change the width to 800px and then add your padding. Padding is additive to the width.
W------W - original width
PW------WP - original width plus padding either side
PW----WP - smaller width plus padding either side
Box model courtesy of Can Berk Güder
What garry said, If youre using Chrome or Firebug plugin for Firefox you can right click and "inspect element" and see a visual representation of how your elemenent is being sized, really helps in these situations.
The affects of adding padding or margin to an element depend entirely on the browser you're viewing the page in. Padding and margin SHOULD be additive as Garry says but that's not the case with IE6 so you'll need to do some research around browser differences and how you can accommodate them in your style rules.
From what it looks like your doing you just want a padding to be applied to the whole page. You could do that by directly referencing body in your CSS. so you'll have -
body
{
padding:0 50 0 50;
}
You could also add a margin to anything inside the div:
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: green;
}
#container *
{
margin-left: 50px;
margin-right: 50px;
}
</style>