Jquery UI draggable select item to be a draggable - javascript

I have the following html code:
<div id="match_task_elements_31" class="match_task_draggables ui-draggable">
<span class="match_task_draggable" id="match_task_draggable_17">Dach</span>
<span class="match_task_draggable" id="match_task_draggable_16">Tschüss</span>
</div>
Now I want that each span is a dragable object that I can drag'n'drop
I tried this JS code:
$(".match_task_draggables").draggable({handle : '.match_task_draggable'});
But so the whole div with class match_task_draggables is a the block I can drag'n'drop
whats going wrong?

Try the below. It allows to drag and drop the span
$(function() {
$(".match_task_draggable").draggable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="match_task_elements_31" class="match_task_draggables ui-draggable">
<span class="match_task_draggable" id="match_task_draggable_17">Dach</span>
<span class="match_task_draggable" id="match_task_draggable_16">Tschüss</span>
</div>

Related

How to dynamically set progress bar value in jQuery?

On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:
$(document).ready(function() {
$(.progressbar).progressbar({
value: 50
});
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar"></div>
<span style="text-align: center">50% complete</span>
Lots more stuff here
</body>
However, what I want it to do is have multiple progress bars with different values. I want to have a class for the progress bars, and a custom attribute for its value. Something like this:
$(document).ready(function() {
$(.progressbar).progressbar({
value: $(.progressbar).attr("data-progress-value");
});
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>
</body>
I know this code won't work though, because the jQuery docs say .attr and all similar functions only get the attribute of the first of the set.
Is something like this possible in jQuery?
Or, for the XY problem showing here, If this is not possible, how can I dynamically set static progress bars?
Thank you in advance.
Fairly simple in an each() where you have access to each element instance before initializing plugin for that element.
$(function() {
$('.progressbar').each(function() {
var $el = $(this);
$el.progressbar({
value: $el.data("progress-value")
});
});
})
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>
You could add an additional class unique to each progress bar, like pb1, pb2 etc.
Then just
$(document).ready(function() {
$(.pb1).progressbar({
value: 75
});
$(.pb2).progressbar({
value: 50
});
});

Image not working when clicked

When you click a navigation item at the top of the screen, a blank div pops up with a huge "x" image that when clicked, the x image is suppose to close the blank div and everything else. For "jobs, contact, press, and legal" it doesn't work when clicked but for "support" it works perfectly. I put the code side by side to see errors, copy the support code and paste for others... basically everything imaginable for 1-2hours. I found a glitch that when you open the "support" first then close it out and open another one, the x image works but I don't know why. Here is my html and the rest of the code will be uploaded to codeine
demo:
http://codepen.io/anon/pen/dvzgrY
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help will be greatly appreciated :D
The problem is that all your popup containers (job-popup, contact-popup, etc) are positioned absolutely at the same location with the same z-index. Since the support-popup is last in your html, it's hiding all the popup containers underneath it. You are never actually clicking on the other x-icons (only on the top support one), and therefore, the click handlers are not getting triggered.
For a quick fix, you could update the z-index, in your nav click handlers. For example:
$("#job").click(function() {
$("#job-popup").fadeIn(300);
$("#job-popup").css({'z-index': 15});
$("#job-content").fadeIn(300);
$("#jobWords").fadeIn(300);
$(".x-icon1").fadeIn(300);
$("#name").fadeOut(300);
$("#container").css("-webkit-filter", "blur(10px)");
}
and then move it back down here
$(".x-icon1").click(function() {
$("#job-popup").fadeOut();
$("#job-popup").css({'z-index': 10});
$("#job-content").fadeOut();
$("#jobWords").fadeOut();
$(".x-icon1").fadeOut();
$("#name").fadeIn();
$("#container").css("-webkit-filter", "blur(0px)");
}
and then replicate this for all your click handlers.
But you should also consider refactoring your html/css, since the structure is incorrect (body within head, for example), and a lot of the css is probably unnecessary.

Semantic UI - Accordion - Not working

Help me please, i have this libs:
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
and this is the html code:
<div class="ui container">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Hello
</div>
<div class="content">
contenido 1
</div>
</div>
</div>
and js:
<script>
$('.ui.accordion').accordion();
</script>
What am I missing to work fine this element ? Am I need some scripts to add ? I have a browser console error:
TypeError: $('.ui.accordion').accordion is not a function. (In '$('.ui.accordion').accordion()', '$('.ui.accordion').accordion' is undefined)
you're script tags have the typo for the attribute src on your script tag. In your example, its spelled scr, so the page is never actually loading your libraries. So change:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
TO:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
You forgot to put accordion module.
Simple add after semantic.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>

How do you get the Kendo UI Barcode to render in Kendo Mobile app

I am trying to figure out how to use a jQuery plugin with the Kendo UI template.
I have an index.html that calls a views/home.html file. Then there is a home.js file that controls some functionality for the home.html using a model.
I am trying to use a jQuery barcode plugin. We are dynamically getting data from our service and outputting the data (although right now I am just trying to hardcode values). How would I get the jQuery plugin to work with the Kendo UI template code.
My code is below.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<!--Need to add back button and mail center buttons-->
<span data-role="view-title"></span>
<a data-role="button" data-align="right" href="views/messagecenter.html" class="nav-button"><i class="fa fa-envelope-o"></i></a>
<i class="fa fa-bars"></i>
</div>
</div>
</head>
home.html
<div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
<div id="MemberCardHeader">
<div data-template="memberTemplate" data-bind="source: MemberInfo">
<!--Member card x-kendo-template id="memberTemplate" renders here-->
</div>
</div>
</div>
<script type="text/x-kendo-template" id="memberTemplate">
<div id="memberCard">
<!--Barcode should render here-->
<div id="Barcode"></div>
</div>
</script>
home.js
var app = app || {};
app.MemberInfo = (function (){
/*Barcode code*/
/*HOW DO I GET THIS TO WORK WITH KENDO UI CODE ABOVE*/
$("#Barcode").kendoBarcode({
value:"288288",
type:"ean8"
});
}());
you can instantiate the widget in the init event of the view:
http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#events-init.

3 iFrames, 3 Links - Show 1 iFrame using onclick, while hiding the others

I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>

Categories