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>
Related
That's my first question here, I've searched on stackoverflow but couldn't succeed to find the proper answer.
So, I've implemented a bootstrap popover which content is showing up only at the first click.
My problem happen when I open this popover a second time : the content is not showing up.
Here is the html code:
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
yolo
</a>
<div id="clickGoogle" style="display:none;" class="open_modal">
Change banner<hr>
Change avatar<hr>
Edit profile
</div>
Followed by the JS code:
$(function() {
$('[data-toggle="popover"]').popover({
html:true,
content : function() {
$('#clickGoogle').css({'display':'block'});
return $('#clickGoogle');
}
});
});
I con't figure out WHY the #clickGoogle doesn't show up when I want to open the popover a second time...??
I hope I'm sufficiently clear in my explanations, if no, tell me!
Thank you for your help on that ;)
<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover({
html:true,
content : function() {
$('#clickGoogle').css({'display':'block'});
return $('#clickGoogle');
}
});
});
</script>
</head>
<body>
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
yolo
</a>
<div id="clickGoogle" style="display:none;" class="open_modal">
Change banner<hr>
Change avatar<hr>
Edit profile
</div>
</body>
</html
EDIT:
The solution provided is working but is at the same time deactivating the links, so I’m looking for another solution
I'm not sure why, but it seams that your popup is removing the content element from the DOM on popup destroy. Since you are passing your element via reference, that might be why it is removed aswell.
To fix that, I've simply returned the HTML of the element, using the Jquery function html() rather than the element itself.
Note here that you don't need to change the css anymore.
<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover({
html:true,
content : function() {
return $('#clickGoogle').html();
}
});
});
</script>
</head>
<body>
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
yolo
</a>
<div id="clickGoogle" style="display:none;" class="open_modal">
Change banner<hr>
Change avatar<hr>
Edit profile
</div>
</body>
</html
I have set up a html page to display a timeline using jquery.timeline.min.js library.
I get the timeline displayed but no events are added to it.
Its the basic example given at the help page on the github of this library at https://ka2.org/getting-started/
What am i missing, my code is the following
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='dist/jquery.timeline.min.css'>
<script type='text/javascript' src='script/jquery-3.3.1.min.js'></script>
<script src='dist/jquery.timeline.min.js'></script>
</head>
<body>
<!-- Timeline Block -->
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
<li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
<span class="event-label">Event Label</span>
<span class="event-content"><p>Event Body...</p></span>
</li>
</ul>
</div>
<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>
<script>
$("#myTimeline").Timeline();
</script>
</body>
</html>
You need to make two changes.
initialize timeline inside jquery on-ready event.
set startDatetime of your timeline while initializing.
please see below
<script>
$(function () {
$("#myTimeline").Timeline({
startDatetime: "2019-02-25 00:00"
})
})
</script>
hope it helps.
thanks
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.
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 do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.