This question already has answers here:
Button that refreshes the page on click
(18 answers)
Closed 3 years ago.
I want to refresh my website after clicking on a specific area (container)
Any ideas?
THANKS!
You can use Location.reload() API interface (https://developer.mozilla.org/ru/docs/Web/API/Location/reload)
So the answer could look as follows:
document.querySelector('you-area-selector-here').addEventListener((click) => {
window.location.reload(true);
})
true flag is required to be sure the page was reloaded from server, not from cache.
It is not a good practice to mix js with HTML.
I would do it this way:
let refreshPage = document.querySelector('#div1').addEventListener('click', => {
location.reload();
})
note: you must give id or class to the element you are trying to select in this function.
There are other way of doing it i.e = document.querySelectorAll, getElementById, getElementByClassName, getElementByTagName.
Related
This question already has answers here:
React Native property values in quotes vs braces
(1 answer)
What do curly braces mean in JSX (React)?
(4 answers)
Closed 8 months ago.
<button className='btn' onClick={() => setValue(value - 1)}>
<form className='form' onSubmit={handleSubmit}>
I hope I don't get people riled up asking this. I tried to google and cannot find the answer. Why for some attributes in HTML uses 'xxx', eg classname='btn' and why some attributes uses {}, eg onSubmit={xxx}.
In the above case, the handleSubmit is a externally define function. Does {} imply a variable, that's all ? But I also saw some codes similar to this onSubmit={() => xxxx} which is an inline function and not an external variable.
Currently, I just memorise it as it come. Thanks very much !
This question already has an answer here:
Javascript URL Redirection based on a text box
(1 answer)
Closed 5 years ago.
m pretty terrible at web design and i just wanted to know how to make a text box that will redirect after putting in a certain phrase and pressing enter.
Thanks for help
This should work:
<form><input id="myInput" onblur="myFunction()" /></form>
<script>
function myFunction() {
if(document.getElementById('myInput').value == 'test') {
window.location.href='http://www.google.com';
}
}
</script>
See: https://codepen.io/anon/pen/gxLGgE
This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 7 years ago.
Is it possible to add an internal link (bookmark/jumpto) on a <button>
<button class="btn span3" id="save_progress" name="save_progress" value="1">Save Changes</button>
You can link to any element you like. Just give the element an id and set the URL to #that_id.
If you want to link from something, use a real link. It is what links are designed for. They do it really easily (and natively, and in a screen reader and search engine friendly fashion). If you want to link from something that looks like a button, then use a link and apply CSS to make it look like a button.
If you really, really want to use a button (hint: don't). Then you can bind JavaScript to it:
document.querySelector('#my_button').addEventListener('click', function (event) {
location = "#my_id";
});
Yes it is possible. Internal links don't have to point to an anchor tag.
you could use JavaScript to do something like that onclick="document.location+='#goToAnchor';return false;"
Doesn't seem like the best practice though.
This question already has answers here:
How can I open multiple links using a single anchor tag
(2 answers)
Closed 7 years ago.
I want to know that Can I set more than one links on single word in html?
I've experimented like:
<a href="link2 target="_blank>Open</a>
Open
This is only example idea what I want to do ; of-course either of above is not working.
So, How can I set more than one links to different target on single word?
Is it possible with html or <a> or something else.
No, you can't.
If you are open for javascript you could create a function that takes urls and have the function call window.open but that is likely to get blocked by pop-up blockers.
/* this function tries to open the
arguments supplied to it*/
function opensesame() {
for(var i=0; i < arguments.length; i++) {
$('#log').append($('<div></div>').text('trying to open '+ arguments[i]));
window.open(arguments[i]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- you can have a local link in href -->
<a href="#"
onclick="opensesame('http://www.google.com','http://stackoverflow.com');">
open sesame
</a>
<div id="log">
</div>
From the FAQ on the window.open documentation:
How can I tell when my window was blocked by a popup blocker?
With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of window.open(): it will be null if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.
I leave it as an exercise for the reader to extend this to take target settings as well.
No, you can't.
It's possible to have two different links in different parts of the same word, but not on the same.
uniform
You need Javascript for such thing.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a way to determine if a <select> dropdown menu is open?
My customer would like me to display some simple instructions once the user interacts with our <select> element in such a way as to cause the <option> list to drop down (or "drop up", I suppose, since some browsers open upwards if there is not much room beneath the <select> box). And then the instructions should disappear again once the user has either made a new selection and thus caused the option list to disappear, or if they simply close the option list without making a change.
I thought that I was fairly well-experienced with using both CSS/CSS3 selectors and jQuery events to make things like a <div> full of instructions appear and disappear, but for this case I am having trouble figuring out whether there is a way to tell when a <select> box is not merely “active” or “focused” — both of which can be true while the select box is still closed and not displaying its list of options — but actually open. None of the CSS pseudo-selectors or jQuery events that I have tested let me “see”, much less respond to, the state of the open-ness or closed-ness of the <select> box.
Does anyone know how I can set a trigger or write a CSS rule that depends on whether the options list is currently displayed?
If $('myID:focus') is not sufficient, I doubt, that there is another way.
something like
HTML
<select id="sselect">
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
</select>
<br><br>
<div id="ddiv"></div>
JS
$('#sselect')
.on('keyup', function() { $('#ddiv').show().text($(this).val()) })
.on('mouseenter', 'option', function() { $('#ddiv').show().text($(this).val()) })
.on('mouseleave', function() { $('#ddiv').hide() })
see it working here: http://jsfiddle.net/RASG/QfMGR/
tested with FF 15