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.
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.
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
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!
I am using Visual Studio 2010 and jQuery 1.7.
Assume that my page is completely covering the div width 100% and height 100%.
i just want to select a specific part and change the CSS of that part, for example, highlight it with a different color.
I want to highlight a specific part of the DIV using jQuery
Please help me out !!!!
Update
<html>
<head></head>
<body>
behind the whole html of the page this
div overlay's the html tag
<div Style="width:100%; height:100%; z-index:100000;">
</div>
</body>
</html>
I don't want select the text like bugmuncher.com
To perform a highlight to a certain div id or class.
$('#id').css('backgroundColor', 'yellow');
Make sure you wrap the specific code with a span tag.
Your sentence with a <span id="id">highlighted</span> part.
Maybe try the jquery hilighter plugin. Simple to use.
What's the best way to detect, with JS, if the user has disabled your stylesheets? Is there a reliable way even?
How about asking them?
<div style="display:none">This site relies on CSS, please go to our CSS free version of this site</div>
Something easy would be to check the body background color for instance.
However, how likely is it someone disables CSS and not Javascript? (dunno what you use it for obviously)
I would have a small, empty div sit on the screen. When the page loads, use JS to check the 'display' property of that div. If it's 'none', then your css has successfully been loaded. If not, they may have to turned off / changed your styles.
If you're in control of the stylesheet you can have a "calibration" style.
Have a classname that applies some CSS property to an element. A good cross-browser safe property can be background-color.
When loading your JS try to dinamically create an element and apply the classname to it. Check if the properties match (the one on the element with the one you're expecting).
BoltClock's comment comes close. You can use window.getComputedStyles(calibrationElement, null) but that will fail in older IE browser versions.
See documentation for getComputedStyles
Feel free to remove the "calibration" node after you've checked it.
Assuming your primary external or inline stylesheet is loaded before the script, you can use this:
if (document.styleSheets.length){} // stylesheets are disabled
https://developer.mozilla.org/en-US/docs/DOM/document.styleSheets
It's IE5+ compatible too as per: http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html
The caveat is that, if styles are turned off after the window has loaded (which only causes a browser repaint), the document.styleSheets object won't change on the fly. Additionally, as noted in the comments below, this will not work for Firefox when using the View -> Page Style -> No Style feature, for which styles are still loaded, just not applied to the view.
To detect the initial state across browsers, or changes on window.onresize, it can be done with a style reset on the body, with the following code placed after <body> or in a DOMContentLoaded event:
if (document.body.clientWidth !== document.documentElement.clientWidth) {
// Styles are disabled or not applied
}
This works if you use body { margin: 0; } in your stylesheets (with no particular custom width), because it makes the body element the same width as documentElement (a.k.a. the <hmtl> element) while styles are active.
When styles are turned off or disabled, the body.clientWidth will revert to the browser's default body width, which always has a margin (8px by default in CSS 2.1 major browsers ) and therefore different from documentElement.clientWidth.
Should your site design use a specific margin other than 8px for the body, here is an alternative option:
if (document.body.clientWidth === document.documentElement.clientWidth-16) {
// user styles are disabled or not applied (IE8+ default browser style applies)
}
At least in Safari, part of the difficulty is that with CSS off the elements still report CSS attributes. But if you test on the actual rendering of a property then you can tell. Width is probably the simplest (and most common) property you can test on.
Below is a sample script (it uses jQuery, but could easily be un-jQueryfied) that will test for CSS. We just load an empty div on the page, give it a width of 3px using CSS, and then test that div's width. If the width is not 3 then CSS is disabled. Obviously you have to make sure that this doesn't colide with any other styles you might have that could cause the width to be other than 3. But it gives the general idea.
<html>
<head>
<title>Test</title>
<style type="text/css">
#testCSS {width: 3px;}
</style>
</head>
<body>
<div id="testCSS"></div>
<div id="message"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery("#testCSS").width() != 3) jQuery("#message").html("CSS Disabled");
});
</script>
</body>
</html>
Edit: sorry about the messy code example. It doesn't seem to like my code tags. Here's a JSfiddle with the code. Obviously you won't be able to disable CSS and test there, but you can pull the code from it: http://jsfiddle.net/3FvdL/1/