jquery - jqcloud and bootstrap conflict -


i using bootstrap jqcloud , find jqcloud stops working when bootstrap added. issue related versions in jquery. asking statement fails:

$("#headerwordcloud").jqcloud' not function $("#headerwordcloud").jqcloud(hword_list); 

for jqcloud

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>  <script type="text/javascript" src="./js/wordcloud.js"></script>  <link rel="stylesheet" type="text/css" href="./css/jqcloud.css" /> <script type="text/javascript" src="./js/jqcloud-1.0.4.js"></script> 

new code bootstrap

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">     <!--[if lt ie 9]>       <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>     <![endif]-->     <link rel="shortcut icon" href="/bootply_ico.jpg">     <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">     <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">     <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>      <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>     <script src="/plugins/jquery.layout.js"></script>      <link href="/plugins/jquery.layout.css" rel="stylesheet">     <link rel="stylesheet" href="/plugins/bootstrap-select.min.css">     <link rel="stylesheet" href="/css/bootply.css">     <link rel="stylesheet" href="/bootply/themes/metroid/theme.css"> 

the way loading scripts @ moment overwriting methods jqcloud add jquery / $ object(s) when load jquery second time. load jquery , jquery ui first, add plugins depending on them:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript" src="./js/wordcloud.js"></script> <script type="text/javascript" src="./js/jqcloud-1.0.4.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="/plugins/jquery.layout.js"></script> 

note omitted stylesheets in example.

in (unlikely) case jqcloud requires older version of jquery can use an approach this


Comments

Popular posts from this blog

javascript - JS causing window size to be bigger than necessary - Dropdown bug -

How to mention the localhost in android -

php - Calling a template part from a post -