Using this HTML code, when I click the hide link, it hides the block but also adds a line feed. How to eliminate the new/additional line feed?
Thank you.
function showTop1(){
document.getElementById("top1opener").style.display = "none";
document.getElementById("top1").style.display = "block";
}
function hideTop1(){
document.getElementById("top1").style.display = "none";
document.getElementById("top1opener").style.display = "block";
}
"line feed" you mind that's element is block and stretching to 100% width?
<div id="top1opener" style="background-color:red;" onclick="showTop1()">
OPENER CONTENT
</div>
<div id="top1" style="background-color:green" onclick="hideTop1()">
TOP1 CONTENT
</div>
<script>
function showTop1() {
document.getElementById("top1opener").style.display = "none";
document.getElementById("top1").style.display = "inline";
}
function hideTop1() {
document.getElementById("top1").style.display = "none";
document.getElementById("top1opener").style.display = "inline";
}
</script>
is that you means? elements in this code doesnt stretching to 100% width.
Related
so I tried to change the "myInfo.style.display = 'block'" to document.getElementById('demo').style.display = 'none' and it didn't work, so im struggling to figure out how to hide the by default so that when I click the button it then displays it.
here's the code
<center><p><button onclick="myFunction()" id="button">Show More</button></center></p><br>
<script>
function myFunction() {
var myInfo = document.getElementById('demo');
var displaySetting = myInfo.style.display;
var clockButton = document.getElementById('button');
if (displaySetting == 'block') {
myInfo.style.display = 'none';
clockButton.innerHTML = 'Show Info';
}
else {
myInfo.style.display = 'block';
clockButton.innerHTML = 'Hide Info';
}
}
</script>
<div id="demo"><font color="black"><b>Fav Color:</b> Orange/Purple<br><b>Hobbies:</b> Coding, Video games, Hanging out with friends, Drifting<br><b>Fav Song:</b> Homocide - Logic (ft. Eminem)<br><b>Fav Animal:</b> Cat<br><b>Fav Food:</b> Pulled Pork Sandwich</font></div>
As Sumner Evans said in their comment, just add
style="display: none"
to your div tag.
It will be hidden by default and your button will work. You can test it here: https://jsfiddle.net/0v3fzo97/
I'm trying to hide a section (div class) if there's no output string. How do I go about doing this?
<div class="series">
<b>Series:</b>
<?php the_field( 'books_series' ); ?>
<?php ?>
</div>
I'm looking for it to disappear when there's no content available through the series_link.
You can make it will JS HTML DOM function. Here is a sample code for you.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var str = "";
var n = str.length;
document.getElementById("demo").innerHTML = n;
if (n==0) {
document.getElementById("demo").style.display = "none";
} else {
document.getElementById("demo").style.display = "block";
}
</script>
</body>
</html>
You can identify the string length. If it's zero then set the display value none either block which make visible section if is there any value.
I have 3 different charts inside 3 different div tags that appear and hide when specified. However, two of the charts randomly resize and i know why.
How do i fix this?
I have wordpress and using visualizer plugin for my charts. have the code in the header.php file and in the text portion of the page specific code.
Code below:
Header.php snippet -
<script>
var divs = ["Daily", "Weekly", "Monthly"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
HTML page snippet -
<div class="inner_div">
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
Daily | Weekly | Monthly
</div>
A quick fix is to include call visualizer.render(); at the end of your toggleVisibility function:
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
visualizer.render();
}
The problem is caused by invalid calculation of available area for divs that aren't visible at the time. Calling this method forces a re-calulcation of the svgs and ensures the right size.
I've got some h and img elements which are children of a li. When the user clicks on the li I want to hide these and make a progress bar appear. I have the appearing/disappearing of the items working but don't know how to set the progress bar to initially not be shown.
Here's the code:
<li id="li1"">
<img id = "track_image" src="image.jpg" />
<h1 id = "track_title">Title</h1>
<h2 id = "artist_name">Name"</h2>
<audio id="audio1"></audio>
div id="progressBar"><span id="progress"></span></div>
</li>
function audioClick(evt, listElementId, audioId, clip) {
var listElement = document.getElementById(listElementId);
var title = listElement.getElementsByTagName("h1")[0];
hideOrShowElement(title);
var artist = listElement.getElementsByTagName("h2")[0];
hideOrShowElement(artist);
var date = listElement.getElementsByTagName("h3")[0];
hideOrShowElement(date);
var audio = document.getElementById(audioId);
if (audio.paused) {
audio.src = clip;
audio.play();
}
else {
audio.pause();
audio.currentTime = 0;
}
}
function hideOrShowElement(element) {
if(element.style.display == 'none')
element.style.display = 'block';
else
element.style.display = 'none';
}
I want to add a progress bar when the audio plays, so was thinking of incorporating the progress bar here
http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html#articlecontentAdobe_numberedheader_2
But I don't know how to initially set it so that its not displayed.
Thanks
Do this on page load
var ProgressBar = document.getElementById("progressbar");
elem.style.display = "none";
and on click
ProgressBar.style.display = "block";
If you are following the adobe link's css then just change the display of #progress to be none initially:
#progress {
background-color:#ff0000; // red
height:20px;
display:none;
}
I need to create one single web page with 4 tab. By pressing on a tab the relevant content should display on the whole page and that should work for all tabs. I mean, when user press on one tab it will display content which will be linked to that tab and hide another tab's content. How can I do it in HTML and CSS?
Jquery UI has an out of the box solution for this:
http://jqueryui.com/demos/tabs/
Granted it's not a pure HTML and CSS solution however I'm not sure you'll be able to do it without some form of scripting
This is my final solution to my problem:
function show(showEl) {
var elements = new Array("tahsilatlarIcerik", "faturaTabGraf", "odemeIcerik", "kasaIcerik");
for (var i = 0; i < elements.length; i++) {
if (showEl == elements[i]) {
document.getElementById(showEl).style.display = "block";
}
else {
hide(elements[i]);
}
}
}
function hide(hideEl) {
if (document.getElementById(hideEl).style.display != "") {
document.getElementById(hideEl).style.display = "none";
}
}
Basically, I've created an Array with elements id's inside and manipulate them with 2 function. Functions are called inside of tabs, e.g., <a id="faturaMenu" onclick="show('faturaTabGraf')">Fatura Analizi</a>. I hope this will be helpfull to someone.
I solwed problem with javascript code. I am posting it and I am wondering if there is another,
less coded way to do it? As far as I researched, I've found that in javascript declaring and asigning global variables at the same time is not supported, do you know any other simple way to do it?
AND CODE:
function getFatura() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "block";
faturaGrafikId.style.display = "block";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getTahsilatlar() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "block";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getOdemeler() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "block";
kasaId.style.display = "none";
}
function getKasa() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "block";
}
AND I AM CALLING THESE FUNCTION IN a element WITH onclick event. Basically I am changing display propertie of selected tab to BLOCK and display properties of other tabs to NONE.
Now, I have 4 tab, but I can not imagine what crowd of code will I need if it exceed to, for example 10 tabs.
Thanks,
You could do it with CSS/javascript by changing the z-indexes of the pages (as divs) onclick. This would bring one in front of the other.
Just have a div containing all the tabs, and then divs with different ids for each one.
Start with the page divs all having z-index:0;, except for the home div, which hasz-index:1;.
Each tab has an onclick="nextpage('page1') (Change page1 to the id of the corresponding page).
Then in the javascript, place this code:
function nextpage(pageid) {
//Find the highest z-index. May need to be customized
var elements = document.getElementsByTagName("*");
var highest_index = 0;
for (var i = 0; i < elements.length - 1; i++) {
if (parseInt(elements[i].style.zIndex) > highest_index) {
highest_index = parseInt(elements[i].style.zIndex;
}
}
var highest_index_1 = highest_index + 1;
//set the z index of the tab-page to the highest+1
getElementByid(pageid).object.style.zIndex="1";
}