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)
Related
I have a banner at the top of my main page, and this banner gets a link to another page on the website.
exemple:
click here
This far, everything is working well
This link is defined in the database and may also relate another website (that's why I don't use the traditional twig: "{{ path('road') }}" here).
My problem is when I want to reference a specific section of the page:
click here
On click on the anchor, nothing happens, instead of requesting the new URI into my browser to load the new page.
If I directly request this URI with my browser, it loads my page correctly at the good section
So I don't know if it's possible to link to a specific section of another page with this method, and if it's possible, why does it don't work? Is it a Symfony problem? twig problem? server-side problem?
thanks for trying to help! So the link was generated successfully on the page, but i've just figured out that a litlle innocent piece of code, set in the main layer by an other developer was making my trouble:
$("#whatBonClick a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
...
}
So I just had my self little piece of code to fix this problem:
$("#whatBonClick a").on('click', function(event) {
let requestedHref = event.currentTarget.getAttribute('href').split('#')[0]
let baseHref = window.location.href.split('#')[0]
if ((requestedHref.length === 0 || baseHref === requestedHref) && this.hash !== "") {
event.preventDefault();
var hash = this.hash;
...
}
And now everything is working perfectly!
ps: (requestedHref.length === 0 || baseHref === requestedHref) is here to also trigger an anchor like *
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();
});
I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
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.
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>