Add scroll bar to appending box - javascript

I have a box on my webpage that you can drag an image onto and it will show it's details of the image that are stored in my database. The box appends when images are loaded into it but I'm wondering how I could add a scroll bar to my box instead of it appending all the way down the screen. Here is my JS code:
$("#drop").append("<span><img id='t"+id+"' src='images/"+pick[id].src+"' title='"+
pick[id].desc+"' alt='"+
pick[id].alt+"' class='thumb' /> "+pick[id].desc+", Price £"+
pick[id].price+"</span><br />");
and my CSS:
#drop{
float:right;
margin-left:2%;
width:30%;
background-color:9CF;
}
thanks for the help

Not exactly sure what you're asking but maybe this could help. Give the #drop element a fixed height and add the overflow property to its style.
#drop{
float:right;
margin-left:2%;
width:30%;
height: 300px; // Or whatever satisfies you.
overflow-y: auto;
background-color:9CF;
}

Related

Div aligning right and changing x location depending on other Divs on the right side

Overall I would like to have something like this jsfiddle.net/DSghU/
Just that the the whole thing is not sliding out to the left. It shall slide out to the right. So that by clicking on the button the button is going completely to the right side.
Edit
I was able to solve the first question: jsfiddle.net/kwoxer/7hne1d0b/
But now I'm looking for a small fix on that. I really dislike that the text is braking when toggled out. How can I set it so that the text is not braking?
Edit 2
The current solution is already cool. But there is just another small issue with the other content. It's moving to the bottom. So how can these toggle elements really be just like an overlay. Here an example: jsfiddle.net/kwoxer/7hne1d0b/4/ I want that the other text(on the left) is staying as it is. And image there is a SVG instead!
Edit 3
Found it out. You need another inner div: jsfiddle.net/kwoxer/7hne1d0b/5/ But I don't think that's a cool solution for this right? If someone finds out something way better, please let me know.
Is this correct. Please have a look at following fiddle:
http://jsfiddle.net/zxwo3ack/16/
basically I just added a few things to the css
#myDiv {
position:relative;
top:50px;
color:Green;
background-color:#eee;
border:2px solid #333;
text-align:justify;
float:right;
width:200px;
overflow:hidden;
}
#button{
position: absolute;
top:80px;
right:0px;
float:right;
}
.other_details{
position:relative;
top:50px;
float:right;
font-weight:bold;
width:200px;
border:1px solid black;
padding:5px;
margin-left:2px;
}
In order to achieve your goal you will need to animate either left position or margin-left. In both cases respectic div should be wrapped with one more container with overflow: hidden on it.
var targetWidth = $('#myDiv').css("margin-left") == "200px" ? "0px" : "200px";
if (!$("#myDiv").is(":visible")) {
$("#myDiv").show();
}
$('#myDiv').animate({marginLeft: targetWidth}, duration, function () {
if ($(this).css("margin-left") == "200px") {
$(this).hide();
} else {
$(this).show();
}
});
Demo: http://jsfiddle.net/7hne1d0b/3/
Solution was pretty simple. Just a bit of CSS needed to be changed and the order and elements in the HTML edited.
This is what I wanted to have: jsfiddle.net/kwoxer/7hne1d0b/2/

Hiding DIV elements from browsers built-in find function

Ok guys, heres the deal. I have two div's in my page for the purpose of a scrollable table.
That all works fine(I'd post the code but the page is WAY to complicated with all the DB data we bring in. And I don't wanna breach any privacy rules here at my company.) Anyway. I have the two div's containing exactly the same data and I have z-index'd the scrollable div on top of the other one. The hidden div only exists to show the table header. I have to write out the data in both div's so the table header's cells are the correct width because the width fluxuates. Anyway, now that the explination is over, heres the problem. When using CTRL+F to find items in the table. When it finds a single item, it says it found two because it's finding the value in the div thats hidden. Is there anyway in HTML,CSS,JAVASCRIPT to not include the contents of the hidden div in the find function?
Sorry for such a long explination. This is my first question here, just wanted to be thorough.
Thanks guys for any help you can give.
CODE:This writes out the divs and tables
response.write "<div id='container'>"
response.write "<TABLE BORDER=1 style='border: solid; ' WIDTH='100%'>"
call writeHeader
call writeData
response.write "</table><div id='divToShow'><TABLE BORDER=1 style='background-color: white;border: solid;' WIDTH='100%'>"
objrst.Close
objRst.Open Sql
call writeData
call writeHeader
response.write "</div></table></div>"
CSS:
<style>
#container {
width: 100%;
height: 650px;
position: relative;
overflow: hidden;
}
#divToShow {
width: calc(100% + 5px);
height: 650px;
position: absolute;
top: 46;
left: 0;
overflow-x: scroll;
overflow-y: scroll;
}
#divToShow {
z-index: 10;
}
It turns out that, having visibility set to hidden does what you asked for:
td {
visibility:hidden;
}
This example illustrate it: http://jsfiddle.net/c26pn017/
But as I stated in the comment I'd rather dig to find out how to build the fixed header table instead.

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.
Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

Is there anyway in CSS to make the page width variable?

I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.
As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/
Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example
You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?
Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.
I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>​
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
​
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});​
Demo:
http://jsfiddle.net/foxbunny/EY9sc/

CSS to Expand, Hide Content on Hover

Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.
I almost got it working except for the last part - hidden content does not stay on top even with z-index applied.
Here is the sample: http://jsfiddle.net/ZQ63X/
you need the css to be like this;
.item .item-1, .item .item-2{
position:absolute;
background-color:white;
}
.item .item-2{
display:none;
}
.item:hover .item-2{display:block;}
hope I helped
/edit -> this way you dont even need javascript..
Change the styles for .item .item-2 as below.
.item .item-2{
display:none;
position:absolute;
top:0px;
}
Demo
I added background color and z-index for the hidden elements when revealed... Is this what you mean?
http://jsfiddle.net/kmacey1249/ZQ63X/3/

Categories

Resources