I've managed to get this working with:
<!--
function resettoggle() {
document.getElementById('imagecarousel').style.display = 'none';
}
function displayImages() {
document.getElementById$('#imagecarousel').style.display="block";
}
$('#imagecarousel').fadeIn("slow", function() {
// Animation complete
$('#portfolio').click(function () {
$("#imagecarousel").toggle();
});
});
-->
and adding onLoad="resettoggle()" to the body tag
I now only need help with 2 things:
I have the div set to fadeIn, but it seems to be flying in at the speed of light.
When the page loads, you see a flicker of the slideshow before it disappears. Not sure how to implement the resettoggle function in a way that keeps the hidden div completely out of view?
you can use fadeToggle():
Display or hide the matched elements by animating their opacity.
$("#portfolio").click(function () {
$("#imagecarousel").fadeToggle("slow");
});
Related
I'm hiding a div until a button is clicked thru this script:
$(document).ready(
function() {
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
but I'm also using TwentyTwenty inside that div and after I clicked the link to show the div, the TwentyTwenty content doesn't have any height so it's not showing up. How can I make it show up? This is my script for twenty twenty:
$(window).load(function() {
$("#container1").twentytwenty();
});
Here's a jsfiddle. Note that I can't make twentytwenty to work in here and I'm not sure why. It's working in my localhost but I just want to show how I made the structure.
First of all don't hide '#yalecontent' div by css.
$(document).ready(function() {
$("#container1").twentytwenty();
// hide here after twentytwenty load in this div.
$("#yalecontent").hide("fast");
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
Try this one it may be solve your problem.
I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!
Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.
$(function(){
var image = $('img');
if (image.attr("id") == "webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
});
I'm trying to write a conditional to find whether or not a hidden image is visible or not. Basically when you hover over the images, if a certain image is visible the hover image will be specific to that visible image. This would be fine if they were constantly visible but since they're on a cycle (cycle plugin) fading in and out every 10 secs I can't identify them. Any ideas?
Sounds like you have duplicate ids!!!! anyway it will be more logical if you write this block of code like this:
$("img").each(function(){
currentImage=$(this).attr("class");
if(currentImage=="webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
$("img").each(function(){
if($(this).is(':visible')){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
Use visible selector
Does anyone know how I can make this bit of code have a .fadein property? Preferably .fadein medium speed would be the best. Thanks!
<script>
function LinkOnClick4(box) {
$('#friendresults').load('conversation.php?id=' + box);
}
</script>
First hide the element, load it's contents, and then use the callback function of the load function to fade it back in:
function LinkOnClick4(box) {
//select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
$('#friendresults').hide().load('conversation.php?id=' + box, function () {
$(this).fadeIn(750);
});
}
If you want the element to keep its space in the page (not totally disappear) then you can just set it's opacity rather than using the .hide() and .fadeIn() functions:
function LinkOnClick4(box) {
//select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
$('#friendresults').css({ opacity : 0 }).load('conversation.php?id=' + box, function () {
$(this).fadeTo(1, 750);
});
}
The difference between the two code-blocks is that the first one will allow elements relatively positioned around the #friendresults element to shift when it's hidden, and the second code-block keeps the page from shifting around when the #friendresults element is hidden/shown.
Some docs if you need more help:
.hide(): http://api.jquery.com/hide
.fadeIn(): http://api.jquery.com/fadein
.fadTo(): http://api.jquery.com/fadeto
.css(): http://api.jquery.com/css
Style #friendresults to be hidden then call
$('#friendresults').load('conversation.php?id=' + box, function() {
$('#friendresults').fadeIn()
});
I'making website which is for all desktop/iPad/iPhone. In one page I have header and footer on the page which will be seen till 5 sec after page load then it will be gone automatically. If We click/touch anywhere on screen it will also like a toggle to show/hide.
And when the header and footer will be seen the area of page will be dim like we see in lightboxes.
http://jsfiddle.net/jitendravyas/yZbTK/2/
The effect I want to exactly like iPad default "Photos" app
I think this is what you are after. On initial page load we fade out after x seconds. If user clicks then we fade in toolbar if hidden, or fade it out if shown. If user fades in toolbar, but doesn't do anything for x seconds we fade it back out.
I updated my answer with some improvements.
http://jsfiddle.net/yZbTK/11/
http://jsfiddle.net/yZbTK/11/show - full screen for iPad
I would assign a class to the controls that you will fade in/out. That way you can gather them quickly and easily. The use of id's to identify them really wasn't very good in my initial code example.
var timer;
var timeVisible = 5000;
timeFadeout();
function timeFadeout() {
timer = setTimeout(function() {
$('.controls').fadeOut();
}, timeVisible );
}
$('html').click(function() {
clearTimeout(timer);
if ($('.controls:visible').length) {
$('.controls').fadeOut();
}
else {
$('.controls').fadeIn();
timeFadeout();
}
});
A short solution is to simply add a click-event to the body and toggle the header and footer on it:
$('body').click(function() {
$('#header').toggle();
$('#footer').toggle();
});
See here also: http://jsfiddle.net/Sgoettschkes/yZbTK/4/
To add the "dim" as you call it you could also make a div box with position absolute and a opacitiy, which is also toggled as above. I played around a bit and created this: http://jsfiddle.net/Sgoettschkes/yZbTK/8/
EDITED:
var countDown=5;
$('body').click(function() {
....
if (countDown < 1) {
...
}
}
var cleanUp = setInterval(function() {
countDown--;
if (countDown < 1) {
...
clearInterval(cleanUp);
}
},1000);
That should do it!