I'm trying to make a thumbnail which on hover will move it's image (that's longer than the wrapper) all the way to the left using only CSS and using the img element and not a div with background-image.
The problem I have is that I don't know how could I find how much to move it given the fact that the images have different widths.
I did a demo where the left image moves correctly because I calculated how much it needs to be moved and the right image with the same CSS moving incorrectly.
It's not clear why you're restricting yourself to manipulating the img element alone and not exploring more usual background-image sprite-like hover event manipulations.
Take a look at this Codrops article and their demo's here (note there are 5 demo's in the menu).
The techniques offered don't produce the exact end result you're after, but they do include the structure for the type of events and manipulations you'd need to use.
Related
i have made in my asp.net applictation a small div container, which is draggable (in this way: Make jQuery-ui draggable handle cover entire page).
I want to make clear, that the normal user knows instinctively, that he/she can drag this container around the page.
I have set the cursor via CSS to cursor: move;.
But with this solution the user only gains the knowledge while moving the mouse over the small container.
How can I make sure, the user knows from the beginning, that this small div is draggable?
You can set this kind of image on div which is draggable. This image will always visible so user can get to know easily this div is draggalbe and of course by the css you can put it center over the div. and image will type of png so it will not look ugly and you can apply transparency that hand image so contant of the div can visible even image is over the div.
and yes there are other suggestion also given by #Prabhavith and #Matt Lowe..you can also work around with that.
The only way I've seen this done that makes any sense to me is to have a faintly written message with the word "Drag" and arrows pointing through the four ordinals centered in the div.
Like the image in the linked question, you can make your draggable div look more like a traditional desktop window. Users are used to dragging around windows that have a title bar across the top and minimize,mazimize, and close buttons, and a border with an optional bevel. Approximating this style will help communicate draggability.
Likewise, having the border around the div grow darker or highlight will help communicate draggability as well.
You can go through this site http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
I need some help. I am going to school for graphic design and am building a website as a trade of services.
I designed the template in photoshop and then put it through PSD2CSSOnline.com which spat out the code and spliced images.
I was able to edit the HTML and CSS enough to get the two pink lines across the top to stretch across the browser, but I have no clue how to get the bottom ones to do the same since the text on different pages will vary and I assume the div has to be outside of the wrapper to stretch the 100% width so my problem is how to do that AND STILL MAKE IT RELATIVE to the div inside the wrapper?
Any help is appreciated, I have spent hours trying to figure this out!
For reference I have uploaded it so you can look at the source code and visually see what I am talking about. To view it go here: http://bellairo.com/anytime/
i'm not very familiar with psd-css kinda programs so this is a bit hard to understand... for the top purple lines it seems like you have 2 images: 1 is 960 x 30px Layer-13.png, and then there is the 24 x 30px Layer-12-rx.png that repeats into infinity in both directions underneath that. It seems the simplest to get that same png image - Layer-12-rx .png to do the same thing at the bottom of your page - repeat this image underneath the one that is already there: Layer-7.png.
As far as your question about the lines being relative to your content: I notice that almost all your divs have position:absolute applied to them. Be careful of this because when that attribute is applied, it removes the div from the normal flow of how css positions things and then you have to start specifying everything, instead of divs just following upon each other naturally - which is good for things like having your bottom lines just naturally positioning themselves underneath your content, however much there is. The div in which your footer lines are sitting also has this position: absolute applied to it, which means you are always going to have to tell it exactly where to sit for every page. A start is to change it to position: relative and then play with the left: and top: values until it's in the right place. Then it should position itself underneath the text every time.
Good reference is W3 schools - for positioning info check this out: http://www.w3schools.com/css/css_positioning.asp
EDIT*the issue apparently comes down to the fact that, i need to use relative position on the large image, so i can adjust the top value. this causes the thumbs to be put on top of the main image. When i remove the relative positioning of the main image, the flow looks fine, but the top positioning is disregarded- i sort of need both to have the dynamic manipulation of this app im developing*
I wish I could understand why this happens like 90% of the time I go to code div layouts.
You have content in your div with a certain height, and then you have another div directly after it - and somehow it just goes right on top of the first one.
I wish I knew where the problem was, but I can't figure out what CSS is the cause.
Anyways, if you care to take a look, this is the sandbox of the issue I'm having:
the reference is changing because i keep updating it to check sorry.
http://www.drewswinson.com/DP/
I'm making a dynamic jQuery gallery viewer and the thumbs just don't want to put themselves below the image.
It happens all the time though; is there any reason content inside a div would allow subsequent divs to not be placed below the content its supposed to be filled?
You problem is the position: relative attribute on imageDiv.
It pushes the image down from where it should be. If you remove that, the static flow of the page will be used, which is what you want in this case.
I've encountered the need for a specific sort of drop-down tooltip on hover (or sometimes click), activated either way by a small icon, say 20x20 pixels. The design would look something like this:
So, as you can see, the box that appears hovers over all other content on the page. It is variable in both width and height depending on content.
Now, as usual, the challenge is to accomplish this using only CSS. Fortunately, in this case, I'm only worried about bleeding edge browsers, and don't need to consider mobile at all. In the past, I've wimped out due to a lack of time and put the top 'pointer' element (that is centered on the icon) on the left, and put the entire box aligned to the left edge of the icon - but that's far from optimal.
I'd love any suggestions here, it'd be a fantastic solution to have in my arsenal in the future.
I think you're going to need to know the width, in order to center the box within an element smaller than itself. If you're only considering bleeding-edge browsers, the requisite JS is going to be simple and quick to write and run.
My standard centering technique for elements like this is:
.icon {position:relative;}
.popUp {position:absolute;
width:200px;
left:50%;
margin-left:-100px; /* Half the width */
}
All you would need to do to make it work would be to detect the width of your content with JS, and set the left-margin accordingly. I'm sure you could set some sensible default values for any users which happen to have JS disabled/unavailable.