Does anyone now how to add an Edge Animate to CS CART? - adobe-edge

I have created an edge animate and now I am trying to add it to CS CART...Has anyone done this before? I need to know where to place each of the files so that it displays.
Thanks

I found out how to do this and here it is below.
1 - Upload all images to the images directory. Just place them in the directory, not a sub folder within
2 - Upload your YOURPROJECT_EDGE.JS file to the root of your store (public_html directory)
3 - Go to ..../design/themes/responsive/templates/index.tpl
4 - Here you need to add the contents between the tags
You will need to place this inbetween an {if}{/if} block so that it only applies to the page you want it to. You will need to wrap the content in literal tags. My example is below
{if $page.page_id == 33}
<!--Adobe Edge Runtime-->
{literal}<script type="text/javascript" charset="utf-8" src="design/themes/responsive/templates/addons/my_changes/hooks/pages/js/edge_includes/edge.6.0.0.min.js"></script>
<style>
.edgeLoad-EDGE { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('XXXXXXX', 'XXXXXXXX', {
scaleToFit: "width",
centerStage: "horizontal",
minW: "0px",
maxW: "1500px",
width: "1000px",
height: "2500px"
}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","1000px","2500px"],"fill":["rgba(255,255,255,1)"]}},"dom":{}}, {"dom":{}});
</script>{/literal}
<!--Adobe Edge Runtime End-->
{/if}
6 - once you have done this go to design/themes/responsive/templates/addons/my_changes/hooks/pages/ and create a page called page_content.override.tpl
7 - create a folder called js and in this upload your edge_includes folder which contains the edge.6.0.0.min.js file.
8 - Go back to your page_content.override.tpl and add in the div that contains your edge project. The page ID will need to reflect the page id of your own cs cart page.
{if $page.page_id == 33}
<style>Any styling here</style>
<div id="Stage" class="EDGE-XXXXXXX"></div>
{hook name="pages:page_content"}{/hook}
{/if}
You can also add any styling here in between style tags.
Make sure you clear your cahce and it should be working.
Hope this helps someone!!!

Related

Make HTML change image name to directory name

I have many different directories which are named SOMECITY-STATE.
Each of these directories has one and the same index.html, with only one difference, the header image is different in every one of them.
Now I have a separate header-image folder in which the images are named all the same like SOMECITY-STATE.JPG
What I want to do is, to put some code in html file to make it automatically read the directory name e.g. NEW-YORK-NY and make the page display the ../banners/new-york-ny.jpg as it's header image.
<div class="header-image"> <img src="banners/new-york-ny.jpg"> </div>
Where mydomain.com/directory1 should display the image ../banners/directory1.jpg and mydomain.com/directory2 should display the image ../banners/directory2.jpg
Is this possible?
It is indeed.
Just before the ending </body> tag inside each index.html file, include this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
$('.header-image img').attr('src', '../banners/' + dir + '.jpg');
</script>
What's happening?
The first line adds the jQuery library to your webpage, which makes what you're trying to do much easier.
Next, I put some code inside <script> tags, so the browser knows it's going to be Javascript.
The first line inside the <script> grabs the folder that your index.html file is in, but it looks like "/new-york-ny/" right now.
The next line takes "/new-york-ny/" and takes off the last slash, so it's just "/new-york-ny".
The last line of code selects the image within the div with the header-image class, and sets its src attribute to "/new-york-ny", but also adds "../banners" and ".jpg" to it at the same time, making it "../banners/new-york-ny.jpg", which is hopefully what you want.
(credit to Ryan Kinal on this question for some of the code)
I hope it helps!

Nav Tag, The best way to redirect to another page

I am a little bit newbie in the web development.
I’m creating a simple web page with a Nav Tag navigation, but I’m not pretty sure which is the best way to redirect to another pages.
For example I have the menu: Home, Services, Contact and when you click in one of them you will go to a page with the properly information.
I have seen this structure:
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
But where do you go ? To another page or a section on the same page?
I would like see the same original page and when you click in one item of the menu only changes the bottom of the web page.
So what way do you recommend to do this ?
I hope you could help me, thank you so much.
Just add
"Any Text you want, in you case: "go to bottom""</l>
After this create class at the botton of the page with same id
<div class="bottom" id="ex1">
If you want to go to bottom by clicking to the link add javascript at the end of the .html file just before "/body" closes
<script type="text/javascript">
$(document).ready(function() {
$("a.go").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
$('html,body').animate( { scrollTop: destination }, 700 );
return false;
});
});
</script>
If you want to redirect and go to another page, create html file in the same directory(same folder). Then add a link
"Any text you want, in your case: go to another page"

HTML split code in different files

I want to remove 2 lines of my HTML code and put them in another html file (ex: index2.html), but those 2 lines must be before </body> ends.
How can I put those 2 lines in another html file and keep it working as they was never removed?
The code that I want to move is a popup window.
The code that I move is the line that connects with another site and gives me the popup.
<script type="text/javascript" src="https://thesite.com/script.php?id=21940"></script>
And the line that I want to remain in original index.html calls that popup from a button:
onclick="call_window();"

How to open pages inside the same DIV

I´ve got a main page with a menu (with links to my sub-sites) and a div (where my sub-sites will appear). This is my home.asp
Then I have a folder 'sub-site1' with 2 pages (A.asp and B.asp) that have links between them.
When I click 'sub-site1' at the menu, the A.asp page appears in my div. But if I click in the B link (inside A.asp) the B.asp will open in a blank page.
link to A.asp (in home.asp):
sub-site1
link to B.asp (in A.asp):
B
also try with
B
Could anyone please help me in this.
It is very normal because your B link is in A.asp and the A.asp doesn't contain a frame whose name is div_id. You can try to put the B link in home.asp or use the jQuery .load function as Pete said.
<a id="clickThis" href="javascript:void(0);" target="div_id">B</a>
use jquery.load now
$(document).ready(function(){
$("#clickThis").click(function(){
$("#div_id").load("B.jsp");//this will load B.jsp inside div_id
//**in case you want to pass parameters to B.jsp**
$("#div_id").load("B.jsp",function(){
param1:value,
param2:value2
});
});
});

How do I set a link that will have the link look and fell but with no file (the content of the link will be in the same file with the link)

I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>