We Keep Coding

Responsive Smooth Scroll CSS3 Animation?

I've been trying to get a smooth scroll animation for a while now, but mainly in JS..
This hasn't been working out that well so I decided to try in CSS3.
Now I want to make this animation responsive by calling a JS function which adds the CSS rules for the animation responsive to the object the animation is for. Here is the JS code I've got so far. I'll also leave a Fiddle, but I'm new to that so things might not work right away.
function getTexts() {
var element = document.getElementsByClassName('toplink');
for (x = 0, len = element.length; x < len; x++){
var ID = element[x].textContent.toLowerCase();
var object = document.getElementById(ID);
console.log(object);
addCSSAnimator(ID);
}
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = document.getElementById(el);
var Class = DOM.getAttribute("class");
var Parent = DOM.parentElement.getAttribute("id");
var rect = DOM.getBoundingClientRect();
var rule = ".toplink[ id= '"+el+"' ]:target - #"+Parent+" div."+Class+" {\n" +
"-webkit-transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
"}";
console.log("Stylesheet: ",sheet," object: ",DOM," Class: ",Class," offset X&Y:",rect.x," ",rect.y);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
https://jsfiddle.net/dtj46c64/

You may try moving to jquery for this solution. Use document.ready and window.resize functions to handle the animation and also instead of for loop. use the jquery .each() function to get the elements. Try working around the following code i changed for you to go along with. Hope this puts you in the right direction to achieve your goal:
<script>
function getTexts() {
$(".toplink").each(function () {
let ID = $(this)
console.log(ID);
addCSSAnimator(ID);
});
}
function addCSSAnimator(el) {
var sheet = document.styleSheets[0];
var DOM = el;
var Class = DOM.attr("class");
var Parent = DOM.parent().attr("id");
var rect = DOM[0].getBoundingClientRect();
var rule = ".toplink[ id= '" + el + "' ]:target - #" + Parent + " div." + Class + " {\n" +
"-webkit-transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
"}";
console.log("Stylesheet: ", sheet, " object: ", DOM, " Class: ", Class, " offset X&Y:", rect.left, " ", rect.top);
console.log(rule);
sheet.insertRule("body { background-color: 0; }", 1);
}
$(window).on('resize', function () {
getTexts();
});
$(document).ready(function () {
getTexts();
});
</script>
Notice i changed the rect.y to rect.top as on some browsers the getBoundingClientRect fucntion does not return x and y values but left and top are always filled.
Also dont know why you are getting id of the parent of the object as there is no id set to the parent of the anchor class="toplink" so it will always return as null or empty.
Sorry for not a 100% answer as got busy but i hope the solution so far i suggested will help you tweak and find what your looking for.

$(document).height returns incorrect height the first time, correct the second time

I am trying to put a pop up screen, and I want to darken the background when pop up opens.
This is the Javascript.
$(document).on('click', '.item', function(){
$("#popUp").css("display" , "block");
var divId = $(this).attr("id");
$.get('portfolio/portfolio.xml', function(file){
$(file).find('item').filter(function() {return $(this).attr("id") == divId;}).each(function(){
var $item = $(this);
var name = $item.find("name");
var description = $item.find('description');
$("#popUpName").html(name.text()) ;
$("#popUpDescription").html(description.text());
var im; var n=0;
$item.find('image').each(function() {
var i = "<img src='" + $(this).text() + "'></img>";
i += "<div>" + $(this).attr("description") + "</div>";
$("#popUpImage").append(i);
});
setPopUpHeight();
$(document).scrollTop(0);
});
});
});
function setPopUpHeight() {
//alert($(document).height());
$("#popUp").height($(document).height());
alert($("#popUp").height());
}
For example: In one case the first time the value is 3701, the second time it's 4196.
Edit: $(document).height, changed from $(window).height.
Edit: I should add that if uncomment the first alert, the second time document.height returns the right value.

Replace $(document).height() with $(window).height().
Also moved the SetPopUpHeight() and scrollTop() calls which need not be called once per 'item'.
$(document).on('click', '.item', function(){
$("#popUp").css("display" , "block");
var divId = $(this).attr("id");
$.get('portfolio/portfolio.xml', function(file){
$(file).find('item').filter(function() {return $(this).attr("id") == divId;}).each(function(){
var $item = $(this);
var name = $item.find("name");
var description = $item.find('description');
$("#popUpName").html(name.text()) ;
$("#popUpDescription").html(description.text());
var im; var n=0;
$item.find('image').each(function() {
var i = "<img src='" + $(this).text() + "'></img>";
i += "<div>" + $(this).attr("description") + "</div>";
$("#popUpImage").append(i);
});
});
setPopUpHeight();
$(document).scrollTop(0);
});
});
function setPopUpHeight() {
//alert($(document).height());
$("#popUp").height($(window).height());
alert($("#popUp").height());
}

If you do $(window).height().top; it should display correctly

How to Iterate with fade out?

I wanna to improve this chunk of code to make each image appears independently and doing the fade out.
This one face a problem , which is iterating quickly , so only the last image is appeared and doing the fade out.
jQuery.each(
slidesArray, function (index, value) {
var linkHref = value[1];
var imageSource = value[0];;
$("#slider").html("<a href='" + linkHref + "'><img src='" +
imageSource + "'></a>").fadeOut(5000);
});
Can you help me ? note that images should be animated respectively.

Here's a little jQuery plugin that will help:
jQuery.slowEach = function( array, interval, callback ) {
if( ! array.length ) return;
var i = 0;
next();
function next() {
if( callback.call( array[i], i, array[i] ) !== false )
if( ++i < array.length )
setTimeout( next, interval );
}
};
jQuery.fn.slowEach = function( interval, callback ) {
jQuery.slowEach( this, interval, callback );
};
Include the plugin above. It adds a slowEach method and function: $(...).slowEach(interval,callback) and $.slowEach(interval,delay,callback). It iterates over an object or jQuery selection, waiting for delay milliseconds after each iteration.
Edit your code from above to use slowEach:
jQuery.slowEach(
slidesArray, 5000, function (index, value) {
var linkHref = value[1];
var imageSource = value[0];
$("#slider").html("<a href='" + linkHref + "'><img src='" + imageSource + "'></a>").fadeOut(5000);
});

I haven't tested this, but in theory should work
function fader(i){
$("#slider").css('display', '');
if (i == slidesArray.length){
return;
}
var linkHref = slidesArray[i][1];
var imageSource = slidesArray[i][0];
i++;
$("#slider").html("<a href='" + linkHref + "'><img src='" +
imageSource + "'></a>").fadeOut(5000, fader(i));
}
fader(0);
Edit: I've tested it, seems to be working. Here's a similar use demo
Notice that there's no need to use setTimeout

Every time you call $("#slider").html() you replace the content of #slider.
what you want to do isn't delay the actual loop, you want to delay the placement [and fading] of the image. You can use setTimeout to do that like this:
jQuery.each
(
slidesArray,function(index,value)
{
var linkHref = value[1];
var imageSource = value[0];;
setTimeout(function() {
$("#slider").html
(
"<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>"
).fadeOut(5000);
}, 2000 * index);
}
);

Active state in the wrong button

I am editing a site that the menu is using a JavaScript. I managed to have it working but the hover state is just showing in the wrong place.
Here is the link. If you click on "Gallery" it's the Media that gets highlighted so on the last 3 menu items. Help please.
Here is the JavaScript code:
$(document).ready(function(){
$('#menu .container').each(function(i){
if(i==0)
{
var m = 1;
}
else
{
var m = 2;
}
$(this).css('width',((m-1)*$(this).parent('li').height() + $(this).parent('li').width())).css('height',$(this).parent('li').height()).css('margin-left',-(m-1)*$(this).parent('li').height()).css('cursor','pointer');
if(cur_page!=i)
{
$(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top',$(this).parent('li').height()).css('left',-/*m**/($(this).parent('li').height()));
}
else
{
$(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top','0px').css('left','0px');
}
$(this).find('.text').html('<img src="' + tpl_base + '/images/menu-title-' + (i+1) + '.png" />').css('margin-left',(m-1)*$(this).parent('li').height());
switch(i)
{
case 0: var a = url_base + '/bio';
break;
case 1: var a = url_base + '/blog';
break;
case 2: var a = url_base + '/gallery';
break;
case 3: var a = url_base + '/media';
break;
case 4: var a = url_base + '/contact';
break;
default: var a = url_base;
}
$(this).click(function(){
window.location = a;
});
var t = $(this).parent('li').height();
if(cur_page!=i)
{
$(this).hover(function(){
$(this).find('.slide').stop().animate({top:'0px',left:/*-(t*(m-1))*/0 + 'px'}, 200)
},function(){
$(this).find('.slide').stop().animate({top:t + 'px',left:-(t/**m*/) + 'px'}, 400)
});
}
});
});

The highlighting of the menu items appears to be done based on the variable cur_page which is being set incorrectly at some point in the code; here are the values as they sit now:
Home : cur_page = -1
Bio : cur_page = 0
Blog : cur_page = 1
Gallery : cur_page = 3 // Incorrect
Media : cur_page = 4 // Incorrect
I would check that this is being set correctly; good luck!
EDIT:
In the header of the Gallery page is this:
<script>
var url_base = "http://www.ryansemple.com";
var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
var cur_page = -1;
cur_page = 3;
</script>
Change it to this:
<script>
var url_base = "http://www.ryansemple.com";
var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
var cur_page = 2;
</script>
A similar fix should take care of the remaining pages.

What is cur_page? I assuming that it's current page index and you have difference in calculation. Probably your index starts with 0 but cur_page starts from 1.

cursor JAVASCRIPT needs to be adapted to wordpress DOCTYPE

if you are experienced with relations between javascript and doctype declaration , any help would be appreciated. i use wordpress and i am trying to include cursor script into a page. the script works without default wordpress doctype, with it - it does not. any suggestions how to make the cursor script work, please?
HTML doctype declaration for my WordPress:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code for cursor:
<STYLE type="text/css">
<!--
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</STYLE>
<SCRIPT language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail
//Visit http://www.rainbow.arch.scriptmania.com for this script
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1200 //duration images stay on screen (in milliseconds)
kissSpacer = 30 //distance to move mouse b4 next heart appears
theimage = "cur.png" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</SCRIPT>
<!--Simply copy and paste just before </BODY> section of your page.-->
<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}
// decloak -->
</SCRIPT>

The script is riddled with very old browser detection code, this could cause it to break in 'newer' browsers with a stricter DOCTYPE.
Try to remove the 'language="JavaScript1.2"' in the script tag. If that doesn't work you'd have to rewrite the browser detection.
The actual script isn't very complicated though so perhaps you could find parts elsewhere and combine them.
You need to do two things:
Hide the cursor (which is done with CSS)
Fetch the mouse position and place your own cursor there (typically an image). For this you will need a script that fetch the mouse position.
Shouldn't be too hard :)