jquery plugin for page transition - jquery-plugins

I am writing a simple HTML5 application for iPad and I am looking for a simple jquery solution for page transition. I know you would recommend jQueryMobile but problem with that it uses ajax to loads next page in current page and then kicks off transition so css of the page that I m trying to load is getting disturbed see my question. I also tried this and this plugin was the thing that I was looking for but problem with this is that it is not working with iPad and also page flickers a lot while transition so I dropped this option. Another option I found is jQTouch but as far as I know jQTouch only works for transition effects to div, not sure how to use it for page transition.
What I want is that on click of Transition link in Transition index.html should get displayed with transition effects without flickering and css disturbance of index.html page.
Could someone please recommend me some plugins using which I can achieve page transitions without disturbing CSS while transitions.

Hopefully this works for you... the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)

Related

YouTube video in responsive iframe not showing up in Firefox

I am building a responsive website that has an embedded youtube video on it. The video is in a responsive iframe and works perfectly fine in all browsers except in Firefox. There it simply doesn't show up.
I tried savemode, adding html5 to the link, commenting all js and js-queries out. If I add the width and height in px it does show and works fine, but then it's not responsive.
I can make it show up by changing the height of the container into a percentage or vw-value. No matter what figure I add, it will always render the video double height and cutting off big parts of left and right sides. Also it will cut off more of the width when the viewport shrinks. When changing the container value to anything other than 0, the same happens in all other browsers.
Tried Firebug, but that doesn't even see the iframe.
Here is the code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 4vw;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>
web url:
https://www.marjanderksen.com
Have you tried to use FitVids.js?
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".embed-container").fitVids();
});
</script>
Link to download plugin: https://github.com/davatron5000/FitVids.js

Flexbox sticky footer not working in Safari or Chrome OSX

I have added a sticky footer to a SharePoint master page using the flexbox method, and it is working fine in all browsers on Windows, but does not work correctly for Safari or Chrome on OSX.
The HTML is roughly as follows:
<body>
<form>
<!--
a whole bunch of SharePoint stuff here that I can't mess with
-->
<div id="s4-workspace">
<div id="s4-bodyContainer"></div>
<div id="footer"></div>
</div>
</form>
</body>
And my initial CSS is this:
#s4-workspace {
display: flex;
flex-direction: column;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
}
Now after searching around a bit I found this question, and based on that I started playing around with all kinds of vendor prefixes, and I even realized that the way I was using the flexbox was maybe a little unorthodox. Instead of having the main content div #s4-bodyContainer grow to use extra space, I was getting the footer div to expand it's top margin up to fill any extra space, which I guess flexes the #s4-workspace to fill the viewport if necessary.
So then I tried adding
#s4-bodyContainer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
But that didn't help either (and actually started causing problems in IE on Windows, which had worked fine before).
The behavior that I'm trying to fix in Safari and Chrome on OSX is this:
When the page renders, it seems as though the footer calculates it's top margin based on the viewport. It is always initially sitting at the bottom of the window, as if it was the case that there was little content and it should push down to the bottom of the window. But this happens even if there is a lot of content flowing underneath it, and it really should have pushed down to below #s4-bodyContainer (out of the viewport). If I scroll the page, it just sits on the page exactly where it was initially drawn and remains covering whatever content was under it on the initial rendering.
What can I do about this? What secrets are out the for getting flexboxes working correctly on OSX?
Found the answer here.
Apparently (should I say unsurprisingly?) there are some bugs in the way certain browsers handle flexboxes.
I was able to get the behavior I wanted reliably across IE, Firefox and Chrome on Windows and Safari, Firefox and Chrome on OSX with the following:
#s4-workspace {
display: flex;
flex-direction: column;
}
#s4-bodyContainer {
flex: 1 0 auto;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
flex-shrink: 0;
}

Auto Image resize with broswer window using img max-width: 100% works in Chrome but not IE when parent div has position: absolute

I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}

Can't see footer on website and cannot scroll to see

I have a fixed footer on my site here: http://starprovisions.com/dev/bacchanalia.html On my 1360x768 screen I can only see the top of the footer and when I try to scroll it either does not scroll or if it does, the footer does not scroll with the whole site, staying below the content. Is there a way to fix this so that the whole webpage scrolls up and down so we can see the footer?
You have to set its position to relative, so it will be below your main content. This way it will allow you to scroll down
#footer {
height: 75px;
background:
white;
margin: auto;
position: relative; /*Added this*/
width: 100%;
}
And also for your html css, you should remove the
overflow-y: scroll;
If you dont want to constantly show the scrollbar on the side of the window.

DIV's not recognized in FF + Opera, Works in IE + Chrome

I've tried and tried so hard to overcome this problem the past few days as I just want to get this site launched above all now. I have been developing this for the last week or so and I have been using my specific preferred browser, Google Chrome. Yes, big mistake!
Anyway, here is the demo site which shows what I want near everything to look like (apologies for some things that are out of place, haven't quite finished yet!): http://www.weburton.co.uk/content/demo/
You see the social area? It displays properly in Chrome; exactly as I want it. In IE it displays the div areas, but there are some styling issues such as the text on the Twitter side.
However, the div areas are completely ignored in other browsers it seems; its a strange problem, I'll admit that. I have them encased in a div which has a background image (selenasocial) and then have the other divs floating. Here is the code (CSS):
#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none;
overflow:auto;}
.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 255;
border: none;
overflow:auto;}
.selenasocial img {
border: none;}
.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
And here is the HTML, I am using Widgets (and yes, they have been styled correctly in functions.php):
<!-- Selena Gomez Social Networks -->
<div class="selenasocial">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php endif;?>
</div>
I overcame the error in IE (as it was happening there, too) by copying the CSS above into a separate IE.css file. I just don't understand why two browsers which are leaps and bounds ahead of IE aren't reading from the main CSS file.
Any help would be HUGELY appreciated - I've been tearing my hair out about this for the past few days.
Thanks in advance!
There's (technically) nothing wrong with your code - the part you posted. You are setting both float properties to left, which I guess is not what you want, but that did not explain why the other properties were getting ignored.
I won't read your 4700-lines CSS file to find what is wrong with it but I will try to help you do it yourself.
The first thing I did was to try to hunt the CSS code you posted with firebug and, to my surprise, it was not there. The very last line of CSS firefug gave me was the 902th which was this:
.clearfix {
zoom: 1;
}
Actually, firebug did not show that zoom thing (the brackets were empty). So I went to the CSS file directly to find it out and, after wondering why would anyone use such non-standardized property, I checked the next lines to find there was a parentheses instead of a bracket in the 907th line.
After finding such error I proceeded to run a CSS validator on your CSS file and results were not very good. Fix those errors and Firefox will draw that properly.
Deciding whether IE and Chrome's capability of interpreting wrong CSS files is actually good or bad is not to be discussed here but learning how to find and correct your mistakes can help you get things to work with stricter browsers.

Resources