I want to create a click event that will have two photos on opposite corners of the screen move towards each other, once they collide, they move back in the direction they came from.
I am having trouble placing an image on the top right corner. I tried using "float: right" but when I tried that, my function does not work.
To place the images on the top right corner you should use absolute positioning:
.class {
position: absolute;
right: 0;
}
Also do you really need javascript to animate this?
It would be better and more performatic to do it with some CSS. Checkout this fiddle I made: https://jsfiddle.net/jv5et9L0/
In the fiddle I use absolute positioning to put the elements where I want, and then, through Javascript, I add apply the transform() property on my CSS. The animation occurs because I have set the transition property on the .item class.
Related
This seems like it would be an easy thing to figure out, but I can't seem to find what I'm looking for.
I want to animate the width of a div from right to left. It seems that this works left to right by default.
TweenMax.from($("#hero-container"),0.5,{width:0});
I tried to change the origin of the div, but that didn't seem to make a difference.
You need to align #hero-container to the right edge of whatever container it's in, and then animate the width.
I prefer using flexbox, but you can use position: absolute; right: 0; too if that tickles your fancy - But that presents a whole new level of problems, as it removes your element from the document flow.
Quick example using flexbox: https://codepen.io/jeppeolesen/pen/VyKebx
Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
Is there a way to have the graticules labels move when you move the map so the grid is always labeled in the current view? I have the following code however, the labels stay at the center of the map.
#10mgraticules10 {
text-name:"[display]";
text-placement-type: simple;
text-face-name:#serif_italic;
text-horizontal-alignment: middle;
text-vertical-alignment: middle;
}
Is there a way to have the graticules labels move when you move the map so the grid is always labeled in the current view?
This isn't possible, by design: TileMill's map view is powered by tiles, which are stitched together into a final image. These tiles are images and are not affected by anything beyond basic positioning by your browser.
I'm trying to reposition the PanPanel and ZoomPanel controls on my map to the bottom left corner rather than the top left. I see that I can add options, but as much as I've tried, I can't find a way to tell it to stay to the bottom left, even when the window is resized.
I am also not sure how I will tell them to stack like they do normally when I tell them to reposition relative to the bottom left.
I changed the images that make up both panels, so now there's a bit more room between pan and zoom panels than I want, so I'm also trying to get them to come closer to each other.
On top of looking into using options on the controls, I also tried creating a style for the id of the div that surrounds both panels, but the value of the id in the div is "OpenLayers.Map_2_OpenLayers_Container", which contains a '.'. Far as I know, that's not a legal id for styling. Anyway, it didn't work. On top of which I don't think I can trust the name to always be the same, with continued work on this page causing a lot of additions over time.
Any ideas?
Try:
new OpenLayers.Control.YourControlXXXX({
moveTo: function (px) {
if ((px != null) && (this.div != null)) {
this.div.style.left = yourLeft + "px";
this.div.style.bottom = (yourBottom+controlHeigth) + "px";
}
},
... other options
})
ummm! I see that these controls are more modern than I thought, are positioned by CSS so try:
.olControlPanPanel {
bottom: 55px; /* not 0px */
top: auto;
}
NOTE: try as: div.olControlPanPanel {... to force the priority of CSS if you are not sure where position are loaded de css of OL.
So I found the problem. First I wasn't setting top to auto. Since it was set in the style.css file to 10px, and when I changed it in the style.css file it to auto the bottom worked. But then my css file wasn't working. I found an OpenLayers example for Pan and Zoom, and eventually found that the difference between what I was doing and what they were doing was that I hadn't loaded the style.css file explicitly at the beginning of the page. So it seems that the OpenLayers Map, when it is created, causes the style.css file to be read late, after my css was read, and so it overrode my override. When I did an early load (beginning of the page) it worked perfectly.
Seems that the attribution control, created when I create a map Layer, must read the current CSS, since the map hasn't yet been created on the page, and so it never needed for me to do the early load. If I remove the early load, it still takes the changes made from my css file. But removing the early load causes the Pan and Zoom controls to no longer respond to my changes, so I assume this means that the Map object is reading the styling after the late load of the style.css file, which at that point has already overridden my css.
Go figure...
Just in case this might be of use to anyone else. I'm using OpenLayers 3 and I wanted to move the zoom controls to the righthand side of the map. My map is attached to an element with a 'tm-openlayers-map' class value and to move the zoom controls I used the following css/sass
.tm-openlayer-map
//change the colour of the map buttons
button {
background: $title-bar;
}
.ol-zoom {
top: 0.5em;
right: 0.5em;
left: auto;
//move the tooltips to the left of the now right aligned buttons
.ol-has-tooltip:hover [role=tooltip] {
left: -5.5em;
border-radius: 4px 0 0 4px;
}
.ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{
left: -6.2em;
}
}
//make sure the rotate controls included by default with an opacity of 0 don't
//block clicks intended for the '+' button
.ol-rotate {
visibility: hidden;
}
}
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/