Adobe Edge use javascripts generetad in other projects - javascript

I have made some animations in adobe Edge and it has generated 3 javascripts files : anim_ecran1_edge.js ; anim_ecran1_edgeActions.js ; anim_ecran1_edgePreload.js and my html file.
I want to use this animation in a different project with a specific listener.
Can someone explain me how do that ?
Regards,

So I had a problem similar to this awhile back, I wanted to call Adobe Edge projects to a webpages but did not want to store all the files in one location on my server, I finally found the solution there is not much information on the web how to do this so I will do my best to try to help you. So what I do know if you start moving Edges files around it gets cranky fast. So lets take my situation for an example I have a webpage in my root folder for my website and I have an Edge folder that I store all my Edge files in. In order for me to call on an animation on the web page in the root folder I need to change a few things in the edgePreload.js file, there are four things you need to change, these are what mine look like:
Edge/Icons/edge_includes/jquery-1.7.1.min.js
Edge/Icons/edge_includes/edge.2.0.1.min.js
Edge/Icons/icons_edge.js
Edge/Icons/icons_edgeActions.js
*Note I would use ctrl f to find these files because this .js file is not neatly written.
You see I had to add "Edge/Icons/ so that way the .js file knows where to look. Also if you are going to have images you will need to change the edge.js file, my file looks like this "var im='Edge/Icons/images/';"
(ristenk1 I think this last step maybe what you are lacking, or you just didnt mention it, instead of using an iFrame try just using a div)
Last but not least the web page that you want these animations to show up on you need to add something that looks like this to your < head> tag. This can be in the .html file in your published edge project, every project you publish has a unique id.
!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="Edge/Icons/icons_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-42407812 { visibility:hidden; }
</style>
Then in the body where you would like this to show up use:
<div id="Stage" class="EDGE-42407812">
</div>
Also here are a few resources I have found on this:
http://www.danielhanly.com/blog/tutorial/adobe-edge-embedding-animations-page/
http://www.vbulletin.org/forum/showthread.php?t=277838
I think I have a couple more on my work computer I will try to post them tomorrow while at work. I hope this helps if you have any questions let me know.

Related

Remove specific Javascript code that causes high CPU usage from Tumblr theme

recently I decided to create a Tumblr using this theme
I'm a Firefox user, and I noticed that this theme slows down the browser a lot. After some investingation and asking, the culprit seems to be the possibility to add an animated particle background that, even when disable, causes high cpu usage.
This particle function is inside a script called "s.js", that contains other part of the theme.
Is there any way to clean up the code from everything related to this particle background, and still leave the theme functional?
Thanks
OK
Option 1:
Search for all of the libraries that are being called from the js file you linked to s.js apart from ParticleJS.
Images Loaded: https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js
Isotope: https://unpkg.com/isotope-layout#3.0.4/dist/isotope.pkgd.min.js
Infinite Scroll: https://unpkg.com/infinite-scroll#3.0.2/dist/infinite-scroll.pkgd.min.js
Fitvid: https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js
Photoset grid: https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js
Magnific Popup: https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
Caveat, these are specific versions of each file and you could run into compatibility issues, if you need to link to a specific version.
Combine all the code from these files into a single file, then you could run it through a minifier: https://javascript-minifier.com/
For this solution to work you also need somewhere to host the file somewhere.
Option 2:
Link to all of the above files individually in your template. For example before the closing <body> tag you would need to add
<script type="text/javascript" src="https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js"></script>
... then add each of the other scripts. There may be a dependency order to these also, hopefully they are the same as in the header of the s.js file.
The drawback with this is instead of making a single http request to return a single js file, the template will request 6 separate js files (so this might be slower than the current system you have now).
Option 3:
If you can't host the file somewhere, you would have to actually copy the code from each js file into your template.

Big Cartel - JQuery Upload/Location

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

Adding HTML, JQuery and CSS to drupal7

I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.
You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.
The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it

Using Komodo Editor 8.5, How can I create a project that has a linked page for javascript functions as part of a larger project?

Sorry for the basic question, I'm a beginner with some basic knowledge of html, css and beginning with javascript that I'm learning for developing my own web project. I'm trying to create a project with a separate page for functions to keep the page cleaner and see all the functions in one place. I'm watching videos as part of an online course. However, the lectures use Visual Studio in which you can drag and drop the files so that the source link is already coded. If there's an equivalent feature, let me know please.
I know that you are supposed to link the <script type = "text/javascript" script src = XXXX.js> However, whenever I copy the file path, it still doesn't come up. What am I missing?
This should be the text that links your JS file:
<script type="text/javascript" src="path/to/file.js"></script>
Even though with HTML5 you might not need quotes around your attribute content, it's safe to put them in for older browsers. Don't put a space between the attribute name and the equals sign, or between the attribute content and the equals sign. There shouldn't be a script in the middle of your tag (you put one before src). Make sure the file path is relative to your HTML file as well.

HTML file not working in Browser

I have created a simple - HelloWorld.html Webpage with HTML, JavaScript, CSS.
When I run it from Eclipse IDE, It works perfectly on browser.
What it does is like: the page has 5 buttons,
and hellow World is displayed from 5 different <div>'s
that remains hidden and appears as inline after button click.
When I navigate to the work-space and try to open the HelloWorld.html file in browser manually, nothing comes correctly.
All properties: positions and bgcolors etc declared in external css file has no effect on browser.
I know it sounds stupid, but I'm just hating myself for this.
Does anyone know why is it behaving in this way?
PS:
1. I have no Server-side scripting in the file.
2. HTML, JS, CSS are different file.
My best guess would be that you are trying to use the css file with a realtive path, which changes when you don't host it temporarily as eclipse IDE does.
First, open the developer toolbar (f12) & check the network tab to see if the css file is being loaded at all.
Try using an absolute path instead & see if it changes anything.
In my Exp. i have seen this kind of problems many times, the Inbuilt browser of eclipse some times does not support all features especially when you doing like designing purpose.
you can use MS-IE 6 or Above version for same.
or you can try some other browsers like:- Mozilla,Chrome etc.
because it has features for developers for scripting , div , css and many more . so u can check with them.
Thanks,
Arvind
It's because of file manager from which you have opened.
You just need to see the link in browser.
If it has a "content//:" in start then the css or JavaScript file you have linked in the HTML will not work.
What you need to do is change your file manager or create link manually.
To create a link manually you should use "file///:"in start for example if your file is in download then you should use something like that....
file:///storage/emulated/0/Download/My%20Web/index.html
Or you can use ZArchiver file manager and go to your file and use open with option to open file in browser.

Categories