I downloaded everything from this link (version 1.12.1).
After that I unzipped everything. So here's the thing, I have Wampserver downloaded and I'm working on a project in PHP with it. I dragged all of those items to the folder where my other codes are located.
I'm not good at Javascript or jQuery, but I want to use its "draggable" UI to make a moving "button"/image on a horizontal axis (so the person can agree or disagree). So, basically, how do I do that? Here's what I'm trying:
<script src="jQuery UI/jquery-ui.js"></script>
<script src="jQuery UI/jquery-ui.css"></script>
<script src="jQuery UI/jquery-ui.min.js"></script>
<script src="jQuery UI/jquery-ui.min.css"></script>
<script src="jQuery UI/jquery-ui.structure.css"></script>
<script src="jQuery UI/jquery-ui.structure.min.css"></script>
<script src="jQuery UI/jquery-ui.theme.css"></script>
<script src="jQuery UI/jquery-ui.theme.min.css"></script>
<script src="jQuery UI/external/jquery/jquery.js"></script>
<style>
#draggable {
width: 200px;
height: 200px;
padding: 1px;
background-color: green;
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({
axis: "x";
});
});
</script>
<br>
<div id="draggable" class="ui-widget-content">
<p>Text</p>
</div>
Could you please help by elaborating step-by-step for me?
Thanks in advance!
Related
I am trying to incorporate the clickable jquery United States map from this site https://newsignature.github.io/us-map/ into a page I'm building in Sharepoint. I'm using a content editor web part, and embedding this code into it, but the map isn't showing up. As you can see from my code below, I have linked the javascript files that were included in the us-map-1.0.1.zip file that I downloaded from the site. I also uploaded the 2 svg maps from that zip package to the folder of the page I'm working on. I'm not sure how I am supposed to connect to those svg files, and how I can get this map to display. Is there anything I should do to modify this code?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script>
<script>
$(document).ready(function() {
$('#map').usmap({
// The click action
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name)
.parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
});
</script>
<style>
$('#map').usmap({
stateStyles: {fill: 'blue'}
});
</style>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
OK, let´s start.
First of all, it seems that your links are outdated or broken.
https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js
is not working.
The files must be reachable.
Next point s that you are using javascript inside of style tags.
That won't work.
After your links are fixed, try it like this:
$(document).ready(function() {
/** FIRST YOU HAVE TO INITIALIZE THE MAP **/
$('#map').usmap({
stateStyles: {fill: 'blue'},
'click': function(event, data) {
$('#clicked-state').text('You clicked:'+data.name );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
My code throws a JS error, offsetParent is not set -- cannot scroll. I tried position: relative; but it still shows the same error.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnShow').click(function(){
$("#dialog").dialog();
});
});
</script>
this link
<div id="dialog" style="display: none; position: relative; height: 4em; overflow: scroll;">
<div>
<iframe src="reports/my_pdf.pdf"></iframe>
</div>
</div>
Try to use "lazy loading":
<script type="text/javascript">
$(document).ready(function() {
$('#btnShow').click(function(){
$("#dialog").dialog();
$("#frame").attr("src", "reports/my_pdf.pdf");
});
});
</script>
this link
<div id="dialog" style="display: none;">
<div>
<iframe id="frame"></iframe>
</div>
</div>
Rather than jquery you can simply do this by using Javascript
You can use window.open() method and insert the pdf file in it window.open("path/for/pdffile") and give width, height and its position
window.open("path/for/pdffile", "width=500,height=500,top=100,left=500")
You can insert the above code in a function and call it when a html element is clicked .
That's it your pdf file will be opened in a pop up window
Can anyone suggest me a solution please? I've been trying half an hour to get jQuery ready and working for my Visual Studio but it does not work. I can't really be specific because i also don't know why.
<script>
$(document).ready(function () {
$("button").click(function () {
$("#square").animate({ left: '500px' }, slow);
});
});
</script>
<style>
#square{
border: solid; border-color: aqua; border-width: 1px; background-color: skyblue; width: 125px; height: 125px; text-align:center;
}
</style>
<body>
<div id="square">Focus on me!</div>
<div> <button>Click me</button> </div>
You have to add jquery to your page. You can add jQuery in two ways :
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
The jQuery library is a single JavaScript file, and you reference it with the HTML tag :
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
And for CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
then write your code :
$(document).ready(function(){
alert("Hello there!")
});
Add this piece of code above the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Now you have successfully added jQuery!
Here
is an example with jquery UI , Here is an example done with css3. The problem is the css3 will not work with any version of ie and I am looking to use an older version of jQuery UI -1.7.2 which I can't find. I'm using thhe older version because of the aging browsers we still support: IE 8,9 (recently dropped 7 finally).
I'm wondering if there are any other solutions available.
not sure what is not working
<html>
<head>
<title>resize</title>
<style>
#resizable { height: 250px; margin: 1em auto; width: 250px; }
h3 { text-align: center; }
</style>
<script src="code/ui/jquery.ui.core.js"></script>
<script src="code/ui/jquery.ui.widget.js"></script>
<script src="code/ui/jquery.ui.mouse.js"></script>
<script src="code/ui/jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="code/demos.css">
<script type="text/javascript" src="code/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$("#resizable").resizable();
//alert("HODOR");
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">This is a resizeable window</h3>
</div>
</body>
</html>
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.