Here are the relevant parts in my code to the problem:
<head>
<link rel="stylesheet" type="text/css" href="/static/semantic/dist/semantic.rtl.min.css" />
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<script src="/static/semantic/dist/semantic.min.js"></script>
<script src="/static/semantic/dist/components/dropdown.min.js"></script>
<script>
$('.ui.dropdown')
.dropdown()
;
</script>
</head>
<body>
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</body>
It seems like the dropdown just refuses to work. I've tried other things as well (search, accordion) and they haven't worked as well.
Checked on different browsers, on different platforms, and nothing.
Checked also maybe there's a problem with loading the files, but according to Chrome everything loads fine and there're no errors.
There is no .ui.dropdown element on the page when you are invoking dropdown plugin. You need to initialize it when DOM is ready:
$(function() {
$('.ui.dropdown').dropdown();
});
Or you could also put your original script block before closing </body> tag, it would work too.
Related
I'm trying to set focus to a particular edit field when a page opens or button is pressed. The following simple HTML/Javascript (Test.html) works with Firefox and Chrome but not Safari. Safari will clear the text with the clear button and post it with find button but not select it when the select button is pressed. Any help would be appreciated. (iOS 7 on an iPad 2)
Update -- Replaced with working code
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
EDITED TO INCLUDE .focus()
Try
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
Mobile devices, in particular iOS can be quite funny about select();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
EDIT: A note on input focus without user interaction
As found by #zappullae
It appears that in recent versions of iOS, Apple require user interaction in order to activate the keyboard, so this will not be possible on page load.
https://medium.com/#brunn/autofocus-in-ios-safari-458215514a5f
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>
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.
I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when
I do the in-page linking breaks entirely:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<nav>
<ul class="mainnav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>
<div class="content">
<div class="section" id="one">
<h4>One</h4>
</div>
<div class="section" id="two">
<h4>Two</h4>
</div>
<div class="section" id="three">
<h4>Three</h4>
</div>
<div class="section" id="four">
<h4>Four</h4>
</div>
<div class="section">
<a id="five"><h4>Five</h4></a>
</div>
<div class="section">
<a id="six"><h4>six</h4></a>
</div>
</div>
</div>
</body>
</html>
I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.
It works fine here.
Make sure that the URL of jquery-smooth-scroll is correct.
I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll
It works for me. See this example: http://jsbin.com/ixefet/1/edit
All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.
Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).
It worked for me while testing on jsfiddle,
here you go
http://jsfiddle.net/mastermindw/XvV9W/1/
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