I'm trying to implement the effect the logo has in this page, where it is fixed on the top of the page, but when scrolling down, only a part of it remains visible, not the whole element.
I have found plenty of jquery plugins that will keep the top of an element at the top of the page, but none that will let me customize how high the element will stay. My javascript is not up to coding something from scratch. Does anyone have any suggestions for plugins that might be useful?
You shouldn't need a plugin for this. CSS can keep the logo fixed and you can use JavaScript to change the display of the element once the user begins to scroll the page.
Assuming that your logo has the ID of logo, the CSS would be:
#logo {
top: 0;
position: fixed;
}
Since it appears you're using jQuery, you can do something like this:
$(function() {
// gets a reference to the document based on which browser is being used
var oDoc = $.browser.msie === true ? window : document;
// event handler for when the user scrolls
$(oDoc).scroll(function() {
// if the user is at the top, display the whole image
if($(this).scrollTop() === 0) {
$('#logo').css('margin-top', 0);
// otherwise, pull the image up a single em (200 is arbitrary)
} else if($(this).scrollTop() > 200) {
$('#logo').css('margin-top', '-1em');
}
});
});
Related
I have an image that I am using at the bottom of my clients page. It is an absolute positioned image on the bottom left of the screen, inside the footer div.
.footer__endrow > .chefBottom {
left: 0;
position: absolute;
bottom: 0;
}
This works and looks fine when on the desktop at a normal resolution. However, when the window is made smaller, it starts to collide with the social icons there and goes behind them.
The viewport it self is still well within range of a normal desktop website when viewing the second image so I can't just hide it when its at tablet or mobile size as the collision would have already hapend.
Is there a way with javascript or css to hide an image when it collides with another element? For example detect if the element touches another one and then hide it?
Just find your breakpoint of when images collide with social icons using chrome developer tool inspect element in responsive mode and then use media query to hide the element at the end of your css file like
#media screen and (max-width:480px){
.footer__endrow > .chefBottom{
display:none;
}
}
Note: Here I have used 480px as a breakpoint
If you want to make it with javascript way, then it is better to solve this way.
$(window).on("resize", function(){
var $imgDiv; // assign image div here
var $socialIconsDiv; // assign social icon div here
var $imgDivRightOffset = $($imgDiv).offset().left + $("$imgDiv").outerWidth(); //get image right position
var $socialIconDivLeftOffset = $($socialIconsDiv).offset().left // get social icons left position
if( $socialIconDivLeftOffset <= (imgDivRightOffset) ){
$($socialIconDivLeftOffset).hide();// Hide social icons here
}
});
Hi You can check the position of both the image and see if the position is overlapping if it is over lapping in the if condition you can hide it.
window.addEventListener('resize', function () {
var imageOne = document.getElementById('firstImage');
// check for the image which you want overlapping add the condition as per that.
if (imageTwo.offsetLeft <= imageOne.offsetLeft) {
//use this command to hide the image.
imageOne.style.visibility = 'visible';
}
});
A working demo of a template I've modified can be found at the following url:
https://newbloggerthemes.com/base-wp-blogger-template/demo/
I've been unable to determine what is causing a annoying bounce of the fixed navigation menu. If you scroll the page downward the menu should move upward and stop when its top border reaches the top of the page; however, it actually moves just past the top of the page and then snaps back, causing a annoying bounce.
How do I get rid of this bounce? I am assuming that this might be caused by the jQuery code used to query the menu's position. Its as if the code is fixing the issue afterward as opposed to preventing it from happening in the first place.
I've removed the header from the original template so that the menu initially appears at the top; however, when the user first scrolls the page downward the menu bounces in a similar fashion so the defect is in the original template and not due to any changes I've made.
I've posted the modified template at the url below in case the code below is not enough.
https://1drv.ms/t/s!AnHSMVz7JJ2Ocf9KoYS67t_6ZqI
jQuery(document).ready(function($) {
var $filter = $('.main-navigationbwrap');
var $filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});
if ($filter.size())
{
$(window).scroll(function ()
{
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
{
$filter.before($filterSpacer);
$filter.addClass("fix");
}
else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top)
{
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
}
});
Okay, you're done removed the header HTML.
Now you can also removed that jQuery. Becuase to make sure your menu navigation position always fixed at the top, you can do that just by CSS only. Example CSS is below.
.site-headerbwrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
in you case: paste CSS code above before ]]></b:skin> line and then Save your Template
I have a facebook "like us" icon on one site, now client requirement is to keep it visible when user scrolls the up until it reaches the top position of page (which is sorted by using jquery stickynotes) and the icon should still be visible when somebody re-size the browser (X = (browser width/2) + (wrapper/2)).
Not able to make out how can I do that, since first condition forces the div to be static positioned so that it can move-along when the page is scrolled down.
But in order to re-position it I'll require to make the potion fixed.
Kindly suggest a way out.
Just a simple example how you can fix that:
function movement() {
var topPosition = $(window).scrollTop();
if(topPosition > 100) {
// do something
$('element').addClass('dosomething');
} else {
// do something
$('element').removeClass('dosomething');
}
}
$(document).ready(function() {
$(window).scroll(function() {
movement();
});
});
Have you looked at something like jQuery Waypoints?
I'm not sure it's an exact match, but it solves some of these problems elegantly.
I am using media queries to make a responsive site. That isn't my problem but it is why I am here today with this question.
At a certain browser width, my horizontal navigation at the top of my page becomes too wide (becomes squished) and looks awkward in my layout. What I want to do is this: When a users browser reaches a certain min-width, I would like to (using js) hide the horizontal navigation (an unordered list of 6) that originally rendered on the users screen (if you are viewing wider than 650px) and replace it with a single 'button' that when clicked drops down the un-ordered list.
Now, the CSS isnt the problem. I just cant seem to figure out how to do the transition from the original horizontal nav that originally renders, to a more user friendly navigation.
A simple solution would be to have 2 sets of navigation mechanisms. Hide one and show the other.
You will need to add an eventlistener on the resize event for document, where you will check the innerWidth of the window and decide which navigation div to display.
document.addEventListener("resize", function () {
if (window.innerWidth < 650) {
document.getElementById("horizontal_nav").style.display = "block";
document.getElementById("dropdown_nav").style.display = "none";
} else {
document.getElementById("dropdown_nav").style.display = "none";
document.getElementById("horizontal_nav").style.display = "block";
}
});
Alternatively, you can keep your horizontal navigation but specify a max-width of 650px, once this has been reached, it will stop growing.
div#horizontal_nav {
width: 100%;
max-width: 650px;
}
Maybe these can help:
http://www.bram.us/2011/10/24/jquery-mobile-select-jquery-mobile-navigation-replacement-plugin/
https://github.com/joggink/jquerymobiledropdown
I know. It´s jQuery but I hope ppl get the general idea.
On The Economist website, there is a horizontal header that only appears after you scroll down the page once. See here:
http://www.economist.com/blogs/asiaview/2010/12/china_and_nobel_peace_prize
What I want is a vertical version of this that would come out of the left or right side of the page and expand over the page content that is already in place.
Anyone know of an existing plugin or how I could build something like that in jQuery?
Here's a simple jQuery plugin that should work for you:
(function($) {
$.fn.scrollToast = function(options) {
var settings = options || {};
var offset = settings.offset;
var toast = settings.toast;
var $toast = $(toast);
var hidden = true;
// prepare the toast:
$toast.css({
display: 'none',
position: 'fixed',
top: '0px',
left: '0px',
zIindex: '1',
overflow: 'hidden'
});
this.bind("scroll", function($event) {
var top = $(this).scrollTop();
if ((top >= offset && hidden) || (top < offset && !hidden)) {
hidden = !hidden;
$toast.animate(
{width: "toggle"});
}
});
};
})(jQuery);
Usage: $(window).scrollToast({toast: "#toast", offset: 50});, where #toast is a selector indicating the element to slide out, and offset is how long you want the user to scroll before the toast appears.
Notes:
Uses CSS position:fixed and an elevated z-index to make the toast element appear on top of other content.
When the target element is scrolled to a value equal to or beyond offset, the toast element is slid out (it is initially hidden).
When the target element is scrolled to a value less than offset the toast element is slid back in.
Could easily be extended to show the toast on the other edge of the screen or the top or bottom.
Will probably work on any scrollable element, but I've used $(window) because it seems to fit the use case you described.
See a working example here: http://jsfiddle.net/andrewwhitaker/56dTA/
Yes, it's pretty easy to build:
You create a:
<div id="hiddenmenu">
This Appears on scrolldown
</div>
This div should be absolute positionend, and display:none;
With the jQuery, on scroll-down you use $('#hiddenmenu').show();
That's pretty much it, if you need the full code, just ask and I'll post it.