html buttons change div content or toggle it again - javascript

I'd like to know how to create buttons which can change the content inside a div and if the last clicked button (actual content) is clicked again instead of change it should clear the div.
So far I got the code to create and change the content like this:
HTML
<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>
<div id="text_content"></div>
<div id="bl1">
<p>This is text 1</p>
</div>
<div id="bl2">
<p>This is text 2</p>
</div>
<div id="bl3">
<p>This is text 3</p>
</div>
JS
function changeNavigation(id) {
document.getElementbyId('text_content').innerHTML= document.getElementbyId(id).innerHTML;
}
With this code so far I can make the content inside the div change by clicking the bottons. But once the box has been filex I can only change the inside content. If I click the button from the actual content again nothing happens but I'd like to clear the content.
Can maybe anyone explain me or link me the name of such a funtion?
Thanks in advance!

Im not really sure what you're trying to get here? If you click a nav item twice to clear the div?
If so try something like this
function changeNavigation(id) {
var textContent = document.getElementbyId('text_content'),
containerDiv = document.getElementbyId(id);
if(textContent.innerHTML === containerDiv.innerHTML){
textContent.innerHTML = '';
} else {
textContent.innerHTML = containerDiv.innerHTML
}
}
What we're doing here is checking if the text_content is the same value as the div you're getting the content from. if so then empty it.

Related

Storing text that has overflown in js var

I realise this is a bit of an odd question as it's slightly contradictory but I'd like to be able to hide text that doesn't fit into a div. That much is easy but then I need to take the text that is hidden and store it in a js variable so that i can make it visible on a button click so for example:
<html>
<body>
<div style = "height:10px;width:50px;word-wrap:break-word;overflow:hidden">
<p id = "text">Text that is too big for div</p>
</div>
</body>
</html>
JS
var overflow = /*equates to overflow of div*/
$(document).click(function(){
document.getElementById('text').innerHTML = overflow
})
Something like that.
Why not just get rid of the overflow: hidden property on click?
var content = document.getElementById('content'),
button = document.getElementById('unhide');
button.addEventListener('click', function(){
content.style.overflow = 'visible';
});
<button id="unhide" type="button">Unhide</button>
<div id="content" style="height:35px;width:100px;word-wrap:break-word;overflow:hidden">
<p>Text that is too big for div. Text that is too big for div.
Text that is too big for div. Text that is too big for div. </p>
</div>

Adding new elements inside a div with auto increment Id

I have been trying to figure a way to add a div inside another div using a button, but I think the logic for it may be a bit beyond my reach at the moment. Basically I have this labs facilities, and when I create one in a page it should add them to the database, that is done and working.
Then I needed a div acting as popUp to retrive the information of each lab, that also works but if I have more than one lab is displays all the information of those labs in that one popUp meant for one. Which brings me to my next point.
I needed and decided that when I click the Aceptar button the new div created should have a id=n, where for each new div added it goes n+1, so div1 has a id of 1, div 2 of 2 and so on. I think this made using arrays... in that way I can update my php code to say:
function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)
$result = do_query($query);
return $result;
}
Right now this is the code I have...because I am stumped:
Html code in the php. page for the list of labs:
<div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST
<div> //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box"> //So if I add another it would be Lab#4 with id=4
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div
</div>
Here is the button used in ANOTHER page that I am using for adding the labs to the database which is working 100%:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="agregar()"/>
In both pages (list and add) the scripts as well as the includes are present.
And the code I was thinking for adding new divs (as well as removing one) goes along these lines:
function agregar() {
var div = document.createElement('div');
div.className = 'box';
'<div class="box">
<p>Lab HERE GOES NUMBER</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>';
document.getElementById('content').appendChild(div);
}
function eliminar(input) {
document.getElementById('content').removeChild( input.parentNode );
}
But I hitted a mental block about how to proceed now >.< any help would be a godsend, I tried to keep it brief and only put the relevant code but if there is anything else I could provide in order to get some help I will do it.
Thanks a lot in advance and best wishes!
I think you can do this:
div.id = querySelectorAll('lista > div').length +1;
The length varies each time you add the div. So this should work for you.
If I understand the code correctly, you want to click a button and be able to add a div inside another div with the id = to the previous id+1?
JQUERY
$(document).ready(function(){
var counter = 1;
$('#addDiv').click(function(){
$('#'+counter).html('<div id="' + (++counter) + '"></div>');
});
});
HTML
<div id="1">
</div>
<button id="addDiv">Add Div Inside</button>

Add Different Text to an Existing Div each time button is clicked

I am pretty new to jquery and am trying to code this where each time you click on the content, the content is added to an existing div. However, the content will be constantly changing. I tried making it a variable, but it is still not working. Any help or advice is appreciated.
js fiddle: http://jsfiddle.net/tU2En/7/
html:
<button id="Add">Add Text</button>
<div id="content">
<p>Content 1</p>
</div>
script:
var text='#content p';
$(function () {
$('#Add').on('click', function () {
$('text').appendTo('#content');
});
});
Change:
$('text').appendTo('#content');
to:
$(text).appendTo('#content');
By quoting text, you're treating it as a string and jQuery is looking for an element named text.
jsFiddle example

Display hidden object from another div

I'm having a little trouble here and hopefully someone can give me a hint on what I'm doing wrong. The object within the main div is hidden and I need it show when I click the button within the secondary div. I'm getting the secondary div to "close" after the button is clicked but I just can't seem to figure out how to make the "checked" object to show.
Here is the HTML:
<div class="separate">
<div class="main">
<h1>Mechanical Room</h1>
<object class="checked"></object>
</div>
<div class="secondary">
<div class="heading">
<h2>Mechanical Room</h2>
<button class="check-in">Check In</button>
<object></object>
</div>
</div>
</div>
And here is my jQuery code:
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").show();
});
});
If your div is set to hidden by visibility then show() method won't show demo
You need to set .css('visibility','visible'); then.
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").css('visibility','visible');
});
});
It is working just fine in my fiddle.
Did you style your object?
Did you make sure it's hidden initially?
$("object").hide();
I added [THE OBJECT] as it's content to see it.
<object class="checked">[THE OBJECT]</object>
Demo: http://jsfiddle.net/u6x84/

How can I open a Div when navigating to it?

I would like to show the contents of a div when I navigate to it via a URL. Currently the Div contents are revealed onclick.
How would I get the Div contents to be revealed when using a URL with anchor to navigate to the main title in the ?
Here's javascript
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
here's my html
<h2 class="acc_trigger">Some Title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Strap Line Goes here</h3>
Text content goes here
</div>
</div>
<h2 class="acc_trigger">Another title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Another Strap Line Goes here</h3>
Some more text content goes here
</div>
</div>
If you're using a hash (e.g. url.com/page.html#otherStuff) then read the location.hash
http://www.w3schools.com/jsref/prop_loc_hash.asp
If you're using a query (e.g. url.com/page.html?otherStuff) use the location.search
http://www.w3schools.com/jsref/prop_loc_search.asp
Put the code below the DIV that you want to show, so the element has been created. Then just do a simple if(hash == "#otherStuff"){ /* Do stuff */ } Where in "Do stuff" you would just run the open function.
listen to the hashchange event which is triggered on the window object. then you can show the div or do what you want with it.
Something along the lines of this;
About
<div id="mydiv_about" style="display:none">
</div>
Media
<div id="mydiv_media" style="display:none">
</div>
and some javascript
window.addEventListener("hashchange", function(){
document.getElementById("mydiv_"+document.location.hash.substr(1)).style.display="block";
},false);
//edit
updated to reflect a working example

Categories