Is it possible to have a rollover effect for an image and a form.
I.e. I would like to have an image, which when the user hovers over, rolls away to reveal a form (like a login or sign up form).
Cant find anything out like there like this so assuming its not possible but thought I'd ask!
Thanks
JD
This is very much possible.
Using CSS, say position: absolute for the image and the form's div.
Then using z-index, make sure that the image lies over the form.
Then you can use the HTML onmouseover event to execute something like a call to Adobe Spry's slide animation effect to neatly accomplish what you're trying to do.
But in my honest opinion, this is unnecessary glitter.
Related
So, the new Exposure site is wonderful and got me wondering how they've achieved something like this. Basically, it's a cover image that's stretched to the browser window (even if you resize), what's lovely about is that only when you scroll do you get to see the content below.
I guess you could use something like backstretch.js for the dynamically-resized image. How are they achieving the rest, though?
I've set up a pen here: http://codepen.io/realph/pen/luwdJ
Which seems to do the job, but the content is being covered when you scroll rather than falling below the cover image.
Any idea what I'm doing wrong, or any tips for achieving something like this?
Thanks in advance!
I think this is what your looking for and css can do the whole thing
http://codepen.io/anon/pen/rajDJ
Just add this rule to your images or image class
img {
width: 100%;
}
What exposure is doing there is creating onclick modal window that contains the image but you can do that with js or jquery or there are many jquery plugins that do that.
Also to get the nice grid structure you can use a grid template. Here is one to get you started http://960.gs/
I'm new to webkit animations and I have been trying out to do this kind of animation
http://demo.jeffrey-way.com/tutsMobile/#site.php?siteName=psdtuts
If you click the list element you will see page sliding in and sliding out.
I want to implement this animation to my app which is built with backbone.js, underscore.js, zepto.js
I could use jqTouch or jquery mobile but I would like to make it as light weight as possible, because I'm building it only for IOS. So thats way I wan't to implement it by my self.
Any hints to make this implementation or should I go with jqTouch?
In this example, there is some sort of (I hate to be vague...) ajax based content loading system. Take a look at the source:
<div data-role="page" id="article.php?siteName=psdtuts&origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">
When you first visit, that div doesn't exist. It's created by javascript when content is required, then filled with that content, then translated (animated) into the viewport.
Here is a step by step, deduced from a quick look at the page:
Base page is loaded, including css, javascript, nav list
Script is waiting for a nav item to be clicked.
Upon clicking, an ajax request is made to the content corresponding to the clicked item; determined by href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081". My guess? This ajax request is getting content from the same place as psdtuts.com, likely in a database.
While that stuff is loading, javascript shows a loading animation. When loading is complete, it's hidden again.
Once the new content-filled div is created, it is given a default position with its left edge placed right outside of the right edge of the screen. Upon the event of being positioned, javascript then determines the view's dimensions and translates the div across the horizontal dimension. At the same time, the nav list is moved the same direction and distance.
When back is clicked, the view's dimensions are determined again (In case the window size changed) and the nav and content are translated to the right, hiding the content and showing the navigation again.
Repeat
I could be off from how this exact sample is being done, but... Well, this would work.
You wouldn't be that crazy to use a framework for something like this, but I can understand wanting to do a custom job. It would certainly be faster for users, but slower for you. Depending on your intent, that would be just fine.
edit: If you're only serving this to users with webkit, using a framework is even less necessary... If you're not worrying about cross browser support, there's really not a lot going on here that you couldn't accomplish easily with raw javascript.
The only reason I use jQuery for example, most of the time, is to ensure things work alright in most use cases. It just smooths so many things out... Even if 95% of the framework isn't being utilized, it's worth it when you've got a deadline.
I founded out one good example
http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application
Hey everyone, I am trying to accomplish something with images growing on hover like the fancy grow mouseover effect on google images.
Here is what I have:
http://www.1stbusinessneeds.com/tooltip/tooltip.html
The tooltip is offset and is based on the walter zorn tooltip. What's the best way to have the mouseover popup grow out just like google images (with the text), instead of following the mouse?
(I still need it done with the same tooltip - maybe overwrite it, but it must be present to pass the text and image, it's just the positioning and display method of it that I need help creating, any samples would be appreciated)
You might want to look at JQuery.
this might be a good start http://jsfiddle.net/ZwhEu/
My client is very invested in using a bunch of non-traditional inputs in a form we are developing for him. The image below represents various states of the interface with the last indicated it is disabled in the current context. The end users will be trained in how to interact with the inputs.
alt text http://www.nolaflash.com/interface.gif
My idea is that we will develop an image map representing the clickable zones of the image and let the onclick event set a hidden field and change the CSS for the element to move the background sprite to the appropriate coordinates.
What do folks think of this? Obvious flaws other than folks with JavaScript disabled?
I want the end solution to be iPhone/other device friendly.
Your thoughts will be appreciated.
let the onclick event set a hidden field and
change the CSS for the element to move
the background sprite
sounds reasonable
Here is my solution using CSS Sprites and JS
http://egolfplan.com/testform.html
Is there a way to keep the "Loading..." graphic from appearing when cfdiv refreshes? I'd like to prevent the flicker of loading the graphic then loading the new html.
By adding these lines at the bottom of the header, it overwrites the "Loading..." html and seems to prevent the flickering effect in both IE and FireFox:
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
While this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a per page or per control basis. Hopefully they add support for that in ColdFusion9.
I don't think there is currently a way to do this programmatically within the cfdiv tag. If you really want to get rid of that "Loading..." message and the image, there are a couple places you can look.
You can rename or delete the image, which is located at: CFIDE\scripts\ajax\resources\cf\images\loading.gif
That only gets rid of the animation. The "Loading..." text can be blanked out to an empty string, and is defined in: CFIDE\scripts\ajax\messages\cfmessage.js
Making these changes will obviously have an impact on tags other than cfdiv, but if you are looking to eliminate this behavior in one place, I'm sure you won't mind killing it everywhere else too. :)
I'd love to see a cleaner way to do this if anybody else has any ideas.
This is by no means a comprehensive or an elegant solution, but I found using negative margins on adjacent elements can "cover" the animation. I don't know if this method works in all cases, but for my particular case it worked. The animation appeared next to a binded text field, to the right of which was a submit button. The layer was floated to the right. I used negative margin on the submit button and it covered the animation without affecting the layer alignment.
Another measure I did was to check the layer structure, and added the following code to my css be sure:
#TitleNameloadingicon {visibility:hidden;}
#TitleName_cf_button {visibility:hidden;}
#TitleNameautosuggest {background-color:#ffffff;}
You can create functions to change the message prior calling the ajax load that can set the message and image to a new value.
function loadingOrder(){
_cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>";
}
function loadingNavigation(){
_cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>";
}
(these will eventually be rolled into a single function that will take both a text_value and an image_path parameter)
In some of my processes that load both a main and left nav cfdiv I use a function like this:
function locateCreateOrder(){
loadingOrder();
ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content');
loadingNavigation();
ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu');
}