Hi I have been trying to do this for what feels like all my life
I have a list menu with block display links, each link has a sliding doors png background image. I have used this javascript (http://www.ideashower.com/our_solutions/png-hover/) to implement the alphaimageloader fix for ie6 using a transparent gif.
When I test it for the first time it works but if I click to a different page and then click back it doesn't work anymore - the menu completely disappears, I can get it to work again by duplicating the transparent gif and changing it's name, but again if I go to another page and then come back to it, it stops working and the menu dissappears.
Is this a server caching issue or something like that.
Any thoughts on this would be much appreciated!
Thanks
If its caching then maybe the AJAX trick could do.
Create random number each time the code is executed and add it to the transparent gif url.
so in file pngHover.js:
transparentImage =
'/j/transparent.gif';
would be
transparentImage = '/j/transparent.gif?143253214';
To get random number in js google it, it will give you plenty./
Related
Hi I am doing an assignment that recquires me to only use html and css only no javascript. Usually, with javascript this is hella easy to do but html and css only is a bit annoying. In my first page I have a link to my second but when I press the link from the first page to go onto the second page. The animation I made does not work at all and the secondary text only shows up.
I will provide photos and code to show what I mean. I dont understand what I am doing incorrectly to cause this but it is annoying.
firstpage
second page
from the first page going onto the second via clicking 'start' the second text only shows up but I need the whole thing to show up. Heres the animation part I want to show up as well. animation_part
second page html:
html
second page css
css-part1
css-part2
I am not sure if this will further show my predicament but heres the code for the first html and css pages:
For some reason it is not allowing me to post the code here so I have done my best to showcase to go around the error
GITHUB: https://github.com/TheGraeDev/ADV201
It might be possible that your required character went to the back of main background. Try changes in css to bring your panda to front. Hope it helps!
Okay Incase anyone else comes across the same issue. Change position to relative and instead of using percentage value for Top in css using px. it fixed the problem
Is there any way to create clickable hotspots over a JPEG image in order to navigate to a different image/page? I would like to achieve this without having to code everything in manually and InVision has a lot of limitations.
Any suggestions would be appreciated.
If you want to make parts of an image clickable, just use an image map. http://www.w3schools.com/tags/tag_map.asp
to do this without coding it in manually you will need some application to make the code for you. it'd be faster for a 1-time use to just set a size for your image, and then make areas (like div's) that are set in place of where it looks like a button on the image, and set their onclick to be a link to your other page or file.
I'm working on a web project and I want to load my webpages with an even transition. What I get right now is my photos and background downloading in a curtain-like manner. I want it to show up when it is all loaded instantly.
I don't mind if there is a progress bar or something but not the curtain-like manner.
I used the prefetch/prerender html 5 tag but with no success..
visit here :
http://hellenic-jewls.com/
and then try to hover to another webpage to see that my images are downloaded progressively like a curtain :
e.g. http://hellenic-jewls.com/classical/
ofcourse when the webpages are cached it's ok.
HTML5 prerender/prefetch doesn't work that way. You use them to hint to the browser that you think that page will be visited next and should therefore be prerendered. There is no guarantee that this will happen though... it's up to the browser to decide if it wants to prerender the page.
Further, there will only be one page prerendered at any one time.
What you can do is hide your images, then use a script like https://github.com/desandro/imagesloaded to signal when the images are loaded, at which point you can show the images (with a fade-in transition if desired)
I want to create a timed image slide show where each image can made be made a clickable link. I have tried using css web animation but that doesn't work because each image is stacked on top of each other and only the transparency changes revealing different images and so they cant be clickable links. Any thoughts or links to tutorials would be very much appreciated.
Thanks,
m
You can do what you were doing before, but after the opacity of the image fades out to 0, you will want to then set it to display: none; ... This will prevent the user from being able to click on it, allowing the click to pass through to the next image underneath.
I can't tell you much else without any code or examples of what you would like to happen, but hopefully that helps you out.
I have a webpage that shows an image gallery for the current week, and I have a top bar navigation "prev" and "next" links to cycle through the galleries. Currently clicking on the links causes a whole page refresh. I think the user experience would be smoother if, when we click "next" we animate a slide-in of the next page content from right to left, and vice versa, if we click "prev" we animate the previous week of results from left to right (similar to how page transitions work in a mobile app when you swipe). Note, I do not need to detect actual swipe gestures and I think jquery mobile markup is overkill.
To preload the data that will be sliding in I can make an ajax call, or even have the data preloaded in json for me to construct the replacement html off screen. I will use html5 window history push state to change the url to the actual location we will be navigating to. The only thing I haven't been able to find is to do the actual animation. I have looked into carousels, but none of them quite do what I want. Is there an existing library that handles just the animation of page transition, having that slight recoil bounce effect?
Thanks.
EDIT: I just found jquery.animate which I think might do the trick.
There are any number of jQUery based image gallery libraries that you might want to choose from. If you can't find one to transition between different galleries teh way you want to, it should not be a problem to use jQuery to asynchronously load new galleries and then animate them into place.