I have Farbtastic in a form with many color inputs.
I want the color wheel to stay fixed in the window, son I can scroll through the form maintaining the wheel in the same place.
I tried css position:fixed, but it alters the coordinates system of the picker, so picking colors is impossible.
Any ideas? other color pickers pops from the click, but I do not know if it can be done with Farbtastic because of the coordinates system.
Regards:
Migue
You have the solution here : http://code.google.com/p/farbtastic/issues/detail?id=3
Line 163 your must add this with your #elementId:
pos.x -= + $('#elementId').scrollLeft();
pos.y -= + $('#elementId').scrollTop();
This problem has a solution. Just upload fixed and minified version (4kB) of the .js file:
http://image2love.com/js/farbtastic2.js
and put your colour picker where you like:
#picker {
z-index: 5; position: fixed; top: 100px; right: 100px;
}
I've been also searching for the solution for some time when I finally came across the solution.
Related
I'm wanting to write my own image zoom JS code (similar to http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) but the issue with this and all the other plugins is that it's relying on img tags whereas I want to use background images to give the same effect.
I have created a jsFiddle of where I am up to but I'm having issues trying to re-create the mouse movement. I thought, when you hover, it could scale the background image (or replace the url src via JS with a larger image) but I can't work out how to follow the edges of the image/container rather than the image follow the pointer.
https://jsfiddle.net/x69tk48s/
$('.inner').mousemove(function(e) {
$('.each-image .bg').offset({
left: e.pageX,
top: e.pageY
});
});
$('.inner').on('mouseleave', function() {
$('.each-image .bg').css({
left: 0,
top: 0
});
});
Any thoughts?
The math isn't quite right (yet) but here is a rough idea of how you can accomplish it: https://jsfiddle.net/3cebzudv/2/ (start by mousing-in in the top left corner to get the rough idea).
Basically, just scale the background image up on mouseenter and then reposition it with the backgroundPosition property on mousemove.
I'm trying to solve an issue with css "position:fixed" property on mobile browsers. I have a fixed div:
<div id="logo">
...other content here...
</div>
with css:
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom: 100px;
right: 0px;
width: 32px;
height: 32px;
}
So, usually the behaviour is exactly the desired one, with the div position always on the bottom right of the window, indipendently of the scroll position.
My issue is that on mobile browsers, when the users zoom the page, after a certain zoom level the div position is wrong (sometimes the div disappear out of the window).
I know that fixed position is not well supported on mobile browsers, but I wonder if there is some workaround. I tried with this js code onScroll event:
window.addEventListener('scroll', function(e){
drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
var r = logo.getBoundingClientRect();
var w = window.innerWidth;
var h = window.innerHeight;
if(r.right != w){
rOff = r.right - w;
logo.style.right = rOff;
}
if(r.top+132 != h){\
tOff = r.top + 132 - h;
logo.style.bottom = tOff;
}
});
Unfortunately, the code seems to return the wrong position.
Does anyone have any tip?
Ok, that's how I solved the issue...I hope that could help anyone to simulate fixed position on iOS devices.
I switched the position from fixed to absolute;
Attach to window a listener to get the new position when the page is scrolled or zoomed,
setting window.onscroll and window.onresize events with the following function:
function position() {
drag.style.left = window.innerWidth + window.pageXOffset - 32 + 'px';
drag.style.top = window.innerHeight + window.pageYOffset - 132 + 'px';
}
Do you want to catch if zoom is active?
There's no window.onZoom listener, but you can read this thread:
Catch browser's "zoom" event in JavaScript
and this answer: https://stackoverflow.com/a/995967/3616853
There's no way to actively detect if there's a zoom. I found a good entry here on how you can attempt to implement it.
I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
You could also do it using the tools of the above post. The problem is you're more or less making educated guesses on whether or not the page has zoomed. This will work better in some browsers than other.
There's no way to tell if the page is zoomed if they load your page while zoomed.
Just a theory, but you may want to try setting the bottom/right positions in % rather than px.
I think what you're seeing when using pixel measurements is just the zoom effecting the pixels. Or to put it better, when you zoom-in the pixels appear larger and that throws off the position of the element, even pushing it out of the view-port on smaller screens.
Example using pixel positioning
Notice that even on a desktop as you zoom-in and out the element appears to move up and down?
Example using percent positioning
In this example the element appears to stay in the bottom right corner, because it is always positioned at 10% from the bottom of the view-port.
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom:10%;
right: 0;
width: 32px;
height: 32px;
}
Having two different z-index for the logo and the rest of the page could help. Allowing zooming only to the rest of the page and not to the z-index layer where logo is included. So, this might not affect the stretching on the logo.
We can
Implement a ZOOM listener
Attach it to browser
Make the zoom listener change the zoom level of the element (modify the elements position) using z-index as a factor.
I'm trying to create a web page that has a slider at the bottom of the page, that can be dragged from left to right to shift the viewport. I've tried to draw a simple diagram of what I'm trying to achieve here:
The red box is the draggable slider. The user should be able to drag this red box from side to side and this should correspond with the image in the main viewport. Are there any plugins available for this?
At the moment I'm considering using the jquery-ui draggable plugin to handle the slider, but I'm not sure how to manipulate the viewport?
I'm thinking that maybe I could capture the distance moved by the slider and then apply a multiplier to that value to get the move the viewport by the correct amount but I'm not sure if this is a sensible idea?
What would be the best way to achieve this?
Thanks
You could start from the jQuery UI slider for the scroll bar at the bottom.
Modify it to fit your needs (little bit of css tweaking)
With the $('.viewport')[0].scrollLeft = xpos method you can scroll to the right x position.
Here is an example: http://jsfiddle.net/Vandeplas/zAJtL/
js:
var percentage = 50;
$('.scrollTo').click(function(){
var vp = $('.viewport')[0];
vp.scrollLeft = (percentage / 100) * vp.scrollWidth;
console.log(vp.scrollWidth);
});
css:
.viewport {
width: 200px;
height: 40px;
overflow: auto; /* set to hidden to hide the default scrollbar*/
}
html:
<div class="viewport"> azertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty </div>
<input class="scrollTo" type="button" value="scroll"/>
UPDATE: With slider: http://jsfiddle.net/Vandeplas/zAJtL/1/
In case anyone was wondering, I managed to find the solution using this as a base: http://jeffschuette.com/2011/05/02/jquery-ui-slider-tutorial/
Hopefully it'll help anyone else trying to achieve the same thing!
I have a very simple looking image of different coloured bars which 'fan' left to right, a bit like the choc bars here:
http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg
I want to turn into each bar into individual buttons with tooltip 'pop-ups' and colour changes when the cursor hovers over them. Very much like this image map:
http://winstonwolf.pl/clickable-maps/europe.html
I have looked at the map source code and it doesn't really help me, but from searching on this forum it looks like I need to use x and y coordinates to determine the area that would be 'clickable'. Is this correct?
I found some code which allowed me to create a transition between 2 images, which is great, but when the image is not a simple square inside a square div I run into trouble. This is the code for the simple transition:
jQuery(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});
});
and the CSS:
![div.fadehover {
position:relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}][2]
Any help to point me in the right direction would be much appreciated!
Thanks
J
To elaborate on the comment, this JS fiddle may be how you could rotate your images and set click/hover events for them.
http://jsfiddle.net/pSPX6/
Doing it this way will mean that you don't need to get into mouse coordinates yourself, just let jQuery/JavaScript sort them out for you! :)
As for the tooltip, you could always position it based on the parameters given to you in the hover event, the parameters passed to this events should contain the x and y coordinates of the mouse which you can then use to position the tooltip. For more info on the hover event I've used, see the jQuery documentation: http://api.jquery.com/hover/
Hope this helps!
Let me know if you want more clarification!
take a look at the first panel (in red) on the homepage.
http://www.boomtown.co.za/
I'd like to do something like this with an invisible image and only reveal parts of it as the mouse tracks over. Is this possible without using Flash?
This can be done quite easily using some css and background positioning with javascript. Here's 2 examples : http://jsbin.com/ococal/3
The source code is quite easy to understand and you can start working out with this.
You could do it by using a transparent png image that was a radial fade from transparent in the centre to semi-transparent at the edges and making it follow the mouse.
document.onmousemove=mousefollower
function mousefollower(e){
x = (!document.all)? e.pageX : event.x+document.body.scrollLeft;
y = (!document.all)? e.pageY : event.y+document.body.scrollTop;
document.getElementById('myImage').style.left = x + 'px';
document.getElementById('myImage').style.top = y + 'px';
}
Obviously you can use jQuery for this too, and set the mousemove function to occur only over a specific div. Also make sure the image you use is large enough (at least twice the size) so that the edges don't show up when you move to the far sides of the div (this means that for large areas you will need a huge image so it may get a big laggy). Put the image in the div and set overflow to none to clip anything that falls outside of the area.
It is possible yes, but only in modern browsers (chrome, safari, firefox, opera).
You would need to have two <div>'s
like so..
<div class="container">
<div class="revealer"></div>
</div>
and CSS like so
.container {
position: relative;
background: url("images/your-background.jpg");
}
.revealer {
position: absolute;
//set the mask size to be the size of the container
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url("images/your-background-over-state.jpg");
//css3 image masks, this is not cross browser, see the demo for
// cross browser syntax
mask: url("images/mask-shape.png") no-repeat;
//make sure the mask is off screen at first, by setting the mask position
//to minus the width and height of your mask image
mask-position: -300px -300px
}
And the JS
window.addEventListener('load',function(){
var background = document.querySelector('.container'),
revealer = document.querySelector('.revealer');
background.addEventListener('mousemove', function(e){
//the minus represents the half the width/height of your mask image
// to make the reveal centred to the mouse.
var x = e.offsetX - 150,
y = e.offsetY - 150;
// move the position of the mask to match the mouse offsets
revealer.style.maskPosition = x+'px '+y+'px';
return false;
});
});
Because of the way this works you need to ensure that any other content in the .container has a higher z-index than the mask to ensure the content is not masked. To do this add relative positioning to the elements in the container
like so
.container *:not(.revealer) {
position: relative;
z-index: 2;
}
Images used in masks are images where the solid colours create the visible or fill area, and the transparent areas are the mask or cut out.
Demo with cross browser code