I am looking for some JavaScript plugin (preferably jQuery) to be able to scroll through an image, in the same way that Google Maps works.
I can make the image draggable but then I see the whole image while dragging even if the parent div is overflow:hidden.
Any help would be greatly appreciated!
(I'm super late to this now dead party, but hey, I found this page via a search so...)
Scrollview plugin suggested by mooware didn't work for me.
However Dragscrollable did:
http://plugins.jquery.com/project/Dragscrollable
Try out the demonstration
I may be a little late to the party, but I was just looking for the same thing. What I stumbled upon is scrollview for jquery, it works perfect and does exactly this google maps-like drag-to-scroll for overflowed divs.
Check out the Google Maps Image Cutter It can take any image or digital photo and cut it into tiles which are displayed on a Google Map. Might be a quick way to do what you need...
You could use the google maps api...they allow for you to use it with custom images. And you can choose if the controls show up or not.
EDIT: Found a decent tutorial on how to do this.
http://mapki.com/wiki/Add_Your_Own_Custom_Map
For a good description of the underlying technology have a look at Chapter 4 (if I recall correctly) of the Pragmatic Programmers' book Pragmatic Ajax.
You'll see how the image slicing and dicing works under the covers. And the zooming.
This has less to do with javascript and more to do with the CSS coding.
Try a few experiments with just HTML and CSS to get the image to clip properly, then add the javascript to move it around.
If you can't get it to clip with HTML, or move with the javascript post the simplest demonstration of the problem here for us to debug.
Without the code we're shooting in the dark.
Google Maps uses images sliced into blocks which are dynamically loaded as the user pans in different directions. The Google Maps Image Cutter Paul Dixon mentions is the tool you want for this.
If you just want to pan one large image, rather than have the additional complexity of slicing the image up into blocks, then instead of using the CSS overflow property, you should use the clip property. This is supported on all browsers worth thinking about, down to IE4 if I remember correctly.
One point to note: the CSS2.1 spec shows examples with the rect values separated by commas. However this isn't supported by IE6 (perhaps not IE7, either). However all other browsers understand the version without commas. So instead of
clip: rect(5px, 40px, 45px, 5px);
you should use
clip: rect(5px 40px 45px 5px);
for compatibility.
You need a container <div> set to position:relative around the <img> element, which you then set to position: absolute.
So the basic technique is to update the top and left values as the user drags, use these together with the defined width and height of the view onto the image to create the appropriate rect() string, and update the top, left, and clip properties of the <img> element's style property.
Don't do what I did and leave out the "px" after the values in the rect() string. It took me ages to realise why it wasn't working :-)
Related
Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.
Excuse me for this, probably spoony, question. But when skinning controls/elements I'm usually using the following concept (I don't know the correct name, but I first saw it when creating custom WinXP themes). The basic idea is to set up a sort of margins in the image that restrict resizing, only the inner parts are allowed to stretch.
http://img42.imageshack.us/img42/6188/image7rq.jpg
When using this method in my regular programming work life is easy, I just BitBlt the four corner and then StretchBlt the remaining parts into place. However I'm no expert on HTML and I cannot find anything on the internet about it. It's kinda difficult to search when you don't exactly know the name of the concept...
a) How is this method called?
b) Does anyone know how to do this using HTML, CSS, Javascript, etc.? Preferably I would like the background of a DIV element to be themed like this. It's the intention to not spend the rest of this day slicing images in Photoshop ok, that makes me feel so utterly miserable..
There's several ways to approach this. If you are allowed to target newer browsers and allow old browsers to degrade to square corners and non-gradient backgrounds, check out the new CSS 3 features.
If, however, you need to be able to support old browsers, you're going to have to fire up Photoshop, create some background images, and nest some html elements. If your background only has to scale in one direction (verically or horizontally) check out the sliding door technique.
Wouldn't be easier to use css instead? Check thishttp://jonraasch.com/blog/css-rounded-corners-in-all-browsers or do a search for 'css rounded box' or 'css rounded corners'
Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript?
Here's an example in Flash: http://www.kirupa.com/developer/actionscript/color.htm
My guess would be that it's only possible with Canvas, as far I know; but I'd like to know if there's another solution out there that also supports IE7 & IE8, without the need to install a google plugin for IE.
It depends on what you're trying to do.
If all you want is to overlay an image with a color, then you could layer a DIV on top which has a partially-transparent PNG of the desired color as its background image. Here's a JS Fiddle demonstrating:
http://jsfiddle.net/btCfK/
I don't have a copy of IE 7 handy to check, but I'm pretty sure that'll work in older IEs (later than 6 anyway).
This example uses a fixed size for both the overlay and the image. With some clever coding you could change that, and make a JavaScript based control for swapping colors in or out.
If you want something more sophisticated than that, it's probably not practical without using a Canvas element, SVG, or one heck of a lot of JavaScript.
I just stumbled upon this question and I thought I'd mention CSS filters.
At this time, only Chrome fully supports them (http://caniuse.com/#feat=css-filters), but things might improve in the future.
How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle.
so..
<div>
<img src='some_image' />
</div>
Where the image is a square, but the DIV containing the image is a triangle.
http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ solves this very well except this solution is not x-browser friendly (non-ie).
http://css3pie.com/ looks interesting, however this relies on PHP.
You can't create a non-rectangular DOM element.
There are a few ways to hack it.
Firstly, there is a method of using CSS borders with varying widths on each side of the element to make it look triangular. It will still be a rectangle, but it will look like a triangle.
There's a tutorial on this here: http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
The down-side of this approach is that it is limited to creating right-angled triangles. You can join several of them together to get around this, but then you don't have a single container for your image.
An alternative hacky way of doing it would be to place rotated elements on top of the main element so that they cover the appropriate parts of the image and make it look triangular. This works in all browsers, although IE does have some very nasty syntax to do rotation, and it's quite heavy on the browser, considering that you'd only be using it to make shapes.
Another option might be to use CSS transforms. However this is only supported by a minority of up-to-date browsers, so it won't work for most users.
A better approach might be to use a proper graphics library for this, rather than trying to shoe-horn it into a <div> element.
I'd recommend using Raphael. It's a Javascript library which can draw directly into the browser using SVG (or VML for IE). It's trivial to create triangles using it and to fill them with a graphic. See the examples on the Raphael home page to get you started.
Depending on what you want the outcome to be, as far as i'm aware you cant make a triangle DIV without Transform:; However one solution would be having a div positioned inside the div in question with a PNG cutting of half the image showing only the transparent part through. Not sure if this is a viable option for you though.
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)