I have a relatively simple question here.
What I require is this; I need to have a page with 5 buttons at the top and a DIV beneath them (initially hidden). When a button is clicked, it loads content into the DIV (in the form of another DIV)
eg.
[Button 1] [Button 2] [Button 3] [Button 4] [Button 5] //5 buttons or links
<div id="content">
// area for content to be loaded
</div>
<div id="content1">
//could be a table or image
</div>
<div id="content2">
//could be a table or image
</div>
<div id="content3">
//could be a table or image
</div>
<div id="content4">
//could be a table or image
</div>
<div id="content5">
//could be a table or image
</div>
In the above example, when the user loads the page they see 5 buttons. If they press button 5, it loads the "content5" DIV inside of the "content" DIV eg.
<div id="content">
<div id="content5">
</div>
</div>
If another button is selected it loads it's content.
Can be achieved with jQuery or simple JavaScript.
Many thanks
You need to bind a click handler on all of the buttons. Smart way in this particular example would be, to use the index of the elements to determine which div belongs to a button.
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
Demo: http://www.jsfiddle.net/8f8jt/
This will add an click event handler to all <button> nodes. On click, it looks for the index of the current clicked button (.index()help) and uses this value to query for the accordant <div> elements id. Once found, use .html()help to get and set the value.
You also can use jQueryUI tabs, but it requires additional script.
Try this
$('#button1').click(function() {
$("#content").html(("#content1").html());
});
$('#button2').click(function() {
$("#content").html(("#content2").html());
});
// etc
This way clears any existing content and copies the correct div into the main #content div.
Related
here's my case, I've been working on online manual for the company that I work and recently I decide to make it look better by changing some visual elements, so I thought, why not use bootstrap, and So I did.
Here's the thing, I have a tree-view where I have each part (titles) of the manual, and those titles load an HTML file where I have the information and links to CSS file.
I used to load the content into an Iframe, but that seems to be a terrible idea for all the problems I've deal with it trying to apply CSS, So I decided I'll use DIV'S instead of the Iframe.
Here goes the question:
IS THERE ANY WAY TO LOAD ALL MULTIPLE HTML FILES INTO A SINGLE DIV BY CLICKING EACH TIME A TITLE?
Because All the titles are contained in a "a" tag, and then I use to target it into the Iframe, but now it's not that easy with DIV'S
I've try a little bit of JavaScript and nothing, with Jquery the only thing I've done it's making a function and that function load a specific html file, and by trying adding some parameters to it and it doesn't recognized the path for those HTML files, and it happens the same with InnerHTML.
PD: Those files are locally hosted in a server where they are displayed
Here's a little bit of what I got...
JS:
<script type="text/javascript">
$(document).ready(function(){
$('#content').load('intro.html')
});
</script>
HTML:
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<ul id="tree3" class="list-group-item list-group-item-action bg-light">
<li>TITLE 1
<ul>
<li>TITLE 2</li>
<li>TITLE 3
</ul>
</li>
</div>
</div>
And a want to display all the FILES into this div:
<div id="page-content-wrapper">
<div class="container-fluid">
<div id="content">
HERE THE HTML FILES
</div>
</div>
</div>
I recommend you add a class to the a elements you want to load on the div, for instance class='dynamic'. Set a click handler to all those a.dynamic elements, get the link by using the href attribute of the target, and use preventDefault so the default behaviour (navigating) is not triggered:
$(body).on("click", "a.dynamic", function(event) {
$('#content').load(event.target.href);
event.preventDefault();
}
Remember to add the class on the links:
<a class="dynamic" href="PATHFILE_2">TITLE 2</a>
Note that your dynamically loaded HTML should have only the partial content, no html or body tags. That being said, it's better to not use a elements to trigger the load:
<div class="dynamic" data-href="PATHFILE_2">TITLE 2</div>
And retrieve the url with this:
$('#content').load(event.target.dataset.href);
As far as I know, you cannot load multiple HTML files in one div container.
But why don't you just use multiple div elements inside your #content? You can generate those divs dynamically when one of the hyperlinks is clicked. Each div will then load up one of your HTML files.
The HTML structure stays the same as you have posted it above.
In JavaScript / jQuery it would look something like this:
$('#tree3').on('click', 'a', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
// clear the entire content div
$('#content').empty();
let parentLi = $(this).closest("li");
// load the HTML content for the hyperlink that has been clicked.
let dynamicDiv = $('<div></div>');
$('#content').append(dynamicDiv);
dynamicDiv.load($(this).attr('href'), function(){
// done loading the main HTML content
});
// check if there is a list inside the li element
let subList = parentLi.children("ul");
if(subList.length && subList.length > 0){
$.each(subList.children("li"), function(k, v){
let subLi = $(v);
let hyperlink = $('a', subLi).attr('href');
// load the HTML content for each of the sub entries
let dynamicDiv = $('<div></div>');
$('#content').append(dynamicDiv);
dynamicDiv.load(hyperlink, function(){
// done loading...
});
});
}
});
If you want to have more than two levels in your list, you can modify the code and make it recursive. So instead of iterating through the li elements of the subList once, you would have to check whether those li elements contain other subLists recursively. The overall logic for generating the divs and loading up the HTML content would stay the same.
For styling purposes I recommend giving the main #content container an overflow-y: auto. This way you only have a single scrollbar for the entire content. The divs that are generated dynamically will adjust their height according to the HTML content.
So, i think this should be pretty simple but i can't seem to get it right, say i have an empty div:
<div id='mainDiv'></div>
This div gets filled dynamically with data from database with ajax, i want on button click to empty this div but keep one element with a specific id ex: <div id='divToKeep'></div>, i tried:
$(document).on('click', '#button', function(){
$("#mainDiv > *:not('#divToKeep')").empty()
})
Now this dose empty everything but keeps the empty divs there, i want to remove everything inside #mainDiv but the #divToKeep element.
Get all the mainDiv, then get all elements inside it using children except the div you want to keep, then call remove:
$("#mainDiv").children(":not('#divToKeep')").remove();
Check this fiddle: https://jsfiddle.net/yzfw8atp/2/
This way, it put the divToKeep on the top level, then remove everything else inside.
$('#divToKeep').appendTo('#mainDiv'); // move #divToKeep up to the body
$('#mainDiv *:not(#divToKeep):not(#divToKeep *)').remove(); // remove everything except #divToKeep and inner children
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainDiv'>
<div>
<div>
<div id="divToKeep">
<div>
</div>
</div>
</div>
</div>
</div>
$("#mainDiv").children().not("#divToKeep").remove();
I have a page with multiple posts divs and have a hidden comment form for each post. What is the best way to utilize JQuery/JavaScript to display only the comment form for that post after a button or link is clicked.
<div class="post">
<p>Some Content</p>
Comment
<div class="commentForm" style="display:none"></div>
<div>
$('.commentButton').on('click', function(){
$(this).next().slideToggle();
});
Delegate the click event to the commentButton which should toggle the commentForm. Inside of the event, move to the next element, and perform a slideToggle(). In this way, clicking on the comment button will both show and hide only the next one.
Further to the point, if you wish to hide all other commentForms so only 1 is open at a time, you can simply add:
$('.commentForm').hide();
before you perform the .slideToggle().
put id in your div
<div class="commentForm" id="myID" style="display:none"></div>
now in script
if(someCondition) {
document.getElementById('myID').style.display = 'hidden';
}else {
document.getElementById('myID').style.display = 'visible';
}
next() might not always be working because many times an element is not after the button (that triggers the action) itself.
If that is the case you can do the following:
$('.commentButton').on('click', function(){
$(this).parents('.post:eq(0)').find('.commentForm(0)').show();
// or: fadeIn(500); / fadeOut(500);
// or: slideToggle(); / slideUp(); / slideDown();
// or: css('display, 'block'); / none
});
This will find it's first parent with the class post and than the element inside it with the class commentForm even if its inside another element or in another etc.
In the example of yours you dont nescesaraly need it, but think of just selecting elements that do not have any classes or IDs :)
An example use case would be a registration form that was split into several steps. I.e. there are three steps:
Container 1 is visible
Container 2 is hidden
Container 3 is hidden
User clicks next button:
Container 1 is hidden
Container 2 is visible
Container 3 is hidden
User clicks next button:
Container 1 is hidden
Container 2 is hidden
Container 3 is visible
User clicks previous button:
Container 1 is hidden
Container 2 is visible
Container 3 is hidden
and so on. This is what I tried:
$('#btn-next-step').live('click', function(){
$('.form-step').each(function(){
if($(this).is(':visible')){
$(this).hide();
}else{
$(this).show();
return false;
}
});
});
HTML:
<form>
<div class="container-fluid form-step form-step1">
step1
</div>
<div class="container-fluid form-step form-step2">
step2
</div>
<div class="container-fluid form-step form-step3">
step3
</div>
</form>
Here is my fiddle: http://jsfiddle.net/feFcu/
Can you help me with the logic. Any ideas how to realize this kind of behaviour?
First, store the visible one in a variable. Then hide all of them, and use .next('.form-step') to find the one that follows the previously visible one, and .show() it.
$('#step').on('click', function(){
// Find the visible one and store in a variable
var showing = $('.form-step:visible');
// Hide all of them (including the currently visible one)
$('.form-step').hide();
// Find the next one with .next() and make it visible
showing.next('.form-step').show();
});
Here is the updated jsfiddle example...
Note that I have replaced .live() with .on(), since .live() is now deprecated.
using this line will provide you with an array of the steps:
var steps = document.getElementsByClassName('.form-step');
now you can itterate through the steps by tracking which step is active with a seperate variable.
i am trying to replace the content of a div with the content of another div(which is hidden). The code works for the first time only but the second time doesn't work at all.
I have a div where the titles of some articles are scrolling. I want to achieve that:everytime i am going to click the title of an article its content(the content is in hidden div) is going to appear in another div with the id="sreen".
<script type="text/javascript">
//everytime you click the title of an article
$("a.title").live("click", function(){
//replace the content of div screen with the content of an article
$('div#screen').replaceWith($(this).next('div.content'));
});
</script>
Any ideas???
Using .replaceWith will effectively remove div#screen. So using .html() will be what you want to do to maintain the element div#screen.
You mentioned that your formating is not working correctly which leads me to believe you have css classes on div.content. Calling .html() on div.content will ommit the root node of div.content.
<div class="content">
<span>some text</span>
</div>
$("div.content").html() will produce <span>some text</span>
If my assumptions are correct you might want to look at using clone() which will clone the current object without events or clone(true) to include any data and events.
var $content = $(this).next('div.content').clone();
$content.css("display", "block");
$('div#screen').html($content);
Another way of doing this would be use .outerHTML
$("a.title").live("click", function() {
$('div#screen').html($(this).next('div.content')[0].outerHTML);
});
Example on jsfiddle.
use the .htmldocs method for this
<script type="text/javascript">
//everytime you click the title of an article
$("a.title").live("click", function(){
//replace the content of div screen with the content of an article
$('div#screen').html( $(this).next('div.content').html() );
});
</script>