P5 JavaScript was integrated with HTML and posted on GitHub. Normally, two parameters could be passed into the code by adding them to the HTML URL. This works when the code is tested locally. This fails when attempting to do this with the HTML page on github using syntax designed to preview the HTML page. Note that a straight up URL, by default, will display the source code rather than a working HTML page on a GitHub project. This is by design. The plan was to use this URL as the target of hyperlinks on the readme.md file. This would demonstrate the working code for visitors of the project.
The following things were tried after reviewing this StackOverflow post. These attempts did now work:
https://rawgit.com/ ... (this downloads the file on clicking the link)
Preview Syntax tried w/ parameters on the URL:
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html&runModeToggle=1&runModeToggle2=1
Escape second ? in option 1 as in ...\?runModeToggle=1&run...
Put whole URL after first ? in quotes as in http://htmlpreview.github.com/?"https://github.com/ ... "
My code is presented for learning purposes showing how it evolved. Earlier iterations that did simpler things without the parameters display fine. For example:
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/original/index.html
But for the one flavor of the code that needs parameters to work, this is where the trouble is. This post also suggests other things to try but none of them solves the problem. If this URL worked properly, then both parameters would show up as their corresponding numbers in the second line of text on the page, and they would cause certain behaviors when a user clicks (mousepressed) on the page:
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
Not mentioned in the original write-up, the code being tested outputs the URL parameters at the top of the page for demonstration purposes as well as using them within the code. When testing this URL from the question:
http://htmlpreview.github.io/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
Note how the second line shows that the first argument is "undefined" while the other argument is showing up as a "1". I was able to fix the problem by simply adding a dummy argument ahead of the real one. Why this would be the case is currently unknown, but it seems to solve the problem:
http://htmlpreview.github.io/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?arg1=0&runModeToggle=1&runModeToggle2=1
To see the code working in action with all flavors of the arguments, modified URLs have now been added to the Readme file on the main page of this project:
https://github.com/TheMitchWorksPro/FlatIronLearningCode
Related
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).
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 need to fire this javascript function:
window.icegram.get_message_by_id(2072).show();
From a plain URL (e.g. www.google.com/? etc) as I cannot edit the HTML, as shown in this image:
I have tried to use this code in that URL field:
javascript:window.icegram.get_message_by_id(2072).show();
But when I click on the button, it says "Uncaught TypeError" and that the function is unknown.
For reference purposes, the Icegram documentation says that you can trigger the popup by using either using (both work on a Wordpress post):
Your text
OR
[icegram campaigns="XXXX"]Your Text [/icegram]
Maybe I could call the javascript function by including it in a separate file first? I would appreciate any help, I have tried and researched for a couple hours.
I can confirm that it adds the javascript section in the correct place -
does this mean that there is an issue with my javascript function, perhaps its not working properly? Confusing as it does work on a wordpress post (when using the full "a href=" code) but when I use the function it instantly says -
Alright, it seems that Icegram has a bug, in which the function ID used in the shortcode (e.g. 2072) is different from the function ID needed when calling using javascript (wtf), which in this case was 2073.
So if anyone else needs it, this is the solution for a plain URL field:
javascript:icegram.get_message_by_id(2073).show();
which results in the following output when viewed live on the frontend:
Your Anchor Text
I hope that helps someone. A big thank you to mplungjan and sabithpocker for the guidance and responses.
Im working through Django By Example and in one chapter a Jquery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
Im not an experienced JS or Jquery programmer but I did some JS some years back and can read the code however the tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is what it should look like when clicked on, this is the part where nothing happens for me
these are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
the only thing I can see that is different with these compared to the files that came with the book is the indentation is a bit off but for some reason the indentation does seem to have changed a bit when I uploaded to Git and they dont look like that locally. Is indentation important in JS?
I followed the same book with the same examples but didn't had any trouble. Make sure your dashboard.html file is referring to the correct javascript file. If nothing works try to add the bookmark manually, you can see how that's done over here http://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/ it'll sure to work.
And answer to your last question, Indentation is not as important in JavaScript as it's in Python, as python doesn't use any curly braces "{}" or semi-colons ";". But you can write your entire javascript code in a single line and it'll work because your using curly braces everywhere to tell which line of code ends where.
I agree with all the above. In addition, the following:
Error I noticed in the book:
In bookmarklet-launcher.js the js function being called from bookmarklet.js is called myBookmarklet(), however there is no function called this way in bookmarklet.js. So, you may want to use the same name in both js files.
Practically speaking however, the bookmarklet will always work because, not finding a myBookmarklet function in memory, bookmarklet-launcher.js appends the bookmarklet.js script to the body element and, being bookmarklet.js a self-invoking function, its content executed (without the need it to being called). There are some additional interesting technicalities here (the key function in bookmarklet.js is not self invoking but it will anyway be always called because of the script checking whether jQuery is present...) but ok, this is more relevant for those busy with the mentioned book (Django 2 by example).
Check whether bookmarkled, once you click on it, is added to the
current webpage:
2.1. Open devtools (F12 on Chrome) and check e.g. in the html head element whether you find the newly added link element containing the css attribute and/or in the body element whether you find the script element containing the reference to the bookmarklet.js file.
2.2. Alternative: Add an alert message on top of the bookmarklet.js script so that it will be launched if it is correctly loaded. Example:
(function(){
alert('bookmarkled loaded!');
var jquery_version =...
Make sure you're trying to use it on a HTTP site only. Since you're serving from same protocol. HTTPS site would always tell say: There is a problem loadingbyour jquery. That's how I solved mine.
dude.I have solved the problems I met like you.
The most important thing is that noticing the syntax error(without warnings),mainly caused by ignoring blank.
for example, in the line:
jQuery('#bookmarklet .images').append('<img src="'+image_url+'"/>');
between #bookmarklet and .images should lie a blank space,because of jquery syntax rules(meaning to search tag with id of bookmarklet and search tag with class equaling images within result previously).
Another two places worth notice are codes containing #bookmarklet .images a and #bookmarklet #close,requiring blank spaces between filter condition.
That's where I found I made mistaks mainly after studying syntax of jquery.
You'd better compare your codes with codes already loaded up to github by someone to make sure there are no more little errors(such as spelling).
Why do I get a blank tab content area on Magento's Category edit form?
Background
In Magento, I've added an input_renderer to a custom category attribute that produces a drop-down menu (select). The job of the renderer is to append a bit of JavaScript that listens for change events on a "parent" drop-down, and populate itself with options based on the value of that parent drop-down. Here's what I have:
This works fine in my development environment. But on staging, as soon as the General tab content is fetched (which includes my JS code), the content area collapses and goes blank:
No JS errors thrown in the console
No Warnings/Errors thrown in server logs
This only started happening after adding my JS code
I posted a related question last week because I was frustrated that I couldn't find a problem with my JavaScript code. So now I'm coming at it from a different angle.
Others have reported a "white screen" issue, but no solutions given have worked for me.
Any pointers? If you are curious to see my source code, here's the input renderer:
https://gist.github.com/vbuck/5310724
Looks like you're doing some funky stuff with your ajax url. My suggestion is to debug it before moving on.
Can you see the call in your network tab?
Console.log the final url and try it in a new window.
You are inserting params in the url after it has been generated... Does that really work?
It's an admin module, why aren't you using:
Mage::helper("adminhtml")->getUrl()
On a side note,
<code>
script language="text/javascript"
</code>
is considered bad practice and you should use
<code>
script type="text/javascript"
</code>.
It's probably not the source of your problem though.
Hope you got some good pointers.
Just for the record, it was an issue with a bad variable assignment. I moved the JS into its own file, loaded via a layout update, then initialized it from the block (in getAfterElementHtml). It was here that I discovered one of my variables was not being assigned because of a syntax error in a block method.