In my current web project Im trying to change the scrollbar with a lib called jScrollPane.
The script applies and generates the jspContainer, but the div jspVerticalBar ist missing. First I thought the script got problems when its loaded in with .load. But I placed the script tag in the view.html that is getting loaded in.
Another problem is when I go to another view and return to the front page, the script generates a wrong width of the container. Is is so small that the content of the container gets invisible by the overflow:hidden.
Does anyone got an idea why this happens? Did I do something wrong? Can you please help me out with this?
Here are all informations you may need:
#import url("sbar.css"); /*in main.css*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/vendor/mwheel.js"></script>
<script src="js/vendor/jscrollpane.js"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function() {
$(".scroll-pane").jScrollPane(); // in startseite.html
});
</script>
The live example: Link
I know I am too late to reply, but just thought that other people like me, who came here just to find the answer to the question, might get some help
Checkpoints:
the container must have a fixed width (or at least a maximum width)
the container must have a fixed height (in pixel, e.g., 200px, 250px)
the container must have overflow:auto; (or at least overflow-x:hidden;overflow-y:auto;)
a regular scrollbar must appear without applying jScrollPane
Important
In case you still cannot fix the issue, then here is one additional checkpoint:
? Are you adding contents dynamically to your container on which jScrollPane is applied?
If the answer to above question is yes, then please consider the reinitialise() api of jScrollPane and use it after dynamically adding the content.
The above mentioned api is very useful for a SPA
For more information and example, please visit:
http://jscrollpane.kelvinluck.com/dynamic_content.html
Related
I added <div> that displays "loading" image into the <body> tag.
It looks cool, but unfortunately the loading div and image will only appear on screen after most of loading process is already done, after scripts and css links are loaded or at least started loading. This is probably because body is located under the <head> tag, and not even parsed before the head is started loading. Can I display the loading div/image from the top of the document, in the head tag? I tried to add <script> and then creatElement() and appendChild() but there is no body yet to append a child. What can be done to make the loading div/image be displayed earlier?
As #Meirion mentioned, put your script tags at the end.
But also, might I suggest making the loading image a background image of the body? You can always toggle it if needed with a class on the body.
You have to cover the complete page with your animation / text to not display the other things which are loading.
All the other js stuff (except of external sources) goes into the $(document).ready(); function.
The animation in the following snippet is going to execute when window is ready.
$(window).ready(function() {
$('#untilContentLoads').hide();
});
#untilContentLoads {
position: absolute;
width: 100%;
height: 100%;
/* background: url() no-repeat center; <-- use that for some kind of gif/svg animation */
}
<div id="untilContentLoads">Loading</div>
If you want to do this quickly you may want to add your script at the end of the body tag like so
<html>
<head>
</head>
<body>
<div id="loading"/>
<script>
/*Here your code will have a notion of what is loading*/
</script>
</body>
Another approach that you may want to take is to make use of body.onload script option. Following the same example
<html>
<head>
</head>
<body onload="functionForLoading()">
<div id="loading"/>
</body>
</html>
The html document needs to be parsed in order to figure out how to display it so you wont be able to interact with the body (the visible bit) until it has been read and the DOM created.
However you can specify CSS in your header which will be fast to apply to the DOM once it is loaded.
If you want the fastest appearance of the spinner i would suggest
make your html document as small as possible
put your loader div as the first thing that loads (ie first in the body)
make a pure CSS spinner and put this snippet in the head of the page (not a separate file - inline in the head)
profile your page and improve the 'time to first paint'
lazy load images / put script tags at bottom of page
use defer / async where possible (http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
To make your document fast to load you would want to make it as light as possible. You could go as far as removing everything but the body tag and load in content with scripts but that would be a big increase in complexity.
I'm trying to use Parallax.js on the html body tag.
https://pixelcog.github.io/parallax.js/
https://github.com/pixelcog/parallax.js/
I added jQuery, path to Parallax, and data parameters to the body, but it doesn't show.
I've tried placing the js in head and footer. Where I am going wrong?
https://jsfiddle.net/kyttft92/
<body data-parallax="scroll" data-image-src="http://i.imgur.com/yXmsCmA.jpg">
<ul>
<li>parallax</li>
<li>parallax</li>
<li>parallax</li>
<li>parallax</li>
<li>parallax</li>
</ul>
</body>
Adding a class to body and calling manually with jQuery also has no effect.
$('.parallax-window').parallax({imageSrc: 'http://i.imgur.com/yXmsCmA.jpg'});
Here is also a cdnjs file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
Apparently, your error has nothing to do with not loading resources or syntax errors, but with not reading the documentation and trying to use it in ways it was not designed for:
From Under The Hood:
What parallax.js will do is create a fixed-position element for each parallax image at the start of the document’s body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.
That basically means you can't parallax <body>, because it's used as a container for the effect. (It will try to create a mirror of <body> and place it as a child of <body>. Does that make any sense?).
Just place it all in a container, for the sole purpose of using parallax.js
Additional note: According to Matt's comment, parallax.js currently requires jQuery 2.2.4 or below in order to work properly.
So I'm trying to have a div slide in on pageload. It has an id of "#crazyslide" and is absolutely positioned to the right -800px in the css.
So I used this code in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#crazyslide").animate( { right: '0px' }, 2000 );
});
</script>
Shouldn't this work?
No, you can't hide it off the edge of the screen. Devices like mobiles will let people scroll past the edge and it will look bad.
I recommend using this example of hiding and showing it with javascript.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Yes it should. I just tested with your exact code, and it worked fine. There are ways to prevent a parent element from showing scroll bars for offscreen content.
Check to be sure your div is properly named: (console.log($("#crazyslide"));
Be sure a parent element's css isn't preventing the div from being
shown at all, such as a strange body width or something.
Be sure the div has content, and a set width.
*This turned out to be a load order issue where jquery was not yet defined when the animation code was called.
Guessing this will be a real easy fix for someone with the know-how. I am still learning JavaScript and I'm always trying to learn more.
I currently have the following code:
<script type="text/javascript">
$(window).load(function() {
$("#background").fullBg();
});
</script>
This works fine. at the moment #background is:
<img src="images/background.jpg" alt="" id="background" />
However I want to be able to put the background in as a div background and not just an image.
How do I change the script above so that the function applies to the background-image of a div which will be set in CSS instead of pointing to the img tag as it currently does?
I have tried to search the internet for a solution; however I am not good enough at JS yet to word my search correctly to find what I am looking for.
Thanks in advance and sorry if my description is poor.
If I understood correctly, you're trying to assign a css property to the DIV.
Then you should use .css('propertyName', 'value').
You can find the documentation at jQuery .css()
.css() is what you're looking for (this example uses jQuery)
<script type="text/javascript">
$(window).load(function() {
$("#background").css({
"background-image" : "url(images/background.jpg);",
});
});
</script>
The plugin you are using (fullBg) was designed to work with img elements, not background images. Why do you even need a div? If you style the img with CSS as the plugin docs suggests, the outcome will be the same.
I have an issue with scrollspy, recreated in this fiddle:
http://jsfiddle.net/jNXvG/3/
As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.
I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy() via JavaScript to activate the plugin.
The next step would be to remove the fixed content height and use 'affix' on the sidebar.
I had the exact same problem and for me, adding height: 100% to the body element was the fix.
(stricly nothing else seemed to make it work)
You need to attach the ScrollSpy to the element that is going to trigger scroll events, rather than the menu that is going to reflect the scroll position:
$('#content').scrollspy();
JSFiddle
FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.
(It just auto-selected the my last element always)
In my case, Firefox was always selecting the last element and it was NOT the
height:100%;
on the body that was causing the problem (as I didn't have anything like that).
It was a
position:absolute;
on a container div.
Hope it helps someone out there...
I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.
https://github.com/twbs/bootstrap/issues/5007
When calling the scrollspy method you typically specify the body tag and the nav element.
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
The JavaScript above is equivalent to:
<body data-spy="scroll" data-target="#faq_sidebar">
The only situation where you do not specify the body tag is if you want to track an element with a nested scrollbar like in the JSFiddle above.
If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html> to the first line of your page. This was a simple step which solved the problem for me.
I had this same problem; removing the height: 100% from the <body> element fixed this for me.
I had a similar issue where scroll spy would not work on anything but a body tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.
ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...
Nested content was my problem. This fixed it for me:
(1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.
(2) If the items in your spied upon content container are nested then it won't work...
This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- nested content -->
<div id="navItem1">
<div id="navItem2"></div>
</div>
</div>
To This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- flat content -->
<div id="navItem1"></div>
<div id="navItem2"></div>
</div>
All good!
My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.
Make sure you're not mixing implementations. You don't need $('#content).scrollspy() if you have data-spy="scroll" data-target=".bs-docs-sidebar" on your body tag.
I think that this might be a bug in ScrollSpy.
I also had the same problem and when I stepped through the code I could see that the offset for all the targets were the same (-95px). I checked where these were being set and it was using the position() function. This returns the position of the element relative to the offset of the parent.
I changed this to use the offset() function instead. This function returns the position of the element relative to the offset of the page. Once I did this then it worked perfectly. Not sure why this isn't the default behaviour.
The reason that the position() function wasn't working in my case was because I had to have an empty div which was actually absolutely positioned 95px above the top of its container. I needed this as my target so that the headings weren't hidden behind my header that was fixed to the top of the page.
When I was trying to figure out this issue, I used some of what Mehdi Benadda said and added position: relative; to the body. I added this to the stylesheet:
body {
position: relative;
height: 100%;
}
Hopefully this helps someone in the future.
You don't have to call method scrollspy().
Also you don't need set height: 100% anywhere.
All you need is:
position: relative; for body
add data-bs-spy="scroll" to your content or body
add data-bs-target with navbar id
https://i.imgur.com/M5jib0t.png
It helps me.
It seems that scroll spy work only when used container has a scrollbar (Tested with bootstrap 5).
You can put data-bs-spy="scroll" and data-bs-target="#target-nav" attributes in the nearest parent having a scrollbar.
In my case, i had added the scrollspy component of bootstrap version 5.2.3 but my bootstrap js cdn was 5.0. After i added the 5.2.3 js cdn, it worked!
You may also add the downladed bootstrap js files as well.
And make sure to add the bootstrap css cdn too!