I followed advice from this site on how to embed
the code that i found on how to recreate the
Animated Sign In Form … shown here:
https://youtu.be/5uANWpkuPww
I was hoping to modify it, so that one face of the
animated circle contained text inviting people to
subscribe to my mailing list … with the clickable
link causing the circle to rotate, allowing people
to then enter their name and email address.
In any case, I got the code from:
https://github.com/DaftCreation/Animated-Sign-In---Sign-Up-Form
and tried it out on w3schools.com
Here is the result:
https://www.w3schools.com/code/tryit.asp?filename=G15FD7XT1JF6
If anybody will be kind enough to get it to work,
please save it on w3schools.com … and post the link / URL
here on stackoverflow.com
I am guessing that the guy that created it, may have left out
a character or two, when he cut and pasted it, which has
resulting in the code not working correctly ... and be sure to
let me know what was wrong with it, so that i can learn from this.
Thanks : )
Your code is fine - the only real problem with is that you didn't wrap your jQuery in between <script></script> tags. Use the link below and you can see it working.
https://www.w3schools.com/code/tryit.asp?filename=G15LTVZCBB4R
Also you need to make sure your jQuery link is valid (just copy and paste the one from my code - it is via Google CDN).
Related
So I am working on an interactive image for a client website and I used this site to make the image interactive: https://imagemarker.com/discover.html
The image looks great, however the code that they give you is an absolute mess, and I'm having some issues embedding it..
I was able to pick out the html code and add it to the page code, and then I put the rest of the script code within the embed element. This works, but the only issue is that the line breaks in my interactive content are not showing up, its all coming it as one line, and I don't understand the problem since I'm very amateur when it comes to coding...
This is the code that I received through the website: https://gist.github.com/timeanator/5ad0f3da36496cbd4fc3dd364ab680e9
Here is what the interaction is supposed to look like: https://imgur.com/a/vMxssAH
This is what it currently looks like on webflow: https://imgur.com/a/KRWf1cV
I feel like it's an easy fix, but I am so dumb when it comes to coding, any help is hugely appreciated!!
Read only webflow link: https://preview.webflow.com/preview/timeas-awesome-project?utm_medium=preview_link&utm_source=designer&utm_content=timeas-awesome-project&preview=4021eaac3f6f76bb92ac1840cbfa741b&mode=preview
The code that you have shared on gist has the same problem as you have described happening on your webflow website. I think the problem is with the text output from imagemarker. Replacing the \n with <br /> in the text section will fix the problem.
Codesandbox link (I have modified line 105 as a sample)
Codesandbox also formatted the code to show exactly where text is.
I'm trying to build my own social sharing links on blogger
but the problem is that data:post.url doesn't retrieve the URL of the current post, it seems like it doesn't work at all.
And here's what I'm trying to do in more details:
1) I'd like to create my own sharing links so that my website runs faster than using third party plugins/websites — which usually inject tracking .JS and are not SEO optimized.
2) I'm totally aware that for data:post.url to work, I should first add the expression expr followed by href... for ex: expr:href
3) So the final code for a facebook sharing button is like this:
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Facebook Share'><i class="fa fa-facebook" aria-hidden="true"></i></a>
When I hover my cursor over Facebook sharing button (or click on it), I get http://www.facebook.com/sharer.php?u= without the current URL which means that data:post.url is not working
Is there a solution or an explanation to this?
Thank you.
Problem solved!
After that I posted this question here, I opened an old blog I made a long time ago for testing purposes and started observing the code until I found a similar one, which means that the above is correct.
I did a test, I pasted this one right before the closing </body> as I used to do and it didn't work. I then tried to paste it in front of the original code and guess what? It worked with no problem!
Well, it's totally normal, thanks to an article I read after that, I found out that there are two types of data: Those that can be accessed anywhere in the theme (Global) and those that can be accessed only under their appropriate widget (Local).
So data:post.url is a local type of data which can be accessed only under Post widget!
If you'd like to see a similar code functioning, search for Blog posts widget and paste it there under it.
To find Blog Posts widget, open the HTML of your theme, then on your keyboard click on CTRL+F and type Blog posts, you will be directed to title='Blog posts', paste your code anywhere between <b:widget title='Blog posts'... and </b:widget>. Save the changes and then visit your website to see how that perfectly works!
For my share buttons, I used another type of data that can be accessed anywhere in the theme: instead of data:post.url, I typed data:blog.url so that I can put the code right before </body>.
If you'd like to see how it works on my blog: Click Here
It should be work. But if not, have you try to remove that double quotes on that facebook link? 'http://www.facebook.com/sharer.php?u=+data:post.url' how it goes?
I'm trying to get Google Analytics Code to work on the thank-you page after customer has filled in the contact form and I've tried putting it in the thank-you page which is in the pages under admin in Wordpress backend using HTML tab but it seems to generate unnecessary p and br tags in between codes especially before closing tag. I'm not sure whether that is causing the issue or not.
Is there a way we can do this for just one page?
I'm not 100 % sure whether it's possible at all to insert javascript with the tinyMCE Editor of Wordpress.
If that's true, then you can try the following:
Get the posts' ID: Look at the linking in your admin menu when you are in the view where you can see all your posts, e.g.
http://www.your-url.com/wp-admin/post.php?post=796&action=edit
796 would be your ID here.
Enter the following in your header.php of your wordpress theme (to find at /wp-content/themes/theme-name):
.
<?php if (is_page(796)) { ?>
//YOUR ANALYTICS CODE IN HERE
<?php } ?>
Replace 796 with your ID here, and put your analytics code in between the PHP code.
It sounds like you're trying to add it using the "Visual" view, which formats whatever you put in into paragraphs, etc.
Try switching to "HTML" view (the tab is at the top right of the input box) and add it there - hopefully that should allow you to add it without converting it!
Edit: As per my comments below, I made a mistake - it seems even the HTML tab adds some degree of formatting.
In this case, you may find some use with this plugin:
http://wordpress.org/extend/plugins/raw-html/
This allows you to displable to auto formatting on a per-post basis. So on that specific page you could turn off the autoformatting simply to allow you to add that Analytics snippet.
The only other way I can think off offhand would be to write a custom page_template just for that thankyou page and add it to there. Instructions are here: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
I'm working on a very simple form filler with Chrome Extension to a spcific site.
I'm getting the name, subject and the message from the user, and just put it in the right places.
I've got a problem with the message part, because it uses an HTML editor. I want to be able to let the user create text message with href links using Microsoft Word or even Front Page and of course a content editor, and just copy the content the user made into the extension, and it will fill it in the right place on the site.
I tried using http://ckeditor.com/ but it can't work without a server. (Use the 1 Visual Studio create to test it).
Is there a content editor like ckeditor, that can work on client side too, and that I can use Javascript to get the info from the user?
I know this is a weird request, and even sound illogical, but is for a friend (and for learning).
(sorry for my english)
Afther some days for serching the web i found this: http://html5demos.com/contenteditable
it work only for html 5, and it amazing feature!
if any 1 have this wierd request too, this simple code with get your start:
<div contenteditable="true">this is a smaple</div>
this attribute is what make the megic happend: contenteditable="true"
in that div, you can throw any thing from out side your work space. meaning, you can do a href with WORD, and just copy it to the div, and it will set it up for you!
1 thing that is still wierd, if you dont have borders to the div, it will not set 1 for you like normal text field or textarea. so if u dont see it, it dosnt mean is not there!
enjoy.
I believe the title already says it all, but here is my question:
what I want to know is how to realize a Office Wordlike "piece of paper" inputscreen.
I want to build a some kind of "newsletter renderer" which I want to show such an screen for the user.
only solution I could think of was an big <textarea> with some CSS styling.
(I already searched on the web but I still found nothing)
Excuse my writing, I'm not so great in English.
I have used the JavaScript-based "WYSIWYG editor" now. It 'works' , but for my own emailing backend (to come) I need to get the value out of there Iframe.
id of iframe is: #content_ifr .
in the iframe (what i've found) there is a < p > element where my/your submitted text is put in.
But if I put the following code in console, I get "an empty string" back:
console.debug($("#content_ifr").contents().find("p").contents().val());
or "undefined" :
console.debug($("#content_ifr").contents().find("p").contents().value);
what to do? :O
I will put latest version online asap: http://dominiquedebrabander.nl/nieuwsbrief
update:
console.debug(tinyMCE.get('content').startContent) is the way to get the content out of the iframe. (is it?) thanks (2 thirtydot ;))
I think i'm helped here, but I have 1 small question left (just because I am curious), how do they get the selected text? (to achieve underlines and bold on selected text).
"window.getSelection()" doesn't seem to work? or am I doing something wrong? :O
what I want to know is how to realize a Office Wordlike "piece of paper" inputscreen
It sounds like you're looking for a JavaScript-based "WYSIWYG editor".
Try TinyMCE, here's a relevant demo.