I would like to make a Div Container, where a user can add Boxes (also divs) wich can be dragged arround, but don't overlap. So i started with the container:
<div id="image_container"></div>
I want to change the images afterwards. So The width is always given, for example 800px, but the hight should be auto. I tried following:
div#image_container{
position: relative;
background: url('http://www.locationscout.net/public/images/2015-02/externsteine-germany_l.jpeg');
width: 400px;
background-size: contain;
background-repeat: no-repeat;
height: auto;
}
But couldn't get a result. How would you do that? Since the whole app will not work without JavaScript, i could adjust the hight with that. What do you think about that? So if the image loads, fire the function wich does that.
After the container is done, the user should be able to add boxes into it. He should be able to input the height and width and add up to 4 boxes, not more. But the size should be adjustable via a slider and stay relative to all other boxer.
So... If there are 2 Boxes, one 400x400 and the other 200x100, he could adjust the sizes with the slider for example to, 200x200/100x50, 800x800/400x100 but even smaller steps like 480x480/240x120. That could be done with this slider:
<input type="range" min="0" value="0" max="100" step="1">
How would you do that? I would give the formats via a
Then the boxes should be added into the container and they're draggable, but don't overlap. Something like this but better code. The one i wrote is just bad. The JS is done with a plugin and isn't efficient. What could you recommend?
Greetings
c144
Related
So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;
I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.
My page has a 1000px container for the header(above the red box in below image) and the content(below the red box in the image attached). Those containers are fixed width. But I need to setup a image slider that will be displaying the images in full width.
I mean, I will be including a much wider image. Say, 1800x200 px. So, if the user's screen resolution(width) is less than or equal to 1000px, then the middle portion of the image would be displayed and the image slider should be 1000x200 px in size(resized). But if say the user's screen resolution is 1300(width), then the image slider should be resized displaying the center portion of the image and the slider container would be of size 1300x200 px in size!
Since there are lots of jQuery plugins already available, I thought of not to reinvent the wheel. So tried many jquery sliders. But none of them seems to be meeting my above needs. Or am I missing some settings in those sliders that I tried?
Any suggestions?
Maybe add an extra outer container? Then center the 1000px container within the outer one.
Then when you resize the window the image slider will respond to the outer container and the inner container stays centered.
outerContainer {
width: 100%;
.....
}
innerContainer {
width: 1000px;
margin: auto; /*or left:50% right:50%*/
}
you have to wrap all div in .wraaper div and define width 100%.
.wrapper{width:100%;}
and in inner div you have to define section using an
.inner(width: 1000px;)
where you need 100% slider dont use this .inner class.
this is help for you.
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.
There's a nice javascript library for displaying photos on iPhone called "jaipho". I'm trying to adapt its slider implementation to work in a normal browser, and I'm having some problems.
Here's the summary of how its slider works: there's a table of images arranged horizontally. The table is contained in a div which has overflow:hidden, and then some javascript moves the table by setting its marginLeft to some negative number.
More specifically: the table is placed inside the div by setting its innerHTML in javascript. Each table cell is of class "slide", which is set by CSS to be the width of the iPhone. The photos are dynamically placed in the table cells by calls to appendChild, so that they need not all be loaded at once.
It works great on the iPhone in MobileSafari. With the photos arranged horizontally, one can slide out of view to the left while the next one slides in from the right.
Now I try to get it to work on a Mac in a browser window. The problem is getting a constant width for each cell -- I can't use CSS because the width I want is window.innerWidth, not a fixed width like the iPhone. I've tried setting the table cells with "width" tags (or "style" tags) to the width of the window. Looking at what Chrome thinks is going on in its Javascript Console, it's as if the table is ignoring the effort of the cells to set their width, and rather the table is setting their widths to be very narrow in an effort to entirely fit inside the window. (Or into its containing div, even though it's set to "overflow: hidden".)
Anyone have any suggestions how to coerce a table into being very, very wide in pixels, even though only some small part of it will ever be shown at a time?
Thanks,
Dave
I recently built something like this, and here is the structure:
<div id="outer_container" style="width: 500px; height: 100%; position: relative; overflow: hidden">
<div id="slider" style="width: 5000px;">
<div id="slide1" style="float: left; width: 500px;">...</div>
<div id="slide2" style="float: left; width: 500px;">...</div>
<div id="slide3" style="float: left; width: 500px;">...</div>
<!-- add as many as you want, just make sure it fits in the 5000px width above -->
<div style="clear: both;"><div>
</div>
</div>
Then the slider works by adjusting the css left property of the the 'slider' div. So basically the viewing window is 500px as well the width of each 'slide'. I guess the key is the float: left on each slide.
To see this div structure in action, check out the top section in the right column that I coded on this site
In order to get the cells to take the proper width, you have to adjust the table width to accommodate all those cells. Take a look at this fiddle: http://jsfiddle.net/USRww/1/. I'm resizing the table to accommodate all cells, assuming that each cell will be 100% of the browser window's width. I'm using percentages there, so everything is fluid.
That markup is using a table as you suggested, but I'd advise just using a container div there with a bunch of floated divs for each cell.