On the twitter home page (not logged in), there a scrolling text in the middle below the logo. How is this accomplished? It stops scrolling when mouseover and also has a popup dialog on relevant text.
Thanks,
Mike
There is a jQuery marquee plugin that will give you a good head start. It shouldn't be difficult to build the tooltip stuff on top of that.
There are many ways you could accomplish it, but I imagine its using Ajax to fill an HTML div with the results of a call to Twitter's Services. Its then probably using JQuery to scroll the div, as well as display those fancy tooltips.
I just looked at this in Firebug.
The topics are being loaded via JSON and the Twitter API and then they are calling fronts.js (http://a2.twimg.com/a/1272578449/javascripts/fronts.js) in association with jQuery.
Related
I was wondering if there were any online resources to creating a fullscreen modal without using Bootstrap. I'd like to learn how to implement this myself. The full effect would be a scrollable overlay for a projects section so if the user wants to view more of a project they can click on the image and a fullscreen box overlays the current page with the ability to close when done.
I think, this animatedModal will handle it.
http://joaopereirawd.github.io/animatedModal.js/
I want to showcase my company work to our future client.
The project which I am going to showcase is basically a FLASH-HTML5 conversion.
I want to use a switch on the page which will swap flash to HTML5 page and vice versa.
If I am on page3 of flash file and hit the switch button it should load page 3 from HTML5.
something similar to 'https://www.pixelplant.com/gallery/'
Can you guys help me out how to do it? What technology I should use?
There are multiple ways of achieving this. The example website uses iframe in a popup div, which could be done with jquery or any lightbox plugin based on jquery. You can also use inline hidden divs to fade-in/fade-out.
The switch binds with a function to call the relevant divs to display, that's it.
Take a look at the signup section over here:
http://www.istockphoto.com/istock_login
Can you explain me please how can that moving box have been created?
Thank you
I believe if what your talking about is the box that shows up when you click on the login but, that is called lightbox. It's Javascript & Jquery that gets whatever content you want and makes a "frame" that overlays the rest of your page. There are lots of pre-made plugins witch if you want to replicate that effect I would sugest you to use because they are simple and easy.
http://www.fancybox.net/
http://www.lightbox.com.br/
http://www.lokeshdhakar.com/projects/lightbox2/
http://jquery.com/demo/thickbox/
http://www.shadowbox-js.com/
Where can I read more about creating linked slides like at the top of nytimes.com, slate.com, yahoo.com, nyu.edu, etc. I assume it's javascript, but I'm not sure what it's called, so I'm not sure how to look it up. I want to create a box at the top of a website with blocks of html text which slide in sequence if the user clicks next or after a certain amount of time.
Where can I read more about this?
The jquery cycle plugin is exactly what you are looking for.
http://jquery.malsup.com/cycle/
Specifically, checkout the advanced demos with paging.
If you want to use Javascript then you can use jcarousel and then animate the carousel with setTimeout
But you really need to know some javascript to do this
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).