I have the following script on a page that has a button to Show/Hide some content. I'd like to have a link from another page that would go to this page and open/show the content of one of the items. Is this possible to do?
Here's the onpage script and markup i'm using to to the Show/Hide;
Note: The '{trailitem:count}' is just an ExpressionEngine tag to add a unique number to each div. ExpressionEngine loops through and creates the divs with an incremental number, but the concept is the same so just imagine a series of divs with a unique ID.
<script>
function ToggleTrail{trailitem:count}() {
var toggler = document.getElementById("trail_toggler{trailitem:count}");
var first = document.getElementById("trail_first{trailitem:count}");
var reveal = document.getElementById("trail_reveal{trailitem:count}");
if(reveal.style.display != "block" && toggler.style.display != null) {
toggler.style.display = "block";
toggler.innerHTML = '» Hide';
first.style.display = "block";
reveal.style.display = "block";
}else{
toggler.style.display = "block";
toggler.innerHTML = '» Reveal More';
first.style.display = "block";
reveal.style.display = "none";
}
return false;
}
</script>
<div class="trailbox">
<a id="trail_toggler{trailitem:count}" class="button blackbutton viewallbutton" href="#" onclick="return ToggleTrail{trailitem:count}();">» Reveal More</a>
<div id="trail_first{trailitem:count}">
First content
</div>
<div id="trail_reveal{trailitem:count}">
Content to be revealed
</div>
</div>
Related
I have a parent HTML page. It embeds an iframe containing a child HTML page.
The child HTML stores a block of HTML, including a "close" button, into a JS variable, and pass this variable to parent JS function upon a click of a "Show" button in the child HTML. This "Show" button has an addEventListener() on click. The goal of this button is to display the block of HTML code on top of the parent HTML.
I managed to make this block of HTML display on top of the parent HTML when I click "Show", the close button in this block will "display: none" upon clicking the cross button.
However, any further click of the "Show" button in the child HTML will not work; the button is broken and has no action.
Child HTML:
var plan0 = '<div class="popup">'+
'<span id="closeMe">×</span>'+
'other content here'+
'</div>';
document.getElementById("open0").addEventListener("click", function(event) {
event.preventDefault();
parent.showPopup(plan0);
}
Parent HTML:
<div>
<iframe id="channelFrame" scrolling="no" style="width: 100%; border: 1px; overflow: hidden" src="child.html"></iframe>
</div>
<div id="popup"></div>
<script>
function showPopup(info) {
var popup = document.getElementById("popup");
popup.innerHTML = info;
var closeMe = document.getElementById("closeMe");
if (closeMe) {
closeMe.onclick = function() {
popup.style.display = "none";
popup.innerHTML = "";
}
}
}
</script>
There is no error in console, and the "event" is still clearly marked in the "Show" button.
Where is the error?
On the first click on close, you are hiding the popup with
popup.style.display = "none";
but never un-hide it. Any subsequent actions will happen in a hidden tag, so you don't see anything.
Try something like:
function showPopup(info) {
var popup = document.getElementById("popup");
popup.innerHTML = info;
popup.style.display = "block"; // <------ show it again
var closeMe = document.getElementById("closeMe");
if (closeMe) {
closeMe.onclick = function() {
popup.style.display = "none";
popup.innerHTML = "";
}
}
}
I have this two images that trigger the same function. What the function does is showing/hiding one of the images and then i added some extra code to show/hide a menu, that i haven´t included.
function menu() {
var b = document.getElementById("burger");
var c = document.getElementById("close");
if (b.style.display === "block") {
b.style.display = "none";
c.style.display = "block";
} else {
b.style.display = "block";
c.style.display = "none";
}
}
<img src="img/burger-white.png" id="burger" onclick="menu()" alt="img1">
<img src="img/close-white.png" id="close" onclick="menu()" alt="img2">
Everything works as intended, except for the first time i click on the image, when it does nothing.
It looks like the display for burger is not initially set to block. Try loading the page and inspect it with chrome. There you should see, when the page is loaded, if it initially have the expected css style.
A workaround, would be to add a function that will set the display of the element with id #burger to "block", if the window size is less that a 1100px.
function setDisplay() {
var width = window.innerWidth;
var b = document.getElementById("burger");
if(width <= 1100) {
b.style.display = "block";
}
}
I have a series of expandable drop-down tabs using the ToggleList javascript function below. When the tab is closed I would like to display expand.png and when it's open I would like to display close.png. Right now Any help would be appreciated.
The code below expands\minimizes the dropdown tabs, but is not switching the png files.
Full javascript + html:
<script type="text/javascript">
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "expand.png" ? "minimize.png" : "expand.png";
}
function HideRange(sect,elTag,IDS) {
var ContentObj = document.getElementById(sect);
var AllContentDivs = ContentObj.getElementsByTagName(elTag);
}
</script>
<ul id="ulist">
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand0" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand1" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand3" class="divInfo">Text</div>
</ul>
Here's a simple way to implement that - comments in the code
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "img/expand.png" ? "img/collapse.png" : "img/expand.png";
}
I have a code highlight block for which I would like to have an option where you click on a button and it opens up a new HTML page where it displays the "raw" content of the highlight. I have the code ready in raw form and the link prepared with target="_blank", but I can't seem to get it to open up a new page.
This is what my HTML looks like:
Click to view HTML
And this is my javascript
//when clicked
link.href = 'javascript:document.write("...");';
//the click event should continue as normal
This should open up a new page with "..." as the content, but it doesn't work (it just opens up the existing page).
Is there anyway to do this without using popups?
function writeToWindow(content) {
var newWin = window.open('','newWin','width=300,height=200');
newWin.document.open();
newWin.document.writeln("<html><head><title>Console</title></head><body>" + content + "</body></html>");
newWin.document.close();
}
call it
onclick="writeToWindow('text to display');"
Do you have to use a new window? I think is easier to use a layer.
<div id="toggleText" style="border:solid black 1px; display:none;height:100px;width:100px">
<span id="displayText"></span>
</div>
<script language="javascript">
func tion toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the JavaScript work looks like this:
< href="#" onclick="toggleVisibility();">About
< href="##" onclick="toggleVisibility1();"> Products
here is another, simple function
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
if you click here, #foo will change visibility
<div id="foo">blablabla</div>
Without jQuery, you would want to do something like this:
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
About
Products
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
About
Products
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
Simple solution is like this:
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
use CSS display: property
element disappear
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
PS
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html