Have problems with firefox 33.1 my scroll to div is not directing to my target div id im using polymer core-scaffold as my navigation but its working fine using chrome
and i don't have any errors on my console
here's my script
<script>
var scaffold = document.getElementById('scaffold');
var menu = document.getElementById('menu');
menu.addEventListener('core-select', function(e) {
if (e.detail.isSelected) {
scrollToSection(e.detail.item.getAttribute('name'));
}
});
function scrollToSection(id) {
var section = document.getElementById(id);
if (section) {
scaffold.$.headerPanel.scroller.scrollTop = section.offsetTop;
}
}
</script>
here's my navigation code
<core-scaffold id="scaffold" responsiveWidth="640px">
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Navigation</core-toolbar>
<core-menu id="menu">
<core-item name="drawerPanel" icon="home" label="Home"></core-item>
<core-item name="about" icon="account-circle" label="Who"></core-item>
<core-item name="works" icon="work" label="Works"></core-item>
<core-item name="skills-cont" icon="gesture" label="Skills" name="skills"></core-item>
<core-item name="contacts-cont" icon="settings-phone" label="Contacts"></core-item>
<core-item name="cart" icon="shopping-cart" label="D Shop"></core-item>
<core-item name="v8" icon="link" label="v8"></core-item>
<core-item name="v7" icon="link" label="v7"></core-item>
<core-item name="v6" icon="link" label="v6"></core-item>
</core-menu>
<div id="about">
<about-koh></about-koh>
</div>
<div id="works">
<works></works>
</div>
....
is it possible to change the offsetTop depends on browser like if in firefox i want it to offsetTop -75 then in chrome it will be offsetTop -10 ?
ok found out that the reason was my jquery script i had this script and it has a duplicate script with different class so to fix it i remove the duplicate script.
my old script reason i got problem
jQuery.noConflict();
jQuery(document).ready(function(){
var i = 0;
var posts = jQuery('.ab-effect').children();
function animateCircle() {
if (i % 2 === 0) {
jQuery(posts[i]).addClass('visible animated fadeInUp');
} else {
jQuery(posts[i]).addClass('visible animated fadeInDown');
}
i++;
if (i <= posts.length) {
startAnimation();
}
}
function startAnimation() {
setTimeout(function () {
animateCircle();}, 1000);
}
posts.addClass('hidden');
animateCircle(posts);
});
jQuery.noConflict();
jQuery(document).ready(function(){
var i = 0;
var posts = jQuery('.sk-effect').children();
function animateCircle() {
if (i % 2 === 0) {
jQuery(posts[i]).addClass('visible animated fadeInUp');
} else {
jQuery(posts[i]).addClass('visible animated fadeInDown');
}
i++;
if (i <= posts.length) {
startAnimation();
}
}
function startAnimation() {
setTimeout(function () {
animateCircle();}, 1000);
}
posts.addClass('hidden');
animateCircle(posts);
});
my new script that fix my problem - i just remove the duplicate script
jQuery.noConflict();
jQuery(document).ready(function(){
var i = 0;
var posts = jQuery('.ab-effect').children();
function animateCircle() {
if (i % 2 === 0) {
jQuery(posts[i]).addClass('visible animated fadeInUp');
} else {
jQuery(posts[i]).addClass('visible animated fadeInDown');
}
i++;
if (i <= posts.length) {
startAnimation();
}
}
function startAnimation() {
setTimeout(function () {
animateCircle();}, 1000);
}
posts.addClass('hidden');
animateCircle(posts);
});
Related
I have a portfolio grid that has a screenshot of past work in each grid item.
Currently on button click, it calls a function to scroll the screenshot and stop once it reaches the bottom of the image.
I need to reverse the scroll once the button is clicked again. The scroll is created by a setInterval. I have a class of "down" on the button which is removed on click.
I have an if statement that does not work to check if the class of "down" is present and run a scrollUp function.
This is a PHP loop so there are multiple buttons with same class.
I cannot use jQuery.
Thanks for any help!
HTML:
<ul>
<li>
<div class="image-container overflow-hidden height-500">
<img class="item absolute pin-t w-full h-auto pin-l"
src="/image.jpg"/>
</div>
<button class="portScroll down">Scroll Down</button>
</li>
<li class="web-design-portfolio">
<div class="image-container overflow-hidden height-500">
<img class="item absolute pin-t w-full h-auto pin-l"
src="/image.jpg"/>
</div>
<button class="portScroll down">Scroll Down</button>
</li>
</ul>
JS:
function scrollDown() {
var portImg = this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == height - 500) {
clearInterval(id);
} else {
pos++;
portImg.style.top = - + pos + 'px';
}
}
for (const button of document.querySelectorAll('button.portScroll')) {
button.classList.remove('down');
}
}
for (const button of document.querySelectorAll('button.portScroll')) {
if (button.classList.contains("down")) {
button.addEventListener("click", scrollDown);
} else {
button.addEventListener("click", scrollUp);
}
}
Here is the working Codepen for scroll down:
https://codepen.io/completewebco/pen/bZeVoz
I created a single function that does what is needed. I hope that is OK.
function scrollUpOrDown(_this, state) {
var portImg = _this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;
if(state.id > -1) {
clearInterval(state.id);
state.dir *= -1;
}
if(state.pos < 0) {
state.pos = 1;
}
state.id = setInterval(frame, 5);
function frame() {
if ((state.pos == height - 500 && state.dir > 0) || (state.pos == 0 && state.dir < 0)) {
clearInterval(state.id);
} else {
state.pos += state.dir;
portImg.style.top = -+state.pos + "px";
}
}
}
for (const button of document.querySelectorAll("button.portScroll")) {
let scollingState = {
pos: -1,
id: -1,
dir: 1
};
if (button.classList.contains("down")) {
button.addEventListener("click", function(){
scrollUpOrDown(this,scollingState);
});
}
}
https://codepen.io/prtjohanson/pen/QoEyQK
If you are wondering why/how it works, look at the output of this code
var array = [0,1,2,3,4,5];
for(const i in array) {
setTimeout(function(){console.log(i)}, Math.random()*1000)
}
and read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Scoping_rules_2
I am trying to add a class to a div when another class is been removed with JS.
This is my HTML:
<body class="homepage">
<div id="wrap">
<div id="projects">
<section id="project-0" class="slide active"> Slide 1</section>
<section id="project-1" class="slide active"> Slide 2</section>
<section id="project-2" class="slide active"> Slide 3</section>
</div>
</div>
<div class="content"> Website main content </div>
This is a vertical slide, so when you scroll down, the active class is removed with JS. What I want to achieve is to add a class to body when the active is removed from project-2.
This is what I have so far, but it doesn't recognise the class active because it's been added via JS...
if(!$("#project-2").hasClass("active")){
$("body").addClass("shifted");
}
JS:
var delta = 0;
var currentSlideIndex = 0;
var scrollThreshold = 30;
var slides = $(".slide");
var numSlides = slides.length;
function elementScroll (e) {
console.log (Math.abs(delta));
// --- Scrolling up ---
if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
delta--;
if ( Math.abs(delta) >= scrollThreshold) {
prevSlide();
}
}
// --- Scrolling down ---
else {
delta++;
if (delta >= scrollThreshold) {
nextSlide();
}
}
// Prevent page from scrolling
return false;
}
function showSlide() {
// reset
delta = 0;
slides.each(function(i, slide) {
$(slide).toggleClass('active', (i >= currentSlideIndex));
});
}
function prevSlide() {
currentSlideIndex--;
if (currentSlideIndex < 0) {
currentSlideIndex = 0;
}
showSlide();
}
function nextSlide() {
currentSlideIndex++;
if (currentSlideIndex > numSlides) {
currentSlideIndex = numSlides;
}
showSlide();
}
$(window).on({
'DOMMouseScroll mousewheel': elementScroll
});
You can see here how it works
Thanks
By looking at your JS code I believe you want to add class to body while scrolling down. You may try below code:
function prevSlide() {
currentSlideIndex--;
if(currentSlideIndex == (numSlides-1))
{
$("body").removeClass("shifted"); // remove the class from body
}
if (currentSlideIndex < 0) {
currentSlideIndex = 0;
}
showSlide();
}
function nextSlide() {
currentSlideIndex++;
if (currentSlideIndex > numSlides) {
currentSlideIndex = numSlides;
$("body").addClass("shifted"); // add the class to body
}
showSlide();
}
Your check for the absence of the class is only started once. You had to do this with an interval from 100 ms or whatever you want:
setInterval(function()
{
if (!$("#project-2").hasClass("active")){
$("body").addClass("shifted");
}
}, 100);
I am trying to do a sort of navigation based on current section.
My code is as follows:
$(function() {
'use strict';
function setTitle(title) {
$('.overlay').text(title);
}
function removeTitle() {
$('.overlay').text('');
}
$(window).on('scroll', function() {
let windowScroll = $(window).scrollTop(),
sections = $('section[data-title]');
sections.each(function() {
let thisStart = $(this).offset().top,
thisHeight = $(this).outerHeight(true),
thisTitle = $(this).attr('data-title'),
thisEnd = thisHeight + thisStart;
console.log(`start: ${thisStart}, end: ${thisEnd}, scroll: ${windowScroll}`);
if(windowScroll >= thisStart && windowScroll < thisEnd) {
setTitle(thisTitle);
} else {
removeTitle();
}
});
});
});
HTML
<section class="section section-first"></section>
<section class="section section-what" data-title="First">
</section>
<section class="section section-cv" data-title="Secound">
</section>
<div class="overlay"></div>
Unfortunately, it works only with last .section. What can I do?
Please refer to my CodePen to see what I mean exactly: http://codepen.io/tomekbuszewski/pen/Xmovwq
Add return false; here:
if(windowScroll >= thisStart && windowScroll < thisEnd) {
setTitle(thisTitle);
return false; // <- add this
} else {
removeTitle();
}
That will break out of the each method and prevent the title from being removed once it's been set.
CodePen
I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};
Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});
finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.
I want to create an image gallery, I wrote for a slideshow, but I don't know how to code for the previous and next buttons. These should work like an infinite loop (last image jumps back to the first).
How should I get started? This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#play").click(function () {
$("#img1").fadeOut(2000);
$("#img2").fadeIn();
$("#img2").fadeOut(4000);
$("#img3").fadeIn();
});
});
</script>
<body>
<div id=outer>
<div id=inner>
<img id="img1" src="img1.jpg"/>
<img id="img2" src="img2.jpg" style="display:none"/>
<img id="img3" src="img3.jpg" style="display:none"/>
</div>
<div id=button>
<button id="bwd"><<</button>
<button id="play"><></button>
<button id="fwd">>></button>
</div>
</div>
</body>
You can use setInterval() .
This link can help you to understand much more
Call function with setInterval in jQuery?
may be this can help you too :
http://jquery.malsup.com/cycle/
you're going to want to use the javascript timing function. Something like:
$('#play').click(function(){
window.setInterval(function(){
if($('#img1').is(:visible)){
$("#img2").show()
$("#img1").hide()
}
if($('#img2').is(:visible)){
$('#img3').show()
$('#img2').hide()
}
if($('#img3').is(:visible)){
$('#img1').show()
$('#img3').hide()
}
}, 1000);
});
You can also condense this logic down, but this gets you the basic idea. Then if you look carefully the functions for next is already in the code and it can be extracted out and reuses. Once you have the next function it's pretty straight forward that the back function will be the exact opposite.
To answer your question below you can change the img's to have the same class and then apply show and hide based on which one is visible and the image immediately after the visible one:
#find the one currently being shown
$(".images:visible")
#find the one after the visible one
$(".images:visible").next()
#keep an id on the last image so that you can do something like
if($('.images:visible') == $('#last_image')){
$('.images').first().show()
}
Hi i have created Carousel without using any third party plugin.If you want please refer.Reference Link
Js Code is.
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 300;
var slides = $('.slide');
var numberOfSlides = slides.length;
var timer = 3000;
var img1, img2;
var sliderLink = $("#slider a");
var direction = 1;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width
slides.wrapAll('<div id="slideInner"></div>').css({
'float': 'left',
'width': slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
// manageControls(currentPosition);
// manageSlide();
// Create event listeners for .controls clicks
$('#rightControl').bind('click', rightControl);
$('#leftControl').bind('click', leftControl);
function leftControl() {
var butonid = 0;
direction = 0;
$("#slideInner").stop();
$("#slideInner").dequeue();
$('#timer').stop();
$('#timer').dequeue();
$('#leftControl').unbind('click');
manageSlide(0, direction);
setTimeout(function () {
$('#leftControl').bind('click', leftControl);
}, timer, null);
}
function rightControl() {
var butonid = 1;
direction = 1;
$("#slideInner").stop();
$("#slideInner").dequeue();
$('#timer').stop();
$('#timer').dequeue();
$('#rightControl').unbind('click');
manageSlide(0, direction);
setTimeout(function () {
$('#rightControl').bind('click', rightControl);
}, timer, null);
}
var slideIndex = 0;
var data = $("#slideInner .slide").toArray();
$("#slideInner").empty();
function manageSlide(auto, idButtonid) {
$("#slideInner").empty();
// console.log(slideIndex);
if (idButtonid == 0) {
$("#slideInner").css({ 'marginLeft': "-300px" });
$(data).each(function (index) {
// if (index == slideIndex - 1) {
// $(this).show();
// } else {
$(this).hide();
// }
});
$(data[slideIndex - 1]).show();
if (slideIndex == numberOfSlides - 1) {
slideIndex = 0;
img1 = data[0];
img2 = data[numberOfSlides - 1];
$("#slideInner").append(img1);
$("#slideInner").append(img2);
$(img2).show();
$(img1).show();
} else {
img1 = data[slideIndex];
img2 = data[slideIndex + 1];
$("#slideInner").append(img2);
$("#slideInner").append(img1);
$(img1).show();
$(img2).show();
slideIndex = slideIndex + 1;
}
$('#slideInner').animate({
'marginLeft': "0px"
}, 'slow', function () {
$('#timer').animate({
opacity: 1
}, timer, function () {
console.log('leftControl');
manageSlide(1, direction);
});
});
}
// right move here
else if (idButtonid == 1) {
$("#slideInner").css({ 'marginLeft': "0px" });
$(data).each(function (index) {
if (index == slideIndex + 1) {
$(this).show();
} else {
$(this).hide();
}
});
if (slideIndex == numberOfSlides - 1) {
slideIndex = 0;
img1 = data[0];
img2 = data[numberOfSlides - 1];
$("#slideInner").append(img2);
$("#slideInner").append(img1);
$(img2).show();
$(img1).show();
} else {
img1 = data[slideIndex];
img2 = data[slideIndex + 1];
$("#slideInner").append(img1);
$("#slideInner").append(img2);
$(img1).show();
$(img2).show();
slideIndex = slideIndex + 1;
}
$('#slideInner').animate({
'marginLeft': slideWidth * (-1)
}, 'slow', function () {
console.log('rightControl');
$('#timer').animate({
opacity: 1
}, timer, function () {
manageSlide(1, direction);
});
});
}
if (auto == 1) {
sliderLink.each(function () {
$(this).removeClass();
if ($(this).text() == (slideIndex + 1)) {
$(this).addClass('active');
}
});
}
auto = 1;
}
$("#slider a").click(function () {
sliderLink.each(function () {
$(this).removeClass();
});
slideIndex = $(this).addClass('active').text() - 1;
$('#timer').stop();
$('#timer').dequeue();
$("#slideInner").stop();
$("#slideInner").dequeue();
manageSlide(0, direction);
});
manageSlide(1, direction);
});
Demo Link
Hope it helps you.