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]....
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>
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 RelatedI 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]....
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 Relatedwhenever I put it onto my page it will not show up. what I need to add?
[Code]..
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 RelatedI've been looking all over the place in order to find a script like they use on Foliostars, where you see a sliding semi-transparant text layer over a thumbnail image when you hover. how to achieve this using JS or an Ajax framework (preferably JQuery)?
View 2 Replies View RelatedIf slideToggle()'s parameters were expanded to include a separate callback for sliding up and sliding down. Or for backwards compatibility, perhaps include an optional boolean parameter in the callback to more easily discern between a slideUp and slideDown operation.
View 1 Replies View RelatedI am very new to jQuery and am trying to learn by incorporating and editing things I have done in tutorials into an actual website design.
The problem I am having is how to get some text to slide down from behind an image after it is clicked. So for instance; I'd have an image which says "Things to do" or whatever then when the image is rolled over/clicked some text will slide down from behind the image with links to pages of different things to do.
I think it might be something like what was done in this tutorial: [URL]..but that tutorial uses two images rather than an image and a div with text in it which is what I am trying to achieve.
[Code]...
The script is written in Jquery, it's a simple piece of code which I've seen on another website here [URL]. I modified the code a bit to work with a website I made for my portfolio. The problem with the code is that is works fine in firefox but it doesn't on chrome. the code doesn't break entirely but on chrome the images doesn't slide, it just jumps from image to image. here's the code
Code:
var settings = {
startingPosition : 0, //--------------------------------set starting position for images, 0 for first image
slideSpeed : 550, //---------------------------speed of slide, seconds/fast/slow
easing : 'linear', //-------------------------easing type
navigationClass : 'slider_navigation', //--------------class of navigation (the prev and next)
activeItemClass : 'slider-current-active-element', //--name of class to be added to first element
repeat : true, //-----------------------------make gallery neverending .....
Most of it works fine but I'm guessing the animate part in the problem
Code:
//the slide animation
elContainer.animate({
'marginLeft' : animateToWidth
}, opt.slideSpeed, opt.easing,
function(){
//if forward is clicked
if(opt.repeat && direction == 'forward'){
$("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
elPosition += imgWidth;
elContainer.css({
'marginLeft' : elPosition
});}
Here's the dummy site I made [URL]. I'm no expert on javascript so how to make the code better?
I'm looking for a super-simple sliding gallery plugin that would produce something similar to this: http://labs.paulicio.us/viewport/ .The only thing is I'd like there to be no visible "next" and "previous" type button until the user mouses-over the gallery. I KNOW I've seen this somewhere but it appears I forgot to bookmark it!
View 2 Replies View RelatedI think right now jQuery slideDown() will show the content bit by bit (line by line) of that DIV, showing top content first, and then little by little, the content below it...
Is there a way to actually slide the *content* down as well? In order words, showing the bottom of the DIV, and then it will move down, a little by little, and then show more of the content above it.
How do I show the default icon for pdf, doc, etc... else show the image? Show the default icon for pdf, doc, etc... else show image.
Default icon:
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' +
The image:
'<img alt="" src="' + fileUrl.replace( /'/g, '\'') + '" height="36" border="0"></a>' +
Attempted javascript onError but only certain browsers support that or it's my code.
'<img alt="" src="' + fileUrl.replace( /'/g, '\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' +
i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.
View 1 Replies View RelatedI have a problem on my wordpress blog that is integregated with a 3rd party shopping system. What I'm finding is that the Image Slide Show will not show up on the product page but will show up on other pages. obviously there is some conflict but I don't know where.Example: here is the product listing page while in the header the slide show seems to work fine.Now here is the page if you select one of the t-shirts but as you will see the image slide show in the Header vanishes?
View 2 Replies View RelatedIn one of my web page I want to show an image preloader. ie When I clicked on the small thumbnail in my web page then the main large image will load. My code looks something like this
$("#images li").click(function(){
var image=this.href;
$("#mainImage").attr('src',image);
});
I want to show the Loading sign until the main image loads completely.
I have a page HTML. In HTML have 1 button, when click into button that'll appear 1 window. In this window, it's show 1 image and after 5s it will change the other image. I can't do this.
View 5 Replies View RelatedI found this slide show [URL]. I got it to work on my website [URL] using Firefox, but when it is viewed in Internet Explorer it will not work. Second question, When the slide show gets to the last image, after the last image all photos disappear and it resets itself changing the format of the webpage. Any way to not have the images disappear while it loops itself or is there a code to have it stop on the last photo and not loop.
View 1 Replies View RelatedIm trying to use the jquery tabs with a little javascript, the logic is
1. hide all tab first
2. find the first occurrences of div tag and show the content of it.
and the code is as below:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
});
How ever, when i try to wrap the content under tabs with div as below:
<div id="tab-1">
<div>Content want to display</div>
</div>
the tab becomes blank
First let me admit that my Javascript coding skills are lacking. I know enough to implement and slightly modify existing code, but not enough to write a complex script from scratch.
With that said, I'm trying to implement a navigation system like the left vertical links on this page: [URL]
I looked into using JQuery tabs, but the ul would be too long for a horizontal list. Ultimately, I'm looking to mimic the way this navigation behaves in the way it hides/shows/maintains the content based on the mouseover function. I also looked into using JS to hide/show layers, but it looks like I need something to hide/show divs with HTML content within the normal text flow.
I am trying to learn jquery. my example below is to show and hide content in a group divthe code works but i want to know if this is best practice to write what i did. Is there better way to do it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
> <head
[code]....
i've a function that when i click on a link a div shows up, and it works nice, but when i click on the div itself the div closes up, and other "bug" is, that if i have 2 or more divs if i click on one link and click on other link the div's stays visible?
jQuery.fn.DivMenu = function(opcoes){
/**
* Valores de defeito.
**/
[code]....
how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?
Here's the code I need to change.
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
[Code]....
drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one.
I read the jQuery doc but did not see if this is possible. The goal is to make 1 tab (when clicked) display content from all of the other tab containers. Don't know if this possible
View 3 Replies View RelatedIf I have 3 contents let say, div id=content1, div id=content2, div id=content3 and a next and previous button.
How can I to create a simple jquery script to show the next or previous content when clicked on Next and Previous button ? Show only 1 content each time.