i'm currently learning html and css. I'm working on a blogger blog template.
My template has a front page of post thumbnails.
I have set a class for my default thumbnail for when my posts do not have an image and I have set the url in the css.
.altthumbnails {
background: url(myimagelocation.jpg);
}
is there any way I can make more than one default thumbnail? I would like to chose maybe three images to show at random when there is no post image.
Thanks for any replies
You can not do it only with pure css. But you can do it either by the server-side code you use or js which the one I suggest. Basicly one of the easiest solution for this is you can make different classes for each different image you wanna use, then you can produce a random number in js and use this number to apply different classes to your elements. Here's an example:
DEMO
In the example there are 5 different css class that supply 5 different background-image and all their names end with numbers 1 >> 5.
.thumb_1 { .. }
.thumb_2 { .. }
.thumb_3 { .. }
.thumb_4 { .. }
.thumb_5 { .. }
In javascript we're gonna loop through the objects, generate a random number 1 >> 5 and use this number to add a new class like this.
var div = document.getElementsByClassName("thumb");
//var rand = Math.floor(Math.random() * 5 ); // for just one image
for (var i = 0; i < div.length; i++){
var rand = Math.floor(Math.random() * 5 ); // for multiple images
div[i].className += " thumb_" + (rand + 1) ;
};
Related
Does anyone know a fast way to copy multiple elements from an inspect page?
What I mean by that is I have a number of elements with same qualities i.e. same class and I want to copy all of them to my clipboard. Is there a way within inspect tool to do such a "trick" ? :)
Thank you in advance!
There's no specific simple way to do this, you can only using code to extract the elements you want.
For example if you want to get elements with the same class name, you can use the following code:
var outputText = "";
var targets = document.getElementsByClassName('classname');
for( var i = 0; i < targets.length; i++ ) {
outputText += targets[i].outerHTML;
}
console.log(outputText);
Then you can copy the output in the console.
Angular 6/7, Material Design.
Since I don't have access to the total number of items the item count is irrelevant (the box in the screen shot).
How do I remove the item count completely? Or alternatively show the page I'm currently on instead of the item count?
<mat-paginator
itemsPerPageLabel="Items per page"
(page)="changePage()"
[length]="resultsLength"
[pageSizeOptions]="[10, 100]">
</mat-paginator>
Remove the range label by inserting in global CSS
.mat-paginator-range-label {
display: none;
}
Insert page number instead (of course based on your API - you might not have the page info!) by inserting in your component
ngAfterViewChecked() {
const list = document.getElementsByClassName('mat-paginator-range-label');
list[0].innerHTML = 'Page: ' + this.page.toString();
}
and of course delete the CSS rule above!
Paginator now looks like this
I just modified Johan Faerch's solution to fit more to your question.
Create method which has two parameters, one for matpaginator and another for list of HTMLCollectionOf
paginatorList: HTMLCollectionOf<Element>;
onPaginateChange(paginator: MatPaginator, list: HTMLCollectionOf<Element>) {
setTimeout((idx) => {
let from = (paginator.pageSize * paginator.pageIndex) + 1;
let to = (paginator.length < paginator.pageSize * (paginator.pageIndex + 1))
? paginator.length
: paginator.pageSize * (paginator.pageIndex + 1);
let toFrom = (paginator.length == 0) ? 0 : `${from} - ${to}`;
let pageNumber = (paginator.length == 0) ? `0 of 0` : `${paginator.pageIndex + 1} of ${paginator.getNumberOfPages()}`;
let rows = `Page ${pageNumber} (${toFrom} of ${paginator.length})`;
if (list.length >= 1)
list[0].innerHTML = rows;
}, 0, paginator.pageIndex);
}
How to call this method? you can initialize this on ngAfterViewInit()
ngAfterViewInit(): void {
this.paginatorList = document.getElementsByClassName('mat-paginator-range-label');
this.onPaginateChange(this.paginator, this.paginatorList);
this.paginator.page.subscribe(() => { // this is page change event
onPaginateChange(this.paginator, this.paginatorList);
});
}
Include this method in your css file(note: do not include in the main styles.css file)
.mat-paginator-range-label {
display: none;
}
You can call onPaginateChange(this.paginator, this.paginatorList) functions wherever you need to change the page number details other than clicking on the navigation buttons on the mat paginator.
Result looks like this
I have a Template in TYPO3 that i want to use to some pages, in here i have a DIV.
Is it possible depending on the page UID, to changes the DIV ID. its the only div thats changes content/image, and im looking to put this DIV inside my main.html template.
so if
UID = 2 <div id="topbanner_about"></div>
UID = 3 <div id="topbanner_drills"></div>
and so on....
Can i do this, and can i do it in TS (Typo Script) or how can i do this, so i dont need to make 5 templates.
You can do this by inserting a marker in your template. It would look somehow like this:
In the template:
[...]
<div id="topbanner_###ID_SUFFIX###"></div>
[...]
In the TypoScript, where the template is inserted:
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/main.html
marks {
ID_SUFFIX = TEXT
ID_SUFFIX {
insertData = 1
# This makes sure that the output is valid and prevents XSS attacks
htmlSpecialChars = 1
value = {page:uid} # Use this to insert the page ID or
value = {page:subtitle} # Use to insert subtitle of page
... # Same works for other fields of the page record.
}
}
}
If the fields provided by default pages are not enough, you could add another field to the page records. The best way to do that would be to build an extension that does it.
I found a better solution, if i use ressource and add an image and on the next page do the same just with another images, then in my main TS i add this code.
lib.imageElement = FILES
lib.imageElement {
references {
data = levelmedia:-1,slide
listNum = 0
}
renderObj = COA
renderObj {
10 = IMAGE
10 {
file.import.data = file:current:originalUid
altText.data = file:current:title
}
}
}
It do the trick, then it shows a diffrent image in the top/header on every page.
But thx...
I have an account with a Note in notesandattachment related list.
I want to display the text of 8 lines, out of 50 lines on a section of visualforce page.
And remaining 42 lines in another section of same visualforce page.
what i know :
I need to split the notes.body into two substrings. One, with 8 lines of text and second one with 42 line.I need to use div tags to get this done on the visualforce page. I might be wrong.
Please suggest me, how do i achieve this.
Appreciate the help.
You can split the text in controller by using split() method like this
String allLines[] = allText.split('\n');
String first8Lines = '';
String restLines ='';
for(Integer i =0; i<8 ; i++){
first8Lines += allLines[i];
}
for(Integer i =7; i<50 ; i++){
restLines += allLines[i];
}
And then put {!first8Lines} in one place and {!restLines} in another
I'd like to integrate a pagination in photo gallery project.
Ex: << previous 1 2 3 next >>
Let's say I have 13 photos and want to display on each page first 6 photos. So in total, I must have 3 pages of 6 photos each and each page number is clickable to display the maximum of 6 photos...
How would I proceed the right method?
Here's what I though:
var totalPhotos:uint;
var maxNumberThumbPerPage:uint = 6;
var totalPage:uint;
totalPhotos = tabPhoto.length;
totalPage = Math.ceil(totalPhotos/maxNumberThumbPerPage);
create a function that goes something like this
var imagesArray:Array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
function createPage($pageNum:int, $perPage:int = 6):Array{ // though vector is preferred
// imagesArray - the array holdig all the images
var iStart:int = $pageNum * $perPage;
var iEnd:int = ($pageNum + 1) * $perPage;
if (iEnd > imagesArray.length) { iEnd = imagesArray.length}
return imagesArray.slice(iStart, iEnd);
}
trace( createPage(0));
trace( createPage(1));
trace( createPage(2));
this will get you the content of each page, this is one of the trickier parts, but as you can see still pretty simple.
other part would be to create the navigation and create the rendering part