I have 3 divs at the bottom of the page each with a link.
what i am trying to do
when i click a link the div will slide up 400px, #maincontent will fade out and if any of the other 2 are open then they will slide down so only 1 is fully visible at a time and if none are open the #maincontent will fade back in.
I can get them to animate up and down on click event but i cant get the others to go back to there original position.
any help would be much appreciated.
html
<div class="poolbox1"><a class="poolview1" href="#"></a>content</div>
<div class="poolbox2"><a class="poolview2" href="#"></a>content</div>
<div class="poolbox3"><a class="poolview3" href="#"></a>content</div>
css
.poolview1{ float:right; margin-top:-25px; display:block; width:31px; height:31px; background-image:url(images/accept.png); background-repeat:no-repeat}
.poolbox2{width:300px; float:left; height:400px; background-color:#666666; margin-top:-20px;opacity: 0.9; filter: alpha(opacity=90);}
jquery
$(".poolview1").click(function(){
$(".poolbox1").animate({
marginTop: "-=400px",
height: "+=400px"
}, 1000);
$(".poolview1").fadeOut(1000);
$("#maincontent").fadeOut(1000);
});
$(".poolview2").click(function(){
$(".poolbox2").animate({
marginTop: "-=400px",
height: "+=400px"
}, 1000);
$(".poolview2").fadeOut(1000);
$("#maincontent").fadeOut(1000);
});
$(".poolview3").click(function(){
$(".poolbox3").animate({
marginTop: "-=400px",
height: "+=400px"
}, 1000);
$(".poolview3").fadeOut(1000);
$("#maincontent").fadeOut(1000);
});
a working demo
html
<div id="poolbox1" class="poolbox"><a id="poolview1" class="poolview" href="#">poolview1</a>content</div>
<div id="poolbox2" class="poolbox"><a id="poolview2" class="poolview" href="#">poolview2</a>content</div>
<div id="poolbox3" class="poolbox"><a id="poolview3" class="poolview" href="#">poolview3</a>content</div>
css
.poolview{float:right; display:block; width:31px; height:31px; }
.poolbox{width:150px; float:left; height:400px; background-color:#666666;opacity: 0.9; filter: alpha(opacity=90);}
jquery
$(".poolview").click(function(){
$(".poolbox").animate({
marginTop: "400px",
height: "0px"
}, 1000);
$(this).parent().animate({
marginTop: "0px",
height: "400px"
}, 1000);
$(".poolview").fadeIn(1000);
$(this).fadeOut(1000);
$("#maincontent").fadeOut(1000);
});
Related
Can anyone help me with a javascript to make the page scroll down to the searchbox when the searchfield is focused? Like if you click on the searchfield, the position changes, until the red and yellow boxes are out of sight.
#overtop {
width: 500px;
height: 100px;
background: red;
}
#top {
width: 500px;
height: 100px;
background: yellow;
}
#searchbox {
}
#content {
width: 500px;
height: 200px;
background: blue;
}
<div id="overtop">
</div>
<div id="top">
</div>
<div id="searchbox">
<input type="text" id="myInput" placeholder="enter.." title="search">
</div>
<div id="content">
</div>
Just got it, finally.
$("#myInput").click(function () {
$("html, body").animate({ scrollTop: $("#searchbox").offset().top }, 300);
return true;
});
I am doing a jQuery animation of 3 boxes, the effect is like the jsfiddle link below:
Fiddle
Basically when clicked on each color box the corresponding box will enlarge to width 100% taking up all width. And when clicking close (yes, it is not functioning well) the box will shrink back to its original position.
What I encountered now is
When enlarging the pink or the blue box, sometimes the yellow box on RHS will jump to next row (but just a very quick jump, i dunno why). It happens only in Chrome, looks perfect in Firefox.
When clicking the close button, it will trigger the yellow box to
enlarge (supposed it has taken up 0% of width? Why the bind click
still works?
Could someone advise how I should solve these and is there a better way for me to achieve the same results?
HTML
<div class="animateWrap">
<div id="btn_howtojoin" class="btn_group">
<div class="btn_close"></div>
<div class="content">Content</div>
</div>
<div id="btn_judgecriteria" class="btn_group">
<div class="btn_close"></div>
<div class="content">Content</div>
</div>
<div id="btn_prizeinfo" class="btn_group">
<div class="btn_close">Close</div>
<div class="content">Content</div>
</div>
<div class="clear00"></div>
JS
$(function () {
$('#btn_judgecriteria').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$('.btn_close').show();
});
$('#btn_prizeinfo').animate({
width: "0%"
});
$('#btn_howtojoin').animate({
width: "0%"
});
});
$('#btn_howtojoin').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$(this).find('.content').animate({
top: "40px"
});
$('.btn_close').show();
});
$('#btn_prizeinfo').animate({
width: "0%"
});
$('#btn_judgecriteria').animate({
width: "0%"
});
});
$('#btn_prizeinfo').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$('.btn_close').show();
});
$('#btn_howtojoin').animate({
width: "0%"
});
$('#btn_judgecriteria').animate({
width: "0%"
});
});
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
});
});
CSS
.btn_group {
width: 33.3%;
height: 220px;
float: left;
cursor: pointer;
position:relative;
}
#btn_howtojoin {
background: #fcb2b2 ;
width: 33.4%;
}
#btn_judgecriteria {
background: #7acccb ;
}
#btn_prizeinfo {
background: #f1c348;
}
.btn_group .content {
position:absolute;
top:-400px;
left:40px;
}
.btn_close {
position:absolute;
top:20px;
right:20px;
color:#FFF;
width: 40px;
height:62px;
display:none;
}
Problem 1 maybe due to rounding up calculation of 33.333% which make the total width of 3 container slightly larger than 100%. Changing them to pixel might help.
Problem 2 is due to event bubbling, it will trigger click event of .btn_group after .btn_close
Add event.stopPropagation(); will help solving this.
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
event.stopPropagation();
});
I would like to achieve the effect where one image is revealed over the other when scrolling the page.
You can see an example on livearealabs.com (new york / seattle). Does anybody know how to create it using CSS3?
Check out this jsfiddle to create the sliding effect.
The trick is to have one div rotated 60 degrees. You position it so that it covers the entire wrapper and the overflow is hidden. Then with javascript you just have to move the slice container either by changing the left property or by changing the translate-X property.
Here is the code:
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="slice" data-show="true"></div>
</div>
CSS:
.wrapper {
position: relative;
overflow: hidden;
width: 20em;
height: 10em;
}
.bg {
background-color: red;
width: 100%;
height: 100%;
}
.slice {
position: absolute;
top: -12em;
left: -8em;
width: 30em;
height: 30em;
background-color: blue;
-webkit-transform: rotate(-60deg);
}
JS:
var hidden = false;
$('.wrapper').click(function() {
console.log('click');
if (hidden) {
$('.slice').stop().animate({left: '-8em'}, 2000);
hidden = false;
} else {
$('.slice').stop().animate({left: '-34em'}, 2000);
hidden = true;
}
console.log('click end');
});
Also check out this jsfiddle for a similar sliding effect that can be achieved with CSS only.
After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?
I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
Thank you very much for any help.
Margate
You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit.
This should be placed in the section of the html page.
<script>
window.onload = function() {
var mainImg = document.getElementById('Main');
document.getElementById('TNOne').onclick = function() {
mainImg.src = 'main1.jpg';
//alert('one clicked');
};
document.getElementById('TNTwo').onclick = function() {
mainImg.src = 'main2.jpg';
//alert('two clicked');
};
};
</script>
The two thumbnail divs become <img> tags with the same IDs.
Similarly the main <img> is defined also (with id="Main"). Now the elements
are clickable.
<div id="MainContainer">
<div id="MainImage">
<img id="Main" src="MainImage01.jpg"</img>
</div>
<div id="TNBodyContainer">
<img id="TNOne" src="thumb1.jpg"></img>
<img id="TNTwo" src="thumb2.jpg"></img>
</div>
</div>
Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.
TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
To change the image in the CSS background property, you need to use
document.getElementById("MainImage").style.background
The right way to go is to add event listeners:
document.getElementById("TNOne").addEventListener("click", function (event) {
setImage(event);
}, false);
document.getElementById("TNTwo").addEventListener("click", function (event) {
setImage(event);
}, false);
}
They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".
You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".
You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/
There are some slight changes in your HTML and CSS too.
I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. The help I need is using the Fancybox's options to specify the href attribute for the plugin. I'm sorry that was so long-winded...here's the code.
jQuery:
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
{ href: fullSize
//rel: 'lightbox',
}
);
$("#lightboxlink").click(function(){
$('#lightboxlink').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
});
});
return false;
}
HTML Snippet
<div id="photolarge">
<a id="lightboxlink" href="#"></a>
</div>
<div id="phototable">
<ul id="photorow1">
<li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
</ul>
</div>
CSS:
#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}
#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}
#phototable img {
cursor: pointer;}
#phototable ul {
list-style: none;
display: inline;}
#phototable li {
padding-left: 10px;}
#lightboxlink {
display: block;
height: 100%;
width: 100%;}
Any help would be greatly appreciated!!!
Try this and see if it works,this is just fancy box bit though,the rest of your code seems fine
$("#lightboxlink").live('click', function(){
$.fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : $(this).attr('href')
});
return false;
});