Develop Reference

Reinitializing Bootstrap dropdowns after nav loaded via ajax

I need to load the header and footer for my site via ajax. This works just fine, but dropdown menus no longer function. I've tried various methods to reinitialize them, with some limited success. The best I can manage is dropdowns that open, but never close, and have somewhat limited functionality. What I've tried:
This was the simplest approach...
<script type="text/javascript">
// get header and footer html from django
$(document).ready(function(){
$( "#header_placeholder" ).load( "/header/", function() {
$('.dropdown-toggle').dropdown;
});
$( "#footer_placeholder" ).load( "/footer/");
});
</script>
...but nothing happens. Clicking on menus still does nothing at all.
This gets me a little farther:
<script type="text/javascript">
// get header and footer html from django
$(document).ready(function(){
$.get("/header/", function(data){
$("#header_placeholder").replaceWith($(data));
$('.dropdown-toggle').dropdown();
});
$.get("/footer/", function(data){
$("#footer_placeholder").replaceWith($(data));
});
});
</script>
It results in dropdown menus that will open, but never close. The "hover" class is also never added to the li on open, which I imagine screws up a few things (including some of my styling).
I found a similar question (Bootstrap dropdown not working after initial ajax form submission), in which the asker had some luck reinserting the bootstrap javascript. On a lark, I tried it:
<script type="text/javascript">
function reload_js(src) {
$('script[src="' + src + '"]').remove();
$('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
}
// get header and footer html from django
$(document).ready(function(){
$.get("/header/", function(data){
$("#header_placeholder").replaceWith($(data));
reload_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
$('.dropdown-toggle').dropdown();
});
$.get("/footer/", function(data){
$("#footer_placeholder").replaceWith($(data));
});
/*$( "#header_placeholder" ).load( "/header/", function() {
alert('waiting');
reload_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
$('.dropdown-toggle').dropdown;
});
$( "#footer_placeholder" ).load( "/footer/", function() {
});*/
});
</script>
No change in behavior. I also found Bootstrap dropdown doesnt work after ajax call (even after reinitializing) . It's similar, but they never get anywhere with a solution. Any help would be greatly appreciated.

I found the issue. .dropdown() may have been enough for a stock implementation of bootstrap dropdown menus, but my template had been converted from PSD by PSD2HTML.com and included some nice custom javascript to activate dropdowns on hover, as well as some mobile enhancements. In the end, my solution was:
<script type="text/javascript">
// get header and footer html from django
$(document).ready(function(){
$.get("/header/", function(data){
$("#header_placeholder").replaceWith($(data));
//re-initialize dropdown menus after load
$('.dropdown-toggle').dropdown();
initTouchNav(); /* <-- the new, important bit */
});
$.get("/footer/", function(data){
$("#footer_placeholder").replaceWith($(data));
});
});
</script>

Load Un-clossable Jquery Modal on Page load

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.

According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>

Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals

you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

whole page moves a bit when a show function is executed

I am trying to build my first website www.angelosmavraidis.com
I have inserted a javascript to show 8 divs of the same class when clicking on the "artwork" div.
The problem is that when the "artwork" is clicked and the rest of the divs show up the whole page moves a bit to the left.
Anyone know why this is happening?
Also can you recommend a better alternative to the following script to do the job?
$(document).ready(function(e) {
$('.mainmenu').each(function(index, element) {
$(this).click(function() {
$('.artwork').eq(index).show();
});
});
});
Thanks

Use preventDefault here like
$(document).ready(function(e) {
$('.mainmenu').each(function(index, element) {
$(this).click(function(ev) {
ev.preventDefault();
$('.artwork').eq(index).show();
});
});
});

how can you change remove a class on one li and move it to another

So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL

This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});

Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle

jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle

I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.

jQuery: how $.on should work?

There is a site with one main index.html page (with <html><head>...) and pages like gallery.html, contacts.html, but only with <div> containers and without <html><head>....
So, when i click on index.html link to contacts.html what happens:
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
.....
});
});
Q: How should i structure or organize javascript code for any events like click on contacts.html?
For example:
[1] I can write on contacts.html javascript code like:
<script type='text/javascript'>
$(function() {
$('.anyClassOnContactsHtml').click(function(e) {
.....
});
});
</script>
But as i guess, every time when i load contacts.html it reads the functions again and that is why the speed and performance of the site may be lower, because i have 50+ click events on every page.
[2] I can write on index.html delegates:
<script type='text/javascript'>
$(function() {
$('#content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
</script>
It works and browsers read click functions 1 time, but with 100+ click functions there are 2-3 SECONDS (!) delay, so it works very slow.
To work it faster i should instead of #content write container that is nearer to my .anyClassOnContactsHtml, but i can't, because on index.html there are only #container.
So, how should i do? Or are there other ways to bind events? Any tips for site performance? Thank you.

1) You can actually call sub-elements that way.
${"#content .anyClassOnContactsHtml").click(function() {
});
2) Take a look at: http://developer.yahoo.com/yslow/. For example, placing <script> tags at the bottom of <body>
</body> will allow the rest of the page to load quicker.
Install the plugin and run the test on your page.

When you load() content, any code within loaded script tags is completely ignored, so it has no impact on javascript performance.
What might be the issue is that the way the content is loaded. Make sure you're not re-binding the click functions each time. Here is some example code:
<script type='text/javascript'>
$(function() {
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
// DO NOT REBIND CLICK EVENTS HERE
});
});
// The following should only be done ONCE
$('#content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
</script>

Is something like this really that slow?? I would say its should be okay!
<script type='text/javascript'>
$(function() {
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
$('#content_of_loaded').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
});
});
</script>
Maybe you could also try this:
<script type='text/javascript'>
$(function() {
$('a').click(function(e) {
e.preventDefault();
var site = $(this).attr("href");
$('#content').load(site, function() {
$('#sub_content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
});
});
</script>
and also for your subcontent links you could do this maybe..
function loadContent(site) {
$('#content').load(site, function() {
$('#sub_content').on('click', 'a', function(e) {
e.preventDefault();
loadContent($(this).attr("href"));
});
});
}
$(function() {
$('a').click(function(e) {
e.preventDefault();
loadContent($(this).attr("href"));
});
});
but i didnt test it, so might be wrong :)

I think the only way you are going to have any luck performance optimizing this is if you refactor some of your click functions to combine them and make them more multi-purpose by adding more method parameters, switch statements, etc... The most efficient way then would be to bind them all to #content since they won't have to be reloaded every time there is a URL change. The data attribute can help immensely with this. If you took the time to do it properly, you could even refactor all of your code into one event handler function.
A very contrived example of a function like this would be:
$('#content').on('click', 'a, span, input', function(e) {
var tagName = $(e.target).prop('tagName');
switch (tagName) {
case 'a':
processAnchorEvents();
break;
case 'span':
processSpanEvents();
break;
case 'input':
processInputEvents();
break;
}
});