I'm using Web2py and using the "PLUGIN_JQMOBILE/LAYOUT.HTML" as the base layout file.
The problem is that when I click on a link, jquery-mobile takes me to the next page -- all fine here.
When I view the source for the page, I see that it still has <title> from the older page.
I caught the problem since I'm using lockerz(addToAny.com) and when users try to share the page on Facebook, the title was coming completely incorrect.
I used the FB developers debug page & saw the title shown.
I can add the og:title, etc, but this problem is biting me for Google+ as well.
Am I doing something incorrect or is that a side-effect of jquery-mobile.. ?
This is because of the Ajax loading by default in jQuery Mobile. You can avoid this problem by using data-ajax="false" in your links or by using a jQuery script to change the page title after loading.
Related
Explanation of issue:
Hi.
I'm developing a personal webpage using HTML and CSS. I have also incorporated Bootstrap and a number of its components to achieve responsiveness.
I'm using Locally linked Bootstrap file/folder (not the online CDN). I want to use Locally downloaded Bootstrap until I have finished development.
However, I'm having difficulty testing all the features of the site sufficiently, especially the carousel component which features multiple gallery photos, because it keeps refreshing on me and this is really disruptive.
In other words, while testing something or clicking through the photo gallery, before I go through a quarter of the entire photos in the gallery, the page will suddenly refresh itself, causing me to start my testing afresh and this never ends.
Question:
How can I disable auto-refresh on the site or at least to set it to a very large value, so it doesn't disrupt my work?
Thank you.
Answer:
I have finally figured out the solution.
While I was going through my HTML Code and reviewing the meta tags in the section of the code, I discovered that I had put a refresh value somewhere as one of the open graph meta tags. I had used a boilerplate code from somewhere which included a refresh rate of 30 seconds in the meta tag.
In essence, I had copied the boilerplate in addition with the meta tag and the refresh value along with others, while I was putting meta tags for the webpage.
I decided to comment out this piece of meta refresh tag and now, the web page is no longer refreshing automatically.
Below is the code:
<!-- END OF OPEN GRAPH SECTION -->
<!-- <meta http-equiv="refresh" content="30"> -->
Thank you.
I have this 2-page website which uses angularjs. I like to be able to load page 1 on a certain position by clicking a link on page 2.
Normally, without angular you would give a div an ID like <div id="test"> and put a link on page2 test
On my angular website I use duScroll library to create smooth scrolling.
As a concept I've created the following example website: http://jdenuijl.com/test/#chapter2
this link will open the correct location and smoothscrolls when clicking the links at the top of the page.
On my production website the following link https://escapist.nl/nl/#gallery gets rewritten to https://escapist.nl/nl/#!#gallery and it doesn't open on the correct position.
I've read a lot of questions on stackoverflow about $hashprefix, $locationProvider, $location but I don't see why it's working on my test site and not on my production site. I use some other angularjs functionalities on the production website but I can't find what is causing the rewrite.
What is causing the rewrite and the failure of the normal behaviour?
Thank you very much!
Aleksey Solovey put me in the right direction. I was using the angular-google-analytics module which I found out was loading ngRoute which caused the problem.
I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.
This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!
I have a code snippet that is installed on third party websites. I can't get into the details, but it loads HTML, CSS and JS onto the page through the use of a <script> tag.
Part of the code is a JS function that executes when this link is clicked:
?
If there are JS errors on the page that prevent the function from executing, clicking the link obviously just adds the hash to the URL and takes the user to the top of the page. This is the expected fallback behavior.
However, on one third party site with a multitude of JS errors, clicking the link removes everything after the top level domain, adds the hash, and directs to that page (the home page). For example, the link would take the user from:
http://www.example.com/2010/05/14/very-interesting-blog-post/
to
http://www.example.com/#
Notably, the issue occurs in Firefox and Chrome, but not IE9. I know it may be impossible to properly diagnose the issue without more detailed code, but I'm not at liberty to provide it. I'm just hoping to get some kind of reasonable explanation for this strange browser behavior.
If it helps at all, the site in question is a WordPress blog. Thanks in advance.
EDIT: This is apparently not caused by any JS on the site, because turning off JS and adding the link with the inspector produced the same behavior.
I had a similar error where clicking on any <a href="#"> causes a full page reload. I managed to solve this by removing the <base href="/"> tag from the <head> of the page. I couldn't find any informations on this (yet). I'll add more if I can find any additional info.
This problem happens when you use windows.onpopstate to handle back or forward buttons and load page using ajax. Try to solve your js code for handling history.