Create a row of cells (DIVs) using Javascript/Jquery - javascript

I'm trying to create a row of multiple divs using Javascript or jquery; say 32 tiny DIVs. Since the size is not fixed, I can simply use HTML. Table cells could also be an alternative, but since I need the click ID, and their color should change later, it is better to go for DIV.
I did it, but the divs are getting vertical instead of horizontal. What I want to do is exactly the notion of Sliding window in TCP. Look at the row of ack'ed packets on top of this simulation: http://histrory.visualland.net/tcp_swnd.html
I want for instance after a button click, the sliding window move to the right one step.
This is my project, simulating the above link for TCP: http://jsfiddle.net/j26Qc/47/
partial code for row of DIVs:
for(var i=1;i<=16;i++){
$('#table').append("<div id='"+i+"'>"+i+"</div>");
}

You need to change the display style of the divs, they default to display:block, so what you are wanting to do is give them inline-block style.
JS
for(var i=1;i<=16;i++){
$('#table').append('<div class="inline" id="'+i+'">'+i+'</div>');
}
CSS
.inline {
display:inline-block;
}
To get them to look like the little blocks in your link, you would need to add additional styling
CSS
.inline {
display:inline-block;
width:20px;
height:20px;
border:1px solid;
text-align:center;
}
note that in your fiddle your .table class is only 150px so this would make some of them wrap around, either make the text and size of the divs smaller or make your .table class longer.

Related

Scroll vertically with fixed columns

