I'm using the code below to display a notice at the top but it just appears out of nowhere. I would like it to scroll down similar to a toggle while pushing down all the content in the div below it down.
Heres the Javascript
<script>
window.onload = function() {
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 10000);
}
</script>
html:
<div id="top">
<p>content here</p>
</div>
Use .slideDown() instead of changing the display property to block
window.onload = function () {
setTimeout(function () {
$('#top').slideDown()
}, 10000);
}
You have this question tagged with jQuery, and there is a straight forward jQuery function for this, so here is that version:
$(function(){
setTimeout(function(){
$('#top').slideDown();
}, 10000);
});
http://api.jquery.com/slideDown/
If you want to do this in plain javascript I would recommend using CSS3 transitions, instead of modifying attributes like display or attempting to perform the animation manually.
An example of this method using CSS3 and max-height, can be found here: http://davidwalsh.name/css-slide
You would then use javascript to add and remove classes to toggle the desired state, the animation would be performed for you by the CSS3 transitions.
Related
I'm trying to make to show/hide a paragraph when buttons are pressed.
But also to look like slow movement up and down.
That's how the HTML look like for example :
<button class="hideA">Hide</button>
<button class="showA">show</button>
<p id>Helloooooooooooooooooooooo.</p>
And that's how the Jquery code looks like:
$(".hideA").click(function(){
$(".hideA p").hide(function(){
});
});
$(".showA").click(function(){
$(".hideA p").show(function(){
});
});
But this code is not running for some reason. please let me know the reason if you can!
First of all, you need to remove the $(".hideA p") and use $("p") otherwise you are hiding the Button!
Also, you can specify the paragraph by adding an id to it:
<p id="paragraph">Helloooooooooooooooooooooo.</p>
Then Try the following code to run it:
$(document).ready(function(){
$(".hideA").click(function(){
$("#paragraph").hide("slow");
});
$(".showA").click(function(){
$("#paragraph").show("slow");
});
});
for both the below way to work you need to set id of p element
<button class="hideA">Hide</button>
<button class="showA">show</button>
<p id="para">Helloooooooooooooooooooooo.</p>
you can try out this way also , by making use of animate function, this will give fill of hiding and lastly it get hidden by visiblity property.
$(".hideA").click(function(){
$( "#para" )
.css({opacity: 1, visibility: "hidden"})
.animate({opacity: 0}, 1000);
});
$(".showA").click(function(){
$( "#para" )
.css({opacity: 0, visibility: "visible"})
.animate({opacity: 1}, 1000);
});
make use of slideUp and slideDown method . this method provide animation of hiding and showing element but your element stays in DOM
$(".hideA").click(function(){
$("#para").slideUp(function(){
});
});
$(".showA").click(function(){
$("#para").slideDown(function(){
});
});
working demo at : https://jsfiddle.net/pranayamr/xttk3r6o/
I have two divs that are set to show only one at a time, but I cannot seem to get them to slowly fade in with .show("slow"). Fading out works fine with .hide("slow"). Here's what I have so far:
$(document).ready(function() {
$('#162').hide();
$('#164').hide();
function reveal162() {
$('#162').show("slow");
$('#164').hide("slow");
}
$('#162link').click(reveal162);
function reveal164() {
$('#164').show("slow");
$('#162').hide("slow");
}
$('#164link').click(reveal164);
});
jsFiddle with an example: http://jsfiddle.net/swiftsly/9Yx8b/
To animate using show(), element need to be displayed as block, you can use display:block
version{
display:block;
}
DEMO
Your fiddle example is using non-standard tags such as <vn> and <version>. The show and hide methods work as expected when these tags are replaced with <div>. Is there a reason for the non-standard tags?
Try the fadeIn() and fadeOut() functions instead.
$(document).ready(function() {
$('#162').fadeOut();
$('#164').fadeOut();
function reveal162() {
$('#162').fadeIn("slow");
$('#164').fadeOut("slow");
}
$('#162link').click(reveal162);
function reveal164() {
$('#164').fadeIn("slow");
$('#162').fadeOut("slow");
}
$('#164link').click(reveal164);
});
I'm currently using the code below found on web tutorial to show/hide DIVs. It works great but don't like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here http://jsfiddle.net/Grek/w4HWn/1/ Many thanks
function showonlyone(thechosenone) {
$('.textzone').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(2000);
}
else {
$(this).hide(2000);
}
});
}
Just change .hide() to .fadeOut() and .show() to .fadeIn()
But looking at your example, you could do it much simpler by using data attributes.
Have a look at this example.
You may need absolute positioning or some other technique because the two divs stack up while fading in and out.
You can use fadeIn and fadeOut methods, you can also minify the code, try the following:
function showonlyone(thechosenone) {
$('.textzone').fadeOut();
$('#'+thechosenone).fadeIn();
}
As you are using jQuery you can use the jQuery click handler:
HTML:
<div class="source-title-box"><span class="activity-title">Our region</span></div>
<div class="source-title-box"><span class="activity-title">Our source</span></div>
jQuery:
$('.activity-title a').click(function(e){
e.preventDefault()
var thechosenone = $(this).attr('href');
$('.textzone').fadeOut(600, function(){
$(thechosenone).fadeIn(600);
});
})
DEMO
I have a menu that is animated to slide across the page when triggered by clicking on an image of an arrow. I'd like to switch the arrow to a different image source once the menu's animation has completed, and then return back to the original file when the menu has been closed.
Best way to do this?
Thank you!
HTML:
<div id="slider">
<div id="trigger_right">
<img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
</div>
<div class="trans" id="overlay"></div>
<div id="content">
<p>This is content</p>
</div>
</div>
Javascript:
$(function() {
$('#trigger_right').toggle(function (){
$('#slider').animate({'width':'100%'}, 1500);
$('.arrow_small').attr('src','images/right_small.png');
}, function() {
$('#slider').animate({'width':'30px'}, 1500);
$('.arrow_small').attr('src','images/left_small.png');
});
});
jQuery's .animate has a callback that is called when the animate is finished so you can use that to change the images at the appropriate time:
$(function() {
$('#trigger_right').toggle(function () {
$('#slider').animate({'width':'100%'}, 1500, function() {
$('.arrow_small').attr('src','images/right_small.png');
});
}, function() {
$('#slider').animate({'width':'30px'}, 1500, function() {
$('.arrow_small').attr('src','images/left_small.png');
});
});
});
The above assumes that you only have one .arrow_small element of course. Using a class for the arrow and a sprite sheet for the images would be better but that would only require changing the $('.arrow_small').attr() parts to $('.arrow_small').toggleClass() calls as Rob suggests.
If I understand correctly, you only want the images to change after the menu animation has completed.
One way, perhaps not the best, would be to make the JavaScript that changes the src attribute occur after a set period of time using setTimeout(). Instead of:
$('.arrow_small').attr('src','images/right_small.png');
You would have:
setTimeout("toggleImages()", 1500);
function toggleImages(){
// some code to toggle them
}
I haven't tested this, but give it a try. Hope it helps!
I would suggest you set the images up in CSS as classes and then do something like:
.toggleClass("right-small left-small");
I am designing a web page in which I got struck at some point.
I am using 3 upload buttons in a div, let the id of the div be "uploadDiv"
I have a right arrow and down arrow images
if I click on the down arrow image, the content of the "uploadDiv" should be displayed
if I click on the right arrow image, the content of the "uploadDiv" should be hidden
The images should be in the same place.
What is the solution?
It sounds like you are talking about a collapsible panel of some form. Depending on what the underlying architecture is of your source code is, Microsoft's Ajax Control Toolkit has a pretty good collapsible panel option.
Another great option out there is to look at jQuery and the jQuery UI components.
http://jqueryui.com/demos/accordion/
http://jqueryui.com/demos/accordion/#collapsible
SAMPLE
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
</script>
<div id="accordion">
<h3>File Upload</h3>
<div>
CONTENT HERE
</div>
</div>
The question is vague, but whatever your actual goal you'll achieve the effect by toggling a class on your target divs and letting your CSS implement the effect. This is far superior to changing style directly with JS because it separates the concern of styling to the styling layer, and with an umbrella class this let's you cheaply modify the effect with additional properties at a single point.
Now the CSS that you actually want could be visibility: hidden (if you want the layout flow to be preserved) or display: none (if you want the layout to collapse) or even something exotic like changing the opacity or colours if you want to achieve a greying out effect.
Finally enabling this in JS can be done easily by appending or replacing the content of element.className property but realistically a much improved effect can be had by leveraging a library like jquery or mootools which will offer you most of this work already wrapped into widgets and such niceties as animated fading etc..
Don't fall into the maintenance trap of creating the effect with JS and don't fall into the trap of reinventing the wheel where amazing silver rimmed varieties exist already for free.
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'hidden';
}
else {
if (document.uploadDiv) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.uploadDiv.visibility = 'visible';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'visible';
}
}
}
</script>
Above script toggles the style.visibility property of the div. which can be "visible" or "hidden"
<img src="right.png" onclick="hidediv()" />
<img src="down.png" onclick="showdiv()" />
Use the onclick events to call the needed hide or show div
Taken from http://www.webmasterworld.com/forum91/441.htm
By using JQuery you can made it in a easy way.
you can Download Here jquery.js file.
js:
<script src="js/jquery.js"></script>
<script>
$j(document).ready(function(){
$("#hide").click(function(){
$("#uploadDiv").hide(); //hide the div
});
$("#show").click(function(){
$("#uploadDiv").show(); //show the div
});
$("#toggle").click(function(){
$("#uploadDiv").toggle(); //toggle the div
});
});
</script>
html:
<div id="uploadDiv">Some text here !</div>
<div id="hide">Hide</div>
<div id="show">Show</div>
<div id="toggle">toggle</div>
click on particular div to perform desired operation.
Add a class to your css file,
.hidden { display: hidden; }
Add a onclick event to your buttons
The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....
The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....
to hide and show your div using jquery you could do something like:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#downArr").click(function () {
$("#uploadDiv").toggle();
$("#downArr").toggle();
$("#upArr").toggle();
});
$("#upArr").click(function () {
$("#uploadDiv").toggle();
$("#downArr").toggle();
$("#upArr").toggle();
});
});
</script>
</head>
<body>
<img id="downArr" src="downArr.jpg">
<img id="upArr" src="upArr.jpg" style="display:none;">
<br>
<div id="uploadDiv" style="display:none;">
content
</div>
</body>
Clicking the image downArr.jpg will make upArr.jpg and the content of uploadDiv visible
Check out more examples of the toggle function at http://docs.jquery.com/Effects/toggle
-Fortes
One of the easiest method to do would be using jquery.