So my question is how would i make my header which already sticks to top on scroll only work on certain device width?
function fixDiv() {
var $div = $("#header-full-top");
if ($(window).scrollTop() > $div.data("top")) {
$('#header-full-top').css({
'position': 'fixed',
'top': '0',
'width': '100%'
});
} else {
$('#header-full-top').css({
'position': 'static',
'top': 'auto',
'width': '100%'
});
}
}
$("#header-full-top").data("top", $("#header-full-top").offset().top); // set original position on load
$(window).scroll(fixDiv);
Fiddle
function fixDiv() {
var getWindowWidth = $(window).width();
//approximate above medium screen widths includes large and medium screens.
//exactly not sure, from where the medium screen sizes starts from, just you need to change 767 in order to checkout your result
if(getWindowWidth>767) {
$('#header-full-top').css({
'position': 'fixed',
'top': '0',
'width': '100%'
});
}
else {
$('#header-full-top').css({
'position': 'static',
'top': 'auto',
'width': '100%'
});
}
}
fixDiv();
$(window).resize(fixDiv);
check the above code, $(window).width() returns the window width on which your web page or document is being called. accordingly you can utilize the width value to conditionally apply css using jquery or other statements according to window width.
https://jsfiddle.net/L5xxjbn2/2/
Related
So I am using this code to perform tasks when the user scrolls:
function myFunction(){
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
// scrolling downwards
hypeDocument.showSceneNamed('Section 2', hypeDocument.kSceneTransitionCrossfade, 1.1);
}
position = scroll;
});
return false;
}
But I would like to prevent down scrolling on one page. Is there anyway I can do this whilst allowing the scroll on the other pages? I tried using $(window).off("scroll"); but that blocks scrolling in both directions.
This will completely disable scrolling:
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
To restore:
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
If you only wish to prevent scrolling in the vertical direction (up and down), you can set the scroll in that direction to hidden:
overflow-y: hidden
You could trigger that effect with jQuery using:
$('body').css('overflow-y','hidden');
I am trying to create a page that the text scrolls while the image remains fixed beside it, but only when the page reaches a certain point (scroll and fix content). So far, the javascript I am using is:
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if (scrollTop > 519) {
$('#leonardo').css({ 'position': 'fixed', 'top' : '74px' });
} else {
$('#leonardo').css({ 'position': 'relative', 'top': '519px'});
}
});
$(document).ready(function () {
$(".container").animate({
marginTop: "0"
},2000);
});
CSS rules for the image I want to freeze are:
#leonardo {
background-image:url(Images/Leonardo-Robot3%20Resized.png);
background-repeat:no-repeat;
width:300px;
height:527px;
float:left;
}
If possible, I want the image to change when each new header of the text is reached, like this example
(http://pitchfork.com/features/cover-story/reader/bat-for-lashes/)
I am new to jQuery widget and trying to learn it, I create a widget for displaying a dialog, the widget's _create() method does the following:
Adds a mask dialog for hiding the user screen.
Adds a close "button" which is a div with a handler for click event
Displaying the dialog to the user
When I click the close div I can remove the widget instance with the following command -
$(this).parent().remove();
I do not find a way to hide the screen masking div I create in the _create method.
Code for the create and close methods follows -
_create: function () {
var handle = this;
if (this.options.Height == 0) this.options.Height = this.element.height();
if (this.options.Width == 0) this.options.Width = this.element.width();
$(document.body).css({ margin: 0, padding: 0 });
this.wrapper = $("<div class='wrapperClass'>").css({
'height': this.options.Height,
'width': this.options.Width,
'position': 'absolute',
'left': '50%',
'margin-left': -1 * this.options.Width / 2,
'top': '50%',
'margin-top': -1 * this.options.Height / 2,
'border': '3px solid red',
'border-radius': this.options.Radius,
'z-index': this.options.Zindex
});
//create the screen masking background
this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
$('body').append(this.maskScreen);
this.element.css('display', 'block');
this.wrapper.html(this.element);
$('body').append(this.wrapper);
if (this.options.addClose) this._addClose();
},
_addClose: function () {
this.closeButton = $('<div />')
//add close class
.addClass("closeClass").css("z-index", this.options.Zindex + 1);
this.closeButton.on("click", function () {
$(this).parent().remove();
});
this.wrapper.append(this.closeButton);
},
How can I reference the screen masking div I created in the _create() method?
You should make use of the jqueryUI widget _destroy method to do the cleanup for you, that way you can refer all the variables and elements that you have added in the _create method and remove them all in the right order to restore the environment as it was.
In this case your closeButton should simply call the _destroy method of your widget instance and not doing any removal itself.
If you can post a working jsFiddle, I will show you the actual code.
How do I make a nav bar that on page loading is present at, say, 50px from the top? As I scroll down, it doesn't move but when I cross it, it behaves similar to a fixed-top nav bar in Bootstrap.
It would be really helpful if you used Bootstrap.
Thanks in advance for your answers.
Use this simple jquery script:
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop>50){
$('#navbar').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.5'});
} else {
$('#navbar').css({ 'position': 'absolute', 'top': '50px', 'opacity': '1'});
}
});
and here is the JSFiddle example
Here is a jquery script built to work with bootstrap, and that swaps in navbar-fixed-top at 50px scroll.
Example Bootply
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop>50){
$(".navbar-default").addClass("navbar-fixed-top");
} else {
$(".navbar-default").removeClass("navbar-fixed-top");
}
});
i have an modal pop up i am showing it in the middle of screen using javascript
$('div.openIDPopup').css({ 'height': $(document).height() + 'px',
'width': $(window).width() + 'px',
'visibility': 'visible'
})
.fadeIn('slow');
$('div.openId').css({ 'visibility': 'visible',
'top': ($(window).height() / 4) + 'px',
'left': ($(window).width() / 3) + 'px'
})
.fadeIn('slow');
but on resizing the screen it is staying there as it is positioned absolutely how to get that feature.
You might want to check out this CSS based solution:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
It relies on using a negative margin and I think it works great.
see here for how its done: http://www.sohtanaka.com/web-design/examples/modal-window/