Weird HTML Row Wrapping - javascript

I am building an dynamically created gallery, where ajax/php fetch some images and then load those images into a dynamically created table. I have a set width for this table and I want the overflow only in the x direction. The issue is that the table row (tr) seems to wrap itself. I have tried using the css overflow-x property, I have tried manipulating the table width (which is inside a div), and I have tried using css to turn off wrapping. None of this helps and the table scrolls vertically instead of horizontally. Any help would be much appreciated. Thanks.
Here is the table structure:
<table><tr><td><img style="width:100px;"/></td>...(many more columns)...</tr></table>

I'd recommend to use <div>s.
Try something like this:
HTML:
<div id="gallery-wrapper">
<div><img src="..." /></div>
...
<div><img src="..." /></div>
</div>
css:
div#gallery-wrapper{
width:100%;
height:100px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
}
div#gallery-wrapper > div{
display:inline-block;
width:100px;
height:100px;
}
P.S. There are actually many other ways to do this.

This is an example of using a table in the wrong context and why it's not recommended. If you absolutely must use the table layout then put the image in a div inside the td and set the divs overflow.
<table><tr><td><div class="imageDiv"><img style="width:100px;"/></div></td>...(many more columns)...</tr></table>
.imageDiv{overflow-x:scroll;}

I would recommend you to use the jscrollpane that is jquery plugin.
http://jscrollpane.kelvinluck.com/

Set the width and overflow not for the table, but for a div around the table, so that the table can be scrolled inside this div:
<div style="width:1000px; overflow-x:scroll;"><table>...</table></div>

Related

Customizing where a div wraps to

Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.
This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/
You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript

Resize HTML container element does not correctly resize child elements

I have a simple AngularJS, JS, JQ, HTML5, CSS3 web app. I am facing the following problem: when I try to resize the part of web interface - child elements get smaller, but they cross the border line. All content is grabbed into a <div id="resizable"> which is just jquery-ui resizable element:
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
It looks like this:
1:
And what I want is that it \'d be like this:
2:
No content should be below the border line. What CSS rules have to be applied for child elements so they change their size according to their container element? I tried already all of available positioning, but it just don't work - elements behave identicaly.
Can anyone provide a working plunker, which would be capable of resizing child elements correctly? Every useful answer is highly appreciated and evaluated.
Thank you.
Have you tried setting all your heights and widths in %? I threw together an example in a JSFiddle, of a 3x3 grid. They are all set to a 1/3 width and height, and so resize automatically when a user resizes the outer wrap.
Example Fiddle
HTML
<div class="resizable">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
...Two more rows...
</div>
CSS
.row {
height:33%;
width:100%;
}
.cell {
width:33%;
height:100%;
float:left;
}
JS
$('.resizable').resizable();
Obviously this is an example to demonstrate the concept and not code that will work directly for your site. If you could post some of your code, I can try to adapt it.

Can't style a div with javascript

I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/

set the div to position:relative from position:absolute; when using turn.js

this is a simple question, I've just started using the turn.js library and want to relatively position image elements with reference to a container div, to do this, it would look something like:
<div id="cont" style="position:relative;">//this div acts a page
<img src="my.jpg" style="position: absolute; top:40px; left:50px;">
</div>
the div, using the library, would serve as the page to be flipped, the problem is that whenever i set the container div to position relative, it gets turned into position absolute automatically by the turn.js library when the page loads, is there a way to ensure that the divs which get turned into pages all have position:relative; instead of position:absolute;? Thank You in advance.
Try this hope this may solve your problem
#cont {
position:relative !important;
}

How to cycle a single div in an element with jQuery

I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!
jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.
What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.

Categories

Resources