On button press, push a div below the current div - javascript

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

Related

How to display the text inside the button element from a different page at current page?

We have 2 webpages one.html & two.html.
In one.html we have a button element with text,
<button id="next">Next</button>
We want to display the content inside the button from one.html, i.e "Next" in two.html inside a
<p id="getfromone"></p>
We tried using jQuery about it, written below, called by a onload function with in body element.
document.getElementById("getfromone").innerHTML = $('#getfromone').load("one.html #next");
However, this only displays [object Object]
Please suggest what can be done about it.
Try this out, You can check the working code in codepen.
$(document).ready(function(){
var content;
$("#oneDiv").load("one.html button#next", function(){
content = $(this).text();
$("#getfromone").text(content);
});
});

How to Display DIV Contents Based Upon Visibility of Another DIV Contents

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.

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

How to load one div into another

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/ .

Categories