On Codepen I found a neat little interactive graphic use of Javascript, jQuery, and the canvas element.
http://codepen.io/altescape/pen/tbdao
Note: After reading the comments below, I removed the demo I had
uploaded, and even the author of the pen acknowledges he 'just wanted
to play' with it and didn't create it. Hence, I am linking to it just
because it's neat but using it without permission is a no-no. Thanks
for bringing it to my attention.
What I want is to insert it on that (my) site's homepage, in the place of the "under construction message" that is front and center. I'm pretty new to JS but I am good with HTML & CSS, and aware of the basics of DOM...I thought I'd be able to figure out how to adjust it appropriately but no luck, when I inserted the code as if it were HTML going in a div it just floated in the middle of the screen like it is now.
About 90% to the bottom of the JS file there are a few lines of code:
$(function () {
function n(d) {
var b = "";
for (jj = 0; jj < d.length; jj++) b += d.charCodeAt(jj).toString(16);
return b
}
function p() {
j.attr({
height: $(window).height(),
width: $(window).width()
});
k = j.width();
l = j.height();
q()
}
The whole height and width seemed promising but making and adjustment broke it entirely. Can anybody explain to me how to make sense of or successfully manipulate this code so I can position it...perhaps even in a way that will allow it to display appropriately in different size browser windows (I am using CSS media queries)?
I read every post on here that seemed to be related, but to be honest, I might not even be using relevant query phrases as I am not sure if I am using the right terminology. I am completely lost on this one and a bit out of my league, thanks for your patience.
Related
So I am building a website that requires web animations, and in my initial development, I used jQuery to build the animations, however I have been told that jQuery is becoming old practice, and have decided to switch over to vanilla JavaScript, however I am not sure if I am using the best practice to do so. As such, here is my code:
window.onscroll=function top(){
var totalDuration=250;//total desired duration of animation
var img=document.getElementById("image");
var objective=document.getElementById("objective");
var header=document.getElementsByTagName("header");
var newHeaderHeight=.25*window.innerHeight;
var newImageMargLeft=.15*window.innerHeight;
var newImageMargTop=.01*window.innerHeight;
var origHeaderHeight=window.getComputedStyle(header[0],null).getPropertyValue("height");
var origImageMargLeft=window.getComputedStyle(img,null).getPropertyValue("margin-left");
var origImageMargTop=window.getComputedStyle(img,null).getPropertyValue("margin-top");
origHeaderHeight=origHeaderHeight.substring(0,origHeaderHeight.length-2);
origImageMargLeft=origImageMargLeft.substring(0,origImageMargLeft.length-2);
origImageMargTop=origImageMargTop.substring(0,origImageMargTop.length-2);
var headerFactor=((newHeaderHeight-origHeaderHeight)/totalDuration);
var imgMargLeftFactor=((newImageMargLeft-origImageMargLeft)/totalDuration)*5;
var imgMargTopFactor=((newImageMargTop-origImageMargTop)/totalDuration)*5;
var id=setInterval(func,250);
function func(){
if (window.scrollY>window.innerHeight*.1){
if (header[0].style.height===newHeaderHeight){
id=clearInterval();
}
else{
header[0].style.height=window.getComputedStyle(header[0],null).getPropertyValue("height").substring(0,window.getComputedStyle(header[0],null).getPropertyValue("height").length-2)-headerFactor;
img.style.marginTop=window.getComputedStyle(img,null).getPropertyValue("margin-Top")-imgMargTopFactor;
img.style.marginLeft=window.getComputedStyle(img,null).getPropertyValue("margin-Left")-imgMargLeftFactor;
console.log("Header: "+(parseFloat(window.getComputedStyle(header[0],null).getPropertyValue("height").substring(0,window.getComputedStyle(header[0],null).getPropertyValue("height").length-2)))-4);
console.log("Margin Top: "+typeof(4));
console.log("Margin Left: "+img.style.marginLeft);
}
}
I know it looks very chaotic, and that was what I was afraid of.
I am essentially trying to animate a header bar that collapses after the scroll bar scrolls past a certain point. However I have multiple elements inside of it that I want to collapse and manipulate, and not just keep it to scale (i.e. change margins when collapsing, and set back to original when expanding, all of which is to be done simultaneously and, from the user's perspective, evenly.
A follow up question I have is, is it worth doing it in vanilla JavaScript? Or should I learn a framework? If so, which one, and why use a framework over vanilla JavaScript, even after all of my research, I am struggling to see why it is so important to learn these frameworks for web development, if they are built off of JavaScript in the first place (in reference to vue or react, etc.)
I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.
The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.
When I check with firebug, there's an element.style rule applying to ul.slides:
transform: translate3d(-89px, 0px, 0px);
Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.
Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.
I think I've figured it out, in principal at least...
.flexslider{display:none;} seems throw off the re-size function of Flexslider.
You could just remove it, but that makes for some ugly loading.
To avoid said ugly loading I put together a quick, work-around- jsFiddle
$(document).ready(function(){
$(".flexslider").css('display','block').slideUp();
});
There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.
Another method I played with a bit was to try and force the re-size function like so-
$(".client").click(function () {
$('.flexslider').resize(); // Problematic but promising
var project = this.id;
var project_id = '#' + project + '-project';
var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
elem.slideUp('slow', function () {
$(project_id).slideDown('slow');
});
});
This sort of solved the mini-picture issue, but was spotty at best.
I was just going through the source of modal.js and came across the following method with which i have difficulty understanding,
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
actually the above method is pretty straightforward ,
basically its storing the current padding on the body and then ,
checking if the body is overflowing and after that applying padding-right .
now my question is whats the practical or visual use of this function ??
i have gone through most functions in modal.js and they do make sense to me, except this function , some of the functions i have seen have pretty subtle effects , so its hard to pick , but with this function even i am unable to pick whats the subtle difference with or without it.
Can somebody elaborate. the function i am having difficulty with can be found on git. Line 269.
Thank you.
Alexander.
By increasing the size of the right-padding of the body by the width of the scroll bar it's ensuring that the scroll bar is not overlapping content...and that's why you probably don't notice it. It's really only something you'd notice if it wasn't being used (your content could potentially be overlapped by the scroll bar).
The issue I am having is fairly complicated to explain. I have written up a javascript that displays an image slideshow, and it works fairly well, despite using up more resources than I would like
// imgArr[] is populated before
var i = 0;
var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
}
function displaySlideshow() {
document.getElementById(destinationId).innerHTML = '<div id="slideWindow"><img src="'+imgArr[i]+'" />' + '<img src="'+imgArr[i + 1]+'" /></div>';
setTimeout('displaySlideshow()',1000*3);
i++;
if (i >= imgArr.length - 1)
i = 0;
}
loaded(destinationId,displaySlideshow);
So, this script dynamically adds two images to a HTML element, and it is wrapped in a div.
The div is styled with the height and width of the image, with the overflow (the second image) hidden.
The second image is below the first, and the slideshow is meant to go from RIGHT to LEFT.
My inquiry is twofold:
1) Is there a more efficient way of doing this?
2) How would I animate the images? Would I need to put the second image on the right of the first with CSS somehow, and then set a timer to pull the images (via a style) leftward?
I really don't recommend rolling your own animation library. The Facebook Animation Library written by the wonderful Marcel Laverdet is simple to use and comes with a lot of tutorials to get what you want out of your slideshow. (Note: ignore the FBJS stuff, it's exactly the same even if you're using it on your own site.)
If you're not using a framework, I think you'll find a lot of pain ahead of you. If you still don't want to use a framework, at least find one that is liberally licensed, and take a look at the source code. Here's one, for example.
The basic theory is, yes, you set a timer that moves the image on some sort of interval, either fixed or based on some sort of mathematical equation (eg, sin, cos, etc). By setting these intervals close together, and making lots of them, you get an "animation" in javascript. Typically, you'd use some sort of absolute positioning, moving one element off the screen as the other moves on.
I have a swf with loads text into a Sprite that resizes based on the content put into - I'd like though for the ones that are longer than the page to have the browser use its native scroll bars rather than handle it in actionscript (very much like http://www.nike.com/nikeskateboarding/v3/...)
I did have a look at the stuff nike did but just wasn't able to pull it off. Any idea's?
The trick is to use some simple JavaScript to resize the Flash DOM node:
function resizeFlash( h ) {
// "flash-node-id" is the ID of the embedded Flash movie
document.getElementById("flash-node-id").style.height = h + "px";
}
Which you call from within the Flash movie like this:
ExternalInterface.call("resizeFlash", 400);
You don't actually need to have the JavaScript code externally, you can do it all from Flash if you want to:
ExternalInterface.call(
"function( id, h ) { document.getElementById(id).style.height = h + 'px'; }",
ExternalInterface.objectID,
400
);
The anonymous function is just to be able to pass in the ID and height as parameters instead of concatenating them into the JavaScript string.
I think that the JavaScript is fairly cross-platform. If you want to see a live example look at this site: talkoftheweather.com. It may not look as though it does anything, but it automatically resizes the Flash movie size to accommodate all the news items (it does this just after loading the news, which is done so quickly that you don't notice it happening). The resize forces the browser to show a vertical scroll bar.
I've never done it that way around but I think swffit might be able to pull it off.
I halfway looked at swffit but the height (and width sometimes but mainly height) would be dynamic - swffit let's you declare a maxHeight but that number would be constantly changing...maybe I could figure out how to set it dynamically. A great place for me to start though - thanks!
What I've mostly been using if for is to limit how small you can make a "fullbrowser" flash, and for that it works great.
Happy hacking!
(and don't forget to post your findings here, I might need that too soon ;))
SWFSize
See here for more details.
Intuitsolutions.ca