How to have Header get box shadow after scrolling 'x' ammount - javascript

I am trying to get the header to have a shadow after I scroll down the page 'x' amount. I have a JSFiddle included at the bottom with the script I have been trying to use.
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() >= 100) {
$('#header').addClass('mdl-shadow--4dp');
}
});
});
JSFiddle

So as soon as I took your JS fiddle code locally, and forgot to load your external resources. I was alerting on scroll, and I was getting those alerts, but once I loaded your external resources the scroll events broke.
So I knew it has something to do with one of the frameworks, and figured out its material-design-lite. Someone experienced this issue before and opened an issue about on their github repo here
The solution is to capture the scroll events on 'mdl-layout' instead of document & window
checkout this fiddle

Related

Scroll Bar Hiding and Unhiding on pages load

I Tried to find some topic about this issue but i haven't found..
I have a problem on my website, when loading my pages, the scroll bar get hide and unhide just for 1 second that causes content to shift fast..
Yes, i already have tried this code, and i'm using it now:
html {
overflow-y: scroll;
}
However the problem still there. This problem occours on the latest version of google chrome.
I have a live example if someone want to see, just switch to home -> episodios page:
Live site
I apretiate your help!

Javascript code only runs at times

I have a Ruby on Rails web application found here
Github repo here
It adds data dynamically to different columns. Because I want to have the grid layout (Bootstrap) to be responsive even with a same column height, I am using a Javascript approach, which is between script tags right before the end of the body.
$(document).ready(function() {
var heights = $(".prodcol").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".prodcol").height(maxHeight);
});
This code runs just fine on a development server in Xubuntu, using Chromium or Firefox. When uploading to Heroku and using Windows and Chrome or Firefox, the same height column script sometimes works or sometimes not (by refreshing the page). When not, the columns will have different heights. I've tried changing the script to onload(), load() and probably other listeners, and it doesn't work at all this way.
I find it odd that it only works at times and that it works perfectly with Chromium. Could anybody point out what it is? Thank you for your help, I've been stuck in this for hours and I'm slowly growing desperate.
Edit: For now I decided to use a fixed height and restrict char limits and img size for the column class, as the issue couldn't be solved so far, so the Heroku link will display correctly.
With turbolinks, I found that using $(document).ready can cause issues, instead you could try using:
$(document).on('ready page:load',function(){})

Can anyone detect why my jQuery is firing on my homepage, but isn't firing on a different page within the same domain?

I have been having some issues getting jQuery to work on some parts of my website. To test if the jQuery would fire I prepared a bit of jQuery that launches everytime my header file is included.
When I am at the home page the jQuery fires properly and the pop-up comes up. As soon as I move to a different section of the site. The same jQuery code included in the header isn't firing. I have checked the console for errors or faults and couldn't find anything.
A test location of the website would be at this location
That is the homepage of the site, if you visit it a pop-up will appear. If you browse to this link the jQuery doesn't fire even though it's still there in the code.
The jQuery code I'm trying to launch is as follows
<script type="text/javascript">
$(function(){
$('#overlay').fadeIn(200,function(){
$('#box2').fadeIn(400)
});
return false;
});
</script>
I'm not very experienced in debugging jQuery and have tried consulting some other questions and forums thought these solutions or attempts didn't seem to work for me. I was hoping I could get a hint in the right direction here.
Your code
$(document).ready(function() {
$('#slider2').s3Slider({
timeOut: 4000
});
});
appears to be raising an error which causes the javascript processing to stop. The element '#slider2' element does not exist on this page. Either remove this code or add a guard condition such as,
$(document).ready(function() {
if ($('#slider2').length) {
$('#slider2').s3Slider({
timeOut: 4000
});
}
});

bxslider does not wait for images in chrome; jumps to last slide

If you go to http://sandkasse.shoporama.dk/, you will see a bxslide at the top of the page. at least, you will if you do not use chrome (Peculiarly, the problem seems not to occur in safari, IE or firefox).
I am experiencing the problem that quite often when loading the page from chrome, the images to be used in the bxslider do no load. refreshing usually solves the problem. All I get is the two buttons for switching slides, however nothing happens when these are clicked.
I don't get any error messages.
I am assuming that the problem is that the images have not finished loading when the $('.bxslider').bxSlider(); is called inside the $(document).ready(function(){}).
However, what is a good fix to this? if I move the bxslider call to window.load, I get the somewhat ugly result that all the images in the slide are shown until the whole page has finished loading, with the wrong width and styling. I suppose I could change the visibility and styling of all the images until the page finishes loading, but this seems more like a hack than a solution?
would it be a sensible choice to use some sort of imagesloaded event instead of document.ready? the imagesloaded package is included anyway. but, I suspect I would run into the same problem of all images showing until the last had loaded?
A related problem may be the fact that the slider always skips to the last slide when the page is loaded, irrespective of which browser is used. I have "fixed" this by setting the "startSlide" manually.
I hope my question makes sense. I am aware that there are a lot of bxslider questions on here, but I haven't been able to find anyone solving this particular problem, except for people "giving up" and resorting to just hiding the images while things load?
I may have come up with a suitably non-hacky solution:
reload the slider in the window.load call. Thus, my bxslider call has transformed into:
var slider; // has to be defined beforehand so I can use it in window.load
$(document).ready(function(){
//initialize slider
slider = $('.bxslider').bxSlider({
startSlide:0
});
};)
$(window).load(function() {
slider.reloadSlider();
});

Where do I add this function?

I think I found the answer I am looking for here:
Refreshing page automatically when viewport size change but I do not know how or where to put this:
window.onresize = function(event)
{
document.location.reload(true);
}
I am trying to accomplish the same thing as the OP where I need to force a refresh on screen rotate.
Any help is appreciated.
EDIT:
The script is not working or so it seems. When I rotate my tablet (android) the responsive images do not resize which they should if the browser is being refreshed. This leads me to believe it is not working.
EDIT 2:
My error, forgot to re-upload the changed file. It has been a long day and I just noticed that Filezilla still had the change file prompt on the screen! This is now working for me.
EDIT 3: NEW PROBLEM
Now that it is working, I noticed that when I scroll the page it forces a refresh again with every movement (scrolling down, not up) even though the viewport has not rotated. Why is this and is there a way to fix it? It appears not to affect my iPhone 4, only my Samsung tablet...
ADDED:
I figured out that it is when the browser tabs move off the viewable area of the page that it forces a refresh on the tablet. Is there a way to change this?
UPDATED:
Appears to be a Chrome issue again.
Doesn't really matter where you put it on the page as long as it's in a <script> tag.
You could put it at the top of your page in the <head> if you want.
<head>
<script language="javascript">
window.onresize = function(event) {
document.location.reload(true);
}
</script>
</head>

Categories

Resources