I'm attempting to use the Stellar.js script to apply a parallax effect.
Here is the official example from Mark Dalgleish's website
http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
Even when I copy and paste the source code from the example, instead of having a slight scroll effect to each one image, they appear in fixed positions.
What am I doing wrong?
1.
If even the Demo code does not work, check whether you gave the jquery or stellar.js path correctly.
You can check it in browser console, if you have any errors. The console will print it, if it can't load the resource.
2.
If the paths correct, check if you run the initialisation for stellar, when the page loaded, or if you gave "data-stellar-background-ratio" attribute for the right elements. If you give '0' to the data-stellar-background-ratio it won't scroll either.
Note that, it won't work on mobile devises either.
3.
If you checked everything above, and it still doesn't work, try to insert the scripts at the end of the element. Sometimes it helps.
Something like this:
<html>
<head>
<!-- Title, CSS, and other stuff -->
</head>
<body>
<!-- Content here with right stellar attributes -- >
...
<!-- At the end of body load the scripts, and run initialisation -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).stellar({
scrollProperty: 'scroll',
horizontalScrolling: false,
positionProperty: 'position'
});
</script>
</body>
</html>
I had a situation where my stellar.js parallax scrolling wouldn't initialize until my browser window was resized. I found the $.stellar('refresh'); seemed to fix the issue. (Using AngularJS)
angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
}).stellar('refresh');
}]);
Related
So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
How do I get my div content inside slider jquery auto update when MySQL has changed or has a new row added?
I've tried with my code, But my slider doesn't work and can't slide any div content.
My code :
index.php
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick.css" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" />
<script type="text/javascript">
$(document).ready(function () {
$('.single-item').slick({
dots: false,
infinite: true,
speed: 700,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
setInterval(function () {
$('.single-item').load('item.php');
}, 3000);
});
</script>
<style type="text/css">
body {
background-color: darkturquoise;
}
</style>
</head>
<div class="single-item" style="width: 500px; height: 500px; margin: auto;">
</div>
</html>
item.php
<?php
include 'connect.php';
$sql = mysql_query("SELECT * FROM fm_product WHERE p_pined = 'PINED'") or die(mysql_error());
while($result = mysql_fetch_array($sql)){
echo '<div style="background-color: white; height: 200px;">'.$result['p_id'].'</div>';
}
?>
My code given output:
I'm unsure if this qualifies as a complete answer, but a main problem lies in your usage of .load and it's interaction (or lack thereof) with the slick slider plugin.
The order of events on your page is as follows:
The dom is loaded & ready.
Slick Slider is initialised on .single-item. The contents of .single-item (currently nothing) is replaced with slick slider's HTML to set up and render the slides, control buttons etc. properly.
This is important because .single-item is now full of a lot of different HTML elements. If you're unsure what it looks like, check the slick slider demo page - view the page source, then view the source using developer tools to see the change in how it looks.
Additionally, .single-item never had any content originally, so it will render zero slides. At this point, you've created an empty slider.
Your setInterval event is registered.
3 seconds pass.
Your setInterval event fires for the first time. An XHR is made to item.php, which responds with HTML - a bunch of styled divs containing data.
At this point, you can use your developer tools to confirm that item.php is returning the correct data by monitoring your network requests area.
Your script takes the request response (the HTML) and completely replaces single-item's contents with it.
Alarm bells should be ringing at this point, as this immediately causes a conflict between what used to be in this element (slick's HTML setup) and what it has replaced. If you look in your developer tools console, you might even spot some errors popping up from slick complaining about missing elements.
GOTO STEP4
What's happening is that your .load call is replacing the contents of an element containing a slick slider setup, totally breaking the slider.
What you need to do is change how you handle the AJAX. You should drop the .load and move towards using $.ajax for nicer callback control. Based on the slick docs you can either:
On each XHR request return - destroy the slick slider with $('.single-item').slick('unslick');, insert the contents into .single-item, then re-initialize the slider.
Keep track of the current slides. On each XHR return, detect which slides are present and which ones aren't, and remove/add them to the slider using .slick('slickAdd', HtmlOrDomNode) and .slick('slickRemove' slideIndex)
Hope this helps.
I'm trying out iScroll and following the documentation, but for some reason I can't get it to initialize. At least, I don't think I can. From the demos and code, I'm not exactly sure what I should expect it to look like!
I've got this code:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/iScroll/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#scroll', {
mouseWheel: true,
scrollbars: true
});
}
</script>
</head>
<body onload="loaded()">
<div id="scroll">
<div>...Lots of Lorem Ipsum text here...</div>
</div>
</body>
</html>
For the sake of tidiness, I've not included the actual text I've got in the div I want to scroll, but all I've got is lots and lots of text - enough to make the page need to scroll. The reference to the iScroll file is definitely correct, even with its mixed cases.
I added in the options (mouseWheel and scrollbars) just to try and make something happen so that I could determine whether the script was being initialized. Setting scrollbars to false doesn't seem to make any difference. Bizarrely, if I set mouseWheel to false my mousewheel works, but if I set it to true it doesn't - exactly the opposite of the documentation.
I'm clearly doing something wrong, but I can't see what - it doesn't get more basic than what I'm trying. I looked at the barebone example from the documentation, but that doesn't seem to work for me either, in that there are no scrollbars displayed anywhere. I'm getting the same behaviour in Chrome (48) and IE11.
Not quite sure how to define this issue. I just started working with jQuery and Javascript and pretty much everything is fine, except for when the page initially loads. I have the page fade in, but it looks like all the CSS isn't being applied until the jQuery loads.
I tried this script in my Head tag, but it doesn't work. Help?
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
Whoops: site: http://www.elijahish.com
You should use a Javascript console like Chrome Console or Firefox Firebug to debug your code.
First, you are placing your script block which requires jQuery before jQuery is defined:
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
So you would see the following (in Chrome Console):
ReferenceError: $ is not defined
$(function(){
Second, you seem to be trying to run a script which is accessing (in the first block) an element (#box-container) before it has been seen in the DOM itself. You could use jQuery.ready on that first block, but that could be messy. I would instead suggest you place this right after <div id="box-container"> is defined:
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
Demo: http://jsfiddle.net/5JpVB/4 (I use a setTimeout for dramatic effect.)
Or put it directly after the <div ...> is opened:
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
And the coup de grâce (document.write nothwithstanding):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
Yes, that is a script that "puts" the style display: none into the header, which "neatly" bypasses some of the conjecture that's been thrown around (there's downsides for each method, more or less). There's an elegance to this method (except, of course, using document.write, which is icky).
And yet another way, using the CSS display: none method:
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (Just the Result page, disable Javascript to see it work.)
You are getting a case of FOUC : http://www.bluerobot.com/web/css/fouc.asp/
And, years later we are still plauged! http://paulirish.com/2009/avoiding-the-fouc-v3/
A variety of solutions are included on this link.
You could also set the style of your content to be hidden before running the javascript that shows the content. Jared shows you a nice way to do this.
Might I make a suggestion that you use combination of CSS and JavaScript, rather than one or the other. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the contact unavailable to those without JavaScript.
So here is what I did:
CSS:
.flash #wrapper {
display: none;
}
What this does is set the <div id="wrapper"> to hidden only if it is a decendent of the class flash. So to keep it from being hidden from those with out javascript I add the class flash to the <html> element. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they'll at least have access via the unstylized content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it wont be a flash of unstylized content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal hight, but it would flash the different heights first. This fixed it while still giving accessability to none Script enabled browsers.
Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css