I have used PDFKit to generate pdf from html. But is there a way to navigate to nth page on click of an section(box element) on the page ?
Generate PDF:
content = PDFKit.new("#{header_html}<div class='pdf_image'><img src='data:image/svg+xml;base64,#{ Base64.encode64(chart1.read).gsub("\n", '')}'></img></div>
<div class='pd_image' style='margin-top: 10%; page-break-after: always;'><img src='data:image/svg+xml;base64,#{ Base64.encode64(chart2.read).gsub("\n", '')}'></img></div>
<div class='pdf_image' style='margin-top: 10%;'><img src='data:image/svg+xml;base64,#{ Base64.encode64(chart3.read).gsub("\n", '')}'></img></div>",
orientation: 'landscape', margin_top: '0.2in', page_size: 'Letter')
send_data(content.to_pdf, filename: "all_charts.pdf", type: 'application/octetstream', disposition: 'inline')
Clicking on Box1 would do navigate to Page1 (current page).
Box 2 --> Page2
Box 3 --> Page3
Attached image explains what needs to happen.
Those are called as internal links.
Achieved with:
<a href='#box_1'></a>
<div name='box_1'></div>
Respectively for all boxes.
The only hurdle was with wkhtmltopdf enable internal links.
Related
original title: VueJS with Bootstrap, stretched link with hidden button
I am trying to make clickable bootstrap cards in a VueJS project, I want clicking the card to open a collapsible element within the card, right now I have something that works using a button with the "stretched-link" class
<b-card
v-bind:img-src="`https://via.placeholder.com/200`"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<b-button v-b-toggle="'collapse-' + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
<b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
<b-card>This is the collapsed content</b-card>
</b-collapse>
</b-card>
I'm trying to make this work without having a visible button in the card, I've tried using the invisibile class and the d-none class (class="stretched-link d-none" and class="stretched-link invisible")
In both cases, the button is made invisible but so is the stretched link. Is there any way to maintain the active stretched link area while hiding the button icon?
ok I figured out a solution for my particular use case with JQuery,
What I was really after was a clickable image with the functionality of a bootstrap button. So this is a solution for that problem, not exactly hidden stretched links.
In my Vue component I define the triggerButton method, which finds a button by its id and clicks it.
<script>
import $ from 'jquery'
export default {
props: //just filling this for structure,
data() {
return {
//stuff
}
},
async mounted() {
//more placeholder structure
},
methods: {
//here is the sauce
triggerButton(id) {
$("#"+id).click();
},
}
}
</script>
Then in the <template> body I have a hidden button. "unique-identifier" is just a unique number that is put in, it's needed in my case because im generating many of these elements in a for loop and they need to have distinct ids.
In this case I'm using the bootstrap button to trigger a unique modal.
<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>
Then finally I have an image displayed in the bootstrap card, and on click i call the triggerButton method that will now display my modal.
<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>
So, I'm developing my website and I created 2 html files to have a bilingual website. I created a modal to appear on page load and I'm using cookies to save the user click event on the button inside the modal.
The thing is, when I'm on the first language page and the modal opens up, I click the button and the cookie is saved. But when I switch to the second language page, the modal doesn't appear. When I try the opposite, the modal appears and the cookie is saved on both pages.
Not sure what I'm doing wrong or if this is how it works, first time using cookies. The code:
<div class="warning_modal">
<div id="warning_modal" class="modal">
<div class="modal_content">
<div class="warning_text">
<span>text goes here</span>
<p>
text goes here
</p>
Ok
</div>
</div>
</div>
</div>
$('.close').on(click, function(){
$(".warning_modal").css("display", "none");
Cookies.set('hide-modal', true, { expires: 7 , path: '', sameSite: 'none', secure: true});
});
$(function(){
if(Cookies.get('hide-modal'))
$(".warning_modal").css("display","none");
});
If you don't specify a path for your cookie, it'll only work on that same page.
If you set it equal to '/', then it will be available on every page of your domain.
So in your case:
Cookies.set('hide-modal', true, { expires: 7 , path: '/', sameSite: 'none', secure: true});
I'm trying to add a text hyperlink button that leads to different pages on different conditions..and I need help for the HTML code.
My website screenshot:
sorry the website is not in english, so I will be as specific as possible so anyone can understand what I'm saying.
The screenshot show a page from my website, and it contains tab filters on the products.
The highlighted element is the 'All' category tab, and next to it is the 'Audio' tab and 'Mic' tab and so on.
So right below the product catalog, which is beneath the category , I want to add a text hyperlink "See more" button, which will recognize which tab I am looking into at the moment, and take me to the full catalog page of the category.
All I know of HTML code for conditional html statement is like:
See More
With JS:
function doClick() {
if (clicked on "Audio" tab)
window.hlocation.href = "Audio Page URL.com"
else if (clickd on "Mic" tab)
window.location.href = "Mic Page URL.com"
....
else
window.location.href = "Last Page URL.com"
I know how to locate HTML codes to locate the division...but I'm not sure how to actually put them into codes as conditional statement.
I'm sharing the URL of my page : http://tantara.shop/main-shop/
please help.
You could decide to use this approach:
Record when the user selects a tab
Add a specific class when a tab is clicked. Make sure to remove all other tabs of this
specific class.
When the user clicks on "See more", we simply fetch the tab that has the specific class
It is demonstrated below:
$(document).ready(function() {
$("a").on('click', function() {
var selected = $("div .selected");
console.log("someurl.com/category/all/" + selected.text());
});
});
function update(element) {
ridOfOtherClass();
$(element).addClass("selected");
}
var buttons = $("div");
function ridOfOtherClass() {
for (var i = 0; i < buttons.length; i++) {
$(buttons[i]).removeClass("selected");
}
}
.as-console-wrapper{
max-height:50px !important;
/*Overrides so user is guaranteed space to click the "See more" button. DO NOT USE THIS CSS ON YOUR WEBSITE - IT IS STACK SNIPPET ONLY*/
}
div{
cursor:pointer;
}
a{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" id="wp-block-library-css" href="http://tantara.shop/wp-includes/css/dist/block-library/style.min.css?ver=5.6" type="text/css" media="all">
<div class="elementor-tabs-wrapper">
<div id="elementor-tab-title-1001" class="elementor-tab-title elementor-tab-desktop-title elementor-active elementor-repeater-item-c510f25 selected" data-tab="1" tabindex="1001" role="tab" aria-controls="elementor-tab-content-1001" onclick="update(this)">All</div>
<div id="elementor-tab-title-1002" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-97b56a1" data-tab="2" tabindex="1002" role="tab" aria-controls="elementor-tab-content-1002" onclick="update(this)">Audio Interface</div>
<div id="elementor-tab-title-1003" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-2658a88" data-tab="3" tabindex="1003" role="tab" aria-controls="elementor-tab-content-1003" onclick="update(this)">Monitor Speaker</div>
<div id="elementor-tab-title-1004" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-91a22ba" data-tab="4" tabindex="1004" role="tab" aria-controls="elementor-tab-content-1004" onclick="update(this)">MIC</div>
<div id="elementor-tab-title-1005" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-81bf58f" data-tab="5" tabindex="1005" role="tab" aria-controls="elementor-tab-content-1005" onclick="update(this)">Keyboard</div>
<div id="elementor-tab-title-1006" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-eb73db8" data-tab="6" tabindex="1006" role="tab" aria-controls="elementor-tab-content-1006" onclick="update(this)">Midi controller</div>
<div id="elementor-tab-title-1007" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-1a3ff00" data-tab="7" tabindex="1007" role="tab" aria-controls="elementor-tab-content-1007" onclick="update(this)">Accessory</div>
</div>
<a>See more</a>
<!-- Please understand that I did not understand any of the words in the untranslated version. As Google Translation has demonstrated considerable capabilities in translating properly, I chose to translate with that.-->
If you're not sure what's supposed to be happening, click on a tab and click "See more." An example URL will be shown, which can be customized into a GET request etc,.
When we use LoadingController in Ionic 3, it takes the fullscreen control.
Is it possible to create loading screen just for an HTML element?
For Example I have 4 cards displayed in a page and each of them will show the loading until the data is loaded. In the mean time, rest of the elements should be available to the user.
I have tried to implement it but can not find help from Ionic 3 Doc
I have tried custom loading with the following code but it did not work. It still takes the full screen.
TS page:
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
duration: 5000
});
loading.onDidDismiss(() => {
console.log('Dismissed loading');
});
loading.present();
}
HTML page:
<div class="custom-spinner-container">
<div class="custom-spinner-box"> My content here...</div>
</div>
In TYPO3 CMS you could build a menu with defined pages very easy. How does this work in Neos and Typoscript2?
Typoscript1 Code was:
Menu1 = HMENU
Menu1 {
special = directory
special.value = 1,6,7
wrap = <div class="somemenu">|</div>
}
For example i have this page structure:
Site1
Site2
Site3
Site4
Site5
Site6
Site7
And i want a menu which only contains Site1, Site6, Site7.
I need that menu in the footer.
I have found a way to create a menu with defined pages, by adding a checkbox in every page so I can select which pages I want to show in the menu.
Start by editing NodeTypes.yaml and extend the Page nodetype to have this extra property
ui:
inspector:
groups:
'footernav':
label: 'Footer Menu'
properties:
'footermenu':
type: boolean
defaultValue: FALSE
ui:
label: 'Show in footer?'
inspector:
group: 'footernav'
After that create a FooterMenu nodetype in the same file.
'Vendor.Site:FooterMenu':
superTypes: ['TYPO3.Neos.NodeTypes:Menu']
ui:
label: 'Footer Menu'
group: 'structure'
Create it's typoscript file.
prototype(Vendor.Site:FooterMenu) < prototype(TYPO3.Neos.NodeTypes:Menu) {
entryLevel = 1
templatePath = 'resource://Neos.Bootsite/Private/Templates/TypoScriptObjects/FooterMenu.html'
}
Edit Root.ts2 file and add in the Page object
footermenu = ${q(node).property('footermenu')}
Last but not least, create FooterMenu.html
{namespace neos=TYPO3\Neos\ViewHelpers}
<ul>
<f:render section="itemsList" arguments="{items: items}" />
</ul>
<f:section name="itemsList">
<f:for each="{items}" as="item">
<f:if condition="{item.node.properties.footermenu}">
<neos:link.node node="{item.node}">{item.label}</neos:link.node>
</f:if>
<f:if condition="{item.subItems}">
<f:render section="itemsList" arguments="{items: item.subItems}" />
</f:if>
</f:for>
</f:section>
thank you for this nice Idea. I wouldn't even call it a workaround. With neos we have to think in different ways... and this solution is really great and intuitive!
I had some headbanging moments cuz I didn't understand the way neos works...
I'm usually want to add elementary elements like navigation fix to the layout/template.
I didn't understood that this footermenu will appear as an element which you can add dynamically when you are logged in.
If somebody want's to know how he can add this fix to the template, so users can't remove it:
Add in your Route.ts2
page = Page {
head{ ... }
body{
//...
parts.footermenu = Vendorname.Sitename:FooterMenu
//...
}
}
In your template file e.g. (Vendorname.Sitename/Private/Templates/Page/Default.html):
{parts.footermenu -> f:format.raw()}
at the position where the menu should appear
Side note: in this example it has to be within the in order to work
I think best solution is already in the Demo Package. You can create a page FooterMenu which you don't want so show as a normal page on the page menu. Add your menu pages as child shortcut nodes to the page/node tree.
Then add this typoscript in your root.ts2
metaMenu = Menu {
entryLevel = 2
templatePath = 'resource://Vendor.PackageName/Private/Templates/TypoScriptObjects/FooterMenu.html'
maximumLevels = 1
startingPoint = ${q(site).children('footermenu').get(0)}
}
Create the template for the menu:
{namespace neos=TYPO3\Neos\ViewHelpers}
<f:render section="itemList" arguments="{items: items}" />
<f:section name="itemList">
<nav class="nav" role="navigation">
<ul class="nav nav-pills">
<f:for each="{items}" as="item" iteration="menuItemIterator">
<li class="{item.state}">
<neos:link.node node="{item.node}">{item.label}</neos:link.node>
</li>
</f:for>
</ul>
</nav>
</f:section>
The last think you have to do ist to place the footerMenu in your page template:
<div class="footer">
{parts.footerMenu -> f:format.raw()}
</div>
The only drawback of this solution is you have to use shortcuts and that is not the best solution for SEO i think. And the page loading time will be increased because of the redirect. But you don't have to extend some code and can use another solution when it is ready.