Please see this website I'm developing for a client:
http://tinyurl.com/ot8fljg
The top menu is a bootstrap3 navbar. I've modified it with a small piece of js code, to make the submenu show on hover instead of click, like so:
$(function() {
$('li.dropdown.hover').hover(
function(e) { $(this).addClass('open'); },
function(e) { $(this).removeClass('open'); }
);
});
However, it just won't show on IE9. I've been playing with IE's built-in developer tools for hours now, and I just can't seem to find the solution. Could anybody help me understand why it's only showing submenu borders on IE9?
check whether your ie9 is in compatible view mode or not. so try this code: <meta http-equiv="X-UA-Compatible" content="IE=edge">
Related
We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.
I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.
Skrollr Markup
data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"
CSS
.displaying {
display: block !important;
}
JS
var sk = skrollr.init({
forceHeight: false,
beforerender: function(data) {
$(".item").addClass('displaying');
},
render: function(data) {
$(".item").removeClass('displaying');
}
});
EDIT
I made a JSFiddle for it here or you can see it fullscreen for debugging here
Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.
I'm guessing that you need to do a refresh since I notice it works if I resize the browser.
Try this code:
setTimeout(function () {
skrollr.get().refresh();
}, 0);
You can change the timeout to 1000 if necessary to ensure everything loads.
I have a footer that appears when a user scrolls down on the bottom of the page, but for seem reason it doesn't appear to be working on mobile devices, particularly the ipad, and it seems finicky on there. Sometimes it works sometimes it doesn't and only when using the ipad vertically.
<script type="text/javascript">
var $window = jQuery(window);
var $document = jQuery(document);
var footer = jQuery('.footer');
footer.css({opacity: 0});
$window.on('scroll', function() {
if (($window.scrollTop() + $window.innerHeight()) == $document.height()) {
footer.stop(true).animate({opacity: 1}, 250);
}
else {
footer.stop(true).animate({opacity: 0}, 250);
}
});
</script>
Just fades in and out on the bottom of the page condition. I looked around and there seems to be several ways to go about doing this and I was wanting to know the most effective solution.
I thought I had found a jfiddle for a solution a while ago but can't seem to find that question anymore and it required me to dig quite a bit.
I'm not exactly sure all of the factors that go into mobile not being compatible with this solution I currently have, so it's hard for me to determine what needs adjusting. Thanks.
Actually figured out the issue is that it needs to be the exact document height if I'm using '==', in mobile devices the viewpoint doesn't trigger the script while moving or scrolling so I had t change the '==' to '>=' in my condition and then add height to my viewport.
if (($window.scrollTop() + $window.innerHeight()) >= $document.height())
And in my header viewport tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
And it works perfectly!
I have been working on this website since last week. It is a school project, and I can't figure out why part of it isn't working. When I scroll down, click on the menu button, leave the menu down, then scroll back up, the navbar keeps its height even though I take away the class that resized it. I have attempted to use Google Chrome's developer tools to see what is happening. It just shows the height property crossed out. I have no idea why it won't work, and I have looked for any reason in my code. I also tried it in Internet Explorer to see if chrome was just having problems with it for some reason. It did the same thing there causing me to assume the problem is in my code.
Here is a link to the website it is currently published on: http://www.dragonmath.net/rockets/
Html Code:
http://www.dragonmath.net/rockets/index.html
Javascript Code:
http://www.dragonmath.net/rockets/javascript/main.js
CSS Sheet 1:
http://www.dragonmath.net/rockets/styles/main.css
CSS Sheet 2:
http://www.dragonmath.net/rockets/styles/function.css
got problem!!
After scrolling back to top you didn't change height of nav element;after scroll back make it 40px again it may solve your problem.
if (flag !== 2 && $(window).scrollTop() === 0) {
//add this line
$nav.css({height:'40px'});
$nav.slideUp();
$nav.removeClass("dropDown");
$menu.stop(true,false).slideUp(800, function () {
$heading.css({'margin-left':'40px'})
});
$nav.stop(true,false).slideDown();
flag = 2;
}
I'm really stuck with this one and have no idea how to solve this, I use jQuery ~ usually without too many problems. But as I don't write JS I do get stuck :(
I've searched and searched for answers and tried out too many approaches and not getting anywhere... :( I bet I'm missing something very obvious or simple, hoping someone might be able to help...
ok - the problem:
I have a website for my webdesign course which shows the main nav in the left column. For the smallest screens (ie below 420px width) - I want to hide the menu, displaying a 'view menu' link instead which uses the jQuery toggle() function to show / hide the menu on demand.
Initially, I did this via a straight forward toggle alone - all fine - apart from the issue that the menu would remain hidden once it was shown and hidden once on a small screen. If the window is resized - it would remain hidden.
That was the problem I set out to solve, mentioning it here as I might be going down the wrong path entirely here ~ doubting whether I'm doing this in the right way :'(
Now - I am using JS to hide the 'view menu' link for all screens, only showing on screens smaller than 420px. I've added the resize() function as well to allow more dynamic behaviour.
Everything is working as intended for the showing and hiding of my menu - BUT....
The toggle link itself is set to display:block - when the window loads below 420px, it displays as intended: set to block (spanning full width for a nicely solid active link) with the text centred.
However, when I load the page at larger window size, then resize to below 420px width - the toggle link seems to become inline? Not at full width any longer, text appears to be left aligned as the element no longer is full width...?!
I've tried setting width in CSS, tried resetting with via resize() element, via assigning 100% width via JS....nothing is working - I'm sure I'm missing something....
I'd really appreciate any pointers or thoughts ~ feel like I'm missing something very basic here....
the website: webeyedea.info
here's my JS code, following the link to jQuery:
// check for window size size on page load and show relevant content only
$(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// check for window resize - show nav again for larger screens after hiding
$(window).resize(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// show menu (smallest screens)
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow', function() {
// Animation complete.
});
$('ul').addClass('view');
});
UPDATE: SEE JSFIDDLE
When you call .show() on an element it sets the display property to the previous value and if it does not exist I believe it takes the default browser value which may be inline in your case. Try setting it explicitly to block.
I'm not sure what is doing what here since I don't have a mobile to test it, but could you try to replace your hide/show with a css function that toggle between display:none and display:block ?
Like this :
$('#toggle-nav').css('display','none');
$('#toggle-nav').css('display','block');
ALMOST ! NOT SOLVED
one solution, thanks to Vlad Radulescu (on Forrst) ~ via this jsfiddle fork
$('a#toggle-nav').css('display','none');
// Show the menu if Window width is less than 420
$(window).resize(function() {
if ( $(window).width() > 420 ) {
$('#toggle-nav').css('display','none');
$('nav ul').show();
}
else {
$('#toggle-nav').css('display','block');
$('nav ul').hide();
}
});
// Slide the Menu on smaller screens
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow');
});
See my revised fiddle
http://jsfiddle.net/HWmp3/9/
I tested this on the iphone simulator and it works. My test was I copied the codes to a local file and tested. I put all the js inside of document.ready
make sure you have the meta in the header
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">