I have worked with .draggable() function before and it worked fine the previous time. However this time it is not even working. I have no idea why?
These are my jQuery links
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="https//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
This is my HTML Code
<div class="mainArea" id="response">
<div class="designer">
<?php include"shirtBasic.svg" ?>
<div id="imageDiv"> </div>
<div id="dragDiv"> </div>
</div>
<table width="100%" border="0" id="sizeBar">
<tr>
<td class="leftBarButton" style="width:50%">Front</td>
<td class="leftBarButton" style="width:50%">Back</td>
</tr>
</table>
</div>
and this is the jQuery
$(document).ready(function() {
$(function() {
$('#dragDiv').draggable();
});
});
This is not the only code there is other code above and below HTML and jQuery as well but not relevant.
Please help me find the problem and suggest if I have linked the correct versions of jQuery, if there is a newer available please enlighten me.
Your code works well... http://jsfiddle.net/m6ac80wb/2/
You should use only one version of JQUERY. You can keep the latest one https://code.jquery.com/jquery-2.1.1.js
Also, don't forget to import the jquery-2.1.1.js before the jquery-ui.js.
You can try using:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
It works if you try it that way, and also your stylesheet was missing the ":" in the url, it is not the reason it wasn't working, but I thought I should point it out.
Related
I want to create a tab UI element with Semantic UI.
I have the following code in my html file:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.1.min.js"></script>
</head>
<h1>Braitenberg Playground</h1>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">One</a>
<a class="item" data-tab="second">Two</a>
<a class="item" data-tab="third">Three</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">First</div>
<div class="ui bottom attached tab segment" data-tab="second">Second</div>
<div class="ui bottom attached tab segment" data-tab="third">Third</div>
<script>
$('.menu .item')
.tab()
;
</script>
</html>
The Tab UI is created but unfortunately, they are not activated when clicked. I can't figure out why that is
Your code works fine. https://jsfiddle.net/85mm5uq7/
The issue is that you have a typo. :(
<script src="https://code.jquery.com/jquery-3.1.1.1.min.js"></script>
should be
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
I solved the problem by altering the js script.
It now explicitly adresses the tabs, setting it active/unactive on click:
$(document).ready(function(){
$('.ui .item').on('click', function() {
$('.ui .item').removeClass('active');
$(this).addClass('active');
var tab = $(this).attr("data-tab");
$(".tab.segment").removeClass("active");
$(".tab.segment[data-tab=\"" + tab + "\"]").addClass("active");
});
});
thanks for pointing out the typo in the beginning and for investing your time!
A bit late but perhaps can help someone. I get it working changing the order of jquery and semantic scripts. The jquery script must be imported first:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
URL:
http://qualitygameservers.com.gridhosted.co.uk/
I am attempting to install the JQuery lightbox demonstrated here:
https://designshack.net/articles/javascript/create-a-simple-jquery-image-lightbox-gallery/
Console is returning that it is not in fact a function, however my script experience is minimal.
Any ideas what the problem is? Have i missed something basic or is this an issue with the open source code?
Thank you.
Make sure that you get both the jquery resource and the lightbox code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js">
And if you might want to host that jquery.lightbox file on your own site, in case that tutorial page ever gets moved/deleted.
$(function() {
$('#thumbnails a').lightBox();
});
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/jquery.lightbox-0.5.css" rel="stylesheet"/>
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/styles.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js"></script>
<div id="thumbnails">
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/01-turntable-illustration-graphic-thumbnail.png" />
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/08-extreme-fish-bowl-thumbnail.png" />
</div>
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.
Here is a link to another question similar.
Draggable and resizable in JqueryUI for an image is not working?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
This is just a very basic example but when I run this the image is movable but is not resizable. Although as far as I can tell, it should definitely work.
In the link above at the bottom of the question there is a link to a working example.
http://jsfiddle.net/8VY52/
The example is using jfiddle with this exact same HTML and javascript.
Is there something I am missing about Jquery UI, why does this work through Jfiddle but does not seem to work within the code above.
Thanks.
You are missing the jquery-ui CSS file in your code
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
Demo: Plunker
Complete working code would be.
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#image').resizable();
$('#image').draggable();
$('#image').resize(function(){
$(this).find("img").css("width","100%");
$(this).find("img").css("height","100%");
});
});
</script>
</body>
</html>
This will work for you.
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
As the resizable property only works on right side and bottom side so find the image borders find that by selecting a image in css and border to it then see the output it will work perfectly
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>