I am in the middle of creating an e-commerce store and would love to add a little something special to my check out page.
I was thinking about an explosion of confetti, or glitter or something similar would be nice. However, I would like it to look elegant and tasteful. I dont mind something like this.....
import Confetti from 'react-dom-confetti';
const config = {
angle: 51,
spread: 360,
startVelocity: 68,
elementCount: 200,
decay: 0.87
};
return
I just have no idea how to put it into HTML format for my WIX site.
I found this at https://daniel-lundin.github.io/react-dom-confetti/ -but I know it is missing something major to make it work.... and I dont like that you have to press a button to make it work, I would prefer it to be automatic.
Please help me haha
Kirsten :)
This was an interesting challenge to figure out. So I did!.
What you need to do is embed the javascript that actually performs the confetti effect in an HTMLComponent using Wix Code. It is a little complicated to explain here.
However, I have created an example page that shows the effect working, using Danial Lundin's code, on my examples web site here:
https://stcroppe.wixsite.com/steveonsoftware/example-code/wix-confetti-page
It also shows you the code it uses on the Wix Page to send and receive messages to
the HTML Component that runs the code AND it also shows you the HTML Code I used in the HTML Component to communicate with the Wix page as well as execute the confetti functionality.
Regards
Steve
Related
With this simple anchor link & anchor target - originally defined by Tim Berners-Lee as a HTML Fragment Identifier - is there a way to stop a false JavaScript error from appearing in Aurelia?
HTML:
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
JavaScript Router Error #1 (Not a real error):
Error: Route not found: /in-page-link
That's a false positive error. Of course it's not found! It's an in page link! It isn't a route! That JS "error" isn't a real error.
Is there a way to suppress that error, without having to over-engineer a JavaScript solution - to measure scroll heights & adjust the page offset - simply get around the flawed Node.js design paradigm, where routers break a basic HTML feature to create regex paths AKA: routes? Why do I need to invent a JS fix for something a framework broke? If you break it, you fix it, right?
I've tried using Aurelia's router-ignore idea, but it doesn't work for links which start with hash tags. This similar SO answer doesn't work (& the 2nd line of the OP question was incorrect): How do I keep on the same page by clicking on internal anchor links, using Aurelia?
Is there a router configuration BYPASS feature, which won't try to re-route the URL to another location?
I've tried using nav: false in the router configuration, but it wants a moduleId. There isn't a moduleId for an in page link target.
With a basic router configuration JSON block like this...
{
name: 'no_redirect',
route: ['in-page-link'],
nav: false
}
... how do I stop either the first JavaScript error (up above) or this additional JavaScript error from appearing, considering in page links won't have nor need to use these: moduleId, redirect, navigation nor viewPort? It's just an in page link.
JavaScript Router Error #2:
Uncaught (in promise) Error: Invalid Route Config for "in-page-link": You must specify a "moduleId:", "redirect:", "navigationStrategy:", or "viewPorts:".
I'm trying to make this HTML link work, without having Aurelia throw false JavaScript errors into the console.log. Is there an easy way to do that?
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
I figured out a solution for my problem!
I tried getting it to work with anchor links & router-ignore, but neither of those worked out for the site that I'm building. Perhaps it's using an older version of Aurelia, which doesn't have that router-ignore feature yet? Maybe. I don't know. I didn't check.
There is an open bug for my 1st JavaScript error on GitHub. It also has an interesting router configuration in it, which would address my 2nd JavaScript error.
I've discovered a faster & simpler work-around, which other Aurelia developers might like!
I reached out to Rob Eisenberg, who was kind enough to point me to his discord.aurelia.io site. While searching it, I found an interesting work-around idea! After exploring it & the related code examples, I was able to get the 1st false JavaScript error to disappear... without having to over-engineer any browser pixel measuring logic! I really didn't want to have to write any JS scrollbar math again, using clientOffset values. Here is a good example of measuring the scrollbar height.
I have repeatedly written code like that in the past, but I wanted to avoid having to reinvent that wheel... yet again! I really wanted to figure out another way to fix this basic snag, without having to write any custom scrollbar math logic because it felt like I was writing too much code to fix a bug in the underlying framework. Other frameworks, besides Aurelia also suffer from hijacking the '#' in the URL to create routes. It appears to be a recurring issue in the Node.js community.
This fast work-around for Aurelia is super small, fast & easy to implement. Perhaps someone will enjoy this!
Change <a href="#in-page-link"> to <div class="link" click.trigger="jumpDown()">.
Add a method into the behind-the-scenes matching JavaScript file, which sets a boolean:
jumpDown () {
this.linkClicked = true;
}
Change <a name="in-page-link"> to <button class="btn" focus.bind="linkClicked">.
Use CSS to style the link, plus add a cursor: pointer; property & hide any button styles, as desired.
So the final code would look like this:
HTML:
<div class="link" click.trigger="jumpDown()">In Page Link</div>
...
<button class="btn" focus.bind="linkClicked">The link scrolls/jumps here</button>
JavaScript:
jumpDown () {
this.linkClicked = true;
}
CSS:
.btn {
/* Style as desired. */
}
.link {
color: #0000FF;
cursor: pointer;
text-decoration: underline;
}
Then the original JavaScript error #1 vanishes! The link click still works! No additional router configuration is needed! Web developers look like web rockstars! The quality assurance team is happy! Problem solved!
I've got a product that embeds into websites similarly to Paypal (customers add my button to their website, users click on this button and once the service is complete I redirect them back to the original website).
I'd like to demo my technology to customers without actually modifying their live website. To that end, is it possible to configure http://stackoverflow.myserver.com/ so it mirrors http://www.stackoverflow.com/ while seamlessly injecting my button?
Meaning, I want to demo the experience of using my button on the live website without actually re-hosting the customer's database on my server.
I know there are security concerns here, so feel free to mention them so long as we meet the requirements. I do not need to demo this for website that uses HTTPS.
More specifically, I would like to demonstrate the idea of financial bounties on Stackoverflow questions by injecting a Paypal button into the page. How would I demo this off http://stackoverflow.myserver.com/ without modifying https://stackoverflow.com/?
REQUEST TO REOPEN: I have reworded the question to be more specific per your request. If you still believe it is too broad, please help me understand your reasoning by posting a comment below.
UPDATE: I posted a follow-up challenge at How to rewrite URLs referenced by Javascript code?
UPDATE2: I discarded the idea of bookmarklets and Greasemonkey because they require customer-side installation/modification. We need to make the process as seamless as possible, otherwise many of get turned off by the process and won't let us pitch.
I would suggest to create a proxy using a HTTP handler.
In the ProcessRequest you can do a HttpWebRequest to get the content on the other side, alter it and return the adjusted html to the browser. You can rewrite the urls inside to allow the loading of images, etc from the original source.
public void ProcessRequest(HttpContext context)
{
// get the content using HttpWebRequest
string html = ...
// alter it
// write back the adjusted html
context.Response.Write(html);
}
If you're demoing on the client-side and looking to just hack it in quickly, you could pull it off with some jQuery. I slapped the button after the SO logo just for a demo. You could type this into your console:
$('head').append('<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>')
$('#hlogo').append('<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame" class="standard"><label for="buy">Buy Now:</label><input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif"><input id="type" type="hidden" name="expType" value="light"><input id="paykey" type="hidden" name="paykey" value="insert_pay_key">')
var embeddedPPFlow = new PAYPAL.apps.DGFlow({trigger: 'submitBtn'});
Now, I'm not sure if I did something wrong or not because I got this error on the last part:
Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped.
But at any rate if you are demoing you could just do this, maybe as a plan B. (You could also write a userscript for this so you don't have to open the console, I guess?)
After playing with this for a very long time I ended up doing the following:
Rewrite the HTML and JS files on the fly. All other resources are hosted by the original website.
For HTML files, inject a <base> tag, pointing to the website being redirected. This will cause the browser to automatically redirect relative links (in the HTML file, CSS files, and even Flash!) to the original website.
For the JS files, apply a regular expression to patch specific sections of code that point to the wrote URL. I load up the redirected page in a browser, look for broken links, and figure out which section of JS needs to be patched to correct the problem.
This sounds a lot harder than it actually is. On average, patching each page takes less than 5 minutes of work.
The big discovery was the <base> tag! It corrected the vast majority of links on my behalf.
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');
I have a page where we're positioning a bunch of elements using CSS, and changing their "top and left" positions using JS.
I've had reports that these things have been misaligned, but a user has the motive to lie about this to "cheat", so I'm not exactly sure whether they're telling the truth. I'm trying to find a way to figure out whether they're lying or not, and to have some "proof".
I know that Canvas has a method to copy image information from an image element, or another canvas element (kind of a BitBlt operation).
Would it be possible to somehow, with Canvas (or with something else, Flash, whatever), take a "picture" of a piece of the page?
Again, I'm not trying to take information from an <image>. I'm trying to copy what the user sees, which is comprised of several HTML elements positioned absolutely (and I care most about those positions) and somehow upload that to the server.
I understand this can't be done, but maybe I'm missing something.
Any ideas?
Somebody asked a question earlier that's somewhat similar to this. Scroll to the bottom of Youtube and click the "Report a Bug" link. Google's Feedback Tool (Javascript driven), essentially does what you described. Judging by what I looked at of its code, it uses canvas and has a JavaScript-based JPEG encoder which builds a JPG image to send off to Google.
It would definitely be a lot of work, but I'm sure you could accomplish something similar.
If a commercial solution is an option, Check out SnapEngage.
Click on the "help" button in top-right to see it in action. Here is a screenshot:-
Setup is pretty straight-forward you just have to copy and paste a few lines of javascript code.
SnapEngage uses a Java Applet to take screenshots, Here is a blog post about how it works.
Yes you can See following demo
In below code I have define table inside body tag but when you run this code then it will display image snapshot.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js?rev032"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $('body');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
}
});
});
</script>
</head>
<body>
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
html2canvas official Documentation:- http://html2canvas.hertzen.com/
To download html2canvas.js library you can use also if you unable to find from official link :-
https://github.com/niklasvh/html2canvas/downloads
[I am not responsible for this link :P :P :P]
You can use the element, that currently is only supported by Firefox.
background: -moz-element(#mysite);
Here #mysite is the element whose content is used as background
Open in Firefox: http://jsfiddle.net/qu2kz/3/
(tested on FF 27)
I don't think that you can do that. However, you could recursively fetch clientHeight, clientWidth, offsetTop and offsetLeft to determine the positions of all elements on the page and send it back to the server.
On Firefox, you can create an AddOn that uses canvas.drawWindow to draw web content to a canvas. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
I don't think there's a way to do that on WebKit at the moment.
It can be done, with some limitations. There are some techniques, and these are exactly how many extensions do screenshots. From your description it seems that you aren't looking for a generic, client side solution to be deployed, but just something that a user or some users could use and submit, so I guess using an extension would be fine.
Chrome:
I can point you to my opensource Chrome extension, Blipshot, that does exactly that:
https://github.com/folletto/Blipshot
Just to give some background:
You can do that, as far as I know, only from inside an extension, since it uses an internal function.
The function is chrome.tabs.captureVisibleTab and require access to the tabs from the manifest.
The function grabs only the visible part of the active tab, so if you need just that it's fine. If you need something more, than, you should have a look at the whole script, since it's quite tricky to get the full page screenshot until Google fixes Bug #45209.
Firefox:
In Firefox since 1.5 you can build extensions that use a custom extension of canvas, drawWindow, that is more powerful than the chrome.tabs.captureVisibleTab equivalent of Chrome. Some informations are here:
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
The code below continues many lines until it ends with a expected /veotherwise /vechoose. I started working on a development firm a little ago where they use this html version called vhtml. I have search the web but it brings different definitions for vhtml. I have seen some posts in Joomla about vhtml but they don't look like the code below. I was expecting to get a pointer on how to understand the language.
It looks very similar to normal html with even very similar commands, or maybe smalltalk. But I just can decipher it. Any help will be appreciated. Please post comments if you want more information.
<vechoose>
<vewhen criteria='isPortalEdit'>
widget: practices-landing-page
</vewhen>
<veotherwise>
<veinclude src='private/webportal/webtemplate-content.vhtml'>
<vesection name='content-body'>
<% // Determine portlet visibility %>
<vecalc expression='isEmpty = false' output='none' />
<vechoose>
<vewhen criteria='isEmpty'>
<veif criteria='portlet.ifEmptyDo == "Hide"'>
<script>getTag( 'portlet_<%=portlet.order%>' ).style.display = "none";</script>
</veif>
<veif criteria='portlet.ifEmptyDo == "Show Message"'>
<%#portlet.ifEmptyMessage%>
</veif>
</vewhen>
...
Managed to find this: http://vitrage.sibweb.ru/english/ Looks like it could be an Apache Module called VITRAGE. Not much available in English however so am really unsure if it's a match.
On reading the code sample you posted, it looks like a XML styled procedural language. Are you sure it's available elsewhere or perhaps something that was developed internally?
I think this is an internal language between to bring server side aspect to a display on the browser. I have been unable to find documentation on this language, and I don't think Vitrage explains it. The server uses coyote as web browser, tomcat as a servlet handler and java as the backend.
Any new information please post.