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});
Related
I am using Angular slickgrid to display my data, issue is when we click on any cell, row or checkbox, page moves up to starting element. Instead of moveing up page should stay as it is.
From DOM I found active element is '<div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div>'
When I delete above line, then it stop moving page up on click on any cell and working properly as per proper behaviour.
Here is my code:
<section id="order-grid">
<div class="row">
<div class="col-12" id="demo-container">
<angular-slickgrid #slickGrid [gridId]="orderGrid" (onAngularGridCreated)="angularGridReady($event)"
[columnDefinitions]="orderTableColumns" [gridOptions]="orderGridOptions" [dataset]="orderItems"
(sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
(sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>
</div>
</div>
</section>
Grid options are:
this.orderGridOptions = {
asyncEditorLoading: true,
autoCommitEdit: true,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
enableAutoResize: true,
editable: true,
enableCellNavigation: true,
enableFiltering: true,
enableRowSelection: true,
rowSelectionOptions: {
selectActiveRow: true
},
};
here is link for behaviour: https://app.box.com/s/gwoks1buvncz8q6bebd2t0bym4tf1tw7
I would appreciated when you give me some solution why this is happens
I would like to know how to implement a simple LinkedIn HopScotch.
I tried to implement, but was unsuccessful in getting it done.
Below is my attempted implementation;
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
]
};
$("#myBtn").click(function() {
hopscotch.startTour(tour);
});
</script>
Should I add a <div> with an id as hello-hopscotch as per tour object?
http://cdnjs.com/libraries/hopscotch is the source of my libraries; I've implemented hopscotch.min.css and hopscotch.min.js.
What am I doing wrong and how can I fix it?
Actually, you have set the placement to the "right" which is fine, but it is displaying the step off the screen. Because the step is displayed to the right of the element, which happens to be a block element. Switch it to bottom and you will see the item.
You can configure the placement per the documentation.
As I know from last day I've started with this plugin, hopscotch will not render if element that you targeted not found. If your target is an element with Id, you just need to set target with "#".
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.
There's a greeting loader that appears for some seconds on the homepage of my site. but i don't want it repeating it everytime the user comes to the home.
<div id='sliderloader'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<img src='Rf8YpZW.jpg' style='z-index:-1;position:absolute;margin-top:-300px;'/>
<img src='/assets/manivel60.gif' style='position:relative;margin-top:-121px;margin-left:512px;'/>
</b:if>
<div id='progressbg'>
<div id='loader'></div>
</div>
</div>
It's already set to not repeat in subsequent pages, but every time I go to home the loader comes again.
Any idea of how to make this whole code happen just once? (When the home is accessed from inside the page, and appear when accessed from outside.)
If you only want the greeting loader to appear when a user navigates to your home page from a page outside your website, write some JavaScript that checks the referrer and compares it to your URL, displaying the loader only for new users:
if (document.referrer.indexOf(location.protocol + "//" + location.host) === 0) {
document.getElementById('loader').style.display = 'none';
} else {
document.getElementById('loader').style.display = 'block';
}
I have been working on an application using sencha touch 2 .
I have a toolbar on top which contains a button .
When i click this button i will have a panel overlay .
In this panel,i want to have two items :
var shareButton = {
xtype : 'button',
ui: 'action',
width:'36px',
height:'36px',
handler : function(){
var panel=Ext.create('Ext.Panel',{
right: 0,
top: 20,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%' ,
styleHtmlContent: true,
scrollable: true,
items: [
{html:'Tweet</body>',},
{html:'<div ><class="fb-like" data-href="http://test.com" data-send="false" data-layout="button_count" data-width="4" data-show-faces="false"></div>'}]});
Ext.Viewport.add(panel);
panel.show();}};
But this is not working.
In fact,i want the first one to direct me to twitter to share the URL (www.google.com).
And the second one to facebook to share "test.com".
Unfortunately ,nothing is displayed in the panel .
Thank you.
Since the overlay is called after the page is loaded, the facebook and twitter buttons should rendered again
This is the code that should be added after the overlay is shown
FB.XFBML.parse();//facebook
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //twitter
This works for me. THe only problem is that the Facebook like button has not got a size, so you cannot see it.
Ensure your floating panel is not scrollable. If it is scrollable, give it a fixed width and height.
Update
Here is an example on Sencha Fiddle: http://www.senchafiddle.com/#jgXtj
Ensure you are adding the panel into Ext.Viewport.