I have 1 Issue with the megamenu on site link
screenshot
Sometimes the menu drop down shifts to right . This happens on both chrome and firefox .
It is not a regular issue it only happens sometimes.
what i assume it may be a css issue becouse when ever it happens and i inspect element with a chrome css extension ..automatically the box shifts to the correct place without refreshing
the megamenu code is attached
$sns_jq(function($){
var wrap = $('#sns_menu');
var container = $('#sns_menu .container');
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
$(window).resize(function(){
setTimeout(function(){
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
}, 200);
});
});
The theme is sns korion
I checked out your css. You are handling your visibility toggle with visibility and opacity. Pick one. In this particular case, I would pick opacity because of the transitions you are running.
Also, your transform css with scale is placing the dropdowns in a different place and using scale to place them in the right place by size. But, contradictory to this technique, you set the transition to none afterwards. This is all a back forth positioning that messes up with the display if the keyframes stop unexpectedly.
SO delete all your transitions in line 6599 in your theme-light-green.css and all your transitions and transforms in line 6462 same stylesheet.
Also remove the visibility in both lines and the opacity in 6599. (you already have it in 6462.
Good luck
Related
I was trying to change background-image while scrolling using only CSS3 but i failed. I need help how to do it on css3 only, not js.
I need to change background opacity of one image to zero and another to 1 having 5 breakpoints, while scrolling page. But i don't know how to process scrolling.
Will be thankful for help)
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');``
}
});
http://jsfiddle.net/pZrCM/
OK, so my problem is that I have a parallax website for a client and they would like a product description to fade-in when they scroll-down the parallax site. The problem I think I have is because the site is effectively one long page, the scripting is getting confused and fading the div in from "opacity:0" when the page is loaded. I have put a long fade-in on the div to understand what is happening and I have also made a rubbish box without proper formatting to test it. I have uploaded a temporary copy of the site (i'm working offline) to show what is happening.
http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images
Thank you for your help everyone!!! :-)
CSS
/* Hide any element */
.hideme {
Opacity:0;
}
HTML
<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>
SCRIPT
<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>
To check the bottom of the window, instead of using .scrollTop, try window.pageYOffset.
Plus I think you're making the JS work too hard - I would try to calculate the bottom_of_object outside the .scroll() function so that it's not calculating the position every time the user is scrolling.
And for simple fade in/out, I would just do a display:none, .fadeIn().
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
I have few pages that I show from my main page inside iframe.
I got a background image in the main page, when I click the button to change the page inside the frame the frame background color is becoming white somtimes until the page is visible.
I added background-color:transpert to the pages themselves and to the main page CSS.
I checked the site with FireFox and IE and it look fine (the background of the frame doesn't change) but with Chrome it somtimes rendering fine like I wanted it to be and other times the iframe background goes White.
Can i do anything that will fix that?
As this is browser behavior I doubt it can be really "fixed".
One workaround is to hide the frame while it's loading (only for Chrome) - here is the code:
var isChrome = (navigator.userAgent.indexOf("Chrome") >= 0);
function LoadFrame(url) {
var oFrame = document.getElementById("myframe");
if (isChrome) {
oFrame.style.visibility = "hidden";
oFrame.onload = function() {
oFrame.style.visibility = "visible";
};
}
oFrame.src = url;
}
Live test case. (Reloading same frame there but the concept is the same)
I used very similar attitude. This approach works only in case the page inside your iFrame is under your controll.
The change is that the page inside iframe finds the iframe in parent window and makes it visible again:
<iframe style="visibility: hidden;" id="iframe_id" src="my_page.html" />
// inside my_page.html:
window.onload = function() {
// make sure the parent iframe is visible
if (window.parent)
{
var nodeIframe = window.parent.document.getElementById(window.name);
if (nodeIframe)
{
nodeIframe.style.visibility = "visible";
}
}
};
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/