I am having huge problems with the jquery mobile pack, it broke my entire page by making links go to ajax and showing the loading div etc. I tried fixing them all and I somehow managed it with tons of excess code (I don't know what part exactly hid the loading part and which part undid the ajax).
Basically JQuery mobile made a mess of my page, and all I need is the swipe event, I found the github repository of jquery mobile (Here), but I honestly have no idea which parts to take so I can use the swipe event.
I know people want code, but there is no problem in my code here, JQuery mobile simply wants to open all links in ajax, and because I am using bootstrap and I don't use JQuery mobile for anything else but swipes, I won't be pasting anything.
If anyone can tell me which parts I need to take/modify to make it work that would be awesome.
I tried by only copying the events/touch.js but it didn't work.
If you want to navigate page without using ajax then you should add tag rel=external
Or data-ajax="false"
you can find more information for Jquery mobile HERE
EDITED
I have Another solution but I pesonally not prefer but I also having same issue before so I tried this solution
$(document).ready(function(){
$("a").click(function (){
window.top.location = $(this).attr("href");
return false;
});
});
Try this I hope its work for you too..
this function will force change document location when user click on any Hyperlink
Related
I am using the animate.css animations found here. And I am trying to use the window.onbeforeunload functionality in JavaScript. It works on Firefox, but I can't get it to work with chrome. Is there a more compatible way to do this. My code so far is imbedded in the html file just so I can figure this out, but the accomplishments id is for an aside and the class "animated fadeOutLeft" is used to call the animation, which works. I just want it to wait until the page is going to another internal link before it does that.
MY CODE
<script>
window.onbeforeunload = loadOut;
function loadOut () {
document.getElementById('accomplishments').className
document.getElementById('accomplishments').className + 'animated fadeOutLeft';
}
</script>
Now I am open to using JavaScript, JQuery, SASS, LESS, CSS, and/or any other method. The desired outcome is to get the animation to occur when a person clicks a site internal link. The goal is to make this look more like a app than a webpage.
I had some problems with chrome page transition too, and decided to use the plugin smoothState.js . Maybe this could help. An example here.
I'm a complete beginner in the development side of things and would greatly appreciate any help.
I have the following code that refreshes an entire page when the browser is resized:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.
Again, thank you in advance for any help.
Use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
And consider using classes instead of IDs if you have multiple iFrames.
I am having issues with the Facebook social widget and I was hoping this would fix it. Your code was helpful (a good start).
That said, it did not work.
I will post a solution if I find one. Facebook really needs to update their widget. It really is problematic with responsive sites (mobile devices). Considering they created React code, it really is not very well written.
jQuery seems a better solution since I did not have an id to target) but the problem is deeper within the iframe.
// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
$('.fb iframe')[0].contentDocument.location.reload(true);
});
//--- other ways to reload iframes---
//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);
//reload all iFrames
$('iframe').each(function() {
this.contentWindow.location.reload(true);
});
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));
Update...
I found these two well-written pages on the subject. Hopefully, it works.
How to make the Facebook Page Plugin fully responsive
Making The Facebook Page Plugin Responsive
UPDATE
The code above is nice, but they did not have it ready to rock and roll. The showed examples for their site and I almost got it working, but there is still a bug in my code.
so...
This is totally cheating, but I was looking at the source code and opened the iframe location from Facebook and it actually worked (it seems allowed). So far it seems to work with other profiles too (so long as you grant permission first).
I just hardcoded the iframe vs using their JavaScript code. It also works 1000x times better/faster this way and it is already responsive. It is nuts I had spent so much time with trying to fix Facebook's code. Using a straight URL link in the iframe loads way faster (geezzz).
Here is an example of what I used for the final URL (I cleaned up the unneeded parameters.
https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500
Again, keep in mind for this to work, you need to create a social box at Facebook first, so that you can grant permission. I tried to do it with my personal username and since I have never created one before, it did not work. Again, this is theory, but that makes sense.My actual site is using another client and I also tested other clients. It seems to work fine.
No promises it will work on a live site. It is possible Facbook blocks users that do not use it via the script, but we will see. I am guessing Facebook may use scripts in the code to check for location source, so this way may fail over time (don't know yet). Also, it is possible I am missing a needed key that Facebook genarates from the script thatI failed to notice (or removed). I was careful when I cleaned it up, and I did not want to include more than needed. We will see.
Anyways, try your own tests via the source code please. I need to work on other more important stuff, and this works and seems to be a simple very effective solution. I will have more time later if it fails. The client wont know and again, it is faster and seem to work better.
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
ONE MORE UPDATE.
It seems to be working, but I still need to send a refresh to the URL in the paramaters for the width. Also, note the maxium width for the social widget is 500px (so if you have a need for one bigger, it wont go more unless you use some kind of transform in CSS).
Here is the final code.
Funny about all this, I am back full circle. I am using some of the code we talked about above and some new code I figured out and wrote.
:)
Also noteworthy, I noticed the StackOverflow console is giving me an error.
Please ignore it. The error has something to do with the iframe reference calling Facebook which StackOverflow does not like. As far as I can tell, there is no error.
If I am wrong, let me know.
// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
$('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
I created a mobile site in html and jquery, but it is not loading properly in Chrome (or on an iphone). There is no backend to the site - all changes to content would happen right through editing the html. Inside of my html, I made no specific reference to ajax. And, each page links through "#pageid. The problem is that as I navigate the site, various pages do not display correctly unless I hit "refresh." URL is mobile.shorelinelake.com. I am VERY new to this, so please be patient with a newbie :) Thanks for any help!
http://mobile.shorelinelake.com (if you click through to "Lake" and then "Sailing," or "Cafe" to "Menu," you can see the problem - the page jumps after loading, cuts off the header, places content below the footer, or will entirely hide jquery elements...)
One thing I noticed right away is that your using an old version of Jquery and Jquery Mobile. There have been alot of improvements since the alpha that you are using. Also you are linking to a few files that aren't there. Phonegap.js and ajax-loader.gif for some reason are not found. In my console I see 196 warnings that I believe are all related to you using old versions.
Also you have 31 html errors. One example is here
line 88:
<a href="tel:16509657474" div data-role="button" data-theme="c" class="ui-btn-text">
You have alot of stranded </p> tags. Most of them are in the menu page. Fixing these errors is necessary to troubleshoot your problem. Try running your document through an html5 validator to find these mistakes.
I also recommend breaking this into smaller pieces. Here is my reasoning:
Easier to maintain and edit.
Keep the dom size reasonable. Jquery will remove the old pages from the dom keeping it very manageable.
Faster page loading resulting in a better user experience. Your user will probably not be going to each page. Only load what they need to see.
Bandwidth could be costing your user extra money on a mobile device.
I can't seem to get the scrollTo jQuery plugin to work within my Facebook app. I'm using it to move the window, as I have a form that needs to grow vertically as it is filled out. My code works fine normally, but not in the Facebook environment.
Can anyone explain to me why this doesn't work and if there are generally any special considerations that need to be taken when attempting to move the browser "window" within an iframe?
If there is an alternate solution to the problem that bypasses the use of scrollTo, I'm open to that as well. Thanks!
try this
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/
I think that you will have to integrate your plugin with FB.Canvas.setSize
Iam working on a website and I dont have any clue why the tabs doesnt work when I upload the website. Because when I view the website normal it does work perfectly.
By the way: The tabs are working with a jquery script.
This is the website URL: http://bmvisuals.poshh.nl/
Greetings.
Edit: I mean some of the tabs doesnt appear.
Your About me tab does not show up because your server is case sensitive.
Aboutme.jpg != Aboutme.JPG
You should check out CSS Sprites. There is a flicker when you hover over a tab (the first time) because the browser has to load the hover image. With CSS Sprites an image map is used and all the images are loaded at once so the hover is seamless.
As an aside, your site does not scroll vertically. When my window is smaller than your site, the bottom gets cut off and there is no way for me to see it.
Firstly, nice site. Secondly your tabs are totally borked for me. I am using Linux Ubuntu and Firefox 3. Not sure about the fix though. Just thought I would mention it.
Using Firebug, I see some resources give a 404 error:
http://bmvisuals.poshh.nl/Scripts/Lightbox/images/lightbox-ico-loading.gif
http://bmvisuals.poshh.nl/Scripts/Images/PhotoGallery/PhotoGalleryContainerBackground.png
http://bmvisuals.poshh.nl/Images/Tabs/Aboutme.jpg
http://bmvisuals.poshh.nl/Images/Tabs/HomeActive.png
On a side note, the page doesn't work if javascript is disabled. I would suggest using the noscript tag to show a message saying javascript is required. The other option is to make the page work without javascript.