I want to remove vertical scrollbar after switch to fullscreen.
This is the script I'm using at the moment:
<script type="text/javascript">
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
</script>
I've tried like this without any success:
<script type="text/javascript">
if(window.fullScreen) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
</script>
Tank you as always.
EDIT:
<script type="text/javascript" src="jquery.js"></script> is being loaded and other jquery script's are working ok.
EDIT:
I've tested with:
$(document).ready(function() {
$("body").css("overflow", "hidden");
});
And it works!
So I believe that for some reason the JavaScript condition code it's not working!
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height))...
EDIT:
Solution found!
<script type="text/javascript">
var control = 0;
function scrollbar(){
if(event.keyCode == 122 && control == 0){
//remove scrollbar
$("body").css("overflow", "hidden");
control = 1;
}
else{
//add scrollbar
$("body").css("overflow", "auto");
control = 0;
}
}
</script>
If you want to use this don't forget to attach the function to the body for example like:
<body onkeydown="scrollbar();">
UPDATE:
Work's in chrome, opera, ie, safari except for firefox! What can be done to fix firefox?
It looks like the javascript is only being run once, when the document loads, and not re-evaluate afterwards. If this is the only problem, you should see the correct behaviour if you are in full screen then load the page. To fix this you will have to make a function out of your code and call it every time the window is resized. Using jQuery, you can do this using an anonymous function:
<script type="text/javascript">
$(window).resize(function() {
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
});
$(document).ready(function(){
$(window).resize();
// trigger the function when the page loads
// if you have another $(document).ready(), simply add this line to it
});
</script>
This binds the function to the resize event handler and you should see correct results! If that works it will be a much nicer and robust way of doing it.
Related
I'm trying to run this code when window size hit certain width.
This code is working on page load, i want it to run when user resize the browser window.
if ($(window).width() > 1023) {
$('.has-children').children('a').on('click', function(event){
if( !checkWindowWidth() ) event.preventDefault();
var selected = $(this);
if( selected.next('ul').hasClass('is-hidden') ) {
selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
$('.insided-overlay').addClass('is-visible');
} else {
selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
$('.insided-overlay').removeClass('is-visible');
}
});
}
Can anyone please help me with this how can i achieve this?
Thanks
try to write this script as below:
$('.has-children').children('a').on('click', function(event){
if($(window).width() > 1023) {
if( !checkWindowWidth() ) event.preventDefault();
var selected = $(this);
if( selected.next('ul').hasClass('is-hidden') ) {
selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
$('.insided-overlay').addClass('is-visible');
} else {
selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
$('.insided-overlay').removeClass('is-visible');
}
}
});
I hope this will works fine for you.
Thank you...
I have made this jQuery script. Its purpose is to add a class to <body> when body is scrolled a certain amount. However nothing happens on scroll. DOM console doesnt show any error messages. I am a complete Javascript-newbie, so I would not be surprised if the problem is a simple markup mistake.
Any help is appreciated.
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33){
$(document.body).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$(document.body).addClass('fix');
} else {
$(document.body).removeClass('fix');
}
});
};
});
body{
height:200vh;
background-color:blue;
}
.fix{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you want to listen to scroll event on window
Try
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33) {
$(window).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$('body').addClass('fix');
} else {
$('body').removeClass('fix');
}
});
};
});
I want to add some condition in jquery like media queries in CSS, anyone can help me with this? I try the code below but is not working:
jQuery(document).ready(function(){
if (jQuery(window).width() >= 320) && (jQuery(window).width() <= 479) {
}
if (jQuery(window).width() >= 480) && (jQuery(window).width() <= 567) {
}
});
You have parentheses around your individual conditions, but not around the if conditions as a whole.
Try this:
jQuery(document).ready(function(){
alert("Running");
alert(jQuery(window).width());
if ((jQuery(window).width() >= 320) && (jQuery(window).width() <= 479)) {
alert('Small screen');
} else
if ((jQuery(window).width() >= 480) && (jQuery(window).width() <= 567)) {
alert('Large screen');
} else {
alert("Biggest screen");
}
});
Note the extra parentheses after if and before {
You actually don't need mediaqueries in JS to do your task the right way. First of all: how to work with media queries in JS. You can use matchMedia. Here is a brief documentation.
Here is a simple example:
var smallMatcher = matchMedia('(max-width: 480px)');
var biggerMatcher = matchMedia('(max-width: 1024px)');
var run = function(){
if(smallMatcher.matches) {
//run code for small
} else if(biggerMatcher.matches){
//run code for bigger
} else {
//run code for else
}
};
//now run it
run();
//in case you need to dynamically change on resize
//use addListener
smallMatcher.addListener(run);
biggerMatcher.addListener(run);
But as said, you don't need this. What you actually need to do is simple separation of concerns. Don't mix your behavior with your CSS. Simply add focus/blur or focusin/focusout events, the add or remove a class and do everything else in CSS.
This should result in clean and simple code, here is an example:
$('#searchbox')
.on('focus', function(){
$(this).closest('form').addClass('focused-field');
})
.on('blur', function(){
$(this).closest('form').removeClass('focused-field');
})
;
Everything else can and should be handled in CSS.
And In case you need the modify the style for the input button also if the button itself is focused and not only the search input you can see the following fiddle.
For some reason my nav collapse function isn't working in Firefox/IE but works in Chrome.
<script type="text/javascript">
$(function(){
$('#header').data('size','big');
});
$(window).scroll(function(){
var $nav = $('#header');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$('#logo').fadeOut(300);
$nav.data('size','small').stop().animate({
height:'95px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$('#logo').fadeIn(300);
$nav.data('size','big').stop().animate({
height:'185px'
}, 600);
}
}
});
</script>
Any ideas? I'm thinking it's a syntax error.
You can see the live example in the navigation at http://medialimes.com
Try using $(window).scrollTop() instead of $('body').scrollTop(). This should work on both Chrome and Firefox/IE.
My guess is that when you try to set
$('#header').data('size','big')
doesn actually set the data variable properly.
Try setting it using the attr method.
$(#header).attr('size','big');
I'm using this bit of code to hide a menu bar when users scroll on a page. It works fine on Chrome 17.0.963.78 but keeps on flickering in and out on other browsers, namely I.E. firefox and safari ..
$(window).load(function(){
$(document).scroll(function(){
$('#inner_floating').fadeOut();
var scrollA = $('body').scrollTop();
setTimeout(function(){
if(scrollA == $('body').scrollTop()){
$('#inner_floating').fadeIn();
}
}, 100);
})
});
The problem is that your .scroll function is being called for every pixel (or mousewheel tick) scrolled, so the animations are being run many times consecutively.
Try something like this:
$(window).load(function(){
$(document).scroll(function(){
if($("#inner_floating:hidden").length == 0) {
$('#inner_floating').fadeOut();
}
var scrollA = $('body').scrollTop();
setTimeout(function(){
if(scrollA == $('body').scrollTop() && $("#inner_floating:hidden").length > 0){
$('#inner_floating').fadeIn();
}
}, 100);
})
});
This way the animation is only happening if necessary.