I need to attach multiple html pages using jquery-mobile. Due to other factors, I am not able to work with a single page navigation. Any method to reach it? Thank you.
EDIT: error comes when multiple navigation pages. If you set set rel="external", works properly but missing all transitions. I have no way to enable multiple page interaction + transitions working.
Related
Hay, I have problem with google cache. I want the homepage of my site in google cache will be shown correct and not broken, like the source. this is the source:
https://www.fnx.co.il.
the cahed page is here.
I googled it and I found answers to check if links are up-to-date, or to check reltive links. it is not the problem. even what is missing is font files. the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
is there way to prevent from google to add its elements to the page, or another solution that will make the cached page look good?
To start with, you have an error in your normal page that you would need to fix first:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
That means you are initialising fullPage.js multiple times and that's why scrolling down in a Macbook trackpad (or some other kinetic scrolling devices) will scroll more than one section at a time.
Make sure to fix that first.
the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
It doesn't seem to be the issue. The fullpage.js site is displayed almost correctly (besides the top margin issue) in Google cache
I would try to use the latest fullPage.js version (3.0.5) and then see if you still have the issue.
I have a basic web app that I would like to have a set of 5 views.
It is single page application where page one is a load screen / login. I want the user to only see this page. When the user clicks submit it will transition to the the next page, and only see that page.
I have two issues:
Everything that I want visible on the first page does not fit the screen.
I can scale the sizes (heights/widths) of buttons and imgs but this would only be subject to one type of phone. I am using bootstrap 3 to fix this.
What is the best way to structure this simple app?
I would use bootstrap to fix your view sizes, and AngularJS with UI.router using states for your application. They have good documentation at their site.
It sounds like you could also possibly use nested states
I've a big problem and apparently nobody seems to have encountered this problem yet.
I have been modifying my website which uses AngularJS to use views instead of charging the whole page everytime. Now I've made slight modifications to the css at the same time, but now I have a very strange difference (I'm using the same browser for the two displays, google chrome) between the two views.
I also included in the image jquery calls to show that the css font-related properties of the two images are the same. The 'h4' element that I test with jQuery is the middle one, "Titre", but the two other elements should also be displayed the same. Left view is whithout angularjs ng-view and right view is in the angularjs ng-view
Thanks for any help, I have to say that I have no idea about what might cause this behavior.
I am designing a web page for mobile devices. I know jquery is awesome but I dont want to use it. I want to achieve smooth page transitions like this http://jquerymobile.com/demos/1.0a4.1/ but without using jquery. How can I achieve that? There are web service being called between page transtitions, hence there will be delay. I want it to be as smooth as possible.
Face it: You're going to have to use JavaScript, and it'll be very tedious without using some framework or other. To get smooth page transitions, you have two options:
1) Run the site as a single page. That is what is used in the site you link to. The whole thing has no page transitions; it's all one page with some click events used to animate the content and load it dynamically with AJAH.
2) Run a multi page site, but using local storage. You would have a small number of pages, and cache the resources needed for them. The JavaScript would run instantly when the page was loaded, and draw a nice load screen while the ordinary content was loaded and displayed by AJAX.
Personally, I wouldn't be too concerned about page transitions; it's just how websites work. Don't be put off by jQuery either, because by the time you've written all this JavaScript you will be wanting it. Even for mobile sites, the size of the library is just about acceptably small (you can use a CDN-cached copy).
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.