I'm trying to duplicate an element in a page. I do not exactly how, is it possible with CSS or I need to use a script?
I imagine something like this:
#yan:before {
content: Get The Value Of(AN.element.inPage) !important;
font-size: 200% !important;
}
E.G.:
Let's say I want to get the title of a topic.
#yan:before {
content: Get The Value Of(h1.subject) !important;
font-size: 200% !important;
}
Then the topic title would appear 2 times in the page. Is it possible?
NOW This is my RIGHT code...
// ==UserScript==
// #name DUPLICATING - CLONE elements
// #namespace http://userscripts.org/scripts/show/109262
// #description EXPLAIN ME PLEASE
// #include http*://*answers.yahoo.com*
// #version 1
// ==/UserScript==
var yan = document.getElementById('yan'),
h1s = document.querySelectorAll('h1.subject');
[].forEach.call(h1s, function(node) {
// insert before
yan.parentNode.insertBefore(node.cloneNode(true), yan);
});
►►►► BUT now how do I set a position relative to the "#yan-related" element??
►►►► I want the newly created element to follow the #yan-related.
This is only possible with script, e.g.
var yan = document.getElementById('yan'),
h1s = document.querySelectorAll('h1.subject');
[].forEach.call(h1s, function(node) {
// insert before
yan.parentNode.insertBefore(node.cloneNode(true), yan);
});
Demo
You will have to use jquery. Check clone()
var a = $("#dashnav").clone
$("#dashnav").after(a)
No, CSS is for layout purposes, and cannot clone HTML elements. You will have to use JavaScript/jQuery for this purpose.
See related question on how to use .clone():
Is it possible to clone html element objects in JavaScript / JQuery?
Related
I have an idea to make sticky header of table and I have tried with position:sticky. It's
working fine on Chrome but on Firefox and IE not working as I think. Below is my CSS
.myTable--mof thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:100;
}
position:sticky is not supported for child table elements in some browsers. The 'why' I don't know.. Will it be supported in the future? I sure hope so!
I recently wrote this jQuery solution. It'll work for simple tables with simple headers. Does not look for colspans or multiple rows in thead!
I tried some plugins before, but they all listened for the scroll event which throws alerts in some browsers. They caused flickering/jumping in some cases, and a delay was noticable when hitting the position to stick at.
Using position:sticky for other elements and liking those transitions more, I came up with the following piece of code.
jQuery.fn.stickTableHeaders = function() {
return this.each(function()
{
var table = $(this),
header = table.find('thead'),
sticked = $('<table></table>').addClass('table').append(header.clone()); // Needs to be wrapped in new table since table child elements can't be sticky? (FF)
sticked.find('th').css({ // You'll have to copy the original thead (th's) CSS manualy
'backgroundColor': '#DEE5EA',
'color': '#606060',
'padding':'8px',
'color':'#606060'
}).removeAttr('width'); // And remove the width attr from the clone th's since we'll be setting them again later
sticked.find('th:not(:last-child)').css({ // More CSS
'borderRight': '1px solid #ddd'
});
sticked.find('a').css({ // More CSS
'color':'#606060'
});
// I tried different things, most of the original th's should have a width attribute set (not in CSS and avoid percent) for best results
$(window).resize(function() {
sticked.width(table.width());
sticked.find('th').each(function() {
var headerTH = header.find('th').eq($(this).index());
if(headerTH.is('[width]') || headerTH.is(':first-child') || headerTH.is(':last-child')) { // First and last th are allready calculated by another function in my app. See what suits for you here...
$(this).width(header.find('th').eq($(this).index()).width());
}
else {
var cellWidth = header.find('th').eq($(this).index()).width(true),
tableWidth = table.width(true),
percent = 100*(cellWidth/tableWidth);
$(this).css({'width':percent+'%'});
}
});
// We keep the original thead to avoid table collapsing, we just slide the whole table up.
table.css({
'marginTop':-header.height()
});
}).trigger('resize');
// Apply stickyness
sticked.css({
'display':'table',
'position':'sticky',
'top':$('#header-menu').height(), // My sticky nav is my top position, adjust this to your needs
'zIndex':'10'
});
// Insert clone before original table
$(this).before(sticked);
});
};
Now I just use this on each page load:
$("table").stickTableHeaders();
You might want to filter out nested tables from the above selector...
Hope this helps someone.
Is there any way to display the page-length option and paginate option in the same line? This is how I got:
Is there any way to override their css and display them in the same line? They both are in two separate div. I've added "jquery.dataTables.min.css" and "bootstrap.min.css".
Use dom option to construct the layout for Bootstrap framework.
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-8'p>>"
});
See this jsFiddle for code and demonstration
edit: Ah, I realized I can't reply to a comments in comment, I hope the OP can sees this.
simply add the character i for information
as example, if you want to have i after l, then put as below
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'li><'col-sm-8'p>>"
});
else you can even let i have it's own col-sm, as follows (note that I decreases pagination, p from 8 to 4 in order to fit into 12 division of 'row' by bootstrap standard.
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>"
});
on bootstrap 4 I overide by
"language": {
"sProcessing": "กำลังดำเนินการ...",
"sLengthMenu": "แสดง_MENU_ แถว",
"sZeroRecords": "ไม่พบข้อมูล",
"sInfo": "แสดง START ถึง END จาก TOTAL แถว",
"sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 แถว",
"sInfoFiltered": "(กรองข้อมูล MAX ทุกแถว)",
"sInfoPostFix": "",
"sSearch": "ค้นหา:",
"sUrl": "",
"oPaginate": {
"sFirst": "เิริ่มต้น",
"sPrevious": "ก่อนหน้า",
"sNext": "ถัดไป",
"sLast": "สุดท้าย"
}
},
Just override Datatable CSS class .dataTables_wrapper .dataTables_length by adding new property as per below.
.dataTables_wrapper .dataTables_length {
white-space: nowrap;
}
In my case i've tried to achieve length,info and paginate at the bottom of the table. You can see the result below.
To achieve this, first you should set dom property of your DataTable.
dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-3'l><'col-sm-3'i><'col-sm-6'p>>"
After that put and customize the code below for your own needs, in your CSS file or between the <style> tags.
div.dataTables_wrapper div.dataTables_info {
padding-top: 1.7em;
}
div.dataTables_wrapper div.dataTables_length {
padding-top: 0.3em;
}
This solved my problem. But in case you need to style other properties of datatable, you are free to use the selectors below.
div.dataTables_wrapper div.dataTables_filter {
padding-top: 0.8em;
}
div.dataTables_wrapper div.dataTables_paginate {
padding-top: 0.8em;
}
Is there a way to hide a whole div if part of it is empty? For example if "dd" is empty as shown below can I hide the whole class "test" so the keyword Restrictions does not show either. I tried .test dd:empty { display: none; } but this does not work. thanks!
<div class="test"><dt>Restrictions:</dt>
<dd></dd></div>
I don't think there's any easy way to do what you're talking about with just CSS. Better to test it server-side if you can. But if you can't here's some JS that will do the job.
<script type="text/javascript">
// handles multiple dt/dd pairs per div and hides them each conditionally
function hideIfEmpty() {
// get all the elements with class test
var els = document.getElementsByTagName('dl');
// for every 'test' div we find, go through and hide the appropriate elements
Array.prototype.map.call(els, function(el) {
var children = el.childNodes;
var ddEmpty = false;
for(var i = children.length - 1; i >= 0; i--) {
if(children[i].tagName === 'DD' && !children[i].innerHTML.trim()) {
ddEmpty = true;
} else if(children[i].tagName === 'DT') {
if(ddEmpty) {
children[i].style.display = 'none';
}
// reset the flag
ddEmpty = false;
}
}
});
}
window.addEventListener('load', hideIfEmpty);
</script>
<div class="test">
<div style="clear: both;"></div>
<dl>
<dt>Restrictions:</dt>
<dd></dd>
<dt>Other Restrictions:</dt>
<dd>Since I have content, I won't be hidden.</dd>
</dl>
</div>
Just a fair warning: the code uses some functions that may not exist in older IE, such as Array.prototype.map, String.prototype.trim, and addEventListener. There are polyfills available for these and you could also write your own pretty easily (or just do it with a for loop instead).
CSS alone can't do that. Either, you need a javascript to retrieve empty elements and hide their parents, or your CMS applies special CSS classes if there's no content.
Put as an answer as requested by #Barett.
You could update your CSS to be
.test{
display: none;
color: transparent;
}
This would make the text transparent too, but display:none should hide it anyway.
To make the div with the id test ONLY show when the dd tag is EMPTY, and you can use jQuery, try the following JavaScript along with the CSS:
if($("dd").html().length ==0)
{show();
}
Note: this solution requires jQuery, which is a JavaScript library.
I have and angularjs application that fetches data via api, and builds a webpage with it.
Usually I use ng-style to create dynamic styling, but now I have to use the nth-of-type attribute that can only be used in a css stylesheet (I cannot use individual styling since the number and order of elements always change).
I have tried this naive code (in the html page):
<style ng-if="styles.sc && styles.sc.length==3">
a.mosection:nth-of-type(3n) > div {
background-color: {{styles.sc[0]}} !important;
}
a.mosection:nth-of-type(3n+1) > div {
background-color: {{styles.sc[1]}} !important;
}
a.mosection:nth-of-type(3n+2) > div {
background-color: {{styles.sc[2]}} !important;
}
</style>
But it didn't work... Apparently angular doesn't bind the data inside the style tag (the ng-if attribute does get digested properly)
Does anyone have any idea how this can be done?
Thanks!
You should checkout those three ng-*
https://docs.angularjs.org/api/ng/directive/ngClass
https://docs.angularjs.org/api/ng/directive/ngClassOdd
https://docs.angularjs.org/api/ng/directive/ngClassEven
all of them can accept functions as attributes, you can also checkout
https://docs.angularjs.org/api/ng/directive/ngStyle
which might be actually the best in your case
Thanks!
I indeed solved it by using ng-style with a function
The HTML
<div class="widget widget-people" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-people', '#333333')}"></div>
<div class="widget widget-property" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-property', '#24d10f')}"></div>
The scope function
$scope.staggerBgColors = function(elesClass, eleClass, defaultColor){
if (!$scope.styles || !$scope.styles.sc || $scope.styles.sc.length!=3){
return defaultColor;
}else{
var listItem = $('.'+eleClass);
var n = $('.'+elesClass).index( listItem ) % 3;
return '#' + $scope.preview.moment.sc[n];
}
}
I had to implement the same functionality of the css property "nth-of-type" using jQuery, but it works prefectly!
I am writing a GreaseMonkey script that sometimes creates a modal dialog – something like
<div id="dialog">
Foo
</div>
. But what can I do if the site has something like
#dialog {
display: none !important;
}
? Or maybe the owner of some site is paranoid and has something like
div {
display: none !important;
}
div.trusted {
display: block !important;
}
because he doesn't want people like me adding untrusted content to his page. How can I prevent those styles from hiding my dialog?
My script runs on all pages, so I can't adapt my code to each case.
Is there a way to sandbox my dialog?
Actually a very interessting problem, here is another approach:
adding an iframe and modifying it creates a seperate css space for you (your sandbox)
look at this jsfiddle example: http://jsfiddle.net/ZpC3R/2/
var ele = document.createElement("iframe");
ele.id = "dialog";
ele.src = 'javascript:false;';
ele.style.height = "100px";
ele.style.width = "300px";
ele.style.setProperty("display", "block", "important");
document.getElementById("dialog").onload = function() {
var d = document.getElementById("dialog").contentWindow.document;
// ... do your stuff within the iframe
};
this seems to work without problem in firefox.
now you only have to make sure that the iframe is untouched, you can do this they way i described in my 1. answer
just create the div like this:
var ele = document.createElement("div");
ele.style.setProperty("display", "block", "important");
that should overwrite all other styles afaik.
look here, it seems to work: http://jsfiddle.net/ZpC3R/