I am trying to use the bootstrap tooltips on an element by I am not getting the bootstrap style, only the html style:
I have used these many times, but I feel like I have been up for too long and am getting sloppy... can someone point me to the error?
code:
home.php
<a href="#" id='award-value' rel='tooltip' data-toggle='tooltip' title='My Tooltip'>450</a>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src='assets/js/chosen.jquery.js'></script>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({
allow_single_deselect:true
});
</script>
<script src="assets/js/jquery-form.js"></script>
<script src="assets/bootstrap/js/bootstrap.js"></script>
<script src="assets/js/session.js"></script>
and I am including the bootstrap css
EDIT:
I fixed it, I had the elements i wanted to be tooltips added dynamically, fetched using ajax... I just put the $(this).tooltip() in the success callback of the .ajax() call like so:
function fetch_live_feed(){
$.ajax({
type: "GET",
url:"includes/php/live_feed.php",
success:function(data){
$("#live-feed-loading-port").html(data);
$(".live-feed-row a").tooltip();
}
});
}
Please let me know if this is a wrong thing to do...
Thanks :)
Related
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
I can't get javascript to work with Twitter's Bootstrap.
I've got this
<p>
<a href="#" rel="tooltip" title="first tooltip" id="example">
hover over me
</a>
</p>
And I want it to appear as a tooltip.
It won't work, so I added this inside the HEAD:
<script type="text/javascript">
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'hover'});
});
}
}
Noting thta it still wasn't working, I've deleted all script reference inside the page and added only this inseide the HEAD:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js"></script>
I´m not calling any particular file that I've downloadad, but hotlinking the original ones, and still the tooltip won't appear.
Note: I´m trying to set a new Drupal theme, so my site is inside Drupal (and the page is a tpl.php file).
Thanks for your insight!!
If you're wanting to use github files directly you need to use the raw, so you should point at https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js not https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js
I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />
You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict
Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
My main page is index.php. I'm loading a section of the page with AJAX and I would like to also load a datepicker in the same section I got all relevant JS:
<script type="text/javascript" src="javascripts/jquery/jquery.js"></script>
<script type="text/javascript" src="javascripts/datepicker/jquery.datePicker.js"></script>
<script type="text/javascript" src="javascripts/datepicker/date.js"></script>
I hope i'm not missing anything, the CSS is copied into my main css file.
and here's how the ajax looks like, at least the callback part:
xmlhttp12.onreadystatechange=function() {
if (xmlhttp12.readyState == 4) {
if(document.getElementById("corpcrm").innerHTML=raspuns[0]){
$(function()
{
$('#datepicker')
.datePicker({inline:true})
});
Now i know there aren't any problems with the the rest of the code as i've been using the very same thing for a while now, somehow I can't get the jQuery part right.
i tried adding a div directly to index.html and adding
<script type="text/javascript">
$(document).ready(function(){
$("#test").datepicker();
});
</script>
in the head. Firebug finds an error related to it that says
$('#test').datepicker() is not a function
The problem is now solved. I wasn't loading jquery-ui properly, was missing a > at the end of a script, thanks for the help guys.
I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.
With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:
<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
$("#vtabs5").jVertTabs({
equalHeights: true
});
// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.
I appreciate any input.
Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back
Thanks for your reply. I solved it with the suggestion from this post, in case someone finds it useful :)