There is a tutorial here: http://perishablepress.com/slide-fade-content/
and the code it provides is:
$(document).ready(function(){
// Ajax Slide & Fade Content with jQuery # http://perishablepress.com/slide-fade-content/
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css('display','block').animate({height:'1px'}).empty();
}
$('#ajax').css('display','block').animate({height:'200px'},function(){
$('#ajax').html('<img class="loader" src="http://example.com/slide-fade-content/loader.gif" alt="">');
$('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){
$('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});
});
});
return true;
});
});
This will load content from an external file, is there a way to do something similar but to load the content from a hidden div on the same page?
replace
$('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){
with
var contentTobeLoaded=$("#myHiddenDivId").html()
$('#ajax').html(contentTobeLoaded).fadeIn(600,function(){
Assuming you have the hidden div with the id myHiddenDivId
EDIT : As from your comment and sample link provided, Here is my updated solution
1) Have the content for each item in a seperate div and hide it. this div should have unique id
2) when you click on the links you get the id and load content from the hidden div corresponding to that.
HTML
<div id="divHiddenContainer" style="display:none;">
<div id="divItem1"><span style="background-color:Gray;">God, My description about item 1 goes here</span></div>
<div id="divItem2"><span style="background-color:yellow;">Brother,My description about item 222 goes here</span></div>
<div id="divItem3"><span style="background-color:orange;">Hello,My description about item 333 goes here</span></div>
</div>
Item 1
Item 1
Item 1
<h3>Content goes here</h3>
<div id="ajax"></div>
Javascript
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeIn(600, function () {
//do whatever you want after fadeIn
});
});
Here is the working sample : http://jsfiddle.net/9xZrq/
Second sample which has the fadeOut before fadeIn : http://jsfiddle.net/9xZrq/1/
You can change the delay you need for fadeIn from 600 to 1200 or 1500 or whatever you want
Note that you need to have some connection between the link id and hidden div id so that you can figure out which div to be showed.
I suppose that your div already contains his data and you just want to show it, so you can use:
$('#id_of_your_div').show().fadeIn();
Or I've mistaken you and you want to load the content from a div to an another one? So you can retrieve his content with html().
If I understand right... just call your object html attribute to do that...
$('#yourdiv').html();
This will return the content of the div no matter it is hidden or no.
Should be able to just do something like this (if I gather you rightly) - http://jsfiddle.net/HTrep/6/
You should be able to load content from a hidden div fairly simply, since you're using jquery to have the $() method.
Give the div an id, then using $('#id-of-element').innerHTML will give you the contents of the hidden div.
Related
I have 2 div like
<div id="destination" runat="server"></div> and <div class="errorDiv"></div>
I write a jquery function
$(document).each(function () {
if ($("#destination").find("div").html() !== $(".errorDiv").html()) {
$("#destination").append($(".errorDiv"));
$("#error").append($("#destination"));
}
}).change();
In this function, if destination div contains errorDiv content skips, else append to destination. Then destination will append to another div. But, my check doesn't work . How can I append only unique elements of div? errorDiv content is produced in ASP page and this content is generic.
While page is running I catch the some error messages and I want to append something about these messages to destination div. for example; if I catch
<div class="errorDiv">A</div>
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">B</div>
<div class="errorDiv">A</div>
<div class="errorDiv">C</div>
contents I want to append only
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">C</div>
divs to destination div.
But with my function, all divs are appended.
So it sounds like you get new .errorDivs and want to add them to #destination only if equivalent text isn't already there.
To do that, you need to loop through the divs in #destination, rather than just looking at the HTML of the first one. See comments:
$(document).each(function() { // <== Calling .each on $(document) makes no sense
// Get an array of the currently-known errors in destination
var errors = $("#destination div").map(function() {
return $(this).html();
}).get();
// Loop through the "new" errors
$(".errorDiv").each(function() {
// Is the text of this error already in the destination?
if ($.inArray($(this).html(), errors) == -1) {
// No, add it
$("#destination").append(this);
$("#error").append($("#destination")); // <== This seems very strange
}
}
}).change(); // <== Triggering the change event on document seems odd
I am trying to make it so when I press a button at the bottom of the page, the current page will slide up and this div will show (examples are pictures below).
I think this will have to use HTML/CSS and JS.
Picture 1
Picture 2
Thanks for helping!
Give the div you want to slide to a specific id, and wrap an anchor tag around the button with the href value #divid. The page will then slide to the div which has the id divid.
More info about anchor tags
You can also do it using javascript:
window.onload = function(){
document.getElementById('button').onclick = function(){
document.getElementById('div').scrollIntoView();
};
};
I have the following DIV elements shown together on a page:
<div>This Link Shows Up First</div>
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">This is the value that should show up after the link above is clicked.</div>
As you can see, the This Link Shows Up First text is displayed initially at page load. I have the following javascript which determines if the user has clicked the This Link Shows Up First text. The goal is to display the This is the value that should show up after the link above is clicked div if the awesome-button is hidden.
custom.valueAwesome = function() {
var awesomeButton = document.getElementById('awesome-button');
awesomeButton.style.visibility = 'hidden';
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
gadash.executeCommandQueue();
};
I have tested this script and it is successfully changing the state of the showUpAfterAwesomeButtonIsClicked link to hidden when the user click on the link. This leads me to believe that the connection that needs to be updated has to do with this line:
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
I have tried several variations of this line. Is there a better way to achieve this result? Thanks.
You cannot set an id attribute in CSS. It actually needs to be an attribute on the xml tag.
Change
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">
to
<div id="showUpAfterAwesomeButtonIsClicked" style="display:none; ">
This will allow your document.getElementById to actually select it.
This is probably a fairly easy question, but I'm new to JavaScript and jquery....
I have a website with a basic show/hide toggle. The show/hide function I'm using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?
Here's a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg
There are many different implementation possibilities:
You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).
Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/.
You'd need to either:
Put in a span/etc. after the first n words, and only hide that part, or
Change the viewable region, or
Replace or toggle the span/etc. with the "collapsed" view.
The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.
I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.
You can do some plugin authoring,I did a sample demo here ,based on your screenshot
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
here is javascript/jquery code
jQuery.fn.myToggle = function(selector, count) {
var methods = {
toggle: function(selector, count) {
if ($(selector).is(':visible')) {
var span = $('<span>');
span.text($(selector).text().substr(0, count) + "...");
span.insertAfter($(selector));
$(selector).hide();
}
else {
$(selector).show();
$(selector).next('span').hide();
}
}
};
$(this).each(function() {
methods.toggle($(this).next(selector), count);
$(this).click(function(evt) {
methods.toggle($(this).next(selector), count);
});
});
};
$(function() {
$('.toggle').myToggle('.content', 3);
});
Here is a solution using css properties only instead of mangling the dom.
http://jsfiddle.net/AYre3/4/
Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.
I want to move specific div to up on the up link. Same as to move div to down on the
down link. As shown in screenshot, same as i want to insert div before specific div on the
'IB' link. I want to insert div after specific div on the 'IA' link. To delete specific div on the 'D' link.
alt text http://freeimagehosting.in/images/204_screen_j.jpg
screenshot
Now of course there will be many alternatives are available to achieve above features like jquery, normal javascript, etc.
But I would like to know that which will be the best way to achieve this.
Any feedback would be highly appreciated...!
EDIT : screenshot link is up now !!
jQuery definately makes this sort of thing a bunch easier.
Given this simple markup:
<div class="moveable" id="div1">
One
Move up
Move down<br/>
</div>
<div class="moveable" id="div2">
Two
Move up
Move down<br/>
</div>
<div class="moveable" id="div3">
Three
Move up
Move down<br/>
</div>
This jQuery will move an element up or down:
$('.moveable a.up').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx>0){
$div.remove();
$('div.moveable:eq(' + (idx-1) +')').before($div);
}
return false;
});
$('.moveable a.down').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx<$('div.moveable').length-1){
$div.remove();
$('div.moveable:eq(' + idx +')').after($div);
}
return false;
});
That should give you enough to go on to start doing an insert too.
Here's the fiddle if you want a demo: http://jsfiddle.net/5hF98/
Have you looked at the Jquery-UI Sortable code, it may not be exactly what you need, but it is an option.