/    Sign up×
Community /Pin to ProfileBookmark

bootstrap3 clickable submenu and javascript problem

Copy linkTweet thisAlerts:
May 27.2015

Hi,

I want to implement with bootstrap3 a submenu which opens not on hover but on click (because on mobile devices it would be smarter).

I found [url]http://www.bootply.com/97919[/url] and implemented a local version on my apache which works fine.
Screenshot: [URL]http://www.randspringer.de/good_lokal.png[/URL]

Now I copied the website to my remote hosting system an it did not work. The submenu does not open on click.
[URL]http://www.randspringer.de/bad_remote.png[/URL]

The Code (HTML,javascript) is the same on both environments. I think it has somethiong to do with wrong sequence of loading javascripts.

I do in the end of the body:
<!– load jquery –>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”]https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js[/URL]“></script>

<!– load bootstrap –>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”]http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js[/URL]“>

<!– load navigation bar and do the javascripting like in [url]http://www.bootply.com/97919[/url] –>
</script> <script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://www.randspringer.de/javascript/loadtoc.js”]/javascript/loadtoc.js[/URL]“></script>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://www.randspringer.de/javascript/navigation.js”]http://www.randspringer.de/javascript/navigation.js[/URL]“></script>

<!– some them stuff –>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://www.randspringer.de/squad/js/jquery.easing.min.js”]/squad/js/jquery.easing.min.js[/URL]“></script>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://www.randspringer.de/squad/js/jquery.scrollTo.js”]/squad/js/jquery.scrollTo.js[/URL]“></script>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://www.randspringer.de/squad/js/wow.min.js”]/squad/js/wow.min.js[/URL]“></script>
<script type=”text/javascript” src=”[URL=”http://www.webdeveloper.com/forum/view-source:http://www.randspringer.de/squad/js/custom.js”]/squad/js/custom.js[/URL]“></script>

I think the error has something to do with the different event binding (see screenshots) but I’m confused about the reason.

Any help is welcome. I think I have to learn how to handle dependencies wiht javascript.

You can test the bad version on [URL]http://www.randspringer.de/freunde.html[/URL] by clicking on “Archiv” in the menu.

Thomas

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@pbergauthorMay 27.2015 — Hm, I copied now https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js to /javascript/jquery.min.js

and

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js to /javascript/bootstrap.min.js

and included

<script type="text/javascript" src="/javascript/jquery.min.js"></script>

<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>

Now it works, see http://porschberg.osp-dd.de/freunde_test.html

Seems that there is a difference if a javascript is local or not.

Any good explanation?

Thomas
Copy linkTweet thisAlerts:
@pbergauthorMay 27.2015 — Ok, I think I understood now. The "trick" was that I had to use a callback-function after I loaded the navigation bar with jquery load function. Now I have no synchronisation problem any more...



$(document).ready(function() {

$("#toc").load( "/toc.html" , function () {

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {

event.preventDefault();

event.stopPropagation();

$(this).parent().siblings().removeClass('open');

$(this).parent().toggleClass('open');

});

$('.navbar-nav li a').bind('click', function(event) {

var $anchor = $(this);

$('html, body').stop().animate({

scrollTop: $($anchor.attr('href')).offset().top

}, 1500, 'easeInOutExpo');

event.preventDefault();

});

});
×

Success!

Help @pberg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...