i have list of images i just want to show them horizontally in HTML ,if it reaches width limit it need to add at bottom row
and i have very big images how can i show them small with maintaining aspect ratio
Using CSS3 for example:
.90deg_image_rotation {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
It sounds like what you want is something like Freewall. It is a JQuery based plugin to handle the creation and management of grid systems.
Source on Github
Project homepage
An example showing behavior like what you described
You can use CSS.
Float: left;
Will give you the horizontal display you want and
Width: 200px;
Will give you the resize you want although you may need to play with the value to get what you are after.
Note that you should only specify either width or height of the image because that will preserve the aspect ratio. Specifying them both will destroy it unless of course you have some custom js which I have seen before but that's usually very fragile
Related
How do you make something like this which is iframe and (for example) acts as 1920px width in 1024px container. I need to make users check the page in various display widths on the page rather than using developer tools. Forgive me for my bad English and bad writing skill. I really appreciate your effort and time.
Set your iframe to the actual target width, e.g. say, 1920px, then play with CSS transform:scale:
iframe {
transform: scale(.3);
transform-origin: 0 0;
}
Don't forget your vendor prefixes.
To see the problem clearly. Please take a look on the following YouTube video.
Position fixed elements jump around when redirecting iframe
or try the widget on this site (iPad)
Naiise
Note: The site in video is different from the site above since the
owner doesn't wanna use the widget anymore before the problem is
fixed. But they are having the same problem.
One more thing: All fixed elements on the parent site jump around not only the iFrame. It likes, on iPad, the fixed elements need to be recalculated position when redirecting pages inside an iFrame.
Here is a simple code that I created to simulate the issue. Please create a html file from it and run it on iPad simulator or real device to see the problem.
<html>
<body style="height: 10000px">
<div style="color: #ffffff; width: 200px; height: 100px; background: red; position: fixed; left: 20px; bottom:300px;">
Other fixed element
</div>
<iframe style="height: 500px; width: 420px; position: fixed; bottom: 95px; right: 20px;" src="https://printskitchen.eber.co" />
</body>
</html>
The problem is caused by the translate3d transformation that you apply on the iframe;
-webkit-transform: translate3d(0, 0, 0);
There is a well known problem in which translate3d causes position:fixed elements to behave like position:absolute in certain webkit browsers, such as those on iOS, as well as certain desktop versions of chrome.
Here is a demo which demonstrates the bug in action:
html,
body {
width:100%;
height:100%;
margin:0;
padding:0;
transform: translate3d(0, 0, 0);
}
#nav{
width:100%;
height:10%;
position:fixed;
top:0;
left:0;
background-color:red;
}
#content {
width:100%;
height:500%;
}
<!DOCTYPE html>
<html>
<body>
<nav id="nav">
</nav>
<main id="content">
</main>
</body>
</html>
In the demo, the red nav should be visible even after scrolling down. Depending on your browser, this may or may not work properly as is. Removing the problematic -webkit-transform: translate3d(0, 0, 0); style makes it work properly across all browsers.
This bug occurs due to the transform creating a new coordinate system, causing the position:fixed element to become affixed to the transformed element instead of the viewport.
I myself came across this bug while trying to smooth out transitions on iOS, and created a post about it here. More information can be found on this thread which I have also linked to in my own post.
The only surefire fix I know of is to remove the problematic translate3d style. If it is necessary, for example in order to coax iOS into enabling hardware acceleration (which is what I needed it for), then try applying it to different elements, either parents (body, html), or children of the iframe holder. I found that applying it to a completely unrelated element gave me the desired result.
There are also several case-specific workarounds and fixes in the thread I have linked to. One of those might do the trick.
It is a pretty nasty bug to track down. Took me a while to find it on my own page.
Best of luck.
I figured out that if you change the position from fixed to absolute it'll work perfectly.
You can follow the following tutorial to emulate the fixed position by abosolute position
https://gabrieleromanato.name/jquery-emulate-css-fixed-positioning-on-mobile-browsers
Try to avoid changing height and display property (you should remove opacity as well). Instead, give #iframe-holder will-change: transform; and try to:
transform: translateX(150%); when widget should be collapsed.
It should not cause widget to render again (the problem might be rendering issue), and you will benefit in performance.
When you press Ctrl+- on any browser, the page scales down to 90% of it's original size. I need to replicate that, and open my webpage at 90% of it's original by default, instead of 100% because it looks nicer at 90%.
I tried the most common approach as mentioned here, here, and here, all of which basically tell you to add this block of code in your css.
html
{
zoom: 0.9; /* Old IE only */
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
The problem with this is that it creates a gap on the left and the right sides, as well as a huge gap on the top, which aren't present when you manually reduce the size by doing a ctrl+-.
This is what happens when I use the above mentioned code - notice the gaps on the left, right, top.
While this is what I want - this is what happens when you do a ctrl+ - manually in your browser.
How do I go about this?
EDIT: As Jonathon said in the comments, if my page looks nicer at 90%, I should have designed it to be that way instead of having to scale down. The problem was that I'm using this default template, and I just prefer it at 90% over the full 100%.
You need to use/convert to relative units in your CSS. Either % or em or rem.
Then at the body level you can set an absolute size that results in the relative measures recalculating to what you want.
If you use em or ex exclusively:
You declare font-size: 90% for body and you'll be able to adjust on the fly.
It all comes down to the units you choose and making them relative will allow you the kind of freedom you are looking for now.
Maybe you can compensate this gaps with margin-top:-50px; for specific elements.
I've been working on a little page that will work just for doing photos from your webcam and making them downloadable. Everything was okey, I connected the webcam with a video element, and took "screenshot" of a frame and put it with the size I wanted in a canvas element.
The problem is that I wanted to make the photo and the video to look like if they were a mirror. For the video and the canvas element there was no problem, since this CSS code inverts the image perfectly:
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
The problem is that when I convert the canvas to a .png file so the user can download it, the CSS rules set are not respected, so it looks weird that the image is the opposite that it was on video preview.
I can invert it with the same code on browser, but of course that won't change the file that user would download...
So, there's any way to make them to respect the CSS rules? Or at least to invert the image before I create it...?
Update:
The video I'm playing is took from webcam, you must hit that button that says "START VIDEO". Anyway, on fiddle the html stuff doesn't fit. And yes, the default camera icon on right will be replaced once the user takes the first picture. Once the video starts, there will be three rectangles, from the left the first will be the video preview, the second one is the canvas element and the last one is the image file generated. Everything was tested and working well under a LAMP local setup on Ubuntu 13 and Chromium browser.
Here is my Fiddle
P.D: This is my index.html
I have a page which has a listview autodivider linkbar, which list alphabetical characters and help user to navigate through a listview, here's the code and example:
http://view.jquerymobile.com/master/demos/listview-autodividers-linkbar/
My problem is, that in mobile devices, the position: fixed does not work, so jQuery implement some tricks in order to make it fixed. Everything works finem but in Chrome it simple doesn't work.
I investigate, and the problem is from the wrapper (ui-panel-content-wrap i think):
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
If I put
-webkit-backface-visibility: visible;
-webkit-transform: none;
The position: fixed in Chrome start working, but the menu panel, anyone, the left or right one stop working, because the transform property to open and close is now disabled.
Any idea how to make both work?
I'm driving MYSELF crazy trying to fix it.