I have a requirement that when click on a button the page need to reload.after reload i need to show the hidden div.
below is my requirement which describe my problem?
1.In my html code consist of some text along with button and in this page only by default i am hiding some text div
2.when click on the button i am reloading the page .after reload the page i want show hidden div
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test2").css("visibility","hidden");
alert("reloaded");
$("#p1").click(function(){
setTimeout(function(e){
alert("inside time out");
$("#p2").css("visibility","visible");
},3000);
location.reload();
});
});
</script>
</head>
<body>
<div id="myDiv">
<p id="p1">This is sample text</p>
</div>
<div id="test2">
<p id="p2">this is invisible text</p>
</div>
</body>
</html>
Thanks in advance
You can set a localStorage item when a user clicks the button, and on page load look for the localStorage item and conditionally show the hidden div.
var $hidden = $('.hidden');
localStorage.getItem('show') && $hidden.show();
$('button').on('click',function() {
localStorage.setItem('show',true);
window.location.reload(false);
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">hidden</div>
<button>click</button>
First, if your requirement is to have a button be clicked, you'll need a button, not a paragraph.
Next, instead of the visibility property (which still allocates space on the page for the element even when it is not shown), use display (which does not).
Most importantly, if you reload the document, then any local variables you have will be lost. You need to persist some kind of "flag" between page loads. This can be done in a variety of ways (cookies, sessionStorage, localStorage, server-side), but localStorage is probably the simplest.
This code won't actually run, here in the Stack Overflow snippet environment due to sandboxing, but you can see a working version of it here.
See other comments inline:
$(document).ready(function(){
// Check to see if this is a page reload or not by seeing if a value was placed
// into localStorage from a previous page load
if(localStorage.getItem("loadedEarlier")){
// Page has already loaded earlier
$("#test2").css("display","block");
}
$("#btn").click(function(){
location.reload();
});
// Place a value into localStorage
localStorage.setItem("loadedEarlier", "yes")
});
/* No need for JavaScript to initially hide the element which
can cause the usre to see it momentarially before the JS runs.
Set its default display to none instead. */
#test2 { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click to Reload</button>
<div id="test2"><p id="p2">this is invisible text</p></div>
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!
Looking to be able to put multiple distinct pages into one html page similar to the code shown below that was posted in this post:
Multiple distinct pages in one HTML file
However, I would like to have a fixed header above the pages to allow for navigation.
For example, the header has 4 links (Link1,Link2,etc.) that a user can choose from. If a user where to click on "Link2", then only Link2 will appear beneath and the other pages will remain hidden.
Let me know, Thanks!
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
<!DOCTYPE html>
<html>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
You could play with the IDs only, but if you get many pages that starts to get a little tedious. I suggest using a class to do the hiding. Also, if you want there to be a common header for the pages, you just need to build it from HTML elements and then display the page links there and not within the page content.
I made an alternative suggestion where I added a 'page' class to all the page DIVs. Then what you can do is hide all the DIVs with the "page" class and show the one you want with an ID. This too is not a very flexible system, you can't easily do a dynamic amount of pages or a dynamic first page but it is a place to start. Here's my example:
This is in JSFiddle http://jsfiddle.net/H4dbJ/ but here's the code directly:
// show the given page, hide the rest
function show(elementID) {
// find the requested page and alert if it's not found
const ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
// get all pages, loop through them and hide them
const pages = document.getElementsByClassName('page');
for (let i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// then show the requested page
ele.style.display = 'block';
}
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
<p>
Show page
<span onclick="show('Page1');">1</span>,
<span onclick="show('Page2');">2</span>,
<span onclick="show('Page3');">3</span>.
</p>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
Further development ideas include: a next/prev button that uses Page1 Page2...PageN the page number as a variable, loops through all the pages an shows the last one. Or shows the first one. After that, a Next/Previous button that keeps track of the current page in a variable and then goes to the next one.
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.
I have a webpage which has content layout like 1,2,3 in markup (and also for no-js
) while visually I want it to be 2,3,1.
I'm using Javascript (jQuery) to swap their position. But the problem is, the Javascript code is executed after page loads and therefore the swap process can be obviously seen.
The only solution (and a bad one) I can think of now is to hide the whole body first and restore body when the swap is done.
$(function() {
$("#div2, #div3").insertBefore("#div1");
$("body").css({display: "block"});
});
<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>
Anyone got a better idea?
Try executing JavaScript instantly after those three elements:
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>
Of course, it's a pollution of your HTML, but, in any case, it's better than hiding the whole body element (the page will flicker in some old browsers).
I am trying to make sections of page collapsible. No plan to use accordion, but simple hide/show to save screen space. See the sample code below. The first link has to click twice to make the section hide, and the second one works fine. Neglect this issue, if you can suggest a better way to do it.. In this example, div1 is in open position and div2 hidden initially.
thanks,
bsr.
<!doctype html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<a class="toggle" href="#">Hide</a>
<div class="toggle">
<p>First div</p>
</div>
<a class="toggle" href="#">Show</a>
<div class="toggle" style="display: none">
<p>Second div</p>
</div>
<script type="text/javascript">
jQuery().ready(function() {
$("a.toggle").toggle(
function() {
$(this).text("Hide");
$(this).next("div.toggle").show();
},
function() {
$(this).text("Show");
$(this).next("div.toggle").hide();
}
);
});
</script>
</body>
</html>
I would use the toggle() function, as it's not only used to bind toggling events, it also toggles visibility is called without any parameters:
jQuery().ready(function() {
$("a.toggle").click(function(){
var $div = $(this).next("div.toggle");
$div.toggle();
if($div.is(':visible'))
$(this).text('Hide');
else
$(this).text('Show');
});
});
The problem with your code is that you're showing/hiding the elements regardless of their initial state. No matter what you do, if you bind events using toggle(func, func), the first function will always be called first.
The reason the first one needs to be clicked twice is because it starts with the div showing. When you click on it the first time, because of the nature of the toggle event, jQuery thinks that you're trying to show it. But it's already showing. So none of the changes take effect.
You can solve this by having everything start out hidden. But if that's not an option, then you'll have to do away with the toggle event listeners and just listen for clicks:
$('a.toggle').click(function () {
var $this = $(this);
if ($this.text() === 'Show') {
$this.text('Hide').next('div.toggle').show();
} else {
$this.text('Show').next('div.toggle').hide();
}
});