I've been having some issues with a flexslider on a Wordpress-built site. Basically, when the page loads and the sldier loads a large blue flash appears for a split second then disappears. You can see it in the link below:
http://www.jacksonvilletreebarbers.com/
I'm guessing the jquery isn't called correctly, or at the right time. But I could be wrong.
And help or input would be a great help! Thank you!
If you initiate FlexSlider with the fade animation after page load when images are visible, FlexSlider will set the opacity on the first image to 0 and then fade it in. This will cause a "flashing" which is quite ugly.
One possible solution which doesn't involve any javascript hacking.
Add a .loading class on your flexslider container, e.g. <div class="flexslider loading">.
Configure your flex init script by adding:
start: function(slider) { slider.removeClass('loading'); }
Add this to your CSS:
.flexslider.loading .slides > li:first-child { opacity: 1 !important; }
More about this problem: https://github.com/woothemes/FlexSlider/issues/848
Can someonehelp me to fix that dropdown menu that this site has neowin.net?
So far I have this; itbataljonen.com/test/ (Hover over "News")
What I can't figure out, is when i hover over for instance "News" -> "Apple", there should come some news with pictures, and they change if I hover over "Microsoft" and so on.
Could this be done via CSS or HTML?
To download the source files, just go to www.ITbataljonen.com/test and click Download Source in the navigation bar.
Can someone help me? :) (Sorry for my bad english..)
Working Fiddle
As you asked using css. Yes by using css it is possible to hide and show another div. You need to simply write hover event. This applies to "apple" and "microsoft" also.
Here is the css:
#a:hover + #b {
background: #ccc;
visibility: visible;
}
#b{
visibility: hidden;
}
This can be done using hover property in CSS.
Read this question to understand more.
And in your case, the images can be in a <ul id="news_images1"></ul> and you can set css hover property to animate this list of images. Remember, there are multiple ways to solve this issue. You can also checkout Jquery hover.
I have the District Theme and I really dislike the Portfolio Slider it has. I want to remove it so my Works show in a list instead of a slider.
I've tried the following css scripts but they dont work
/*Removing slideshow from portfolio and alignment*/
.single-portfolio .bxslider {
opacity: 1;
position:static;
}
.single-portfolio .bxslider li {
list-style-type:none;
margin:0;
}
I don't know how to remove the slider or where to find it. I want to keep it for other parts of the site but I don't want to use it on the portfolio and single-portfolio pages.
edit: Oh wait, did I misunderstood the problem? You don't want to hide the slider but change the slider items just to show as a list?
You're not trying to hide the slider with that css, it does what it says: sets opacity to 1 on a scale from 0 to 1 sot it's fully visible.
Set the slider instead to display: none
.single-portfolio .bxslider {
display: none;
}
Thou, I believe there's some setting where you could disable the usage of bxslider in portfolio page. But I don't know the theme so this will have to do.
I am coding up a page and i have a jquery slider on it called all in one slider. I have chosen to put a fixed nav at the top which is always visable during scrolling. problem is when i scroll past the slider the slider is above the nav.
I have tried positioning etc but it is not working and z-index:1000;
thanks!
try setting the z-index of the slider negative:
#slider {
z-index:-99;
}
set the z-index for nav positive. make sure that they are in the same div as well, otherwise it won't work
I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.
As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.
This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.
Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.
it needs to be called after the fade effect is completed (e.g. 500ms after etc.)
I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/
Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html
I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}
I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.