I got this code that allows a nice pop up window when clicked on a particular image. This brings out a larger image for a gallery I made. However for some reason I can't get it to appear at the center of the user's window, as all the images are different sizes, they move depending on the image shown.
The link is at:
http://zeendesign.co.uk/cherrieimogen/cherrieimogen/cherrieImogen/portfolio.html
(the css is called reveal.css)
Any help would be greatly appreciated. Thank you!
You are assuming that left on the container must be set to 20% and that's what the script's doing.
Try setting left based on (windowWidth-containerwidth)/2.
i.e.:
v = Math.floor(($(window).width()-$("#myModal").outerWidth())/2)+"px";
$("#myModal").css("left",v);
Position the dialog after the image is loaded.
$('#dlg')
.dialog('open')
.dialog({position:'center'});
Related
after searching deeper in many questions and in many examples I couldn't get it working. I've trying anything written in any example.
I want to add an image inside a popup marker without using the amazing Leaflet.photo plugin this time.
My problem is that the image goes away from the popup boundaries the first time I open it out. After closing it and open it again, the image fits perfectly within the boundaries.
The same as it happens in this example example
I also tryed to hack the CSS class in following way instead of write custom options as in the example source code.
.leaflet-popup-content img { max-width:234px !important; height:auto; width:auto !important; }
Nothing changed though, the result is the same as in the example shown.
Any suggestion?
Thanks a lot
What may happen is that the image takes some time to download, hence Leaflet does not know the correct size to give to the popup container.
Then on second opening, the image is fetched from browser cache, and Leaflet can properly compute the popup size.
You can try a delayed myPopup._updateLayout() call to have Leaflet re-evaluate the popup container size once your image is downloaded. E.g. attach an onload listener to your image element, with a callback that calls the _updateLayout() method on the popup.
See also leafletjs adding scrollable pop up?
I am working on a responsive website, I have to create a popup for smaller device,but for desktop size the content has to be visible (not inside the popup). I am trying not to repeat the content twice. Is there a way to achieve this without the content repeat?
If anyone has done the similar work, could you please give me hint. How to do?
I am working on jsfiddle and will update the link once ready.
Thanks in advance,
For anyone that's used the javascript plugin "ContentFlow" (http://www.jacksasylum.eu/ContentFlow/), do you have any idea how to change the size of the NON-ACTIVE elements? It seems that they're always half the height of the center image, but I'd like to make it something closer to 75% of the height.
I've been digging through the JS source code, but I can't seem to pinpoint the place where I adjust the size. Every time I adjust a value, it resizes all of the elements, including the active center image.
Please note, my "visibleItems" property is set to 1, as I only need to display one image on either side of the center image.
Thanks.
Try using the Gallery addon. There is a calcSize function in the addon JS that may help you calculate the size you want.
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.
Guys i'm having a problem with the javascript in my website. I cant center the div to properly show the image i click. It only works at the second try, the first try of any image it allways show the div to the bottom right.
I've tried messing around with the javascript but can't get my head around it.
Check it out here
It happens because you apply the CSS properties before setting the image src.
When you first load an image, there is no previous image and it does nothing to center.
When you click another picture, it centers the image according to the previous image's dimensions.
It happens becouse your div doesn't have any offsetWidth and height yet.