Storytelling Scrolling - javascript

Can someone please identify how this site has the effect of sliding through pages? Mainly how it pulls down one page up and onto another. Is it Javascript? I think it is very well done.
http://hire.visualidiot.com/typestacks
Thanks!
Joe

helixed's answer explains how they did it. However if you want to recreate the effect yourself have a look at using Parallaxjs rather than taking potentially copy-written code.
See the demo site: http://stolksdorf.github.com/Parallaxjs/
And source: https://github.com/stolksdorf/parallaxjs/
Edit: There is a bug with that website, try holding down the arrow key for a few seconds before letting go.

I opened it in Safari and disabled JavaScript. The sliding effect went away (although it degrades nicely). Clearly JavaScript must be involved somehow. Okay, so I popped open Chrome Developer Tools and looked at the resources. There's a script called handler.js. I opened it up and sure enough there's some nicely documented code. It looks like it's using jQuery animations. Take a look at the script. You should be able to figure it out from there.

Related

Why is some of my JQuery loading right away, and other parts are taking over ten minutes to load on a page (or never loading)?

I'm developing a web-page, basically from scratch. I have a .html file, .css file, and .js file that includes only JQuery. I am only running this locally on my own machine, and for some reason, now only some of my Javascript loads. For instance, I have some hidden s that when hovered over, they are displayed with JQuery calls. These seem to work fine as they always have. I have a scrolling sidebar that has hidden sub-menu items, and this usually loads fine as well. I have a hidden div that displays a definition list on a button click, and when you hover over the , the should slideDown. If I wait about 10-15 minutes this will start working. But obviously that is a problem.
Also, in Chrome's 'Developer Tools' I don't see any errors under the sources tab. I checked the 'Pause on caught exceptions' box, (this is where my knowledge ceases) and in jquery.min.js:formatted, it pauses and highlights e.querySelectorAll("*,:x"), and when I resume, it does the same thing here, c.call(e, "[s!='']:x"),
Hoping someone can not only answer my question, but explain what's going on here in the caught exceptions. By the way, I did not write jquery.min.js:formatted.
Thanks in advance!
I copy/pasted my link to fontawesome and the JQuery library is up to date. Someone said something about the possibility of an infinite loop, but I'm not keen on what that is, I'll look into it.
Showed some code above. Not sure how helpful it is.
My expected output would obviously be for my JQuery to work, but it is not.
No error messages in the Console.
I actually figured it out, sorry I can't post working examples bc it's proprietary.
I was missing a closing } bracket...
But the way I figured this out was through opening up Chrome's 'Developer Tools' and switching into the 'Sources' tab.
- From here, underneath the stop sign with a pause symbol, it displayed exceptions in the code where something breaks.
This was much easier than scanning the code with my eyes. Sorry if this was a basic answer, it really helped me a lot.

How do i hide my wordpress site page source like (bczcentral.com)?

Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.

How do I post a jsfiddle example of some trouble I'm seeing in Rails?

This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).

Simple lightbox feedback form? Included screenshot

There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.

Multiple windows in one page for bookmarks

I want a single online web page for my bookmarks. The page should include small windows which opens the following pages:
Fizy, Facebook, Guardian.
There should also be a button for adding a new window with an URL text input.
Here's an illustration of how the page should look: http://i54.tinypic.com/2hrkb48.jpg
I've built a version of this at http://bit.ly/heqEd1, but as you may see, it uses iframes under javascript windows, which can not open frame-breaking sites (like fizy.com), or Facebook.
I'll make the research and but I am not sure how to proceed. Any solution will be accepted, like HTML5, XUL, Flex, AJAX or others. A solution with a local installation(like a Firefox extension) is not preferred, but still be ok.
Note: Piro Sakura has built a Firefox extension called split-browser. There's an element of the project called "subbrowser". An AJAX window that can show a subbrowser MAY solve the problem. I know the page will only be available from Firefox, but that is ok. (Again, a solution without an installation is preferred)
Any suggestions? How should I proceed? What should I learn? Is this possible?
Thanks.
I think you should use a Javascript with iFrames to do this. I'm not too sure what you're trying to accomplish with this, but it should be possible. As for which framework you'll use, it's up to you, but there will be a lot of custom code needed to implement this.
You can make multiple draggable windows in FLEX same as you have in you app
Please check sample as Starting point Movable/Draggable window and its demo
also u knows JS-DESKTOP lib with little customization to achieve that one of them are
jsdesk
sonspring-JQuery based
also you can do this using
Hopes that helps

Categories