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>
Related
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);
I currently have a div with some information in it. See the example below:
<div class="verstuurd" onclick="alert('clicked!');">
<div class="titel"><span>Title</span><img src="imageurl"/></div>
<div class="image"><img src="imageurl"/></div>
<div class="tekst"><p>some text</p></div>
<div class="hover">
VISIBLE TEXT
</div>
<div class="delen">
VISIBLE AFTER HOVER
</div>
</div>
</div>
The :hover function works perfectly and the "delen" part is shown and the "hover" part is hidden. I only got a problem on mobile devices. If I scroll down the page on a mobile device and I touch the div, the hover will be triggered.
The answer I am looking for is; how am I able to use :hover on PC's and some sort of click event on mobile devices? So that I have to click in order to change the content and a second click will trigger the onclick of the div.
As an example of my inspiration see the website.
If you hover an item it will show the heart icons. PC uses this with hover and mobile needs a click to be shown. Unfortunately I can't find the source code which triggers this.
Are you talking about, you want an onClick="theFunctionNameToBeCalled()" fired when a div is touched (specifically on a mobile device?)
if you want that, you can use
$( "#divIdToBeTouced" ).click(function() {
//do something with a function here
});
or you could use plain ol' JavaScript to do the task.
<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>
<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>
<script>
var i = 0;
function theFunctionToBeCalled(){
i++;
if(i == 2) {
//do what you wanted once the onClick event was fired
alert("i == 2");
//now make sure to reset the flag that was made so it will work next time
i = 0;
}
else {
//change the content
alert("i == 1");
}
//do something interesting here if you want to
}
</script>
</body>
</html>
paste that code on this page http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default? and you can try it out on a browser computer
and try it on a mobile device and it should work
I tested it
Now make the hover event also call this function and it'll cover both evens
Extra info:
I've heard arguments with two possible paths to go from here and some say one way is "dangerous", I'll list the sides below If you wanted to know...
cont'd
the other argument is there needs to be an event listener added instead of a direct function call
This seems more safe. I think because it can help hide the function call its self..? I'm not sure.
Hope this helps
I am used to using href="#" during development as placeholder links so that if you accidentally click on it, nothing happens and it will not jump the page around while testing the page i.e. you know exactly which is a placeholder and which is a broken link.
However, When baseurl is defined in the head, href="#" fetches the baseurl address instead of the current page and appends the # at the end. This causes placeholder links to load the index page always. Annoying.
<!doctype html>
<html>
<head>
<base href="http://localhost">
</head>
<body>
<p>placeholder # only</p>
<p>empty string</p>
</body>
</html>
Is there a way to get back the "placeholder" behavior other than specifying the full path in the <a>'s href?
href="javascript:void(0);"
try this, so onclick the page wont jump nor will it be refreshed
This might be more of a hack than anything but you could always just ignore clicks from anchor tags:
$('body').on('click', 'a[href="#"]', function(e) { e.preventDefault(); });
If you are currently in development I suggest removing your base tag.
It defines the behavior of all the anchor tags on that page. For more information :
http://www.w3schools.com/tags/tag_base.asp
do it with javascript:
function onClick(event) {
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
}
https://stackoverflow.com/a/48901013/4185912
I've been running into a problem with touch events and content in an iframe on mobile safari. I have a text input box inside the iframe that a user can type in. On the main page, outside the iframe, there's a container with a touchstart event listener. If you start typing in the input box, then scroll around the page triggering the touchstart event, you will then no longer be able to type in the input box. The cursor is still there and blinking, the keyboard is still displayed, keyup events continue to fire, but the characters simply don't show up in the input box.
Here are two stripped down files to display the problem:
test.html:
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div id="test" style="height:200px;"></div>
<iframe src="test2.html"></iframe>
<script type="text/javascript">
var test = document.getElementById('test');
test.addEventListener('touchstart', function(){ console.log('touchstart'); });
</script>
</body>
</html>
test2.html
<html>
<body>
<input id="input" type="text">
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('keyup', function(){ console.log('keyup'); });
</script>
</body>
</html>
If you remove (or comment out) the touchstart event listener, everything works just fine. I put some console.log statements in there just to show which events are firing and when.
I have found some discussion of similar problems (such as Touch events on parent document fire hover states in iframe in mobile safari. Is this a bug? Is there a workaround?), but haven't found anyone who's come up with an explanation or a workaround. Has anyone else run into this problem, and have you figured out a way to workaround it? It appears to be a mobile safari issue only, it works fine on android.
Can anyone shed some light to this situation: I have a link that opens in a modal, i add a link and a button that are set to go to the same url. If i click the link, the modal goes to the link, and shows the article properly. If i click the button, it shows the article embedded on the page.
Here's the url, click on newtest2
http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=category&id=1&Itemid=2
Here's the code
<head>
<script type="text/javascript">
function change_url(){
window.location.href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2"
}
</script>
next
</head>
<body>
<button onclick="location.href='http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2'">Next</button>
</body>
</html>
There is a apparent difference, being that the link calls window.location, while the button just sets location, but this is semantically the same.
That popup you got is created by JavaScript. So the link is just used for its url, but when you click it, a script gets executed that loads the content asynchronously and shows it in a popup.
This script does not affect the button (though it could). Find the script that does this and apply it to the button too.
A workaround could be:
<a href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2">
<button></button>
</a>
Edit: Although it's working, is not a recommended code, as HTML spec clearly says that using tag for item is invalid, so treat this ONLY as a workaround.
P.S. Why are you using <a></a> in section head?