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>
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 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>
First disclosure: I have a lot of scripts running on this particular page.
I have a div of text that I have on page load, now there is a specific link which is toggled to this text, based on clicking on the link. WHEN the page is loaded, I want just the link to be a certain color.
Here is what I have for the text so far... which is displaying on pageload:
<script>
window.onload=function showDiv() {
document.getElementById('d1').style.display = "block";
}
</script>
Now I need to have my link a specific color on page load, but that color must be able to change back to its CSS default when another link is clicked:
Innovative Design Methodology
Like I said, there are other scripts I have running on this page, hence you see in the link.
Just for fun, here's my other code (toggling text & highlighting code):
<script type="text/javascript">
var currentItem;
function unhide(divID) {
if (currentItem) {
currentItem.className = 'hidden';
currentItem = null;
}
var item = document.getElementById(divID);
if (item) {
item.className = 'unhidden';
currentItem = item;
}
}
</script>
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color;
}
link.style.color = '#f5b331';
currentLink = link;
}
</script>
You could add a css class on the anchor tag initially (which has your custom styling) and remove it on click on any of the links.
Your HTML
<a id="link1" class='CustomColor'></a>
And your CSS
.CustomColor
{
color:red;
}
And On click of any link,
document.getElementById("link1").className =
document.getElementById("link1").className.replace('CustomColor','');
I have a code which opens lightbox when user click a link. What it does it opens lightbox, then when user clicks on overlay it closes or hides overlay and lightbox. But when user click on link again to open lightbox again then it does not open. Here is my code
var el = document.getElementById('element');
var body = document.getElementsByTagName('body');
el.innerHTML = '<p><a id="clickme" href="#">Click me</a></p>';
document.getElementById('clickme').onclick = function (e) {
e.preventDefault();
if (overlay) {
overlay.style.display = 'block';
} else {
document.body.innerHTML = '<div id="overlay" style="display:block;position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'+document.body.innerHTML;
}
document.body.innerHTML = '<iframe id="frame" style="position:absolute;display:block;z-index:101;width:50%;height:50%;margin:10% 20%;border:10px solid #ccc;border-radius:10px;" src="http://www.example.com/"></iframe>'+document.body.innerHTML;
document.getElementById('overlay').onclick = function() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('frame').style.display = 'none';
}
}
How can I open this lightbox again when user clicks link second time?
You set style to display:none on close but clicking the link doesn't change the display property. Effect: the box stays invisible.
Simple solution: add display:block or whatever you need there to the opening function.
In addition: your opening function will create a new element each time it is executed. You could add a test to prevent that:
var overlay = document.getElementById('overlay');
if(overlay){
overlay.style.display = 'block';
} else {
//create box
}
The problem is that as soon as you edit the DOM by adding or replacing document.body.innerHTML, the event on your element (your a href) will no longer exist. you would need to append the event again after you performed document.body.innerHTML.
I am currently working with the toggle div function. I am using images to be the triggering point for toggling. For example when a div is close an image with a "plus" signs appears to indicate the user to expand and vice versa for compressing the div. The only issue is that I am using two sets of images for expanding and compressing divs but I can only get a set to work but not both. The is example I have doesn't work well in jsfiddle but if you like to look at it there here is the link: http://jsfiddle.net/sQnd9/4/
Here is my example:
<script type="text/javascript">
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="images/Plus_Circle.png"/>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="images/Minus_Circle.png"/>';
}
}
</script>
<script type="text/javascript">
function toggle2(showHideDiv2, switchImgTag2) {
var ele = document.getElementById(showHideDiv2);
var imageEle = document.getElementById(switchImgTag2);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src=images/arrow_open.png/>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src=images/arrow_close.png/>';
}
}
</script>
<div><a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');"><img src="images/Plus_Circle.png";/></a>Example</div>
<br />
<div id="contentDivImg" style="display:none;">
Example1-Content
</div>
<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>
<br />
<div id="contentDivImg2" style="display:none;">
Example2-Content
</div>
The problem isn't your code (other than the mistakes that #appclay pointed out). The problem is jsfiddle. Just look at the source code it produces. When you put anything in the "javascript" section it's puts it in it's own namespace, preventing access to those function names outside of that block (so your call to toggle1 for example was throwing an undefined function error).
You can see this in action by defining these functions directly as window. properties. Then your code works as expected. See http://jsfiddle.net/sQnd9/7/
In your own code, you presumably would not encapsulate these function names into their own scope, and it would work as expected (but note again that you should make the changes #appclay pointed out).
Also, you probably shouldn't be doing it this way anyway. You should attach the event handlers in the javascript block.
You're missing the quotes on the img src attribute in the second one
You're also referencing the first function in both examples, so the second function never gets called... Try changing:
<div><a id="imageDivLink2" href="javascript:toggle1('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>
to
<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/arrow_open.png" /></a>Example2</div>
Also, I don't know why you have semicolons in your img tags, they shouldn't be there.