At first I wanted to hide all the body and show only one image, but it seems that it's not possible since hiding the body with display:none would hide all of it's children. So I changed my code to just hiding the parameters I want to hide.
At Bottom line: I want to show the hidden content when I click on the content that is not hidden.
Here is my HTML Code
enter image description here
js code is
enter image description here
And finally css code is enter image description here
Even the code looks very simple but i'm struggling: when I click on the image, nothing happens.
I'm absolutely sorry if my question is not very well formulated, this is my first question on stackoverflow and I will be glad to make it more clear.
Thank in advance.
You have an error in JS, you have to use quotations marks.
... .style.display = "block";
<html>
<head>
<style>
p {
display: none;
}
</style>
</head>
<body>
<p>This is some random text</p>
<img id="click" src="" width="500px" height="500px">
<script>
var toggle = document.getElementById("click");
toggle.addEventListener("click", show);
function show() {
var p = document.getElementsByTagName("p")[0].style.display = "block";
}
</script>
</body>
</html>
Thank you all for your support!
I've actually found the answer. I was facing some problems with getElementsByTagName and getElementsByClassName since you actually had to use the for loop to display all of the elements. So I just used getElementById and used the "onclick" event in the HTML code.
Thanks!
Related
I am writing pages using python in Confluence that is using XHTML, and I want to have a new page contains a paragraph that is hidden or say truncated when people come to that page but it can be seen if people click on it.
please check the two pictures I attached in order to better illustrate what I want
You can use jquery to achieve this. Assuming you are using an icon to illustrate those 3 dots.
<html>
<style>#hidden_para{display:none;} /* Hide the paragraph*/</style>
<p>This is a non hidden paragraph</p>
<img id="icon" src="3dottedicon.png">
<!-- Add an id attib to the paragraph -->
<p id="hidden_para">This is a hidden paragraph</p>
</html>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$("#icon").click(function(){
$(this).hide(); //this keyword refers to the icon itself.
//Access the element with the ID hidden_para and override the CSS.
$("#hidden_para").show();
});
</script>
When the above code is executed it first hides the icon and then adds a style attribute to the element with the ID hidden_para as style="display:block;"(this overrides the CSS specified)
Hope this helps!
It is pretty simple. I just want to have a clickable word/button that will activate an image to appear into a div. What is the cleanest way to do this? thanks
Quickest way would be to add a blank image tag where you want the image to appear, and then use jquery to add/change the source
$('#button').click(function(){
$('#imgonclick').attr('src', 'http://example.com/myimage.jpg');
});
whhere #button is a button with class button, and #imgonclick is an img tag with class of imgonclick
Jquery is super easy, but if you have to stick to JavaScript you can try something like this:
<div id="image"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").src = "something.gif";
}
OR... if the div already has an image src property set, just show it.
<div id="image" src="something.gif" style="display: none;"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").style.display = "block";
}
I'm new to Javascript. With the code below, I'm interested in displaying three values. The first problem that I've encountered is the document.write won't work. What am I typing in wrong? The other problem is that I'd like to display
the text that the first_div contains on the screen in the browser window. I believe that all of the divs in the first_div will show the text 'value.' How do I get this to display?
<html>
<head>
</head>
<body>
<div class= 'first_div'>
<p>Content</p>
<div class='comment'></div>
<div class='comment'></div>
<div id='pagination'></div>
</div>
<script type='text/javascript'>
document.write("Hello");
jQuery(function() {
$('#pagination').addClass('comment');
$('.first_div.comment').text('value');
$(document.body).append('hello');
});
</script>
</body>
</html>
Currently .first_div.comment is looking for an element with both classes. You want an element .first_div with a child element .comment. To do this, use a space to select all descendants (not just children) of what was prior to the space.
Your line of code would then look like this: $('.first_div .comment').text('value');
Learn more about CSS selectors here (this will help you for other similar problems): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships
I am pretty new to JavaScript and hope someone can help me to find a solution for the following:
I have a div with some text in it and an onclick event.
How can I manage that when you click on the div it shows the text inside the div within a textarea and a button above it - similar to how you can edit your own comments on this page here ?
How it looks on default:
<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>
How it should look on click:
<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>
Many thanks for any help with this, Tim
Try this
function youAreLookingFor() {
var awesomeText = $(this).html();
var $form = $(this).parent();
$(this).remove();
var textArea = '<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">'+ awesomeText +'</textarea>'
$form.append(textArea);
}
If you mean to give a different myBtn and myArea name for each clickable link, then you should give the clickable div an id too and start from there to create the id for the textarea and the button.
There is another way out to make what you want i.e. to make editable div using an HTML property contententeditable=true. You may use the following syntax:
<div contenteditable=true>
contents here
</div>
This facilitates copy+paste image in the div as well as textual edits i.e applying fonts on the texts using keyboard shortcut etc.
Check this fiddle
If you want to use only javascript DOM elements , then
<html>
<head>
<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>
<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>
</body>
</html>
What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.