I'm using Materialize and for some reason the side-nav on small screen sizes doesn't close after the user clicks on a link. Test site is https://www.renteria.me
That is happening because the link is on the same page. You are going to have to trigger the link to close after a user clicks on it.
One way you can do it is trigger a javascript function like this (everytime someone clicks the link):
Add this in the link after href and class:
onclick="myFunction()"
at this at the bottom of the page:
function myFunction() {
var x = document.getElementById("sidenav");
x.style.display = "none";
}
Without testing this I am not 100% sure it is fully functional but this should at least get you started on the right path
The sidenav doesn't close as the client is not redirected to a new page. You need to call the close method of the sidenav as a user clicks on a anchor link in the sidenav:
instance.close();
A full example would be as follows:
var elem = $('.sidenav');
var instance = M.Sidenav.getInstance(elem);
$('.sidenav a').click(function() {
instance.close();
});
Related
I made a site with Bootstrap which contains two pages:
index.html
impressum.html
I want to use page jumps inside index.html and access those page jumps from the impressum aswell. This works fine but as soon as I click on a page jump from the impressum.html it stays in the URL and won't go away.
You could use a little of JavaScript like this:
function clearHash(){
var uri = window.location.toString();
if (uri.indexOf("#") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("#"));
window.history.replaceState({}, document.title, clean_uri);
}
}
And then trigger the Function on the scroll event:
$(window).scroll(function(){
clearHash();
});
(I'm assuming that you are using JQuery because of the Bootstrap)
I am new to coding and I would like to make a button that increment the count by 1 when a user clicks on it. I also would like to know how can I restrict it to be clicked only once. It is similar to the facebook like button but I want to create my custom button that would do the same thing but will just be shown in my website.
Here is the thing, using jQuery. The HTML part would be as under
<button>Click Me</button>
The jQuery code, that would be added to the <script> tag in <head> section.
var click = "1"; // set the variable
$('button').click(function () { // click on button
$(this).text('Clicked ' + click + ' times'); // write the variable value in it
click ++; // increment the variable
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/jRXBr/4/ (For testing; as per Pippin's suggestion)
To disable it, use
$('button').click(function () { // click on button
$(this).prop('disabled', true); // set its disabled property to true
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/jRXBr/1/ (For testing)
You can test the codes, using the fiddles that I have created, and you will understand how they work! :)
I know there are more efficient ways at doing this but I have my reasons for doing it this way. I have a modal popup window. I would like for this window to pop up as soon as the visitor loads the page. As of right now the window is reached and opened by clicking a link that takes them to index.php#login_form.
"#login_form" being what I would like to add the URL on page load. Then they can chose to exit it once it has initially loaded with the popup.
Now is there a way to do this more efficiently with out having to change my css or code very much?
Thanks!
The hash in url can be accessed through window.location.hash in javascript. You can judge this in body onload event.
To answer your question I have created a fiddle, that takes your example and solves what you are looking for. http://jsfiddle.net/sgaurav/xA4vG/
Basically what this code is doing is, selects the id of click you want to simulate and then creates a mouse event for click as per answer given here How do I simulate user clicking a link in JQuery?
$.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE
}
});
}
Now this code is used onload event of body to fake a click on the link that you are doing manually till now using
jQuery(document).load(
jQuery('#join_pop').simulateClick()
);
This in turn loads popup as soon as page opens up. You can change id in last code to the login form if you want and that will start showing up on page load instead of sign up.
One easy way is to load the page directly with the hashtag login_form:
http://www.script-tutorials.com/demos/222/index.html#login_form
Or if you want to be more "precise" you can use jquery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<!--Place this at the end of the body tag.-->
<script>
$(function(){
window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url
})
</script>
You can use jquery to show the modal when the window is loaded:
Try this code and you'll understand:
$(function(){
alert("Done loading");
})
You'll add the code to show the modal instead of the alert function. If the modal is shown or hidden with css, you can easily add a css class to an element with:
$(".element").addClass("showModal);
Or remove a class with:
$(".element").removeClass("hideModal");
Be sure to have the jquery library imported. I hope this answers your question.
(Question1, question2 and question3 looks how to force users open link in new tab)
But in my situation I visit some sites regularly and they have links like this:
<a href='javascript:window.open("/view.php?id=1234","_self")'>Link name</a>
This type of link makes me impossible to open link in new tab with a mouse click. Every time I see these links, I duplicate the tab in Chrome and click link inside the cloned tab. And go back to original tab and continue to surf. Is it possible to open these links in new tab with a chrome extension, js code or something?
You can try one of the links here: http://bit.ly/12dUk4V
. . The problem is that these links can be kind of "about:blank" because they are not specified in the href attribute normally, so it breaks your expected behavior when using ctrl+click, middle click or something alike. Sometimes sites links to "javascript:" pseudo-protocol, sometimes the link is for "#" with a "onclick" trigger... It depends on the situation.
. . For this specific case it's easy enough to write a user script that will rewrite these kind of links, if you're willing to use something like Tampermonkey:
// ==UserScript==
// #name SelfLinks Fixer
// #namespace http://dnun.es./
// #version 0.1
// #description This script rewrites "window.open(..., '_self')" links so that you can click them as you wish.
// #match http://libgen.info/*
// #copyright 2013, http://dnun.es.
// ==/UserScript==
var tRegExp = '^javascript: *'+
'(window\\.)?open\\('+
' *(([\'"])([^\\3]+)\\3) *,'+
' *[\'"]_self[\'"] *'+
'\\) *;? *$';
var fixLinksCheck = new RegExp(tRegExp);
var as = document.getElementsByTagName('a'), i = 0, n = as.length, a;
for (;i<n;i++) { a = as[i];
if (fixLinksCheck.test(a.href)) { //damn you _self link!
a.href = a.href.replace(fixLinksCheck, '$4');
}
}
. . This code "fixes" only the "_self" links by changing them to normal links. You can then click them with middle button, holding ctrl/shift or whatever. It also leave the "_blank" or "_top" links untouched.
Yes, it is possible. All you need is to inject a simple line of JavaScript code in every page. I had done it before in a Firefox extension.
You just need to override window.open method:
var open_= window.open;
window.open = function(url, name, opts) {
if (name === '_self') { name = '_blank'; }
open_(url, '_blank', opts);
};
Complete code on JsFiddle: http://jsfiddle.net/dp4Uz/
I have a html page A and a link in the page which opens up page B in a new window. How to reload the page A on clicking and opening this link ?
EDIT:
I should have been more clear. Page B opens in a new window and not as a popup. The hyperlink in question has its target attribute set to _blank. Taking a clue from the answers that I got (Thanks guys !), I tried setting onclick = "window.location.reload()" and it works perfectly fine.
However I have a problem. In fact another question altogether. How to make sure that the reload of page A waits until the page opened in the new window (page B) loads ?
Something like this:
open page b
The simplest way would be to do
link
If I remember correctly that should open the window and then since the return has not been suppresed will reload load the page.
I am not exactly sure if this is what you want based on your wording, but if you want to reload the opening window from a link in the popup try
self.opener.location.href = self.opener.location.href;
Edit, based on your new comments just use the code above in the body onload of the new window
<body onload="self.opener.location.href = self.opener.location.href;">
You can use setTimeout() to delay the reload.
Try this:
<script type="text/javascript">
function openPage(elem) {
function reloadCurrentPage() {
location.reload();
}
var page = window.open(elem.href, '_blank');
page.onload = function() {
reloadCurrentPage();
}
if (/MSIE/.test(navigator.userAgent)) { // fix for IE
var timer = setInterval(function() {
if (page.document.readyState == 'complete') {
clearInterval(timer);
reloadCurrentPage();
}
}, 100);
}
}
</script>
<p>second.html</p>