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.
Related
I've searched a lot to try and solve my problem. I'm building a website locally using the Fullpage.js library. Fullpage.js gives the body a class which refers to the section that is in the viewport. On the second last section I have hidden the dotted slider navigation with the css code below. I've made a simplified html structure.
<body>
<div class="section-1">
.. some content
</div>
<div class="section-2">
.. some content
</div>
<div class="section-3">
.. some content
</div>
<div class="section-4">
.. some content
</div>
<div class="section-5">
.. slider with the navigation turned off when this section is in viewport, see used css.
</div>
<div class="sectie-footer">
.. footer, navigation above reappears because this section is in viewport and css doesn't apply anymore; Body has now class fp-viewing-section-footer.
</div>
</body>
The CSS:
CSS that applies to sectie-5 but not when footer is in viewport.
body.fp-viewing-section-5-0 .fp-slidesNav.fp-bottom {
display:none;
}
Everything works fine but when trying to write a small piece of jQuery code, that hides this navigation element on sectie-5, when the sectie-footer is in viewport, and the body has the class which refers to the footer. I can't get it to work. It shows no errors but the code doesn't do what I thought it would.
I've tried checking if the body .hassClass and if so adding a class with .addClass. I tried .hide and .show, also no effect. I wrote:
jQuery(document).ready(function() {
function hideonfooter() {
jQuery('.fp-slidesNav.fp-bottom').hide();
};
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
hideonfooter();
}});
And some code I found in an earlier question on Stackoverflow (class jsnoshow has display:none):
jQuery("fp-slidesNav").toggleClass(function() {
if ( jQuery("body").hasClass( "fp-viewing-section-footer" ) ) {
return "jsnoshow";
} else {
return "";
}
});
I also tried:
jQuery(document).ready(function() {
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
.hide('.fp-slidesNav .fp-bottom');
}});
I hope you guys want to help me out.
Please check how to use of fullPage.js state classes or callbacks for that.
Also, do not forget to check the callbacks examples in the examples folder.
You might also want to check this video tutorial I did making use of the state classes to create animations.
For example:
new fullpage('#fullpage', {
afterLoad: function(origin, destination, direction){
if(destination.index == 4){
alert("Section 4 ended loading");
}
}
});
Instead of the alert, you can run your code there on the section that you want by using its index in the callback.
i have a div which is hidden initially and will be visible later depending on some click events results.
I have wrote this
$(document).ready(function () {
$('#<%=disable.ClientID %>').hide();
});
<div id="disable" runat="server">The following question is disabled</div>
But when i disable CSS it appears, when i don't disable css it gets invisible. how do i make this invisible even when css is disabled and visible later again
There is no way to make something invisible without CSS. But you can remove it:
$(document).ready(function () {
$('#<%=disable.ClientID %>').remove();
});
You would then need to readd all the mark up again should you wish to show it again.
Edit
You could do something like this:
$(document).ready(function () {
var item = $('#<%=disable.ClientID %>');
$(document).data('myElement', item.clone());
item.remove();
});
then you could re-add it
$(document).append($(document).data('myElement'));
If you are willing to write server code for this, then you could do this in the code-behind.
// c#
if(some condition...)
{
disable.Visible = false;
}
This will remove the div from the HTML output of the page.
I do not get you when talking about enabling and disabling css, but you can always manage the DOM elements via DOM manipulation. As you tagged jQuery:
$(document).ready(function () {
/* please try top avoid mix server side variables and javascript code */
$('#myTargetDiv').hide();
$('#myToggleButton').on('click',function(){
/* select the elements you want to hide / show with the click on this element */
var $elements = $('#myTargetDiv');
$elements.toggle();
});
});
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.
I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.
Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content.
Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.
I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code"
<script>
$(document).ready(function() {
$("#right").niceScroll();
});
</script>
into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.
The show/hide functions looks like this:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
with the actual div section of the page looking like this:
-Show Stuff
<div id="example" class="more">
<p>
"Stuff here"
</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">-Hide Stuff-</a></p>
</div>
Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)
Any ideas?
I don't know what it is the correct solution but works fine after my div shows up and I call method:
$("#myHiddenDiv").getNiceScroll().onResize();
First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:
// cache container:
var $right = $('#right');
// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();
// resize nicescroll
$right.getNiceScroll().show().resize();
}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();
// also hide nicescroll:
$right.getNiceScroll.hide();
});
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");