I have an old-index.html for a old-touchscreen project(800*600 pixel), now I have a much larger touchscreen(1920*1024) and have more displays, a new-index.html. I prefer to keep all info of old-index.html in new-index.html in a simple way, i.e, leave a 800*600 space in the new touchscreen, and display the exact size of the old touchscreen. The last way is to merge everything of old-index.html into new-index.html, but too much work. if there is a way I could "insert" old-index.html into new-index.html (I define a special area in new-index.html,and then force old-index.html inside this area.....), that will be great!
You can use an IFRAME : https://www.w3schools.com/tags/tag_iframe.asp to load the entire old html inside the new page without any CSS or JS clashing.
i.e.
<iframe style="width:800px; height:600px; border:none" src="/old-index.html"></iframe>
Just have all the old stuff inside a section tag, and make the new one responsive to change the dimensions of the old one smoothly on a larger viewport that I think you are trying to say. I don't know for sure if I understood the problem.
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
I know it has already been asked HERE but the solution doesn't work for me.
Enlarging from 500px makes it blurrier. Tumblr does actually store a
copy of your image wider than 500px. It's called HighRes, and it's (up
to) 1280px.
In your theme HTML, Replace photoURL-500 with photo-HighRes, for
example, and resize from that.
As you can see from my tumblr page (http://reviewsbytea.tumblr.com/) the image url has "500" in it and it stretches and looks ugly even though in the code it's clearly written:
<img src="{PhotoURL-HighRes}"/>
I tried {PhotoURL-100}, I tried {PhotoURL-1280}. Nothing changes! The generated URL still has 500 in it.
Help please?
Adam Azad in the comments was right: the issue was that I was editing {block:Photo} (for photo posts) instead of {block:Text} that I was using.
It seems it is not possible to use the at all in a text post. It defaults to 500px width anyway.
I recently created a fb page for sharing my photography work. I'm new to iframes n stuff so I did my welcome page via an app provided by wildfire
Here is the link to the page https://www.facebook.com/pages/Bharath-Keshav-Photography/144046682351773
Now, how exactly do i get rid of the vertical scroll? The app specifically says that scripts aren't allowed. Also, setting body style="overflow: hidden" isn't allowed as tells me that the body tag can't be used
The best solution would be to use the JS-SDK.
You can either use FB.Canvas.SetAutoResize to have your page automatically resized or, if you know exactly what the height and width of the page will be, use Fb.Canvas.SetSize
You can find more info here: https://developers.facebook.com/docs/reference/javascript/
Also, keep in mind that the maximum width of a page app is 520 pixels and from personal experience, it's best to keep it around 500-510px
You have to make your css in this way
body {
width:520px;
margin:0;
padding:0;
border:0;
overflow:hidden;
}
and use FB.Canvas.setAutoResize();
In this way you can do your tab 520 pixel without scrollbar
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .