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
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 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>
Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
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 am trying to create a full page interface using the excellent jQuery UI Layout plugin.
but unfortunately west side unable to resize with mouse which i have mentioned in below image. i am not able to find any solution for it.
Below is my code which i used:
<div class="ui-layout-west">
<%#include file="abc.jsp"%>
</div>
Below is my sample image of west pane.
I found a solution, It looks like you have to include js for jquery ui. you can then set resizable option like below according to your need.
<html>
<head>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ui-latest.js"></script>
<script src="jquery.layout-latest.js"></script>
<script>
$(document).ready(function () {
$('body').layout({
applyDefaultStyles: true,
resizable: true,
east__resizable:false,
north__resizable:false,
south__resizable:false,
});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>