Balloon message on element using jQuery - javascript

I want to show balloon message with a title when I mouse over some element in my site. I see jQuery code but I don't know if I used it in a correct way or not.
This is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/jquery.balloon.js">
</script>
<script>
$(document).ready($(function() {
$('#style1').balloon({ position: "bottom right"});
});
</script>
</head>
<body>
<div id="wrap">
<button id="style1" onclick="getValue('./CSS/style1.css')">style1</button>
</div>
</body>
can you help me this link i used http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

There are a couple things that could be wrong and some certainties.
The balloon plugin only makes a balloon if the target element has a title attribute. Your button doesn't.
Make sure it has a title attribute.
Make sure your js file exists at given location ./js/jquery.balloon.js , try pressing f12 and go to the console tab and see if you spot any errors.

Add title attribute to your button
<button id="style1" onclick="getValue('./CSS/style1.css')" title="Some">style1</button>
JsFiddle example

Title is missing.
<
button id="style1" onclick="getValue('./CSS/style1.css')" title="YourTitleHere" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/jquery.balloon.js">
</script>
<script>
$(document).ready($(function() {
$('#style1').balloon({ position: "bottom right"});
});
</script>
</head>
<body>
<div id="wrap">
<button id="style1" onclick="getValue('./CSS/style1.css')" title="YourTitleHere">style1</button>
</div>
</body>

Related

Hiding/showing content whether javascript is enable/disabled

I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.

jQuery AJAX loading with multiple a href links

Hey guys I'm trying to get the following to work...
demo_test.txt to load into the "div1" container
only have a href id "test" to trigger it
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("test").click(function() {
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<a id="test" href="#">Get External Content</a>
<br>
<a id="google" href="http://www.google.com/">Google</a>
</body>
</html>
Currently it doesn't run, but if I remove the Google line, it works. Is there something else I'm missing? Thanks!
Change your jQuery click handler to this:
$("#test").click(function() {
I've added a # in front of test to properly select your anchor tag.

html image is not appearing

<!DOCTYPE html>
<html>
<head>
<title> Cookie Clicker! </title>
<script type="text/javascript">
var logAt=function(id,message){
document.getElementById(id).innerHTML=message;
};
</script>
</head>
<body>
<h1> Cookie Clicker </h1>
<p> Keep collecting cookies and start your very own sweet empire!</p>
<p>
<div id="cookiesPerSecond"> </div>
<button type="button" onClick="getCookie()"><img src="http://thinkprogress.org/politics/2011/04/26/161276/penn-parents-cookies-cuts/" alt="Cookie"
style="width:304px;height:228px"></button>
<h3 id="cookies">Cookies:0 </h3>
</p>
<script type="text/javascript">
var cookies=0;
var cookiesPerSecond=0;
function getCookie(){
cookies+=1;
logAt("cookies","Cookies:"+cookies);
};
</script>
</body>
</html>
My image inside of the button is not displaying, and defaults to the "alt". I am programming this on notepad, and am opening it in chrome. What should I do to make it work?
What you linked is not a link to a direct image. You need to link directly to an image. This is the link you need to change:
<img src="http://thinkprogress.org/politics/2011/04/26/161276/penn-parents-cookies-cuts/"
Change it to this:
<img src="http://d35brb9zkkbdsd.cloudfront.net/wp-content/uploads/2011/04/cookie.gif"
Also, like User Roko C. Bulijan said, you need to use CSS to make it a background-image or it won't show up.

DOM element doesn't display

I am new in Javascript and I am trying to test following code
<html>
<head>
<script src="jquery/jquery.min.js">
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input')[0].on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
but when i open this html file in browser the button doesn't display
Script tags require a closing tag, which you've omitted:
<script src="jquery/jquery.min.js"></script>
^ close
By leaving it open, the browser is treating everything after the script tag as the script content.
Also your $('input')[0] isn't right. That is getting the DOM element of the input, which has no jQuery wrapper and no .on() function. If you are trying to match just the first input then:
$('input').first().on('click',function(){
Problems
Script block must be closed which you missed.
Use $('input') instead of $('input')[0], When you use $('input')[0] you get DOM element which doesn't have click method.
Use
<html>
<head>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
To avoid these kind of confusions, try to separate like below,
In HTML:
<html>
<head>
<script src="jquery/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<input type="button" value="Click button">
</body>
</html>
In main.js
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
For Demo
Adding the <!DOCTYPE html> is better when you continue developing.

Jquery back button

(sorry for my bad English)
I checked all posts about Jquery back button here and for some reason nothing worked with me so please help me...
I simply want when I run Jquery function by clicking on a link with hash, the browser will shows me the back button.
When I click the back button I want it to run the previous function.
here are the codes...
<!DOCTYPE html>
<head>
<script src="jquery.min.js" type="text/javascript"></script> //jQuery v1.10.2
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="prodmenu">
Link1
Link2
</div>
<script>
$("#link1").click(function() {
$("#div1").fadeOut();
$("#div2").animate({top:'500px'},"slow");
});
</script>
</body>
</html>
Thanks a lot.
You can use this jquery plugin for the #hash history.
Here is an example.

Categories

Resources