Flexslider issue - large blue flash appearing seconds after page load - javascript

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

Related

Delay in sidebar animation

I do not know if I can link to the theme that has the problem that I
want to solve. If it is not allowed, please tell me to delete the
question
I'm using this theme:
here
And as you can see, whenever the cursor is on the sidebar, it expands. How can I make the sidebar only get bigger when the cursor is on the sidebar for at least 2 seconds? That a delay occurs before the animation.
Is there any part in the javascripts used by the theme where I can define this delay?
A bit of CSS will do it.
To delay only the opening:
.sidebar-visible .icon-thumbnail,
.sidebar-visible .page-sidebar,
body.sidebar-visible .page-sidebar .sidebar-header .sidebar-header-controls {
transition-delay: 2s;
}
To delay both opening and closing:
.icon-thumbnail,
.page-sidebar,
.page-sidebar .sidebar-header .sidebar-header-controls,
body.sidebar-visible .page-sidebar .sidebar-header .sidebar-header-controls {
transition-delay: 2s;
}
Note this CSS has to be loaded after theme's to work properly.
You can do so using setTimeout.
When the user hovers the sidebar, start a timeout, at the end of the timeout, check if they are still hovering the sidebar. If so, call the function to pop out the menu.
Try use jquery
.mouseout();
for example:
$("p").mouseout(function(){
$("p").delay(5000).hide(1000);
});

Google plus button creating horizontal scrollbar

I had no problems adding a Facebook/Twitter sharing buttons but right now Google+ is driving me crazy, WHEREVER i put this code on my page (using Bootstrap grid), i get a 2-3 pixels on the right creating an horizontal scrollbar:
<div class="g-plus" data-action="share" data-align="left" data-annotation="none"></div>
Plus Script code at the bottom of my page:
<script src="https://apis.google.com/js/platform.js" async defer>{lang: 'fr'}</script>
Any idea how to fix it? I've tried to put my div in another div with fixed width and stuff like that but no effect, the script is replacing the div and forcing all css regardless my attempts ... i have no idea what is replacing the original div and how to work on it.
I'm a bit lost here, help welcome, thanks.
I had a similar problem and this worked for me:
iframe[id^="oauth2relay"]{
display: none!important;
}
Taken from this tutorial: https://www.youtube.com/watch?v=4vYfnZ_XB8M
Try inspect the button and find out which element has the scrollbar and add this CSS on it.
overflow: visible;
this solved my problem
iframe[id^="oauth2relay"] { position: fixed !important; }
G+ button adds an iframe.

IE8 - Parallax Content Slider autoplay issue

Is there an option to hide arrows when mouse is not over pictures in IE8? I spend a lot of time trying to do this but nothing that I've tried works, please help me
In style.css and style2.css of the Parallax Content Slider plugin, look for this rule:
da-slider:hover .da-arrows span {
opacity: 1;
}
Adding an IE8-specific rule that overrides it will do the trick.

hover effects works strange over ajax loaded content

here it's the website: http://www.webkunst.comeze.com/test/
If you click on the left on artworks, it loads via ajax the page content (the items that appear on the right). The problem I have is that when I hover over the items, it does some kind of strange behavior, for example if I hover over the 4 to 9 items, it shows the hidden text but over the first three items, it's really strange.
This is how I do the effects:
To show the text, this is on my main js:
$(function(){
$(document).on("mouseover",".item",function(){
$(this).find(".art_title").fadeIn(200);
});
$(document).on("mouseleave",".item",function(){
$(this).find(".art_title").fadeOut(200);
});
});
To do the black transparent hover effect i'm using this tutorial :
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Which uses css with .item .mask
and this is my markup:
What i'm doing wrong, why is doing that behavior?
I have to add that the effects works nice when the page it's not loaded via ajax.
Give your .item elements position:relative css.
Your absolute .art_title elements are aligning to the top of the page (instead of to the top of the .item

Jquery slider boxes

Not sure if this is a javascript issue or can be solved with CSS.
Im using an image with a text overlay slider but seem to having some issues with where the slider starts on page load. This is the live example, I would like the slider to be hidden on load and appear from below on rollover.
http://www.warface.co.uk/clients/detail-shoppe/directors
Many thanks
You can just add the initial top value to your CSS, like this:
.boxcaption{
top: 240px; /* add this! */
float: left;
....
}
This should give you the initial effect you want, and on hover it'll slide up on the first hover.
Just include this line which sets the inital css so that the two .cover divs are "hidden"
$('.boxgrid.captionfull .cover').css('top', 240);
like this
...
$(document).ready(function(){
$('.boxgrid.captionfull .cover').css('top', 240);
//Full Caption Sliding (Hidden to Visible)
...

Categories