How to load one div into another - javascript

I have a page with 10 different div contents in it. Based on my button click i want the 11th div to load content or just take a copy of div 1 to 10. I mean like on button1 it should load div 1 and on button 2 i will load div 2 etc. All my div 1 to 10 will be hidden and the 11th div alone will be visible.
I need this because of my below hierarchy.
-> Main Page (having the 10 div)
->inner div which is loaded by a ajax request.(this has 11th div and buttons)
Now on click of any button like 1 to 10 its respective divs is supposed to be loaded from the div in the main page. I would like to do this by java script or jquery. Please let me know any possibilities. Any kind of suggestions or solutions is appreciated.

Do you mean like this?
$("#mybutton1").click(
$("#mydiv11").html($("#mydiv1").html());
)

If you have the buttons in some container (say a ul #buttons) and the divs in another container (say #panes) then you can do this:
var tabs = $('#buttons li button');
var panes = $('#panes').children('div');
tabs.click(function() {
panes.hide()
.eq(tabs.index(this)).show();
});
you can also do this with tabs UI http://jqueryui.com/demos/tabs/ .

Related

On button press, push a div below the current div

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();
};
};

prettyPhoto multiple galleries on one page

I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate.
I have 56 images in total on the page, so when the first image of gallery 1 opens in lightbox it says 1/56 and I can click through all 56 images, what I want is for gallery one to say 1/16
then gallery 1/16 etc.
I was told to edit this line of script in my raw.js file:
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
but nor sure what to do it with it? Any help would be greatly appreciated.
Here is a link to the page in question:
http://www.tetra-shed.co.uk/news/
prettyPhoto groups galleries together based on the contents of the square brackets. So you are getting all 56 images in the same gallery because they have all been assigned to gallery 1.
What you really want is the first sixteen in gallery 1;
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
And the next 16 in gallery 2;
$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');
The question is- how to do that given that the rel attribute is being assigned via JS? Well I would look at doing it based on the parent parent div id. Each gallery-icon element has a gallery-item parent. Each of those is part of a gallery class which has a specific ID. For example
<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
So you would want to assign that unique gallery id as the pretty photo rel value. ie;
$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');
I would do it by finding all gallery-icons and using closest() to find the parent gallery id, like this;
Finding the id of a parent div using Jquery
I've not tested it or anything but something like this should get you going in the right direction;
$('#content').find('.gallery-icon a').each(function() {
var gallid = $(this).closest("div").attr("id");
$(this).attr('rel', 'prettyPhoto['+ gallid +']');
});
I maybe came with easier solution, I am just going through all my gallery div in each function and then initializing the prettyPhoto in images inside them.
$(document).ready(function(){
$.each($(".gallery"), function(i, val) {
var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
$(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
});
});
All that needs to be done is to change the rel in the html where you add your gallery that looks something like this rel="prettyPhoto[pp_gal]"
in your first gallery you create inside your div change the rel="prettyPhoto[pp_gal]" to "prettyPhoto[gallery1]" (for example)
and the next to "prettyPhoto[gallery2]" and so on.

Hide/show 2 div based on jpg button selection

I have a div with text and a separate div with a jpg image on a webpage.
There are 6 (jpg) buttons in different areas on the webpage.
When I select btn1.jpg, I would like text1.html and image1.jpg to load into the 2 div's.
When I select btn2.jpg, I would like text2.html and image2.jpg to replace the content of the div.
When I select btn3.jpg, I would like to have text3.html and image3.jpg load into the div's.
and so forth...
When one initially lands on the page, I would like to have the text and image associated with btn1.jpg loaded in the divs by default.
I've created this jsFiddle http://jsfiddle.net/davew9999/gFHnh/ that should do what you want. I've just done 2 buttons with 2 sets of text and images but you can just add more html buttons, the JavaScript will deal with as many buttons as you like.
Note that no text loads as text1.html and text2.html doesn't exist for me but should work for you. Also I've used some example images from the web just to show it works.
HTML
<button id="button1" class="textImageChanger" data-image="http://www.transformerhair.com/wp-content/uploads/2010/11/test.jpg" data-html="text1.html">Button1</button>
<button class="textImageChanger" data-image="http://upload.wikimedia.org/wikipedia/commons/9/95/KWF_Test.png" data-html="text2.html">Button2</button>
<div id="textDiv"></div>
<div id="imageDiv"><img src=""/></div>
JavaScript
function LoadText(link) {
$("#textDiv").load(link);
}
function LoadImage(image) {
$("#imageDiv img").attr("src", image);
}
$(document).ready(function() {
LoadText("text1.html");
LoadImage($("#button1").data("image"));
$(".textImageChanger").click(function() {
LoadText($(this).data("html"));
LoadImage($(this).data("image"));
});
});
​

Load Content From a Hidden Div?

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.

How to add jquery events to added classes?

I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)
this is the html . the id page, is the highlighted number
<div class="grid_1 pagelink" id="page"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:
$('.pagelink').live('click', function(e){
e.preventDefault();
var frame = $(this).text() - 1;
var frames = 240 * frame;
// $('#gal').animate({marginLeft:'500px'},'slow');
$('#gal').animate({marginLeft: "+="+frames+'px'},'slow');
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
// $('#book').animate({ left: '50' });
})
I thought that the .live() would do that for me but it is not working.
I hope you could help
thank you
Previous, this is because you are removing the class of link "pagelink" which were used to map the clicked event.
Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like
$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');
live should work fine. i think you have a bug in your code, and its probably here:
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
what exactly are you trying to accomplish with this code?
when you click on page2, the you set the div's id to be page, but now you have 2 elements with an id of page, and when you select that id, you get the first one (ie page1), but you still remove the class pagelink from page2
in other words, the bug is that at some point you will have 2 elements with the same id (and ids must be unique btw) so when you select that id with $('#page') you always get the first one

Categories