How to automatically break line in HTML? - javascript

I have a piece of text like the below one which in order to view the wholetext I need to scroll to the end.
Hello, this is a piece of text and it is going beyond the screen width and I need scroll to view the whole piece of text which is not so comfortable....
I want it to automatically break the line when the screen width ends, for example, I want to display it on a mobile phone like the below example automatically
Hello, this is a piece of text
and it is going beyond the screen
width and I need scroll
to view the whole piece of text
which is not so comfortable....
Any idea how to do this?

You should read about HTML Responsive Web Design.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)
Here's how we create a media query in CSS. This CSS block will only be applied if the width of the screen is less than 768 pixels.
#media (max-width: 768px) {
.container {
width: 100%
}
}

Hope, you are not missing meta viewport tag in <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The CSS for wrapping text will work with white-space as follow.
Hope this will be somehow useful to you.
.nowrap{
width:300px; /*Dont really required*/
white-space:nowrap;
}
.wrap{
width:300px; /*Dont really required*/
white-space:normal;
}
<div class="nowrap">
Hello, this is a piece of text and it is going beyond the screen width and I need scroll to view the whole piece of text which is not so comfortable....
</div>
<br/>
<div class="wrap">Hello, this is a piece of text and it is going beyond the screen width and I need scroll to view the whole piece of text which is not so comfortable....</div>

You should use the CSS word break property. It adjusts the text according to the size of your container. Here is a runnable snippet:
.container {
width: 20%;
height: 20%;
border: 2px solid black;
}
.container-two {
word-break: break-all;
width: 20%;
height: 20%;
border: 2px solid black;
}
<html>
<body>
<div class="container">
Thisissometextwhichwillnotfitinsidethediv.
</div><br><br>
<div class="container-two">
Thisissometextwhichwillfitinsidethedivduetoaproperty.
</div>
</body>
</html>

Related

creation of a hidden navbar which is only visible at a defined size

I am currently in training and to carry out a common thread project, I would like to stand out from my comrades who use a responsive navbar which displays a burger menu with a "hidden" menu which is displayed as a footer after reducing the window. (which only appears from a specific dimension)
For example the website https://www.parcasterix.fr/
I've been racking my brains for 3 days and I haven't found
Thank you
Start with the basics, make a container and use a nice natural HTML markup.
Naturally, elements are in display:block, this makes them following the page size. You can make them display:inline-block, so they stay on the same line, but will always follow the flow, and show their content.
No need to go complicated, at least on the beginning. But even after.
.container {
resize: both;
overflow: auto;
width: 80%;
height: 140px;
}
div {
border: 1px black solid;
display: inline-block;
padding: 10px; /* Just to make it nicer */
}
<div class="container">
<!-- Insert your content here and try to resize with the handle on the
bottom right corner -->
<div>Some content</div>
<div>And some more. Hey did you notice?</div>
<div>Elements are just following the flow!</div>
</div>
This is a simplified version, but assuming I've understood you correctly, you can do this simply with a CSS #media query. Hide the footer normally, show it when the screen size is small enough:
/* footer is hidden by default */
footer {
display: none;
}
#media(max-width:400px) {
footer {
display: block;
}
}
Once the screen width is over 400px, the footer will be hidden

Dynamically Update Width of Float Left Div

