CSS zoom w/absolute position - javascript

I am trying to create an effect on my webpage where you click a thumbnail, and a full-size div "zooms in" from the thumbnail. I thought it should be fairly straight forward using CSS/Jquery: simply set the div to position:absolute with top and left set to match the thumbnail clicked on, set the zoom property to an appropriate low value (such as .25), and use the query animate function to animate the zoom value to 1 and the top/left values to where I want the final image. This almost worked, with one caveat: Apparently the zoom CSS zoomed not only the size of the div (and it's contents), it also zoomed the position.
So my question is (relatively) simple: how can I position the "full size" div with top and left matched to the thumbnail and the zoom parameter set to less than 1?
Edit 1:
After further research, I discovered that apparently Firefox doesn't support the zoom property at all, and the behavior I was getting in other browsers was simply too inconsistent, so I switched over to using CSS transformations/transitions instead. Granted, the transition property doesn't work on IE<10, but then neither does lots of other stuff, so I can live with that.

That is unexpected behavior. An alternative is to put the zoomed element within another element, which has the absolute-position styling:
$('#content div').animate({
zoom: 0.2
},2000);
#content {
position: fixed;
top: 50px;
left: 50px;
border: 1px solid black;
background: #88e;
font: 60px verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div>Lorem ipsum</div>
</di>

Related

Achieving Absolute positioning without Position attribute, using Margin/Padding

I am working on building Email Based HTML. Now as we know, Position attribute is not well supported in Email clients so i will have to go on without that. Now, looking at my options... i can go for either Margin or padding to position the elements.
The input elements can be relatively positioned or absolute. I'll just take the absolute part for now. So, my input will be for example
One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)
Now, in a normal browser based HTML, these elements would easily be placed on their appropriate positions. But without the position: absolute or even top, left attributes. It get's tricky as the margin attribute arranges the elements relative to the other elements. Here is a sample run:
<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>
Fiddle
My Expected outcome was, all the black divs overlapping each other, placed on the same position. That is possible if it calculates the margins according the the "Parent Element" but it is margining left from parent and top from the previous elements.
So My question now is, Is there a side way of using marging-left, top as top, left attributes and producing the same behavior as they would with position:absolute? Or simply, placing these three elements on top of each other using margin or padding attributes (No position, as it is not supported by Email clients)
I also know, using Divs for email isn't the best approach and i should consider using tables but trust me, the kind of HTML i am dealing with can only be generated using Divs and some playing around with margin or paddings. Any help will be appreciated.
You can use negative margins to achieve overlapping.
margin-top: -50pt
http://jsfiddle.net/pkdqh7kt/1/
Here is an example of stacking your divs horizontally:
http://jsfiddle.net/pkdqh7kt/2/
Also you can check this table to find out which CSS properties are currently supported by major email clients.

Ignore a label over clickable areas for mouse events

In this simplistic JSFiddle sample, you can see a div with text over a img. The cursor can take one of three behaviors depending on where it hovers: pointer over img, text selection over div's content and default when outside both:
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png">
<div>Stack Overflow</div>
 
img {position: absolute; clip: rect(0px, 238px, 61px, 0px); cursor: pointer;}
div {position: absolute; margin: 50px; border: 3px solid gray;}
How can you completely ignore div's interference on cursor?
And by that I mean when you hover the cursor over div and img intersection you get only img's behavior, and when over div and outside intersection you get only outside's behavior.
If you can, please avoid invisible layers or sending the div behind the img.
If the solution involves JavaScript or jQuery, please do it!
The solution would be useful for labeling on maps.
One solution is to set the CSS property pointer-events to none on the div in question. You can find the pointer events specification here--the support isn't great (IE9+, mainly) but sounds like exactly what you need.

DIV element cursor behaves inconsistenly

