I'm trying to rotate an image using the CSS property "transform".
Here is my code :
http://jsfiddle.net/Ucph5/4/
And here is the part (using jquery) that makes the rotation :
$('#rotationX').change(function () {
var rotationX = $(this).val();
for (index = 0; index < selectedElements.length; ++index) {
var selectedElement = $('#' + selectedElements[index]);
selectedElement.css('transform',
'rotateX(' + rotationX + 'deg) ' +
'rotateY(0deg) ' +
'rotateZ(0deg)');
}
});
The problem is that when I select an image (by clicking on it), then use the "range" input to rotate the actual image, and finally move my mouse back over the image, the cursor should be a "cursor", as stated in my CSS. But it appears that only half the image shows the "cursor", the other half seem not to be considered as part of the image and displays a mouse in its normal representation.
This problem does not appear on Firefox (I did not test with Internet Explorer or Safari).
I hope to be clear in my explanation. If you don't understand, I suggest you to click on one of the images, notice that the cursor is visible everywhere over this image, then change the "range" input value, go back over the image, and notice that the cursor appears only on half the image, and not the other.
Does anyone have any idea why this happens ? I tried using the "-webkit-transform" and I still have the problem.
Thanks in advance. :)
The selectable class is in the same z plane that the div that contains it.
When you rotate it, half of it is above the div, and the other half is under the div.
The half that is under the div wont't change the cursor, because it is the div and not the selectable that is under the cursor.
To solve it, make it stay above the parent div (with a translateZ)
selectedElement.css('transform',
'translateZ(100px) ' +
'rotateX(' + rotationX + 'deg) ');
By the way, you don't need your rotateY(0deg)
updated demo
Related
I have 1 Issue with the megamenu on site link
screenshot
Sometimes the menu drop down shifts to right . This happens on both chrome and firefox .
It is not a regular issue it only happens sometimes.
what i assume it may be a css issue becouse when ever it happens and i inspect element with a chrome css extension ..automatically the box shifts to the correct place without refreshing
the megamenu code is attached
$sns_jq(function($){
var wrap = $('#sns_menu');
var container = $('#sns_menu .container');
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
$(window).resize(function(){
setTimeout(function(){
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
}, 200);
});
});
The theme is sns korion
I checked out your css. You are handling your visibility toggle with visibility and opacity. Pick one. In this particular case, I would pick opacity because of the transitions you are running.
Also, your transform css with scale is placing the dropdowns in a different place and using scale to place them in the right place by size. But, contradictory to this technique, you set the transition to none afterwards. This is all a back forth positioning that messes up with the display if the keyframes stop unexpectedly.
SO delete all your transitions in line 6599 in your theme-light-green.css and all your transitions and transforms in line 6462 same stylesheet.
Also remove the visibility in both lines and the opacity in 6599. (you already have it in 6462.
Good luck
Im trying to achive a slideshow that looks like this
http://ge.tt/api/1/files/2AjKcVM/0/blob/x675?noinc=1
where the width is 100%, and keeps scrolling infinitely left or right, but always having an image in the center no matter the browser resolution. This is what ive got so far
http://fourcreeklandscape.com/index2.html
the slideshow images have a width of 800px, the left most image has a margin-left of -25%... which sorta looks like it works in a 1280px screen size.... but doesnt look like its suppose to when i resize the window.
Heres the slideshow code im using
$(document).ready(function() {
//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
//when user clicks the image for sliding right
$('#right_scroll img').click(function(){
//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = $('#carousel_ul li').outerWidth() + 10;
//calculae the new left indent of the unordered list
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
//make the sliding effect using jquery's anumate function '
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
//get the first list item and put it after the last list item (that's how the infinite effects is made) '
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
//and get the left indent to the default -210px
$('#carousel_ul').css({'left' : '-210px'});
});
});
//when user clicks the image for sliding left
$('#left_scroll img').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10;
/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
/* when sliding to left we are moving the last item before the first list item */
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
$('#carousel_ul').css({'left' : '-210px'});
});
});});
Any ideas? thanks
You can put this CSS on #carousel_ul
left: 50%;
margin-left: -1200px;
Just make sure it goes left to right. The only problem is if someone has a monitor wider than maybe 2000px, they will get a bit on the left with no image, when the slideshow first starts - but I think that is very few people.
I have made a resizeable custom overlay with an image and it works, you can see it here,
debug. In the upper right hand corner and lower left corner there are some red corner icons that you can drag and resize the image and overlay. The problem is that when you make the image smaller, it leaves behind remnants of the lager scale images.
I then added a function to remove the overlay before drawing the new one, straight out of the example, overlay.onRemove(); It worked, but as soon as you un click the marker it gives the error "parentnode: object is null or undefined", you can see it here debug2
If you view the source on them, the drag listener in on line 173 and calls the overlay = new USGSOverlay(bounds, srcImage, map, 'yes'); on line 194.
The function is on line 71. and looks for ifDrag and then deletes the previous overlay, I am baffled as to why it works but as soon as you un click the marker it throws the error and breaks the script.
It would be awesome if someone could provide me with a fix or workaround to the error. This is a very nice feature to have and am too close to give up. Thanks.
I believe your problem is in the draw function:
var div;
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Size the image's DIV to fit the indicated dimensions.
div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
Don't you want to remove the external declaration of var div and make the references within the draw function reference this.div? I believe that is your problem.
Shouldn't the last lines of draw be implemented like this:
//Remove this line:
//div = this.div_;
this.div_.style.left = sw.x + 'px';
this.div_.style.top = ne.y + 'px';
this.div_.style.width = (ne.x - sw.x) + 'px';
this.div_.style.height = (sw.y - ne.y) + 'px';
You also have similar code in the add function. I suggest that you make the code in add similar - just work directly with this.div_; it looks like you might be getting a reference mixed around.
We came to the conclusion that too many events were fired and killed the script, 'dragend' was the solution (Not perfect but works), works in all browsers and have set opacity at 50% to get the perfect alignment to the location. Appreciate your help. Cheers.
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/