I have a fixed-size container with dynamic content. The content is a series of items of varying heights. I want the items to flow vertically (each visually beneath the previous), but be able to inject a column break on a particular item. I use JavaScript to inject the column breaks, and thus know how many total columns are needed, and thus can inject the total column count somewhere (if helpful).
Here's what I had been using that I thought used to work in Chrome. The desire is to have A1-A5 in one column, and B1-B2 in a second column. The entire section should scroll vertically, not horizontally.
section { width:400px; height:300px; font:9pt sans-serif; overflow:auto }
div { margin-bottom:1em; -webkit-column-break-inside:avoid }
h3 { margin:0; background:#000; color:#fff; padding:4px; font-size:9pt }
span { display:block; height:45px; background:#ddd; padding:4px }
/* The following are injected by JavaScript */
section { -webkit-column-count:2 }
#B1 { -webkit-column-break-before:always }
<section>
<div id="A1"><h3>A1</h3><span>content</span></div>
<div id="A2"><h3>A2</h3><span>content</span></div>
<div id="A3"><h3>A3</h3><span>content</span></div>
<div id="A4"><h3>A4</h3><span>content</span></div>
<div id="A5"><h3>A5</h3><span>content</span></div>
<div id="B1"><h3>B1</h3><span>content</span></div>
<div id="B2"><h3>B2</h3><span>content</span></div>
</section>
As seen in Chrome, the above snippet wraps A4 onto a second column and creates three columns scrolling horizontally. How can I achieve my desire of two columns, scrolling vertically?
It is easy for me to change the global CSS, and to apply new custom CSS to each <div> with JavaScript, but (for complex reasons) it is hard for me to modify the DOM using JavaScript. I'd prefer a solution that does not modify the DOM.
I believe the problem you're having it to do with defining the height of the "section" element in the first css block. Make it so:
section { width:400px; height:auto; font:9pt sans-serif; overflow:auto }
Everything should be fine with that change. jsfiddle here
You will lose the fixed size though. I couldn't find a configuration that didn't fail this requirement.

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Hovering over an image in one div container to have an img or background appear in or over top of a different container

So I'm fairly new as far as coding goes, just so everyone knows.
I'm trying to accomplish two simultaneous things
1. The first is, I would like be able to hover over an image in one container and have another image in a different container appear. Even if that means having an image that technically overlaps the container and just happens to have the same dimensions (which are width: 350px and height: 205px, by the way). If another solution is to have the initial image be a clickable link to open the second image, that would be fine too. In fact, that'd be preferable.
2. I need to do this multiple times, each with different initial and secondary images, with float:right or a similar css function involving setting the sets of initial images being wrapped to the right of my first div container.
3. I need to maintain the set of initial images (buttons), in two rows, with overlap-y: hidden and overlap-x: scroll.
My css for the button images is this, and must either stay this way or have a similar effect:
div.img {
margin: 10px;
**padding: 5px;**
**height: 38px;**
**width: 38px;**
float: right;
display:inline;}
div.img img {
**height: 38px**
**width: 38px**
display: inline;
float:right;
margin: 10px;
**border: 12px solid #ffffff;**
**border-radius: 8px;**
**box-shadow: 3px 3px 1px #888888;**
I put all the key points of the css that I need to keep (or display in a similar fashion) in bold. The part in question is the display: inline function. I need my set of images to be in two rows, wrapping to the right side of the container (or at least scrolling horizontally), but instead they are displaying as two rows of three, then one vertical column that is no longer aligned with the two rows of three.
To see the type of solution I'm looking for, here's the page: http://hellothisismelody.tumblr.com/codeconstruction/
As you can see, it's set up like a Nintendo 3DS. I'm looking to make functioning buttons on the bottom screen that make an image appear in the top screen, and looking to have those images set up like the home screen of a Nintendo 3DS, which looks like this:
Click for Nintendo 3DS Homescreen
Thank you for you time.
Regarding your first question, you can use this:
<div class=container1>
<img src='blah1.png'>
</div>
<div class=container2>
<img src='blah2.png'>
</div>
$('.container1 img').hover(function() {
$('.container2 img').get(0).src = 'blah3.png';
});

Add a CSS that enlarge the value when the mouse hovers over it

I have a table inside an html page created by Javascript and hold number inside its cells i want to enlarge the number when the mouse hovers over it using css style.
I'd do something like:
table td:hover {
font-size: 1.1em;
}
This way, you're sure to have a bigger font than what's already there.
look into css :hover selector
this mainly works for anchor tags in most browsers, if you want to do hover for other elements you might want to use javascript
Here's an example: http://jsbin.com/urube4/edit
You can either use the :hover psuedo-selector on the td, or on the span inside, depending on the effect you want.
The first table in the example will only activate the hover on the mouseover of the text, while the second example will activate on the mouseover of the table cell.
As stated, you'll have an issue here with IE6, as it only recognizes :hover on a tags and form elements such as button and input. If you want IE6, you'll need to use JavaScript.
table td:hover {
font-size: 14px; // greater than actual size
}

Resize div that's inside another div

I have a div that is the body of my site, inside that div I put a div on the left side (to have a vertical menu)
http://www.freeimagehosting.net/uploads/117f79fa0e.png
http://www.freeimagehosting.net/uploads/4569a5f550.jpg
My question is, how can I make the menu div follow up to the bottom of the body div so that it doesn't look like it was cut, because of the color the menu div has...I've played around with properties like position, margins, float, yet I can't seem to get it to work...
I've included two pics so that you can see the divs!
Sorry pics don't appear because i'm a new user!! i've included links though...
The first picture is the inital page, and the second is after content was added and the body div expanded to make that content fit!
Any help appreciated!
This technique has always worked for me.
See http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
The background is actually on the wrapper of the two columns though.
This is really something best approached with CSS.
Say this is your structure:
<body>
<div id="main">
<div id="leftSide"></div>
</div>
I think what you'd want to do is give the left side a height of 100% in your CSS:
#main {
height:500px; /*this can be whatever height you want for your main div*/
width:700px; /*same with this, for its width*/
background-color:#F00; /*just to show you the effect*/
}
#leftSide {
float:left; /*THIS is where the magic happens, to "pull" it to the left*/
height:100%; /*This makes sure it reaches all the way to the bottom*/
background-color:#00F; /*or any color you'd like (which is a great song btw)*/
width:200px; /*or whatever height you'd like*/
}
This all assumes of course that you don't have extra margins and padding on your divs or other elements. You also might want to consider a "CSS Reset" like this one

Categories