I'm using PJAX for a project.
I have a container called #icerikAlani to load its content with PJAX.
Here is the basic layout:
<div class="container" id="icerikAlani" data-pjax-container>
<!-- NIVO SLIDER -->
<div class="row">
<div class="col-md-8">
<div id="slider" class="nivoSlider"> SLIDER CONTENT HERE... </div>
</div>
</div>
<!-- SCROLLING LOGOS -->
<div class="row">
<div class="col-md-12">
<div id="logoParade"> SCROLLING LOGOS HERE... </div>
</div>
</div>
</div>
This container has two other script tags in it which are for Nivo Slider and Smooth Div Scroller plugins.
The problem is, when I navigate to a page and return to homepage, script tags stop working.
I tried to solve this problem by using pjax:end statement but I couldn't make it work, then I tried pjax:success as below bu still no luck. (as I read here: Where to put the page-initialize javascript when using pjax?)
Is there a way for using these scripts without reloading the page?
This is the script about PJAX and Smooth Div Scroller script:
<script type="text/javascript">
$(document).pjax('a','[data-pjax-container]', { fragment: "#icerikAlani" } );
//THIS IS HOW I ACTIVATE PJAX
$(document).on('pjax:beforeSend', function() {
$('#icerikAlani').fadeOut(50);
});
//WORKS...
$(document).on('pjax:end', function() {
$('#icerikAlani').fadeIn(400);
});
//WORKS...
$(document).on('ready pjax:success', function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
//FAILS...
});
</script>
You can check the full code here
Because I'm not experienced about javascript, this problem stands like a wall against me before finishing the project. Hope to find something works both with the slider and the scroller.
Possibly your script causes an error.
Try Firefox and Firebug and see if you find something...
Related
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
Creating a slideshow using Galleria.io APIs.
Galleria's DIV tag in my HTML page looks like :
<div class="content">
<div id="galleria">
<!-- I have used Javascript to input values in this DIV tag -->
</div>
<div id="full" style="float: right">
<!-- DIV tag for fullscreen and auto slideshow play-->
<button>full screen</button>
<button>play slideshow</button>
</div>
</div>
I have used the classic theme provided in the downloads of Galleria.io, and which has below script to call the contents in the DIV tag ("id = galleria").
<script>
$(function () {
Galleria.run('#galleria');
});
</script>
I have referrer the official documentation of Galleria for enabling fullscreen and auto slideshow.
But these documents only provide the method names, and not the example of implementing those methods. Can someone please guide how to implement these methods in script tag ?
Also, I have gone through the discussion about auto-resize in galleria
and tried to implement but having issues.
So I found the answers, and posting it as a reference in Galleria.io customization.
Everything will be the same, Galleria has parameters for different functionalities, that we have to call. For the functionality of auto slideshow, i edited the same script in the question this way.
<script>
$(function () {
Galleria.run('#galleria', {
autoplay: 3000,
transition: 'flash',
transitionSpeed: 600,
});
});
</script>
By the code alone, the scripts and libraries loaded in two pages are identical, the same template used, just slight difference in main content, but leanmodal works only while on the index page, but NOT in any other page.
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<a id="modal_trigger" href="#modal">Login/Register</a>
<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">site.lt</span>
</header>
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<script type="text/javascript">
$("#modal_trigger, #add_ad").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
$(".password_reset").hide();
return false;
});
You can try it here (click "Prisijungti/UÅūsiregistruoti" in the top right corner) http://www.bilietukai.lt . Can't see anything relevant in console either, well at least I can not see it, because I'm more a PHP guy currently and not good enough in JS/jQuery yet.
Alex Taker found the issue, the relative path of js script. So obvious I just lost the forest for the trees when looking for the problem.
I made a little button show hide code for my homepage. If I put that code in internal pages it works fine but if I put it on homepage it doesn't work. If I put Jquery CDN in header so my revolution slider stops working.
Here's my homepage section where you can see the code:
http://www.mythstreet.com/#our-services
Here's my fiddle that is fine working:
http://jsfiddle.net/junaidkhawaja/ha6qp7w4/6/
Here's snippet of my code:
HTML
<div id="1">
My Content 1
</div>
<div id="2" style="display:none;">
My Dynamic Content
</div>
<div id="static" style="display:none;">
My Static Content
</div>
<button id="btnClick">Click me!</button>
<hr />
<div id="3">
My Content 1
</div>
<div id="4" style="display:none">
My Dynamic Content
</div>
<div id="static2" style="display:none;">
My Static Content
</div>
<button id="btnClick2">Click me!</button>
Javascript:
$( document ).ready(function() {
$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').html($('#static').html()).show().siblings('#1').hide();
}else if($('#2').css('display')!='none'){
$('#1').show().siblings('#2').hide();
}
});
$('#btnClick2').on('click',function(){
if($('#3').css('display')!='none'){
$('#4').html($('#static2').html()).show().siblings('#3').hide();
}else if($('#4').css('display')!='none'){
$('#3').show().siblings('#4').hide();
}
});
});
Update: I found that after putting this code, my sliders is not working as well.
Just looking at your site and playing around in console, I can see that $ isn't defined.
A quick fix for this would be changing your code to use jQuery() instead of $(...)
Note: Can't currently debug this further as you've fixed the code on your live site (hooray!)
Looking at the code, at the very first line you miss the $
This one:
$( document ).ready(function()
Should be:
jQuery( document ).ready(function($)
Below is my code. i want - when the page is loading then the header class will not visible but after loading the page it will slide down. How can I do it? thank you.
HTML:
<div class="header" style="width:100%;height:300px;background-color:#999">
</div>
JS:
$(document).ready(function() {
$('.header').slideDown();
});
You need to make the header display: none; with CSS first like this:
<div class="header" style="width:100%;height:300px;background-color:#999; display: none;">
</div>
Then your JS will show it and perform the animation like in this fiddle:
http://jsfiddle.net/S8XjL/
If you mean after everything on the page has loaded you might want to change your JS to:
$(window).on("load", function(){
$('.header').slideDown();
});
Using jQuery's ready function will cause the header to drop once the DOM is ready but not necessarily when the page has finished loading:
$(document).on("ready", function(){
$('.header').slideDown();
});
Just mention display:none in your CSS
<div class="header" style="width:100%;height:300px;background-color:#999; display:none">
</div>