I've been encountering some problems with icon appearance
on my project, I have a multi-page html which i can only go with the attribute rel="external" (only way move to a multi-page html).
The problem is that whenever I click the link with the rel="external", the page loads without the icon pictures, instead, there are some empty circles which supposed to contain the icons.
this problem continues to occur throughout the other pages which shown after that rel="external" link.
Note that before i click the rel="external" link, the icons work perfectly fine..
What can i do?
The usage of rel="external" causes a full page refresh, so the target HTML page should include in its header tag all the JS and CSS required for proper appearance and functioning.
Could you check whether the jQM JS and CSS files are included in the target HTML files?
I hope this helps.
Related
I have a site where I am using the jQuery scrollTo.js script to navigate back and forth within the main page of the site.
http://new-had.herrmanneasyeditdemo.com
The anchor links in the main nav work fine, however if you try to go to a page directly it takes you to the wrong anchor.
Click on this link: http://new-had.herrmanneasyeditdemo.com/#services
You will see that it does not take you directly to the services section. It actually takes you to the bottom of the "All in a Day’s Work" section.
Any ideas how to solve this problem?
I'm editing a website and I can't get it to work properly. I'm using a responsive menu to go between pages (stays in the same page but changes out the page elements). The code for it is here.
Now I'm trying to include a link in the text of the page (as opposed to just in the menu)
Here is the code for that plus the menu.
The link won't work at all. What am I doing wrong?
This is an issue I ran into before and I am still unsure as to why it happens.
The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html
When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.
My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.
So basically 2 things:
How can I fix the screen flashing and displaying blank (unless refreshed)
or how can I have the web app with no toolbar and not open the browser every time user clicks buttons?
Thank You
Edit: Here is the code for index.html and servers.html
index.html - http://pastebin.com/Qh5s7QRp
servers.html - http://pastebin.com/Exv2MJrS
In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.
So, you should have this instead:
Select server
You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".
Check the online doc for more information about rel="external" at http://jquerymobile.com/test/docs/pages/page-links.html :
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Hope this helps.
I've just noticed that javascript elements aren't working correctly on the website. They are working, however, they only work on one page, and not site-wide.
http://www.radonsystems.net
Javascript elements, such as menu hovering, work on that page. Additionally, so does the jQuery fancybox [click on live chat].
No go to http://www.radonsystems.net/business/profile.2, notice that the menu hover and live chat fancybox doesn't work.
Any ideas?
Ok, looks like removing a script breaks it up. Have to split up the javascript in the header.
If you visit here: http://www.egyptevakantie.nl/dahab, click on the "andere plaatsen" tab, and then click on an image it brings up a magnified image, courtesy of the jQuery lightbox plug-in.
However, if you do the same here http://www.egyptevakantie.nl/dahab?rhys=yes (essentially the same site except for a couple of stylesheets and one or two minor html changes, none of which are in close proximity to the images) the lightbox fails. Instead of overlaying the content the lightbox is appended to the bottom of the page, where it is also displayed weirdly.
So far in debugging I've managed to work out that the plug-in still calculates the correct left and top values for where to place the lightbox, but by the time the dhtml is generated the top value has changed completely.
Does anyone have any idea why this is happening?
I think you are missing the jquery lightbox stylesheet file.
in the first page there is a reference to this css file:
/css/jquery.lightbox-0.5.css
but on the second link there is no reference to this file.
this css file is included in the jQuery lightbox download located here:
http://leandrovieira.com/projects/jquery/lightbox/
If image is appended at bottom page, for sure postion:absolute is not set.