I am working on this website page poochclub.com and I am trying to make all of it text instead of images. The problem is when I want to work on the panels below with all the information the js file (called about.js) is set to work with images instead on divs where I could potentially add text.
I am not very good at writing javascript and I need help to fix the original file which looks as follows:
<script type="text/javascript>
(function ($) {
var pages, panels, arrows, currentClass = 'current',
currentIndex = 0, currentSize = 0;
function showPage() {
var ctx = jQuery.trim(this.className.replace(/current/gi, ''));
$(this).addClass(currentClass).siblings().removeClass(currentClass);
$('.panel')
.removeClass(currentClass)
.find('img')
.removeClass(currentClass)
.removeAttr('style')
.end();
panels.find('.' + ctx)
.addClass(currentClass)
.find('img')
.removeClass(currentClass)
.removeAttr('style')
.eq(0)
.fadeIn()
.addClass(currentClass)
.end()
currentIndex = 0;
currentSize = panels.find('.' + ctx + ' img').length;
return false;
}
function showArrows(e) {
arrows['fade' + (e.type === 'mouseenter' ? 'In' : 'Out')]();
}
function getPrev() {
currentIndex = currentIndex - 1 < 0 ? currentSize - 1 : currentIndex - 1;
return currentIndex;
}
function doPrev() {
var ctx = panels.find('div.current img');
ctx.removeClass(currentClass).removeAttr('style');
ctx.eq(getPrev()).fadeIn().addClass(currentClass);
}
function getNext() {
currentIndex = currentIndex + 1 >= currentSize ? 0 : currentIndex + 1;
return currentIndex;
}
function doNext() {
var ctx = panels.find('div.current img');
ctx.removeClass(currentClass).removeAttr('style');
ctx.eq(getNext()).fadeIn().addClass(currentClass);
}
$(document).ready(function () {
pages = $('.panels-nav a');
panels = $('.panels');
arrows = $('.arrows');
pages.click(showPage);
panels.bind('mouseenter mouseleave', showArrows);
arrows.find('.prev').click(doPrev).end().find('.next').click(doNext);
pages.eq(0).click();
});
});
</script>
My questions is, how do I change the js file from finding img to finding several different div id's attached to the sliding panles?
Thanks.
any reference to img should be a new selector. Something like 'div.slider', a div with a class slider.
Look at all the finds, thats where you will see the img selectors.
Related
This is plugin's jquery code.in this code one image move in one scroll but my problem is i have to move 4 image one by one in one scroll in this sequencer.
and add specific time interval when one image move to another image please help me out of this problem.
Plugin Demo:https://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer.html
(function($) {
$.fn.sequencer = function(options, cb) {
var self = this,
paths = [],
load = 0,
sectionHeight,
windowHeight,
currentScroll,
percentageScroll,
index;
if(options.path.substr(-1) === "/") {
options.path = options.path.substr(0, options.path.length - 1)
}
for (var i = 0; i <= options.count; i++) {
paths.push(options.path + "/" + i + "." + options.ext);
}
$("<div class='jquery-sequencer-preload'></div>").appendTo("body").css("display", "none");
$(paths).each(function() {
$("<img>").attr("src", this).load(function() {
$(this).appendTo("div.jquery-sequencer-preload");
load++;
if (load === paths.length) {
cb();
}
});
});
$(window).scroll(function() {
sectionHeight = $(self).height();
windowHeight = $(this).height();
currentScroll = $(this).scrollTop();
percentageScroll = 100 * currentScroll / (sectionHeight - windowHeight);
index = Math.round(percentageScroll / 100 * options.count);
if(index < options.count) {
$("img.sequencer").attr("src", paths[index]);
}
});
return this;
};
}(jQuery));
I think what you want here is setInterval().
You can write a function to change the image which should be pretty simple, and call that function as a parameter in setInterval().
So something along the lines of this at the end of your code:
setInterval(changeImage, 60000);
//executes the changeImage() function every 60 seconds
You can read more about setInterval() here.
I hope that helps!
Im having a small app built using jquery mobile and nativedroid2.
I would like to know if its possible to change the page heading name based on the tab name?
For an example http://jsfiddle.net/livewirerules/2a7so7r5/1/ You will see the page heading is Friends and my active tab is Friends so when i move to the next tab. Work the page title should change accordingly
Below is my demo JS code
$(document).on("pagecreate", "#page1", function () {
$("div[role=main]").on("swipeleft", function (event) {
changeNavTab(true);
});
$("div[role=main]").on("swiperight", function (event) {
changeNavTab(false);
});
});
function changeNavTab(left) {
var $tabs = $('ul[data-role="nd2tabs"] li');
console.log($tabs);
var len = $tabs.length;
var curidx = 0;
$tabs.each(function(idx){
if ($(this).hasClass("nd2Tabs-active")){
curidx = idx;
}
});
var nextidx = 0;
if (left) {
nextidx = (curidx >= len - 1) ? 0 : curidx + 1;
} else {
nextidx = (curidx <= 0) ? len - 1 : curidx - 1;
}
$tabs.eq(nextidx).click();
}
any help will be appreciated
You want to attach to the click handler of each tab item. Just add this block of code to your $(document) function. And set an id for your page heading element.
<h1 id="heading" class="wow fadeIn" data-wow-delay='0.4s'>Friends</h1>
$('ul[data-role="nd2tabs"] li').on('click',function(){
$("#heading").html($(this).html());
});
Here's the updated fiddle
http://jsfiddle.net/2a7so7r5/18/
I don't know what expected but this is my aproach
Modified example
function changeNavTab(left) {
var $active = $('ul[data-role="nd2tabs"] li.nd2Tabs-active');
if(left){
var $moveto = $active.next().length ? $active.next() : $('ul[data-role="nd2tabs"] li:first');
}else{
var $moveto = $active.prev().length ? $active.prev() : $('ul[data-role="nd2tabs"] li:last');
}
var title = $moveto.text();
$("h1.ui-title").text(title);
}
I build a custom carousel in ember and Jquery. Is pretty much straight forward. when click nextImage the slider move the the next image and when clicked previewsImage the slider goes back to the previews image. That part is working perfect. The problem is that when clicked on goToImage(AKA Dots controllers) the images don't move to the corresponding dots order. Look like my logic may have some problems in the.
<nav class="dots">
<a href="#" class="carousel-bullet "{{action 'goToImage' 1}}></a>
<a href="#" class="carousel-bullet"{{action 'goToImage' 2}}></a>
<a href="#" class="carousel-bullet"{{action 'goToImage' 3}}></a>
</nav>
App.SliderComponent = Ember.Component.extend({
currentIndex: 0,
actions: {
runSlider: function(x){
var currentIndex = this.get('currentIndex');
var indexDiff = this.$().find('.carousel ul li').index();
var carousel = this.$().find('.carousel ul'),
slideWidth = carousel.find('li').width();
console.log(indexDiff);
if(x == 1){
carousel.animate({left: - slideWidth }, 200, function () {
carousel.find('li:first-child').appendTo(carousel);
carousel.css('left', '');
});
}else{
carousel.animate({left: + slideWidth}, 200, function () {
carousel.find('li:last-child').prependTo(carousel);
carousel.css('left', '');
});
}
},
nextImage: function(){
this.send('runSlider', 1);
},
previewsImage: function(){
this.send('runSlider',0);
},
goToImage: function(newIndex){
var currentIndex = this.get('currentIndex')
var indexDiff = newIndex - currentIndex;
var direction = (newIndex > currentIndex) ? 'nextImage' : 'previewsImage';
for (var i = 0; i < indexDiff; i++){
this.send(direction);
}
}
}
});
Your indexDiff may be negative. For example, if new index is 0 and current index is 2. In this case, for loop in your code will not work. I guess changing var indexDiff = newIndex - currentIndex; to var indexDiff = Math.abs(newIndex - currentIndex); will help. If this will not help, I would suggest to put console.log(x); in the first line of runSlider action to look if it is called and what is passed.
I tried this code for a line preloader but it didn't work and i don't know where is the problem.
var $preload = $("<div class='preloader'><div class='percent'></div><div class='line-parent'><div class='line'></div></div></div>");
$("body").prepend($preload);
var $imgs = $("img");
var imgsLoaded = 0;
var ratio = 0;
$imgs.each(function(){
$this = $(this);
$this.load(function(){
imgsLoaded++;
ratio = imgsLoaded / $imgs.length;
$(".percent").html(ratio / 0.01 + "%");
$(".line").animate({
width : ratio / 0.01 + "%"
});
}, function(){
if(ratio === 1){
$(".preloader").fadeOut();
}
});
});
I belive you want to show 100% wenn all images are loaded and do some action. First load event will not work if is atteched after image is already loaded.
I sugest to check for each img comlete and naturalWidth property every 100ms (with setInterval).
Loader = (function() {
var list, img_length, loaded, interval;
function _check_one(i) { o = list[i]; if (o.complete == true && o.naturalWidth > 0) { loaded++; delete list[i]; } };
function _procent(l, a) { console.log((100*loaded/img_length) + '%'); }
function _check_list() { for(var i in list) {_check_one(i)};_procent();_kill(); };
function _kill() { if(img_length <= loaded) clearInterval(interval); }
function _start() { loaded = 0; list = $('img'); img_length = list.length;
if(img_length != loaded) interval = setInterval(_check_list, 100); }
return { start: _start }
})();
Now at end of the body or in $(document).ready(..) you need to call Loader.start();
Or put all images source (src) in data-src attribite, attach load events and copy data-scr to src attribite. In body all relevant images looks like this:
<img data-src="some url">...
In Script Tag:
$('img').on('load', function() {
// Your action.
}).each(function() { var img = $(this); img.attr('src', img.attr('data-src')); });
I have built a site for a client and when the user clicks on a navigation link, the content of the linked page is dynamically loaded and transitioned in with JQuery, instead of loading the new page.
The problem I am having is that because it is not loading a new page, $(document).ready doesn't fire again and any JS on the individual pages gets broken. For example, if you visit http://www.woodlandexotica.com/species.php the page works correctly, but if you try to navigate to the page from http://www.woodlandexotica.com/index_dev.php, the JS won't work.
I'm not an expert in JS and I really appreciate any and all help!
The problem is that when you call ".load()", you're using a URL string and a selector suffix to extract from the loaded content. When you use ".load()" that way, jQuery strips out all the scripts and does not run them. There's nothing you can do about that other than to implement your own version of ".load()" yourself, or (better) have the other pages you load not be complete HTML pages. If you use ".load()" without the selector suffix on the URL string, then jQuery does run the scripts.
See jQuery bug 6307 for more. The bug will not be fixed but hopefully the documentation will be improved.
The way you organized this code is wrong
Keep only binding's inside document.ready and move the logic outside to a functions..which can be accessed by any page.
$(document).ready(function() {
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// CONTENT BG SLIDESHOW
//////////////////////////////////////////////////
var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var slideshowSpeed = 8000;
var interval;
var activeContainer = 1;
var currentImg = 0;
var navigate = function(direction) {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = 1;
var showImage = function(photoObject, currentContainer, activeContainer) {
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
$("#bgimg" + activeContainer).css({
"background-image" : "url(" + photoObject + ")",
"display" : "block",
"z-index" : currentZindex
});
// Fade out the current container
// and display the header text when animation is complete
$("#bgimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
animating = false;
}, 500);
});
$("#bgimg" + currentContainer).css({
"z-index" : "1"
});
currentZindex = 1;
};
function photoLoaded() {
if(!--numPhotosLeft) {
navigate("next");
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
$('#bg_load').fadeOut('fast');
$('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
}
}
var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var numPhotosLeft = photos.length;
for(var i = 0; i < photos.length; ++i) {
var img = new Image();
img.onload = photoLoaded;
img.src = photos[i];
}
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// PAGE TRANSITION
//////////////////////////////////////////////////
// ADJUST FOR DEEPLINKING
var hash = window.location.hash.substr(1);
var href = $('a.link').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #page_bg';
$('#page_bg').load(toLoad)
}
});
$('a.link').click(function() {
var toLoad = $(this).attr('href')+' #page_bg';
$('#page_bg').animate({opacity: 0.25, marginLeft: '-=875'}, 500, loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); //MODIFY FOR DEEP LINKING
function loadContent() {
$('#page_wrap').prepend('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
$('#page_bg').css('marginLeft', 860);
$('#page_bg').css('backgroundImage', 'none');
$('#page_bg').load(toLoad,'',hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast', showNewContent);
}
function showNewContent() {
$('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
}
return false;
});
//set initial position and opacity
$('#page_bg').css('marginLeft', 860);
$('#page_bg').css('opacity', 0.25);
$('#page_wrap').prepend('<span id="bg_load">LOADING...</span>');
$('#bg_load').fadeIn('fast');
//////////////////////////////////////////////////
//////////////////////////////////////////////////
});