We Keep Coding

Trigger a lightbox modal on page load

I would like to get a lightbox modal box to pop up automatically on page load.
My current anchor works perfect when I actually click it, and here is my bit of JQuery that I've been using so far.
<script>
$(document).ready(function(){
document.getElementById('popup').click();
});
</script>
And the HTML
<a id="popup" class="wb-lbx lbx-modal" href="#alert">test</a>
<section id="alert" class="mfp-hide modal-dialog modal-content overlay-def">
<div class="alert alert-info">
<h2 class="h4">header</h2>
<p>content</p>
</div>
</section>
Problem is, it just brings me to the #popup anchor location on the page, not actually triggering the lightbox that pops if you were to actually click it.
How do I trigger the click event on page load?
Thanks

Bootstrap Modal not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->

It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

Bootstrap: overlay loading screen + toggle jumbotron

Ok so, I've gone through maybe 20 different stackexchange answers to each of these problems, and I still can't solve it, so it's about time I ask and hopefully somebody can point me out of these woods:
I am making a simple website, and I wanted to make like an overlay screen that contains a loading/progress bar, and just progresses over the course of 3 seconds at most before it fades away and reveals the site. I also wanted to add a logo in the middle of it just above the bar. I looked at some video in arabic, but it got out of hand sort of, I didn't know what he was saying, but I thought I could try his code and modify it, but that didn't work either.
Also, I've got a jumbotron in the code I call "jumbotronTwo", and basically what it is supposed to do is that when you click the menu icon and the dropdown menu appears, you click on one of the options, and then the menu should scroll back and the jumbotron should appear. So far I've just been able to make the jumbotron itself and color it, resize it, fill it with text etc., I tried using some javascript and jquery to make it appear and disappear "onclick", but none seemed to work, i'm starting to think maybe it has to do with what libraries I've got?
I have no idea what could be trumping it, so I need somebody to take a look at the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twenty Eight Interiors</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
I think these up here are important to show, in case I forgot some library or something so you can point it out. I've got some CSS as well but cut it out, if you need to see it too I can show it. Here's the "meat and potatoes":
<body>
<!-- jumbotron-->
<div class="jumbotron" id="jumbotronOne">
<div class="container text-center">
<img src="Untitled.png">
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<font color="white">MENU</font>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse" align="center">
<ul class="nav navbar-nav" id="firstOne">
<li>Design Process</li>
<li>Profile</li>
<li>Contact Info</li>
</ul>
<ul class="list-inline" id="secondOne">
<li><img src="facebook.png" hspace="30"></li>
<li><img src="twitter.png" hspace="30"></li>
<li><img src="instagram.png" hspace="30"></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
<div class="jumbotron" id="jumbotronTwo">
<div class="container">
<h2>Headline goes here in one, two or three lines like this</h1>
<p>...</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I even had problems with making the javascript work for the glyphicon, I want it to change when I click it, and again; i have no idea what I'm doing wrong, tried lots of potential solutions from stackexchange, but this too seems to point to that it's something else.
Thanks in advance

If it's just a splash page then add a div at the top of your body and wrap your existing page in a div with display:none...
<body>
<div id="loader">
<h4>Logo and progress bar here...</h4>
</div>
<div id="your-page" style="display:none">
<!--Your existing content here...-->
</div>
Then add a little jquery...
jQuery(document).ready(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
See working example here.
If you want to make animating your progress bar easy then I recommend this plugin.
For the glyphicon use the following js...
$( "#iconButton" ).click(function(){
$(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});
Obviously replace the cheeseburger with whatever icon you want to use! See fiddle here for this bit (without the actual icons but you should get the idea).

I see you are loading both jQuery 1.11.2 and 2.1.3, which adds additional loading time as well. This is of course not good and I would suggest just using 3.1.1
In that case #DevFox second code would need to be updated as following, since (document).ready is not supported anymore.
$(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});

bootstrap 3 remote modal appears to do nothing

I found I can include my modal markup in the body of my index.php and load it via this line without any problems:
<a data-toggle="modal" href="#modal-add">Add</a>
Assuming, of course, that there's a div somewhere in that page called #modal-add. When I moved that out to its own file (modal-add.html) and try this:
<a data-toggle="modal" href="modal-add.html" data-target="#modal-add">Add</a>
...I can't see that anything is happening. Chrome's developer tools don't register any activity when I click the link. I've created a basic fiddle to demonstrate: http://jsfiddle.net/tmountjr/3bnyq/2/
According to the docs (http://getbootstrap.com/javascript/#modals) that should just work, right? Where am I going wrong? (I'm referencing the Bootstrap js and css files from netdna, and jquery from their site, and everything else on my site is behaving normally, minus this.)
EDIT
Since it appears that fiddle has a built-in cross-domain request, here's a bare-bones setup that anyone with a WAMP server can try:
modal.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<p>Click here</p>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
modaltest.html:
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Designation</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="form-group">
<label for="add-designation">Designation Description:</label>
<input type="text" name="add-designation" id="add-designation" class="form-control" />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="resetdesignation">Reset</button>
<button type="button" class="btn btn-primary" id="adddesignation">Add Designation</button>
</div>
</div>
</div>
</div>

I think you have to point data-target attribute to element which exists in DOM (not returned in AJAX-response).
And as I know returned result just placed into target with .html() method which equal to innerHTML which replaces everything inside target.
So you can point all links to one Modal (with id="modal") and it's content will be just replaced with AJAX-response.

As an aside, it's also worth noting that this method (using a remote page as your dialog source) is limited out of the box to one external source. (In other words, if you have three different remote sources it'll only ever load the first one you click.) I tried emptying the #modal div after it closes but that didn't seem to work; the only way I found around it was this fiddle which overrides the default modal behavior, manually loads the content each time, and then displays the modal. For good measure (though I don't think it's required) I empty the div after the modal closes, just so I don't have extra code laying around inside my page. Here's my code:
$("[data-target]").on('click', function(e) {
e.preventDefault();
var placeholder = $(this).data('target');
var target = $(this).attr('href');
$(placeholder).load(target);
});
$('#modal').on('hidden.bs.modal', function () {
$("#modal").empty();
});
EDIT
There's an even better solution documented here.

Tabs navigation using HTML5

I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>

just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily