I am attempting to implement a bootstrap 4 datatable, and cannot seem to get it to work. In My head I have the required CSS
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">
I then have the following required scripts below:
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
I then call the scripts onto my standard formatted HTML table, with the correct ID as follows:
<script>
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
None of this However works, and the table displays using normal Bootstrap 4 Table, with no search/sorting function. Could anyone explain what I'm doing wrong here?
Thanks
EDIT: I tried this unfortunately it seemed to break the CSS for the whole site. All I really want to do is only show the first 10 rows of my bootstrap 4 table, but every time I google it it comes up with results for data tables. Is there any way to show just the first 10 rows of a standard bootstrap 4 table?
It seems like you haven't imported Jquery in your HTML File.
you need to use 3 files for Data Tables as follow
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js
But you only added
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js
Import JQuery before
jquery.dataTables.min.js and
dataTables.bootstrap4.min.js
after the imports of js and jquery files
write your Jquery Code
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
and for header
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css
https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css
check that as follow, This will work fine.
Related
Im trying to install tinymce to use with my text editor to allow the user to have a text box just like the stack overflow one. I cant get it to display though
ive put this in the head of my index file
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script src='https:https://cloud.tinymce.com/stable/tinymce.min.js'>
</script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'infotextarea'});
</script>
then in my info page ive put
<textarea id="infotextarea">Your content here.
</textarea>
can anyone explain why its not displaying
It may be that at the time you run the tinymce.init function, it is not yet rendered and there is no textarea in the DOM.
Try debugging your code on the following line:
<script>
debugger;
tinymce.init({selector:'infotextarea'});
</script>
When the web's execution has stopped on that line, in the development console of your browser type the following:
$('#infotextarea').length
If the size is greater than 0, textarea exists at that moment and it is another problem, but if it shows 0 is that you have not yet created that view, this will help us get more information about your problem.
If you want to target a <textarea> by ID you need to use a valid CSS selector.
selector: "#infotextarea"
(note the # at the beginning of the string)
I would also note you appear to be loading TinyMCE 3 separate times - I have no idea why you would need to do that - loading it once should be sufficient
Its not a perfect answer to my question, but i used ckeditor and it worked perfectly.
I must have a mistake somewhere that i or my team could not find with tinymce
How can I make a switchable table with buttons to lead to different view of another table? Something like this:
As you can see, once you click on the buttons it takes you to another table list.
Here is a base: http://jsbin.com/agavid/136/edit
Need something similar to this.
You can create several different tables and use a simple JS/jQuery script to show and hide the tables based on which button is pressed.
Essentially you would show all tables at start (for progressive enhancement), then hide all of them except the first one. Then when a button is clicked, hide all the tables and show only the one associated with that button.
Here's a demo of what I'm talking about. http://jsfiddle.net/7Ywbn/2/
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
Hope I understood your question correctly.
here is a suggestion
wrap each table in a <div id="table1"> <div id="table2"> etc.. and hide them all by default. here is some help on that: hiding div using js
and then only show the <div> for the table associated with the button the user has clicked on. you can do this using javascript, jquery as a couple examples.
you may need to start looking into learning some basic javascript/jquery if you don't already know any, you are going to need it.
good luck.
You could create multiple divisions within the same file and hide all the divisions except the primary you want to display during the initial page load. then use "onClick='showNextDiv();" inside the buttons themselves.
A sample of the javascript would be:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict()
function showNextDiv() {
document.getElementById('DivName').style.display = "block";
document.getElementById('FirstDiv').style.display = "none";
}
</script>
All this is saying that when someone clicks on a button this script runs and displays the 'DivName' div. That's what "block" means. It also turns off the division "FirstDiv" by using the "none".
You can add as many "block" and/or "none" statements to the script. If you have 6 divisions you would want to display one and turn off 5.
I hope this is helpful. I'm not an expert at this but it works fine for me.
While modifying a phpBB forum, we need to create a custom topic/posts view.
Please see the image below for details
The real problem is Partitions 1 and 2.
The code am using is updated code
The result is -
what ever you set your CSS just add javascript code # the end of your file like ...
<script type="text/javascript">
var h1=document.getElementById('div1').offsetHeight;
var h2=document.getElementById('div2').offsetHeight;
var h3=document.getElementById('div3').offsetHeight;
var h4=parseInt(h2)+parseInt(h3)+"px";
document.getElementById('div1').style.height=h4;
</script>
i run this code, it work for me.
I just wanted to know how I can create a button that can take a person to multiple websites in a random order when it is clicked each time. I plan on using this button for a toolbar that I'm planning to create, and the outline that is provided for the HTML component looks like this:
<html>
<head>
<!--
Uncomment out the below script reference as needed. For more information on using the API, please consult http://www.conduit.com/Developers/overview.aspx
<script language="JavaScript" src="http://api.conduit.com/BrowserCompApi.js"></script>
-->
<style type= "text/css">
<!--
BODY {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;
width:100%;height:100%;overflow:hidden;background-color:threedface;}
-->
</style>
</head>
<body>
<!-- ENTER YOUR HTML HERE -->
</body>
</html>
Is there any way that I can do this by using this outline? Thanks in advance.
As suggested by others, simply make a button click call a function that picks a random site from an array. Here is an explanation on how to pick a random element from a Javascript array.
Example implementation:
<script type="text/javascript">
var websites = ["http://google.com", "http://reddit.com", "http://stackoverflow.com"];
function randomWebsite() {
var website = websites[Math.floor(Math.random()*websites.length)];
window.location = website;
}
</script>
<button type="button" onclick="randomWebsite();">Random website</button>
I'm not going to write the script for you but you'd want to use javascript to do this. Use the random function and assign your website urls to an appropriate number.
Example:
if you had three total websites then you'd do the random function and assign 0-.33 website 1, .34 - .66 website2, and .67 - 1 website 3.
You need Javascript for that.
You can have a list of websites.
You can get the website you will go to, when the button is clicked, by using the random function in javascript.
Here is the example when using an array, Getting a random value from a JavaScript array
Hope it helps.
We shouldn't give you any code, as you didn't provide anything. But your algorithm should follow what I mentioned.
I think you need javascript to do this,
Take a look on this page maybe this can help you
http://ozirock.hubpages.com/hub/How-to-make-a-Random-Page-button-for-your-website
Is there any way to write script in css and call or execute it whenever required ?
I need a <script> tag to be executed .
i need something like this..
css code
#execute{
<script> ..some script.. </script>
}
so whenever i use
<html>
.
.
.
.<div id="execute" />
.
.
.
.
</html>
so if i change the script changes will be reflected everywhere.
Is it possible?
EDIT:
Is it possible to keep my <script></script> tags inside some js file and i will host it. and then i will call some function() from my HTML so that the script will be executed everywhere i need it.
Can someone show me any example, tutorial how i can do it.
I don't have much information about the Js file and how the function should be called.
Thank you all
Does it have to be in CSS? jQuery is a great, simple way to do what you're asking. You put all your style information in the CSS (what it's intended for) and keep your javascript in the html or a .js file. Take a look at http://jquery.com. The code would look something like this
$(function() {
$('#execute')
.someCoolFunction()
.anotherCoolFunction();
});
You use $(function() { /* code */ }); to run the code when your document is ready, and you use $('#execute') to grab the element with the execute tag. You can then do a lot of cool javascript really easily with that jQuery element.
No, you cannot mix CSS and Javascript this way. Why would you want to?
If you simply want a common JavaScript include, do it like this:
<script type="text/javascript" src="yourscript.js"></script>
You can't do this in standard CSS.
There is a way in which you can run code from within the CSS context, using a technology called 'Behaviours', referencing an HTC file (which is basically Javascript) in the stylesheet.
However, this technology is non-standard, and only exists in IE. It is therefore only really used to write hacks to make IE support features that it doesn't have which are in other browsers. An example of this in use is CSS3Pie.
If you're working on a site which will never be used in any browser other than IE, and you're happy to use a non-standard technology, then you may consider this to be the exact answer to your question. However I would strongly recommend you don't do this.
More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.
With JQuery, you would write code like this (in a normal script block, not in the CSS!):
$('.execute').each(function() {
/* your code here; it would be run for each element on the page with the class of 'execute' */
}
As you can see, it uses a CSS-style selector syntax to select the elements to work with.
(also NB: I've used execute as a classname here, not as an ID, because you imply that you want more than one of them -- note that you should never use the same ID more than once in any HTML page; it is invalid. If you need the same thing several times, use a class.
JQuery has functionality to watch for changes to elements, respond to events such as clicks or mouse over, and much more. Other similar libraries such as Prototype, MooTools and Dojo would also be able to do a similar job.
Hope that helps.
[EDIT]
Given the edit to your question, can you not just place the advertisment <script> tag inside the <div> on the page where you want it?
So with JQuery, you could write something like this to run your ad in each place you want it:
HTML:
....
<div class='execute'></div>
....
<div class='execute'></div>
....
Javascript code (remember to also include the JQuery library, or this won't work):
$(document).ready(function () {
$('.execute').each(function() {
advertisement(this); //change to whatever the advertisement script function is called.
});
});
Hopefully that will get you started. I can't really help you much more without knowing more about the advertisement script, though.
Also, the people who supplied the advert script should be able to tell you how to use it.
I believe a Javascript library like JQuery or Dojo is what you are looking for. It will allow you to add event handlers on tags with certain CSS attributes, which will behave exactly like what you are trying to do right now.
EDIT
Here is an example with Dojo pulled from the Google CDN that will popup an alert window when you click on any <div class="execute"></div> block:
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" ></script> <!-- load Dojo from Google CDN
<!-- Let's register a onClick handle for any .execute div. -->
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
Edit 2
This example uses an onClick event but Dojo (JQuery) allows you to do much more things. For instance if you wanted to dynamically add an image or something onLoad inside .execute divs, you could do it with Dojo (JQuery) in a similar way to this.
Doing it with a library saves you a lot of effort, but if you still want to write and call your own functions from javascript files, this is a rough idea of how you would do it:
// myScript.js
function foo()
{
// ...
}
// page.htm
<html>
<head>
<script src="path/to/myScript.js"></script>
</head>
<!-- ... -->
<div class="execute">
<script>
<!--
// Call foo()
foo();
-->
</script>
</div>
<!-- ... -->
It doesn't really make sense to abstract a script into CSS like that, and even if it was a good idea, it can't be done.
Why do you need to run the same script over and over in different places? Consider whether or not there might be a better or simpler way to do whatever it is you're doing.
Plus, when you include a script with the src attribute in the script tag, if you modify the script's source file, the changes persist everywhere.
No, but you can use script to alter the CSS properties of any element in the DOM.