I'm trying to add a Pin it button that appears on hover on images on my website, but the positioning is totally wrong.
Basically the button's position is calculated relative to the window, and it will always stay at the initial distance from top of the window.
You can see what is happening by entering here.
I've tried adding position relative to the images, but it won't help. My guess is that the problem comes from the fact that my pages are positioned absolute.
Related
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I'm trying to design a page in the style of an info-graphic, in Wordpress.
I have the time-line set as the background and then i precisely position the buttons to match the background. All good and well until i start resizing the browser's window - the buttons get totally misplaced.
I tried creating two columns and placing the buttons in the first. They keep their position until, because the window is shrinking and this is a responsive theme that I'm using, the second column gets moved underneath the first one. At this point the buttons are getting misplaced again.
I've tried toying with various css settings like position: relative, absolute and so on but to no avail. Is there a way to obtain what i need?
Thank you,
Vlad
For fixed width , you have to use pixels not ems or percentages .
For the positions , Firet adjust the float or the position of the div or section containing that button which move with his parent in the responsive theme in wordpress .
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.