I've looked through a variety of other posts, and to no avail, I have yet to find the kind of solution I'm looking for. Many solutions involved people using CSS with methods like fixing the right and left (which wouldn't make it worth floating and a waste of brain power) or to word-wrap at a certain amount to the right (which also defeats the purpose of what I'm trying to do.
My problem exists like this:
I have 3 divs: wrapper, menu, and content. Wrapper is used to apply a background to 100% of the page, and create extra styling properties to be inherited by other CSS. Menu is for my menu script I coded in JQuery and it takes up 400px of space on the left hand of the screen and descends downwards at 100vh. I may change it to fixed, but it doesn't change the issue. Anyway, content is the rest of the page; let's say the other 80% of it. I have both menu and content floating left and it works just fine. However, until text wraps at the end of the screen, the div goes under (disappears in my case) the screen and no longer viewable.
My solution:
function simplyWidth(changed, menu1, wrapper){
var wrapperWidth = $(wrapper).width();
var menuWidth = $(menu1).width();
var newWidth = wrapperWidth - menuWidth;
$(changed).css("width", newWidth);
};
Does it work? Of course it works. The only problem is, it isn't dynamic at all! It resizes to the screen once, and you have to refresh the page just to get it to update again. Is there a way to take that JQuery/Javascript and make it so I can just update it every .1 of a second? Would that make the page lag? Or am I doing it wrong.
Also assume that my HTML is spot on, and it needs no corrections. The reason I won't disclose it is because there's too much there for me to post and to not confuse the living crap out of you people.
This is the basic layout of my page:
<div id="wrapper">
<div id="menu1"></div>
<div id="content"></div>
</div>
As for my wrapper CSS:
#wrapper {
width: 100%;
background-color:black;
margin: 0 auto;
top: 0px;
overflow:hidden;
height: 100vh;
background-image:url(Assets/background1.jpg);
}
Menu1 CSS:
#menu1 {
margin: 0 auto;
height: 100%;
width: 400px;
background-color:#191919;
color:white;
z-index: 400;
float: left;
}
Content CSS:
#content {
float:left;
color:white;
height: 100vh;
}
listen to resize event and call the same function when the window is resized:
$(window).resize(simplyWidth);

Make elements move horizontally only when window shrinks

I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!
#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}
It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}

how do I make a resizable scrolling text box in a fluid layout?

I've tried using Dreamweaver's standard fluid layout, and modified it with 10% column widths and 24 columns on the desktop design. I've tried creating a div within a div (bear with me, I'm a noob at Dreamweaver), and set the constraints of the text box to be within the outside div, and haven't been able to come up with a solution on that front.
I tried to set the parameters of the text box itself but that doesn't work either because of the conflict of % v. px. In the fluid layout, I'm using % for the resizing to work.
In essence, the issue lies within being able to set the vertical constraints on the text box to be in proportion for when the screen size changes; horizontal is fine because I can just set the width constraint in Dreamweaver's design module.
I'm thinking that I'll have to set it up through a javascript of some sort; although I know nothing about java except to pluck code from someone who's built it and plug it into the site.
Sorry for the rambling nature of this post, and I hope it makes sense.
I was helping you in your other question regarding jQuery and I decided to snoop around and found this question. I understand you want a fluid height for a text box in a column. That can be achieved like this:
CSS:
/*
In order to use width/height: 100% on the body and html
You need to remove the margins and padding on them, otherwise
you'll see a vertical and horizontal scroll bar, which is awful.
This way, it removed margins and paddings on everything, ultimately
leading to better styling overall.
*/
*
{
margin: 0;
padding: 0;
}
body, html
{
width: 100%;
height: 100%;
}
/* Create a wrapper to base all other %-based measurements off of. */
#wrapper
{
width: 100%;
height: 100%;
}
/* The column that the textbox will be inside */
#someColumn
{
width: 50%;
height: 50%;
margin: 5px;
padding: 5px;
}
#someColumn textarea
{
width: 25%;
height: 50%;
/* The textbox will now be 50% the height of #someColumn */
}
HTML:
<body>
<div id="wrapper">
<div id="someColumn">
<textarea></textarea>
</div>
</div>
</body>
Here's a jsFiddle to see what it looks like

Image doesn't grow in width to equal parent div's width

I have a really simple page, with a div. Inside that div is an image that sits at the top of the div some text that sits below the image.
My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image.
How can I make the image stretch all the way to the right so its width is the same as the divs width? I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show.
NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
.content { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
max-width: 58%; float: left; color: #454545; }
#announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
border-width:thin; border-style:solid; border-right-width:thick;
border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
-->
</style>
</head>
<body>
<div class="content">
<div id="announcement">
<img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
<p><b>Announcements</b></p>
<p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
</div>
</div>
</body>
</html>
Woah, woah woah.
PLEASE write it in a structured, easy-to-digest format. It will help you out in the long run as you learn code (whether it's css, php, js, etc...)
Your code is formatted poorly. I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file)
Because some users have massive screen resolutions, width: 58%; could be incredibly large. Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. When using images in fluid layouts, special precautions must be taken (to avoid warping, etc). In your specific case, the image you have IS NOT IDEAL for the code you have. I would suggest one of two things:
Set the container width at 450px, which is the width of your image; or,
Rewrite the way your page works, and use a really long header image without text. If you would like to do this, I'm available to help you. Let me know and I'll make a fiddle and write instructions for ya. :)

Categories

Resources