is there a simple way to reveal text within a webpage using a link without altering the web address or using an iframe? maybe with an 'onclick' function? im pretty new to new code so not sure where to start.. ive attached a picture of what exaclty im after, fairly simple. im already using an iframe as the main interface so another one would get messy in terms of a default menu. there must be a simple fix.. any help would be really appreciated.
thanks, Aaron
Put the text you want to hide until click inside hidden container, like this:
<div id="HiddenTextContainer" style="display: none;">
Hello, I will become visible when you click something else
</div>
Next step is add that JavaScript code to the page, for example inside the <head> section:
function ShowHiddenText() {
document.getElementById("HiddenTextContainer").style.display = "block";
}
And finally have such code:
<span onclick="ShowHiddenText();">click me to show hidden text</span>
Live test case.
Edit: in case you got more than one element to show, you can use the rel attribute:
<span rel="HiddenTextContainer2">click me to show second hidden text</span><br />
Then with pure JavaScript iterate over all elements with that attribute and assign their onclick programmatically:
window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
oToShow.style.display = "block";
};
}
}
};
When clicked, element with ID the same as the rel value will be displayed.
Updated fiddle.
Edit: to show it in one single container, first have such container:
<div id="HiddenTextContainer"></div>
No need to have it hidden since it's initially empty, then change the code to:
window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
document.getElementById("HiddenTextContainer").innerHTML = oToShow.innerHTML;
};
}
}
};
Instead of showing the related container, you copy its contents to the "main" container.
Updated jsFiddle.
You have 2 choices for this. The first is to preload everything on the page and then only set the visible property when you click the link. The second is to load it in using something like AJAX and then show it the same way as above.
To show these things look into JQuery: http://jquery.com/
A good tutorial for the second method is here: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
Related
I was playing with some html and thought I might come across something I can use for my website.
Well, while I was playing with html, I came across hiding html content and so I thought of a code that might do it. Here is my code.
<input type = "checkbox" id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").style.visibility = "hidden"
}
}
</script>
I was wondering if this was the most efficient way to do this, or if can take about the least amount of storage. If not, please help. Thank you.
You are using a checkbox in a wrong way here. We must work with for checked property instead
if(b =="on"){
document.getElementById("demo").style.visibility = "hidden"
}
b=="on" is a truthy string and is always true.
Also, best is to use display:none; instead of hidden.
document.getElementById("demo").style.display= "none";
FULL WORKING CODE: Only when the input is checked and we click on the the below div should disappear (This makes more sense in this example). Try this
<input type = "checkbox" id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on");
console.log(b);
if(b.checked){
document.getElementById("demo").style.display = "none";
}
}
</script>
Well, it really depends on the output your going for. With the code you have, then all that will happen is the element will become transparent. Unfortunately, this also means that the other elements on your page will act like its still their, because it is, you just changed the opacity to 0.
An alternative that would completely remove the element is:
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").remove()
}
}
The above will completely delete the element from your page. Further docs here:https://www.w3schools.com/jsref/met_element_remove.asp
Alternatively again, you could change the display to none. This would combine the above two options, both making it disappear and making it so that other elements will not react to its placement. So unlike the remove() method, this will keep the <p> in your hard code, but make it visually impossible to route out:
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").style.display = "none"
}
}
This last one if probably the most "efficient" as it keeps the element in your code and also stops other elements from interacting with it spacially.
I tried to combine both of your solutions, and here's how it goes. It works beyond expectations of mine
<input type = "checkbox" id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on");
console.log(b);
if(b.checked){
document.getElementById("demo").style.visibility = "hidden";
}
else{
document.getElementById("demo").style.visibility = "visible"
}
}
</script>
I have asked kind of a similar question before : how to toggle using multiple buttons and pass info to the output JQuery
It was answered well, but this time I am using a different approach in the code thus a new question.
I am trying to toggle info and append a div using three different buttons.
Here is The code https://jsfiddle.net/YulePale/nruew82j/40/
JavaScript
document.getElementById("brazil").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();
function AppendFunction() {
var para = document.createElement("p");
var homeTeam = document.getElementById("brazil").value
para.innerHTML = 'This is the national team of ' + `${homeTeam}` + ':'
<br> <input type="text" value="${homeTeam}" id="myInput"><button
onclick="myFunction()">Copy text</button>';
var element = document.getElementById("gugu");
element.appendChild(para)
}
})
document.getElementById("draw").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();
function AppendFunction() {
var para = document.createElement("p");
var homeTeam = document.getElementById("draw").value
para.innerHTML = 'This two teams have played each other 4 times ' +
`${homeTeam}` + ':' <br> <input type="text" value="${homeTeam}" id="myInput">
<button onclick="myFunction()">Copy text</button>';
var element = document.getElementById("gugu");
element.appendChild(para)
}
})
document.getElementById("russia").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();
function AppendFunction() {
var para = document.createElement("p");
var homeTeam = document.getElementById("russia").value
para.innerHTML = 'This is the national team of ' + `${homeTeam}` + ':'
<br> <input type="text" value="${homeTeam}" id="myInput"><button
onclick="myFunction()">Copy text</button>';
var element = document.getElementById("gugu");
element.appendChild(para)
}
})
PS: I don't know why the javascript code is not working in fiddle yet it is working on my computer.
If you look at the code I am basically trying to toggle a div with info on various teams. If it is Brazil the div comes with info on Brazil if Russia, info on Russia.
The problem with my current code is that it keep on appending the divs instead of
toggling them. How can I toggle them? like this: https://jsfiddle.net/YulePale/7jkuoc93/
Instead of having them append another div each time I click a different button?
............................................................................................
PS: EDIT & UPDATE:
#Twisty, I forked the code from your fiddle and tried to implement it when working with more than one row of buttons. The code works well but I was unable to append a different and separate element for each row each time I click on a button on that row.
I tried putting the appended element as a class:
Here is the code: https://jsfiddle.net/YulePale/a9L1nqvm/34/
Also tried putting it as an id:
Here is the code: https://jsfiddle.net/YulePale/a9L1nqvm/38/
How can I put it in a way that each row appends it's own separate element and I would also like users to be able to copy using the copy button without the element disappearing. How do I make it in such a way that the element only disappears only when I click outside the respective:
<div class="col.buttonCol " id="buttons-div">
and also disappears when I click another row of buttons?
Also in your answer you said you would have used text boxes instead of appending this way. I checked the modals out and they all appear on the browser like alerts can you please point me to a resource that show how you can use a modal that works like an appending element instead of one that acts as an alert? Thank you.
Here is the link to the modals I saw: https://getbootstrap.com/docs/4.0/components/modal/
I converted all your JavaScript to jQuery since you posted this in the jquery-ui, I am assuming you want to work with jQuery.
I will often organize my functions first and then the interactive actions.
JavaScript
$(function() {
function myFunction() {
//Do Stuff
}
function AppendFunction(id) {
var para = $("<p>");
var home = $("#" + id).val();
para.append("This is the national team of " + home + ":", $("<br>"), $("<input>", {
type: "text",
value: home,
id: "myInput"
}), $("<button>").html("Copy Text").click(myFunction));
$("#gugu").html(para);
}
function emptyOnDocumentClick(event) {
var action = $(".triggered").length;
$(".triggered").removeClass("triggered");
return !action;
}
$("#brazil, #russia").on('click', function(e) {
if ($(this).hasClass("triggered")) {
return;
}
$(this).addClass("triggered");
var myId = $(this).attr("id");
AppendFunction(myId);
});
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$("#gugu").html("");
}
});
});
Working Example: https://jsfiddle.net/Twisty/nruew82j/91/
The basic concept here is a dialog and if it were me, I would use a dialog box either from BootStrap or jQuery UI. You're not doing that, so we're create the content and append it to a specific <div>. Then, like in your previous question, you just detect a click on the document and decide what that will do. In this case, I emptied the content of the <div> that we'd previously appended content to.
Hope that helps.
I link to a page like page.html#id so the page is automatically focused at this id.
How do i do this in CSS that only the div with the id from the URL gets for example a yellow background?
Thanks
Use the :target pseudo selector.
http://css-tricks.com/on-target/
Get the hash value and style it using JavaScript:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //the variable without hash sign.
document.getElementById(hash).style.background = "yellow";
}
Edit - didn't know about :target. That answer is better!
You could listen for the hashchange event, detect the current hash and apply a class to the corresponding element:
window.addEventListener('hashchange', function() {
// Remove .active from any currently active elements
var active = document.getElementsByClassName('active');
for(var i = 0; i < active.length; ++i) {
active[i].classList.remove('active');
}
var id = window.location.hash.substr(1);
document.getElementById(id).classList.add('active');
});
If you need to support browsers that do not support classList, there are plenty of alternatives.
JSFiddle
I'm trying to get the selected HTML from a contenteditable div in a particular situation. First of all let me tell you that i read the questions from Get selected element's outer HTML and Get Selected HTML in browser via Javascript.
and that i am using Redactor http://imperavi.com/redactor/
So I tried the following function to retrieve the selected HTML:
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
Now the situation is this: i have something like an italic text, then i select it and i modify the DOM to make it look bolded too.
When i select the text and make it bolded, the HTML i get looks like this:
<span class="bold"></span><strong><span class="bold" data-redactor="verified" data-redactor-inlineMethods="">fermentum</span><span></span></strong>
I click somewhere else within the page. The text is deselected.
When i select the text for the second time and i make it italic i get the following:
fermentum
As you can see, the second time i don't get the elements which allow me to determine that it is bolded.
So, it DOESN'T WORK on Internet Explorer 10.
It WORKS on Firefox.
It DOESN'T WORK on Chrome.
Is there an effective way to get the selected HTML from a contenteditable div other than this one?
What is the best way to remove all tabindex attributes from html elements? GWt seems to put this attribute even it is not set anywhere in the code. It sets tabindex to -1.
I have the code below as working but it is tedious because I have to search every element according to its tag name and that slows the page loading. Any other suggestions? I'd prefer the solution not use javascript, as I am new to it.
NodeList<Element> input = this.getElement().getElementsByTagName("input");
if(input.getLength()>0)
{
for(int i=0; i<=input.getLength(); i++)
{
input.getItem(i).removeAttribute("tabIndex");
}
}
NodeList<Element> div = this.getElement().getElementsByTagName("div");
if(div.getLength()>0)
{
for(int i=0; i<=div.getLength(); i++)
{
div.getItem(i).removeAttribute("tabIndex");
}
}
I'm not entirely sure what you are asking then. You want to remove the tab index attribute. You either:
set the tabindex attribute to -1 manually in the HTML.
use the code you already have.
or use the simplified JQuery version in the other thread.
Perhaps I have misunderstood what you are trying to achieve?
EDIT
Okay perhaps this:
$(document).ready(function(){
$('input').removeAttr("tabindex");
});
This should remove it rather than set it to -1... hopefully. Sorry if I've misunderstood again!
JQuery removeAttr Link
Use querySelectorAll function which Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors.
function removeTagAttibute( attributeName ){
var allTags = '*';
var specificTags = ['ARTICLE', 'INPUT'];
var allelems = document.querySelectorAll( specificTags );
for(i = 0, j = 0; i < allelems.length; i++) {
allelems[i].removeAttribute( attributeName );
}
}
removeTagAttibute( 'tabindex' );
I finally figured it out.
I tried Javascirpt/jquery but they couldn't remove tabindexes because the page was not fully rendered yet - my panels are placed programmatically after window.load. What I did is make use of the RootPanel.class of gwt (which was being used already, but I didn't know).
The task: to get rid of all tabindex with -1 value, add type="tex/javascript" for all script tags, type="text/css" for style tags and out an alt to all img tags. These are all for the sake of html validation.
I am not sure this is the best way, it sure does add up to slow loading, but client is insisting that I do it. So here it is:
RootPanel mainPanel = RootPanel.get(Test_ROOT_PANEL_ID);
Widget widget = (Widget) getEntryView();
mainPanel.add((widget));
// Enable the view disable the loading view. There should always be
// the loading panel to disable.
Element mainPanelelement = DOM.getElementById(Test_ROOT_PANEL_ID);
Element loadingMessage = DOM.getElementById(LOADING_MESSAGE);
Element parent = loadingMessage.getParentElement();
if(parent!=null)
{
//i had to use prev sibling because it is the only way that I know of to access the body //tag that contains the scripts that are being generated by GWT ex.bigdecimal.js
Element body = parent.getPreviousSibling().getParentElement();
if(body!=null)
{
NodeList<Element> elms = body.getElementsByTagName("*");
if(elms.getLength()>0)
{
Element element=null;
for(int i=0; i<=elms.getLength(); i++)
{
if(elms.getItem(i)!=null)
{
element = elms.getItem(i);
if(element.getTagName().compareToIgnoreCase("script")==0)
element.setAttribute("type", "text/javascript");
else if(element.getTagName().compareToIgnoreCase("style")==0)
element.setAttribute("type", "text/css");
else if(element.getTagName().compareToIgnoreCase("img")==0)
{
if(element.getAttribute("alt")=="")
element.setAttribute("alt", element.getAttribute("title")!=" " ? element.getTitle() : " " );
}
else
{
if(element.getTabIndex()<=0)
element.removeAttribute("tabindex");
}
}
}
}
}
}
DOM.setStyleAttribute((com.google.gwt.user.client.Element) loadingMessage, "display", "none");
DOM.setStyleAttribute((com.google.gwt.user.client.Element) mainPanelelement, "display", "inline");
// Change cursor back to default.
RootPanel.getBodyElement().getStyle().setProperty("cursor", "default");
}