I have a DIV element on a JSP page whose behavior is defined in the following CSS class:
.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}
span.toolbarRight .export {
background-image: url('/images/excel.gif');
}
So basically when you hover over it with the mouse it should change into a pointer. The problem is that it only changes into a pointer over the bottom 1/4 of the element, over the top 3/4 it doesn't. Look at pictures below for illustration of the problem.
Pic 1: mouse cursor is over bottom 1/4 of Excel icon (changes into pointer):
Pic 2: mouse cursor is over top 3/4 of Excel icon (does not change into pointer):
Another thing that's strange is that it only happens in my current screen configuration which includes two DHTMLX grids, one in the top half of the screen, the other on the bottom (look at picture below; Excel icon where problem occurs is circled in yellow):
If I have three grids (two horizontal and one vertical) the problem does not occur:
Anybody know what the reason for this is?
Usually when I have this problem, it's because you have another item's padding overlapping the toolbar (or something else). Since the bottom 1/4 is visible, then odds are something above it is overlapping below slightly.
The other answers might be right, but you might also have a float issue here.
You can force parent containers to wrap their floated children by applying overflow: hidden;. Try that out. If it fails, use a clearfix.
Also, I don't know if the width and height of your .toolbarRight .shortcut class will stick because you have it set to display: inline. Try inline-block or just plain old block when you need to apply width and height to things.
It is your
position:relative;
top:6px;
combo - the element sits 6px lower than where you think. The image may be up higher but the container isn't. Move your pointer to the image, not the container for the image

jQuery animate() different in Firefox and Chrome/IE

Currently I'm testing my webpage in different browsers for compatibility, however, I'm having an issue with my jQuery animate() in Chrome (using SRWare Iron) and IE.
I'm using the following code:
jQuery
$('.element').animate({top:"50px"}, 1400);
HTML
<h1 class="element">testing text slide</h1>
CSS
body {
overflow: hidden;
}
h1 {
margin: 0;
}
.element {
position: absolute;
bottom: -1000px;
left: 50px;
font: bold 72px Arial, sans-serif;
}
The issue I'm having, is that in Firefox (Aurora), element slides from the bottom of the screen (-1000px) up to the top anchor of 50px.
In Chrome and IE, what seems to be happening is that element is sliding from 0px on the top, down to the 50px from the top, so it's very short. If I remove the jQuery animate for element, it's positioned at -1000px (I think, it's off the screen so I assume that's where it is).
Does anyone have any ideas? The other elements I'm animating with it work properly in FF/IE/Chrome.
You should be consistently manipulating only one of top or bottom. Right now your CSS sets bottom and then your animation changes top. As the two are obviously not independent, you will be much more likely to get consistency if you set and manipulate only one of them. When you haven't set a value for top, then the javascript animation is probably getting an inconsistent starting value for top that the animation will start from. It's probably coming back as auto in some browsers and some numeric value in other browsers. You can bypass that whole inconsistency if you don't rely on a value that you haven't set.
Since your CSS sets bottom, I would suggest that you animate bottom also, not top.

trying to scale jquery panel toggler with position:absolute to my webpage

I used position:absolute; so that when you click the tab "Send this page to your email", at the top, the panel goes down and goes over the content underneath instead of pushing them down. However, using absolute position means that the tab will move to the left when you zoom in or move to the right when you zoom out. It just doesn't look right when you zoom in or out. I want the tab to "go inwards" when you zoom out and not have it "slide". Is it possible to keep the tab from "sliding" and line it up with panel that slides out?
Here's my page with the tab: http://coroomer.com/apartments/ztestpage/index.php
Since you're using absolute positioning, you don't need to bother with javascript/jQuery. You can just modify your HTML/CSS as follows:
Move this:
<p align="center" class="flip" id="toggle">Send this page to your email.</p>
so that it's the first child of this:
<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">
In the above div (id="map_canvas"), set overflow to "visible". Then set #toggle's CSS as follows (tweak values to suit your needs):
#toggle {
font-family: segoe ui;
left: 100px;
top: -44px;
}
If you don't want to go that route (but you really should), you'd have to write a function that fires on window.onresize which sets the #toggle element's position relative to whatever element of your choosing.
you should use another div with fixed width and set it's position to relative, then when you put this div with aboslute positioning into this relative positioned div it won't move with page resizing

Categories