I downloaded tooltipsy.min.js from http://tooltipsy.com/ and put it on the same folder as my html file. This is my code which doesn't work at all. Why? Wrapping the jquery code with $(document).ready()didn't help.
<html>
<head>
<style>
.tooltipsy {
padding: 10px;
max-width: 200px;
color: #303030;
background-color: #f5f5b5;
border: 1px solid #deca7e;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.slim.min.js"></script>
<script type="text/javascript" src="tooltipsy.min.js"></script>
<script type="text/javascript">
$('.hastip').tooltipsy();
</script>
</head>
<body>
<a class="hastip" title="I am the tooltip text">I want a tooltip</a>
</body>
</html>
This seems to work for me:
Had to add the <p> tags to push the body down you you could see the tip.
HTML:
<html>
<head>
<style>
.tooltipsy {
padding: 10px;
max-width: 200px;
color: #303030;
background-color: #f5f5b5;
border: 1px solid #deca7e;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.hastip').tooltipsy();
})
</script>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<a class="hastip" title="Show me">Why don't you work</a>
</body>
</html>
Note: I used the non-slim version of jQuery, because it does not appear that this version of tipsy is playing nicely with the 3.x slim version of jQuery. (Using tipsy with the slim jQuery throws the error Uncaught TypeError: b.bind is not a function in console.)
Related
My jQuery .resizable is not working.
It gives error :
TypeError: $(...).resizable is not a function ;
My code is:
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="httpS://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#main").resizable("enable");
});
</script>
</head>
<body>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content"></div>
</div>
</div>
</body>
</html>
This snippet is working.
Look for the CDNs used here... And look for the order to load them too.
$("#main").resizable();
#main{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content">
You can resize me!
</div>
</div>
</div>
You might be missing jquery ui css and js :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Add jquery-ui.js library and remove enable from resizable function
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#main" ).resizable();
} );
</script>
<html>
<head>
<meta charset="utf-8">
<title>resizable</title>
<!--div is used to style block element,span are used to group inline elements-->
<style>
.bluebox{
background-color:#415E9B;
font-size: 20px;
color: white;
height: auto;
}
.blackbox{
background-color: #0C0C0C;
font-size: 20px;
color: white;
height: 100px;
}
.greybox{
background-color:rgb(161, 54, 165);
font-size: 20px;
color: white;
height: 100px;
}
.great{
background-color: yellowgreen;
color: teal;
}
.news{
background-color:palevioletred ;
columns: auto 1px;;
height: auto;
}
.org{
background-color: peru;
color:red;
height: auto;
}
#fb{
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox" id="fb">
<p>facebook is <span class="great">great</span></p></div>
<div class="blackbox">
<p>BBC is a <span class="news">> newschannel</span></p></div>
<div class="greybox">
<p>UEFA is a football<span class="org">organization</span></p></div>
<script>
$(function(){
$("#fb").resizable({
maxheight : 200,
maxwidth : 300,
minheight: 50,
minwidth:50
});
});
</script>
</body>
</html>
we have to check the sequence of our cdns:
correct sequence:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
i was doing the opposite putting jquery-ui above jquery.min ...
issue is resolved now
Here's the JSfiddle: http://jsfiddle.net/mostthingsweb/cRayJ/1/
I'll include my code and then explain what's wrong
Here's my HTML header to show that everything should be linked:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
Here's the CSS:
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
Here's the JS:
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
So the grid will launch and the paragraph will be there, however if I try to drag it, it won't work. When I inspect the page it gives me an error saying: "Uncaught TypeError: undefined is not a function" that points to line 2 of my JS code. What am I doing wrong?
Here's the whole HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
</body>
</html>
I pasted the code you've submitted into a local HTML file and it works fine for me (I did not add the test.js but pasted the code in script tags just before the closing body tag.
Here's the entire file (tested in Chrome only)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<style type="text/css">
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
</style>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
</script>
</body>
I think the problem might be that you're loading jquery and your js files in the head of your code. When it reads your js, it's looking for $(#draggable5), but draggable5 hasn't loaded yet, so it's an empty selector. Try moving your scripts to just before the close of your body element.
*New question following suggestions:
HTML head contains:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="myscript.js"></script>
Here is my HTML:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
Link1
</td>
<td>
<a a href="javascript:;" rel="img2">Link2</a>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1" class="images"/>
<img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2" class="images"/>
</div>
And my CSS:
#sidebar {
display: inline-block;
height: auto;
width: auto;
font-family: Garamond;
font-size: large;
}
#table1 {
border: 1px solid black;
text-align: center;
}
#table1 th {
border: 1px solid black;
}
#table1 td {
border: 1px solid black;
}
#box {
position: relative;
height: 200px;
width: 1200px;
}
.images {
display:none;
position: absolute;
top: 0px;
left: 0px;
}
And my Javascript:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
This should mean that when the Link1 is clicked, the first image appears and when the Link 2 is clicked, the second image appears and the first goes away (the images are on top of each other in CSS). However, when either of the two are clicked, nothing happens. Any suggestions why this may be the case?
You have two choices:
Save your javascript code into a file with .js extension code.js then import it to your html file using <script type="text/javascript" src="code.js"></script>
Or you can put your code directly in your HTML file in the Head part like this :
<head>
<script>
// Your Javascript Code
</script>
</head>
And don't forget to import jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Of course at first you have to include your javascript file in the html, best practice include it in the header:
<script type="text/javascript" src="/destination/to/file.js"> </script>
then in the
Link
and make sure your javascript file is modified to get the element by its id to run the function properly.
I want to make a js to replace desire text within an iframe. Here is my code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<style>
.header{
width:100%;
height:30px;
background:#f1f1f1;
position: fixed;
z-index: 100;
margin-top: -20px;
font-family:Calibri, Arial;
}
.urlBox{
margin-top: 4px;
vertical-align: middle;
width: 600px;
}
.btn{
margin-top: 4px;
vertical-align: middle;
}
#iframe1{
margin-top:20px;
}
#newifrm{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
margin-top: 20px;
}
.txt{
margin-top: 4px;
vertical-align: middle;
}
button{
margin-top: 4px;
vertical-align: middle;
height:24px;
width:33px;
}
</style>
<script>
function goAction(){
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", document.getElementById("url1").value);
ifrm.style.width = 100+"%";
ifrm.style.height = 100+"%";
ifrm.frameBorder=0;
ifrm.id="newifrm";
document.getElementById("iframe1").appendChild(ifrm);
}
</script>
</head>
<body>
<div class="header">
<span><input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span><input class ="btn" type="button" value="GO" onclick="goAction()"></span>
<span><label for="search"> Search for: </label><input name="search" id="search" class="txt"></span><span><label for="replace"> Replace with: </label><input name="replace1" id="replace1" class="txt"></span>
<span><input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<div id="content">
<div id="iframe1"></div>
</div>
</body>
</html>
I have tried lot of functions to get replaced value. I am able to replace any text of parent document but want to make a function that will work for iframe content.
You can find this example about how to modify an iframe content in jQuery Documentation:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
You should use .contents() function.
Although this works perfectly with an iframe calling an internal site, it won't work if you try to modify an external site. This is a security measure and there's no way to avoid it. You can read more about it here.
First of all, if you are changing the DOM, by all means use JQuery. From what I understood, you want to change the source of the iframe. So after a few changes of your code, this works:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="header">
<span>
<input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span>
<input id="go" class ="btn" type="button" value="GO"></span>
<span>
<label for="search">Search for:</label>
<input name="search" id="search" class="txt"></span>
<span>
<label for="replace">Replace with:</label>
<input name="replace1" id="replace1" class="txt"></span>
<span>
<input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<iframe src="http://anywebsitexyz.com" width="100%" height="600" id="newifrm"></iframe>
<script>
$(document).ready(function(){
$("#go").click(function(){
$("#newifrm").attr('src', $("#url1").val());
})
});
</script>
</body>
</html>
If I put this.style.background="#000"; inline in the div, like onclick="this.style.background="#000";, it works. However, if I put that in a function and call the function from the same onclick event, it doesn't work. However, if I make the function do something else (like bring up an alert box), it does work. What's going on?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile" onclick="myFunction()"></div>
<script>
function myFunction() {
this.style.background="#000000";
}
</script>
</body>
</html>
I noticed you're including jQuery. You should strongly consider separating your markup and JavaScript. If you do go that route, here's what that would look like:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile"></div>
<script>
$(function () {
$(".tile").click(function () {
$(this).css('background-color', '#000000');
});
});
</script>
</body>
</html>
Example: http://jsfiddle.net/6zAN7/9/
If you would like to do it this way you need to pass the reference of DIV element when you invoke your function. During execution of your onclick handler "this" will reference to the current element. Pass it as an argument!
Here is the corrected code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile" onclick="myFunction(this)"></div>
<script>
function myFunction(divObj) {
divObj.style.background="#000000";
}
</script>
</body>
</html>
<div class="tile" onclick="myFunction(this)"></div>
<script>
function myFunction(x) {
x.style.background="#000000";
}
</script>