We Keep Coding

CSS-stylable popup (modal) that doesnt load until it is opened

so I'd like to build something like That.
Now I want to put a LOT of these buttons on a page and every popup must contain a different <iframe> (embedding videos). Also I'd liek them to be CSS-stylable.
So what I cant seem to achieve is two things:
- I cant find any script (I'm extremely new to web thingys) that will open DIFFERENT popups for different buttons
- I cant find something that lets the contents of the popups remain unloaded until they are actually displayed.
Thanks for any help!
PS: I only know how to use jS, HTML and CSS so I cant use fancy stuff... First project...
-edit-
Okay, i didnt know server-side things are related to this. I can use PHP (actually I'd populate the popups per PHP) so is there a way using the specified languages plus PHP? and if not, how can I achieve the other goal I specified? I have no idea of JS, I just know how to use scripts...

hope this link will help:
http://getbootstrap.com/javascript/#modals-related-target
plz recheck your data-target="#exampleModal" in button is the id of the modal and put iframe instead of this form in this link.

Javascript Based Story Navigation

I'm looking to build a website with a story based flow using Javascript and jQuery to manage the 'flow' of the story. The best way to describe what I'm looking to do is with an example.
In this example they use an Ajax loader plugin called Lazyload to load assets from another JS file (Looks like underscore.js formatted, maybe?). It looks like a very complicated way of achieving something that should be easier, though, IMO.
As a starting point, all elements could be on the page and hidden with .(hide), the click of each button would reveal and scroll to the relevant item, a class would then be added to that button to make them greyed out and unclickable. Or maybe use Ajax to call in story components as they are needed? What do you think is the simplest and best way of doing this?

According you want to use the long-story-version:
Well my very first idea of how this could work was to store each StoryPart (lets call it Item) in a special File which you can load with ajax later.
Then it would be possible to define a possible storyPath where you can use itemId's.
Does this help you?

Depending on the amount of data you need to load, I would do this:
Load the page normally (without the story)
Display some kind of loading/waiting interface to the user while requesting the whole story by ajax call
Show only the first item after ajax completes
Hide the "wait" interface from the page
Hope this helps

Building a "single page" site with animation between pages

I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)

There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.

now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..

What's the best way of using hash tags for page navigation as well as anchor navigation?

I'm making a web application that uses hash tags for page navigation like this
http://foo.bar.com/#pages/home
I just realized that one of my pages is going to be kind of huge, containing it's own tree-structured menu with links that should scroll the page to different anchor tags in the page. Obviously I can't use actual hash tags for that now, since they are busy. I'm going to have to use a programmatic solution with an URL like this
http://foo.bar.com/#pages/home/section
Or would it be possible to use more than one hash symbol, perhaps changing it to this?
http://foo.bar.com/#!/pages/home#section
But how can this be done programmatically anyway?

I'd scrap the broken use of hashbangs, switch to using the history API instead and give serious consideration to the question of "If that much content is being replaced, is loading it via Ajax really providing a benefit?"

Your Question does not seem clear to me,
If your page is too large, you could go for pagination using AJAX and PHP, for more
http://www.codediesel.com/php/simple-pagination-in-php/
or http://www.99points.info/2011/01/ajax-pagination-using-jquery-and-php-with-animation/
Other wise, if you still want things to be in URL #tags, then you can go with it.
I doubt you could give something like this "http://foo.bar.com/#pages/home/ "
You could also try URL rewriting http://httpd.apache.org/docs/2.0/misc/rewriteguide.html

Issue with IE7 hiding/removing/showing content using jQuery

So I have a bit of script at the bottom of my page //RETAINER CURRENT that is supposed to hide and show content based on what menu item the user selects in the maincontent area. Unfortunately in IE7 all layers are rendered which means the videos in each layer play simultaneous. I tried .detach, .remove, methods and had no luck and when I saved the items to an array and .empty 'd them I still had no success. What noob mistake am I making?
http://jsbin.com/ahuye4/3

I had the same issue. I was using asp.net so the way I was able to solve this was by using updatepanels and handling the hiding/showing in the code behind with Panels.
I'm not sure what fraemwork/language you are using.
However, I think you might need to call into the flash object and pause/stop the flash videos programmatically.