I am using Flexslider (the older version 1.0 with jquery 1.4.8 support) on the following test page: http://www.showstyle.lu/service/startv2/
As you can see the slider is implemented on the top left and bottom right images (in the upper part of the content). When I test this offline through dreamweaver there are no stutter effects or lag effects but in chrome/firefox/opera the fade effect begins but then rushes into the next slide in a quite awkward fashion.
It doesn't look smooth, in IE it doesn't fade at all but that's ok, it's IE afterall (rip IE)
I looked through Stackoverflow and plenty pages on google people mention that it is a float related issue across Firefox mainly and not many occurences in Chrome.
I looked through my sliders and inspected them & unticked various classes in the css to see if it would impact the fluidity of the slider but no luck so far so I can't really pinpoint the code that is interfering with the slider.
Any experience dealing with this?
Thanks in advance!
I'm not sure this will help, but in your style.css you have this bit of code for slider transition:
* {
-moz-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
transition: opacity .25s ease-in-out; */
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity 3s ease-in-out; */
}
By removing the bottom 3 properties I was able to get a much smoother transition on your slider (did this by inspecting the element and editing CSS). Therefore, if this section of your CSS was just this:
* {
-moz-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
I think you'll get the smoother transition you're looking for. (This was done in Chrome, and have not tested other browsers).
Related
ok here's the problem, I'm using the stickyjs plugin that comes bundled with the premium wordpress theme. I decided to make a mobilephone image stick when it reaches the viewport top and all is working except that it gets unstuck while scrolling then moves back to its fixed position again and sometimes it flickers.
Here's the website --> http://majic.explaininja.com/
the problem occurs in chrome and safari but not in firefox
thanks!!
When it switches from relative to static, it's using a CSS transition to go from 0px to 80px (from the top). To fix the issue, remove the transition:
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
...from #majic-process #mobile-phone.
I created a wordpress website using the theme Photo from wpexplorer. Everything looks great in Firefox and Explorer, but when viewed in Chrome, the website navigation disappears (sometimes). Sometimes it loads just fine. But upon reload, the navigation disappears. How can I fix this problem for viewing the website in Chrome. http://testhouseforgovernor.com
This is a known bug for Chrome. Its become most prominent within Chrome 32 and there are still some issues within Chrome 33.
Read more HERE
There is one suggested fix out there:
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
It just tells Chrome to re-load the font's opacity which is where the problem lies.
Details from previous SA question found HERE
We are using a very simple CSS to create a flyout window:
<style type="text/css">
#flyout_window {
position:absolute;
top:85px;
left:10px;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
margin-left: -450px;
}
#flyout_window:hover{margin-left: 0px;}
</style>
You can see what it looks like here: http://xeeme.com/axels
It works just fine and is heavily used. Now, since this resides on the client, how can we track how often the flyout was used and record usage on the server?
Some Ajax maybe? Any suggestion what worked for you in such a situation?
We are using Coldfusion9
Thanks a lot
Since the action is occurring on the browser-side, but you want to keep a record of it on the server-side, you must tell the browser to fire a certain page on your server when the user hovers over your target area.
So Ajax is the most sensible solution here.
As for the page that's going to track the events on your server, you can either build your own tracking system or use external analytics platforms such as Mixpanel (http://mixpanel.com).
By the way, the code you've posted is CSS, not JavaScript.
Ok so I am applying a parallax/ken burns effect on an image but I am not convinced the method I am using to do this is that good. It works well on webkit browsers, but is not very smooth on firefox and does not work at all in IE
It's pretty simple I have a background image in a div and on window load I apply a class called pan that changes the background position.
Would anyone have any ideas for a way of achieving this effect that would be SMOOTH and pan nicely.
Here is the site http://dev.touch-akl.com/xmas/
#banner{
background-size: 100%;
background-attachment: fixed;
background-repeat:no-repeat;
background-position:0 0;
padding-top:35.15625%;
-o-transition-duration: 10s;
-ms-transition-duration: 10s;
-moz-transition-duration: 10s;
-webkit-transition-duration: 10s;
}
At one point I even had a small scale on the .pan class that looked great in chrome but was even worse on firefox
#banner.pan{
background-position:0 160%;
}
here is the free plugin for the ken burn effect you can download it
here is the demo
Im designing a Wordpress based site for a client and was wondering if it is possible to have the pages load then open/close from the center like the iPad?
The site will essentially look like an iPad with icons inside of it that lead to the other wordpress pages. Is this effect possible?
Thanks
I would definitely advise using css transitions otherwise it will be incredibly slow.
Just include some CSS and toggle the class.
.app{
width:100%;height:100%;position:absolute;
-webkit-transform: scale(.0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
.app.opened{
-webkit-transform: scale(1);
}
Example: http://jsfiddle.net/z4bP7/
Try this: http://flowplayer.org/tools/demos/overlay/apple.html