Good day, I'm having a problem achieving scrolling image with fixed position.
I have done half way of achieving what i wanted by creating two background images with fixed positions, (1 is normal, 2 is gray scaled).
once i upload it into wp site, they stay in background + they stay positioned at the top left of the page, (even after i specify their location, but images fixed to the view port, which what i don't want).
here's the link of my code: [https://jsfiddle.net/rf759hw3/1/][1]
now what i wanted to achieve is:
1 - keeping images in specified position while scrolling.
2 - once i reach to page section which has image, only then scrolling start from greyscale, to original (not while i scroll the page itself).
i found a website which achieve same concept which I'm looking to achieve:
http://tnc.org.cn/#TNC#events (the river section)
but their heavily filled with JS with many dependencies, and i am not yet familiar with js btw.
after days of research i found something which can achive my purpose using js called "Magic Scroll" , but i couldn't find an example which suites my purpose to achieve, which is keeping my images in position as i scroll and overlap one another when i reach their section , any advice or help is much appreciated. Thanks
Related
I have a 5 column responsive layout for a gallery page. I did not code it myself, having found the code for exactly what I wanted somewhere on line. My coding skills and understanding of CSS positioning are evolving, to put it nicely.
It works well until I zoom an image. The image zooms properly, but the right edge is showing as "under" the image to the zoomed image's right.
Looking for the answer I found that the container must have a relative position and the image to have an absolute position for z-factor to work (or so I understood what I read). When I set the image position to absolute, each image takes up the entire screen. I tried a "clear:both" on the hover property to no avail.
The problem exists in any screen width from 550px up - below that the display is single column.
Both the code and the on-page css is valid. Link is http://www.artfromny.com/gallery2.html
Any help appreciated; prefer no java solutions since I barely understand the basic concept of it.
Thanks in advance to all of you who spend so much time helping others get the hang of coding. The last language that I truly understood and used properly was dBase iii so I am kind of struggling here :)
Art
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
If you view this site and reduce the size of your browser window, the top two primary blocks (image carousel and "Latest News") will overlap: http://africanstudies.stanford.edu/
I have tried a number of methods to fix this, but I can't come up with anything that doesn't overlap and look awful. (I also had to add some width/height settings to the carousel because I think there may be a bug with jCarousel where the entire image is not displayed if you don't specify the height for example.)
What I'd really like to happen is both the blocks scale down as the browser scales, but I'm afraid that's beyond my current capabilities.
Anyone have any thoughts on how to handle this? I can post HTML/CSS, but it's pretty ugly.
You've set the height on #views_slideshow_singleframe_main_home_banner_cycle-block_1 to 270px, if you remove that then it seems to be fine. Btw, you have essentially the same issue in the horizontal direction, i.e. at a certain width the slide show overlaps the Latest News.
I need to add a scroll to "one" picture and load it asynchronously.. with the help of scroll bar...
The picture is bigger than the div area so need to scroll. I can use "overflow: scroll " but it loads the whole picture whereas my requirement is to load the picture as a user moves the scrollbar.
thanks
The would help to load a page with multiple large images in the manner you are describing
Lazy Load plugin
It isn't built for one giant sized image which is what you want. However it should be an easy matter to slice you image into reason sized regions or tiles and use this loader.
Out of interest really - here is a utility that will automatically slice up images to protect them from theft. I occurs to me that you could combine the two if you didn't fancy manually splitting the image - or just wanted to be a bit of a coding hero. In any case the link shows that sliced and recombined images look perfectly fine. Users can't tell if it's done right.
I am having a problem where the background image that is centered aligned, and repeated vertically, is only breaking on the Latest News page.
I can't seem to find why it would be breaking, especially as it is fine on every other page within the site, and there is no section of the page that differs in sizes etc.
I have used firebug to inspect all aspects of the page but still can't find what is causing the problem, any help would be much appreciated.
It looks like the background image is placed twice on the page. Since you use one that's 2000 x 2000, the cut comes to early on the page, to make it a problem with the top/bottom not fitting.
Another thing is that the top/bottom doesn't fit, so you will get that cut for all pages longer than 2000 px, which is the reason for the second cut on the page. You should instead use a much smaller image, like 10-40 px high, that will fit when repeated. That will give your users a faster page speed. It might also fix the problem, or help you track down the reason.
I think the page is to long for one image, the it repeat.
But, look at you image, it seem that the top of image is'nt correctly connected with the bottom. (Y know what I mean?).