Jquery :: Sliding Content - Image Scroll Up To Show Bottom
Apr 7, 2011
I thought this would be easy but I'm stuck and I can't describe what's really simple so I've drawn a diagram. [URL]. I have a div containing an image like 1 in the diagram. I only want to show the top of the image like 2 in the diagram. When I hover over the div I want the image to scroll up to show the bottom of the image like 3 in the diagram. [URL].
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]">
<html xmlns="[URL]" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
#wrap{
margin:50px;
width:700px;
}
ul{
list-style:none;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li><a href="#" id="one"><img src="img.gif" width="250" height="200"/></a></li>
</ul>
</div>
<script src="[URL]"type="text/javascript"></script>
<script>
$('li').hover(function(){
$(this).find('img').animate({top: + (-200) + 'px'},200);
})
return false;
</script>
</body>
</html>
View 2 Replies
ADVERTISEMENT
Apr 7, 2011
I have a div containing an image like 1 in the diagram I only want to show the top of the image like 2 in the diagram When I hover over the div I want the image to scroll up to show the bottom of the image like 3 in the diagram It seems really simple but I'm completely stuck
[Code]....
View 1 Replies
View Related
Mar 7, 2010
The link is here [URL] Click on description. Move the scroll bar on the right to the bottom and then click on description again. Instead of the thumbnails scrolling up to hide the description, the main image and header move down. Any tips on addressing this. My brains are a bit frazzled at the moment. Do I need to fix the vertical scroll position somehow. What properties do I need to be looking at? (Note : I'm currently animating the height property of the description box.) Second question. I did have auto margins in the wrapper centering the page. When you click on description it causes the scrollbar on the right to appear, which shifts the page over to the left. I've since fixed the margin, but again is there a way around this so that I can center the page again?
View 1 Replies
View Related
Feb 6, 2009
I am trying to build on my weather website. On the page I am working on I have many images. These images are best viewed at large sizes, but if all of them were large, the page would look terrible, so I have them set to take the large image, shrink on load, enlarge on mouseover, then shrink on mouseout.. the problem is, if users do not scroll down my page, and try to look at the second row of images.. Then the bottom half of the image is cut off.. So what I need to do is Figure Out how to get my images to either appear and center of page on enlarge, or to have the page scroll down on enlarge..
View 3 Replies
View Related
Mar 30, 2010
This is meant to be a very simple animation. Everything seems to be correct, but it doesn't seem to run. Basically it is a system where the image is 50px taller than the box it is being displayed in. When you hover over the image, the image is meant to move up via jquery to show the bottom (previously hidden) 50px and cut off the top 50px.
Here is my Site: [URL]
Here is my HTML:
Code:
<div id="container"><div>
<a class="none" href="<?php the_permalink() ?>"><img src="/themes/smo/portfolio/<?php echo get_post_meta($post->ID, 'portfolio_img',true).".gif"; ?>" alt="" /></a>
</div></div>
Here is the Jquery:
Code:
$(function(){
$("div.container div a").hover(function(){
$("img", this).stop().animate({top:"-51px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
I think its something to do with the container class.
View 4 Replies
View Related
Aug 8, 2011
I'm trying to scroll my page to the bottom after the search results populate on the bottom. Unfortunately, it looks like my scrollTo(0, document.body.scrollHeight) is getting executed before the search results populate or finish populating. I even tried to use deferreds to implement this but it still doesn't seem to be working. Here's the code I tried:
[Code]...
View 2 Replies
View Related
Feb 7, 2011
My Page allows the following functionality...(ASP.NET)
1.When a userscrolls the gridview downwards fresh data is retrieved from a web service and appended to the grid.
2.Clicking the checkbox of a row selects the current row and creates a clone rowand appends it toa bottom grid.
The Problem:
The problem is that clicking the selected checkbox does not append it to the grid at the bottom. Now the funny part is that the data which is displayed in the initial load is appended to the bottom grid when checked but the fresh Data which is loaded is not appended to the bottom grid when checked.
View 3 Replies
View Related
Mar 2, 2009
Basically, i'm creating a chat script. I've got it all working apart from keeping the scroll at the bottom of the div so the newest posts show all the time.
Heres my index.php
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 3.2 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
[Code]....
View 2 Replies
View Related
Sep 16, 2011
set the scroll to bottom of the div on load, then i called ajax for getting updated content, after that i try to set the following coding HTML Code:
var container = $('.im'),
scrollTo = $('#last');
container.scrollTop(
[code]....
View 2 Replies
View Related
Jan 7, 2011
I'm programming a quick live help app and am trying to get the message container div, which scrolls vertically to always scroll to the bottom. Currently i am using:
[Code]....
That is run every time there is a new message appended to the container. however, while it works in all browsers i've tested it in, it seems to be completely ignored in AOL Explorer. why it is not working in that browser? Any alternative methods i could try?
View 1 Replies
View Related
Jan 28, 2011
I am trying to include Dock MAC style Menu in my page which is floating.Here I am facing a problem is, when we hover on menu icon, without scrolling page at bottom, the menu iconsare not getting bigger in size, as it should be.And when you reached at bottom, moving scrollbar down, those icon gets bigger when we hoverI have placed the script just before the end of body tag. I also tried placing the code in starting of body tag, then the reverse thing happen. The icon gets bigger without moving scrollbar down and when we move to bottom, or scroll, the effects lost.
View 3 Replies
View Related
Jan 7, 2010
i use this script, and its working so far. except i want the element to stick to the bottom not the top..
[URL]
i already tried to rename some words to bottom, but this doesnt work (ie iebody.scrollTop to iebody.scrollBottom)
View 1 Replies
View Related
Feb 1, 2010
I have an iframe on my page which currently shows a separate website (one that i do not control). I'm trying to have the iframe automatically scroll to the bottom of the page. I'm pretty sure this is doable through javascript. The website does not have any anchor(s) or anything else that would be useful for what I'm trying to do.
Here is my code
<iframe name="frame" id="frame" width="880px" height="600px" src="website" scrolling="no" frameborder="0"></iframe>
View 2 Replies
View Related
May 21, 2011
I try to auto scroll to bottom of a div when the page is loaded. It works on firefox but it is not working on IE. How to scroll to bottom on a div when page is loaded on IE? You can test it by copy paste my codes into two html files.
test5.html :
<div id='div' style='overflow:scroll; height:300px; width:200px; border:1px solid blue; background:yellow;'>
</div>
<script src="javascripts/jquery-1.5.js" type="text/javascript"
[Code]....
View 3 Replies
View Related
Jun 6, 2011
I'm making a pretty little expenses program for my wife. Except my computer's busted and I can't put a Java IDE on hers, so I'm making it in Javascript, to run in Firefox.Whenever incomes or expenses are added in, they are added directly to an array, then the function updateDisplay() is called, which figures out all of the incomes and expenses that need to be displayed,The problem is that I'm adding the newest expense or income at the bottom of the list in the scrollable div, but the focus remains at the top of the div, i.e. the scrollbar is always by default at the top; I would, of course, like the user to be seeing the most recent information input.Is there a way for me to automatically scroll that div down to the bottom?I tried experimenting with adding a blank span at the end of the HTML I put in there, and then trying to give that span focus. Didn't work of course.
View 3 Replies
View Related
Jan 10, 2010
I want to create a simple portfolio site using the following tutorial: [URL]. However, instead of the small panel I want the whole page to slide, example: [URL] how can this be achieved?! I don't really have a clue about javascript.
View 1 Replies
View Related
Oct 1, 2006
I have a readonly scrollable textarea that is being updated via javascript (it's a chat window). I would like to be able to scroll to the bottom programatically.
For IE I have:
myTextarea.createTextRange().scrollIntoView(false);
Any hints for FF?
View 2 Replies
View Related
Mar 9, 2009
I have an image that when I click on it I want it to be hidden and content be shown. How can I do this?
View 3 Replies
View Related
Sep 9, 2009
I really like the effect used in the footer of this site, how the menu fades in when you scroll over the links at the bottom.
View 1 Replies
View Related
Dec 19, 2010
I have an iframe that contains x.asp:Code:<iframe name=chat width=90% height=50% frameborder=0 src=x.asp></iframe>x.asp is refreshed every 1 second using metatag. The problem is that everytime x refreshes, x goes top so the last line is not visible.What I need is a javascript that when x refreshes, scroller automatically goes to the last line
View 1 Replies
View Related
Sep 7, 2010
I'm working on a page, where I want to use jQuery to build a "Portfolio" div that contains pics and info about some of my work. I found a bunch of cool tutorials about making a slide show, but they all have a sliding animation. With my page, the sliding animation would look awkward. I'm fine if it just replaces the current div with the next one. I'm just planning on using a previous and next button (Within the same div) to cycle through these.
View 4 Replies
View Related
Aug 24, 2011
I am trying to create an image slider than when hovered over shows a div with text relating to the image...here is the code:
Code JavaScript:
$(document).ready(function(){
//Image slider behaviour
rotateImages(1);
[Code]....
View 3 Replies
View Related
Mar 23, 2010
I hired a programmer to develop a drag and drop system for my blog. The user should be able to browse one of my blog entries and click, drag and drop an image from my entry to a fixed bottom bar on that page.The problem we are facing is that when dragging an image, it wont place it on the bottom bar until the whole page is scrolled down to the bottom of the page. This is a problem because some of the pages can be very lengthy
View 2 Replies
View Related
Jan 17, 2011
[url]
See the menu on the left, how do you stop it so that it doesn't go over the footer when you scroll to the bottom of the page?
View 24 Replies
View Related
May 15, 2011
I have built a site that loads new content from a database when the user hits the end of the page. This works fine in all desktop browsers and on the iPad, but is not working on the iPhone. Have tried an iPhone 3g and 4.
Here is the code:
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$.ajax({
type: 'POST',
url: 'nextSet.php',
data: "?dummy=" + new Date().getTime(),
dataType: 'html',
cache: false,
beforeSend: function() {
$('#scrollLoading').show();
$('#scrollLoading').html('<p><img src="/images/ajax-loader.gif" alt="loading..." /></p>');
},
success: function(response){
$('#scrollLoading').hide();
$('#resultsPageSearch p').css('margin','0');
$('#sortDrop').show();
$('select.sortddl').selectmenu('destroy');
$('select.sortddl').selectmenu({style:'dropdown'});
$('#resultsSection').append(innerShiv(response));
},
error: function (request, status, error) {
alert(request.statusText);
}});}});
View 1 Replies
View Related
Sep 25, 2009
how to make an image/text to scroll as the user scroll the page also? for example if the user scrolls down image/text also scrolls down and when the user scrolls up image/text also scrolls up..
View 6 Replies
View Related
