Refreshing div or load text without refreshing whole page - html

I want to reload my text about every 5 seconds, so that my users see that they have new mail... My code looks like this:
If C_Mess "0" Then <span class="message-count"> C_Mess </ span> Else 0 End If
Can anyone help me to reload this every 5 seconds or something? Javacript / jQuery or whatever.
I want to refresh <span class="message-count"> C_Mess </ span>.
Very grateful for answers.

<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function(){
$('#responsecontainer').fadeOut("slow").load('response.php').fadeIn("slow");
}, 5000);
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>

I would place the following inside of a setTimeout function:
$(".message-count").hide().html('the new message count').fadeIn('fast');

Related

Open a new page onclick on a div element

I don't know if it's possible but I'm trying to open a page by clicking on an HTML element. I detail below.
I have a web page in HTML with a source code from a third party tool (a code with products for affiliate purchases). So when the user clicks on one of the products in this code he is redirected to the third party merchant. Let's imagine the code as follows:
<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div>
<!-- my page content -->
</body>
What I would like is that if the user clicks on a product, my site opens a page too, with a text like "Were you able to find your products? We would be interested in your feedback".
That's how I tried it but without success :
<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<a href ="comments.html" target="_blank">
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div></a>
<!-- my page content -->
</body>
If it's what im thinking the easiest way to do that is just by using javascript, example below.
// If you want to redirect user without opening a new tab, use this
// window.location.href="https://example.com";
// But if you want to open a new tab, use this
// window.open("https://www.example.com", "_blank");
function noNewTab() {
window.location.href="https://example.com";
}
function newTab() {
window.open("https://www.example.com", "_blank");
}
function localFile() {
// First we will need to get the url of your webpage
let currentUrl = window.location.origin;
// To what file redirect?
let redirectFile = "test.html";
// And redirect. We will need to add / before the file path
window.location.href = currentUrl + "/" + redirectFile;
}
<div onclick="noNewTab()">
<p> Example product. Click on me! (No new tab) </p>
</div>
<div onclick="newTab()">
<p> Example product. Click on me! (New tab) </p>
</div>
<div onclick="localFile()">
<p> Example product. Click on me! (Change file, not url) </p>
</div>
With new tab it depends on browser if it allows to show it. On the modern browsers there is popout asking for access
A possible approach is to use target="_blank" along with a click handler, like
Visit W3Schools
If you need to trigger this programmatically, then you can:
window.open(yoururl);
//Your further code...
I think that you should try to use span instead of div tag or maybe a p tag
<a href ="comments.html" target="_blank">
<span>
< HERE IS THE PARTNER CODE >
</span>
</a>

Avoid refresh current page while it's loading when clicking a link

I think i am going crazy with this... there should be something that i am missing.
I have a html page that prints a lot of links in sequences... like this:
link1
link2
link3
...
The issue is that for some strange reasons when i click a link, the current page refresh while it's loading the content... and it's terribile because It needs to reload again all the links...
I have tried also this:
link1
but still whenever I click the current page it refreshes (while it is still loading) starting again from zero
I am using chrome latest version on win 10
Any clues? What else could i do to avoid refreshing the current page ?
The only woraround i found is to intercept the closing with the message box:
<script type="text/javascript">
window.onbeforeunload = function() {
return false;
}
</script>
use preventDefault() method
function openBlankPage(event,href) {
event.preventDefault();
alert('Opening the link')
window.open(href,'_blank');
}
<!DOCTYPE html>
<html>
<body>
<a href="#" onclick="openBlankPage(event,'https://www.google.hu/?gws_rd=ssl');">
Go to google.com not refresh</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
</body>
</html>

Refresh site - if no activity

I am having a touch screen with some very basic html pages. But if there is no activity for maybe 5 minutes, it should reload the main page again. So if I the main index.html page where there are links to siteb.html and sitec.html - it should after few minutes without activity load main.html again, even if standing on sitec.html
So it is not just a refresh of the site, but a load of the main page if there is no activity
Is there any scipt for this or an example I can try and test ?
<!DOCTYPE html>
<html>
<body>
<input type="text">
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
You can use following code also which includes time interval that means after 300 seconds page will be refreshed.
setInterval(function() {
window.location.reload();
}, 300000);

how to cancel refresh set by meta tag in html

I have used <meta http-equiv="refresh" content="10;url=https://www.test.com /> but i have to cancel it if
<button>Finsh</button> finish button is clicked.But this code refreshes in every 10 sec i am using the tool where javascript is also not supported.Can i cancel the time which i setted using meta tag..??
Use JavaScript to refresh the page every ten seconds in the first place.
<script>
timerID = setInterval(function() {location.reload();},10000);
</script>
<body>
<button id="button" onclick="clearInterval(timerID);">
Stop refreshing
</button>
</body>
Have a look here.
Hope this helps! :)

opening different html files from jquery tabs

I have been trying to use jquery tabs to launch html pages(within the same page) but somehow failing at it repeatedly. Seems like a simple enough thing, but in all my attempts either the tabs stop working or the page doesn't open.
Here's what I am trying to achieve - my index.html page with multiple tabs(say a,b,c). i have the individual pages a.html, b.html and c.html written and want them to be opened in the same page(below the tabs) such that the tabs are omnipresent. What would be the easiest way to get this working? I have tried simply calling the html pages or even using iframes, but nothing seems to work. Also, when I tried using iframes, the frame wasn't using the full height of the page available to it, but only say 20% of it(in latest firefox).
I know this is probably too trivial a question and might have been caused by some silly mistake at my end, but I have literally spent more than a week in trying to get this to work and am,now, at my wit's end!
Any help would be much appreciated!
Thanks
{ edited the post to add relevant code snippets}
<body>
...
<div id="navigation" class="menu">
<ul class="tabNavigation">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div>
<!--tab contents -->
<div class="panes">
<div id="A">A Content<p> tab A content</p>
<iframe src="a.html"></iframe></div>
<div id="B">B Content <p> tab B content</p>
<iframe src="b.html"></iframe></div>
<div id="C">C Content<p> tab C content</p>
<iframe src="c.html"></iframe></div>
</div>
</div>
<!-- JS to activate the tabs -->
<script>
$(function()
{
var tabContainers = $('div.tabs > div');
$('div.tabNavigation ul.tabs a').click(function()
{
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
</body>
{Edited with specific code}
You could simply put the tabs on every page. The pages will reload but the tabs will be in the same place.
If the reload bothers you you're going to have to call the content of the html pages using javascript.
This script will call the html out of the pages and put the html into the panes of the divs with corresponding letters. This should serve what you are trying to achieve with iframes but without the iframes of course.
<script type="text/javascript">
$(document).ready(function() {
$.get("a.html", function(data){
$(#A).append(data);
});
$.get("b.html", function(data){
$(#B).append(data);
});
$.get("c.html", function(data){
$(#C).append(data);
});
});
</script>