I am using jQuery UI resizable and I want to have a title for each handler.
Like if I an hovering on 'east -handler' then a tooltip should appear saying 'that move to the right'. I was trying to do with jQuery attr() but not able to do so. Any help is appreciated. And one more thing I am having more than one element on which I am applying resizable method so all should get the same "title".
$(document).ready(function() {
$('.ui-icon-gripsmall-diagonal-e').each(function() {
$(this).attr('title', 'hello');
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#resizable").resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
You need to run your code after you initialise the plugin. Like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#resizable").
resizable().
find('.ui-resizable-se').attr('title', 'hello');
});
</script>
</head>
<body>
<!-- HTML -->
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
Related
I am new to javascript, I tried to change the color of an element (circle) when clicking on a button but it doesn't work for me and i don't know what to do, here is the script:
I have 2 files(html and css):
html file:
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
CSS file:
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
It works great, it's exactly the code you attached
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
if(cir.style.backgroundColor == "yellow")
cir.style.backgroundColor = "#ccb22e";
else
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
Problem:
I am using Bootstrap Slider, which can be found here https://seiyria.com/bootstrap-slider/. When using example 8, the tooltip does not show as it does on the website.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>
<body>
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>
</html>
Example Snippet:
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
body {
padding: 100px;
}
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
JS Fiddle:
http://jsfiddle.net/2u4xs9cv/1/
Desired outcome:
To always show the tooltip when the slider changes.
I know this is pretty late but I was looking for a solution and am posting here in hopes that this might be of help for someone else.
I set
.tooltip.in {
opacity: 1;
}
and the tooltip started showing.
Using Bootstrap v4.2.1 and the latest version of bootstrap-spinner with their angular directive (in their slider.js file), I used the following HTML
<slider id="intervalSlider"
ng-model="refreshInterval" on-stop-slide="intervalChanged($event,value)"
min="10" step="10" max="60" slider-tooltip="show" ></slider>
I found that the tootip and arrow did not display. I added the following CSS into my custom CSS file
.slider .tooltip.in {
opacity: 1;
}
.slider .tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.slider .tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.slider .tooltip.top {
padding: 5px 0;
}
This is still opened issue for Bootstrap 4.3.1 - #689. The Bootstrap v4 is not yet fully supported.
On the end of the discussed issue they are shown some solutions I use it following:
$("#ex12c").slider({ id: "slider12c", precision:2, step:0.01, min: 0.70, max: 1.00, range: true, value: [0.80, 0.90] });
#slider12c .slider-track-high {
background: #5cb85c;
}
#slider12c .slider-selection {
background: #ffc107;
}
.slider-handle::after{
content: attr(aria-valuenow);
position: absolute;
bottom: calc(100% + 0.5em);
left: 50%;
transform: translateX(-50%);
font-size: 0.75em;
font-weight: 600;
color: #393f50;
background-color: white;
box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.3em;
width: 4em;
height: 2.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 4 CDN CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap 3 slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />
</head>
<body>
<br />
<br />
<input id="ex12c" type="text"/>
<!-- Bootstrap 4 CDN JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js">
</script>
<body/>
<html/>
My resizeable function will not work, despite the fact that I have the correct jqueryui libraries. Here is what my code looks like:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<link href="jqueryi-ui/jquery-ui.css" rel="stylesheet">
<style type="text/css">
#resizable {
width: 150px;
height: 150px;
background-color:green;
padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
What am I doing wrong?
Try your code at Codepen
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<!--
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<link href="jqueryi-ui/jquery-ui.css" rel="stylesheet">
-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
#resizable {
width: 150px;
height: 150px;
background-color:green;
padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
WORKED, by only replace your jquery.js/jquery-ui.js/jquery-ui.css reference. So, you may check your jquery/jquery-ui lib version and path reference.
Or check this post: jquery-ui Resizable.
Hello everyone I am creating a math game for kids and I want the user to be able to change the background image of their game when he/she clicks a button
I have a space / jungle / desert theme I tried this code that i found online but it won't work it works here though http://jsfiddle.net/Eqdfs/27/
how come?
Please keep in mind that I am using jquery mobile in my original program and I have a default background set with this code
<style>
body {
background-image: url("http://s21.postimg.org/9bj52fal3/sdfsdfdsf.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
background-size:100% 100%;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
then i found this code that claims it can add buttons that will change the background image but I cant get it to work in this simple html file yet alone in my actual game
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.js></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
body {
background-repeat:repeat;
background-position:top-left;
}
body.class1 {
background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
<script>
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
</script>
</head>
<body>
<a id="btn1">Noise BG</a><br/>
<a id="btn2">RVB BG</a><br/>
<a id="btn3">dunno BG</a>
</body>
</html>
the real problem is the jquery-mobile and jquery-UI are conflicting each other. Also there are few markup problems in your design. Try this code and check if its working
EDIT Updated jquery. Now the background is changing with single click.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
body {
background-repeat: repeat;
background-position: top-left;
}
a#btn1,
a#btn2,
a#btn3 {
color: #fff;
cursor: pointer;
background: #333;
padding: 0px 15px;
}
body.class1 {
background-image: url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image: url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
</head>
<body>
<a id="btn1">Noise BG</a>
<br/>
<a id="btn2">RVB BG</a>
<br/>
<a id="btn3">dunno BG</a>
<script>
$("#btn1").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class1');
});
$("#btn2").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class2');
});
$("#btn3").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class3');
});
</script>
</body>
</html>
Your fiddle code actually worked for me running inside MS Edge.
Just Change this line:
<SCRIPT LANGUAGE="JavaScript">
to
<script>
Additionally, You aren't defining type while including script files, Add this line too in each opening <script> tag
type="text/javascript"