Im looking to add smooth scrolling similar to this video http://support.unbounce.com/entries/217 ... nks-VIDEO-
That being said i want it linked to the navi bar so once i click "footstretcher" on my navibar it smoothing scrolls down to that part of my page. I am using the welcome module to ave all the information on my first page.
Would it be as simple as editing the navi bar links to internal links of anchors placed in the welcome module? then just link each corresponding anchor with its name in the navi bar?
i understand i have to add a scrolling script like the one used in the video above, but i am unsure of where i add it.
(A) Good on using Welcome. Yes, the links can be simplified.
(B) I do not see need for using such a script, as hitting links within the same page simply zip to "there" as a matter of course. There should normally not be anything to "smooth" about it.
(i) You have a spot inserted in the Welcome to stop along the lines of <A name="howdy01">, and elsewhere in the Welcome you have a link along the lines of <A HREF="#howdy01">howdy01</a>. When you have seen "Top" or "Back to Top" in webpages, essentially only those internal anchors have driven them.
(ii) The hoverable/clickable links can be styled via .css for Welcome's "a" or in-line either inside <div or inside <A (after the full HREF).
(iii) Cookie-cutter pasting can put the several of those links and styles into place in short order, for specific individual editing of the links in short order. But do (i), (ii), (iii) toggled into Source mode to edit and Save.
(C) In his upper part . . .
As for scrolling, the script in his (1) is supposed to go inside your head tag, and should go just before the closing </head>. That would normally be in your common/header.tpl file.
His step (2) is for styling each place where the scroller will stop. Put those in the Welcome. Result is counterpart to (B)(ii) above.
His step (3) is for cuing the scroller where to stop. In his example the /#pricing goes to anchors of similar form (with #) that you will put in the Welcome. It's using anchors having only their own names, down a page at selected points, so that you can send a page to any specific # stop by name. Result is counterpart to (B)(i) above.
(B) I do not see need for using such a script, as hitting links within the same page simply zip to "there" as a matter of course. There should normally not be anything to "smooth" about it.
(i) You have a spot inserted in the Welcome to stop along the lines of <A name="howdy01">, and elsewhere in the Welcome you have a link along the lines of <A HREF="#howdy01">howdy01</a>. When you have seen "Top" or "Back to Top" in webpages, essentially only those internal anchors have driven them.
(ii) The hoverable/clickable links can be styled via .css for Welcome's "a" or in-line either inside <div or inside <A (after the full HREF).
(iii) Cookie-cutter pasting can put the several of those links and styles into place in short order, for specific individual editing of the links in short order. But do (i), (ii), (iii) toggled into Source mode to edit and Save.
(C) In his upper part . . .
As for scrolling, the script in his (1) is supposed to go inside your head tag, and should go just before the closing </head>. That would normally be in your common/header.tpl file.
His step (2) is for styling each place where the scroller will stop. Put those in the Welcome. Result is counterpart to (B)(ii) above.
His step (3) is for cuing the scroller where to stop. In his example the /#pricing goes to anchors of similar form (with #) that you will put in the Welcome. It's using anchors having only their own names, down a page at selected points, so that you can send a page to any specific # stop by name. Result is counterpart to (B)(i) above.
sounds simple, but im still unsure of exactly what to do. im gonna give it a go (being new to code) and will most likely come back with questions. You have helped me on numerous other topic, and i thank you for that. I am trying to learn as i go and i feel i have learned a lot, but some of this stuff is just confusing having no background in code or really computers at all. Thanks!
Novice Web"master" though i wouldn't say master at all.
It'll make sense as you work with it. You have the Welcome positions' titles. You can fashion short names for those that make sense to you and use those for the <A name="_____"> for each, positioned just above those titles. You then use those in the corresponding <A href="[page]#_____">_____</A> format of the links, one by one. If you put in each landing place a <A name="_____"> to edit, and in each launching place a <A href="[page]#_____">_____</A>, THEN you can go down the page peaceably while you edit.
could you direct me to the correct files to modify?
EDIT: catalog/view/theme/dark(mytheme)/common/header.tpl for the script right?
and just place it directly above the </head> right?
and where do i place the div <div id="CUSTOMIZE_ID" style="width:20px;height:20px;"> </div>? is that in my welcome page code?
Thanks
EDIT: catalog/view/theme/dark(mytheme)/common/header.tpl for the script right?
and just place it directly above the </head> right?
and where do i place the div <div id="CUSTOMIZE_ID" style="width:20px;height:20px;"> </div>? is that in my welcome page code?
Thanks
Last edited by improvedance on Tue Jan 14, 2014 7:20 am, edited 1 time in total.
Novice Web"master" though i wouldn't say master at all.
If you are calling specific "external" real files into place from within the Welcome module 1, then you can modify those. If everything is now already inside a Welcome module, then you need to go into the Welcome module itself. In admin Extensions / Modules / Welcome / Edit treat that as a page, start by trying index.php#_______ where each name is a ______. Either way, follow the pattern. With a Welcome module just be certain to be toggled into Source mode all the way through edit and Save. Which way are they set up at the moment?
(Each welcome module lives and sleeps inside one cell, a field/record = column/row intersect, in the database.)
(Each welcome module lives and sleeps inside one cell, a field/record = column/row intersect, in the database.)
Last edited by butte on Tue Jan 14, 2014 7:23 am, edited 1 time in total.
everything is inside the welcome module currently. So i go into source mode and add the anchors.
Once i do that, I have to edit the menu bar link to each anchor. where do i edit those?
Once i do that, I have to edit the menu bar link to each anchor. where do i edit those?
Novice Web"master" though i wouldn't say master at all.
Yes. Any links inside the Welcome module are edited there (index.php#_____). Any links in the menu crossbar (where they were beforehand) are edited there, in the menu section of the catalog/view/theme/[default, etc.]/template/common/header.tpl file (index.php?route=[...]#_____). If you look at your Welcome as-is, you'll see in the status bar at the bottom its route= and the [...] part, then add to that your #_____. In a bit I'll be away for a while, then back, so if need be I can provide an example snippet then. Meanwhile, give it a go, you'll probably reach it okay. So far, so good.
I have the anchors set correctly in the welcome module.... i think?
Code: Select all
<p><a id="fs" name="fs"></a></p>
<p><img alt="" src="http://improvedance.com/image/data/page images/tfs_final.jpg" style="width: 980px; height: 662px;" /></p>
<hr color="393939" />
<p><a id="sf" name="sf"></a></p>
<p><img alt="" src="http://improvedance.com/image/data/page images/FINAL_safetyfirstl.jpg" style="line-height: 1.6em; width: 979px; height: 674px;" /></p>
<hr color="393939" />
<p><a id="fsdoneright" name="fsdoneright"></a></p>
<p> </p>
<p><img alt="" src="http://improvedance.com/image/data/page images/FINAL_stretchingdoneright.jpg" style="width: 980px; height: 691px;" /></p>
<hr color="393939" />
<p><a id="4in1" name="4in1"></a></p>
<p><img alt="" src="http://improvedance.com/image/data/page images/FINAL_massageandroll.jpg" style="width: 980px; height: 654px;" /></p>
<hr color="393939" />
<p><a id="bringeverywhere" name="bringeverywhere"></a></p>
<p><img alt="" src="http://improvedance.com/image/data/page images/FINAL_portable.jpg" style="width: 980px; height: 691px;" /></p>
<hr color="393939" />
<p><a id="madeincolor" name="madeincolor"></a></p>
<p><img alt="" src="http://improvedance.com/image/data/page images/FINAL_colorful_final_4.jpg" style="width: 980px; height: 662px;" /></p>
<hr color="393939" />
<p><a id="wholepack" name="wholepack"></a></p>
<p><img alt="" src="http://improvedance.com/image/data/page images/FINAL_Whole_package_final_final.jpg" style="width: 980px; height: 656px;" /></p>Novice Web"master" though i wouldn't say master at all.
Yes. When you watch it land you'll see whether you need to move it to be just before the <hr color="393939" /> and you may want it just before at least the <p>, but tinker with it, that will depend upon nuances of spacing as they render. Also note that you want each id and name pair (those two can be same in each instance) to differ (between instances). In the <A HREF you can close with TARGET="_self"> IF you want the page to reload AT its top, otherwise it'll figure out where to load. For sections leave that out. Lookin' good. Back morning.
You're still working on it, and seem to be exploring it. There's a change . . . you seem to have disabled the Welcome and enabled Categories, so let's look here at both ways.
Your entry into Home will be to index.php?route=common/home -- it will land at its own topside. Your entries into portions of it will be to index.php?route=common/home#_____ (where _____ is a sectional A name) -- it will land at the sections targeted. Then your single Welcome will be targetable section by section.
If you aim at categorical sections (you seem to be tinkering with that or it just happened), then your links would be to index.php?route=product/category&path={59, 60, 61, 62, 63, your categorical id numbers, one by one] instead. Then your sections separated into different category descriptions will be targetable individually. Using the categories, if you suddenly wonder how to get back to landing Home, the breadcrumbs will take care of that (you might axe them and not know it, just bring them back).
By simply enabling/disabling EITHER the Welcome module or the Categories (each with its own sectional Description), you can see how it goes both ways. One Welcome will be simpler, if you want the original complete page that you had, at least as a landing.
By enabling BOTH the Welcome module and the Categories, it can land on Welcome and then selectably go to the segments comprising one or another Category's Description.
Where you insert the <A NAME="_____"> you can in most html omit the </A> right after it but inside a Welcome module that </A> is harmless and you MAY actually need the </A> to counteract implicit calls to .css that would carry into ensuing text (making wrong colors, etc.). (Generally, if the module layout went nuts insert that </A>.) In links the </A> must be there (or everything following it will be part of the link's text).
Be sure to back up your header.tpl as you go, so that you can backtrack, and for the same purpose you can use SelectAll in the Welcome module to copy/paste versions of that into an ascii editor on your own machine (Notepad or better) while you're in Source mode in the Description box. Since Welcome modules and Category descriptions (59, 60, etc.) reside in the database, back that up, too, when you reach interim plateaus (at least make the copy/paste backups into Notepad or better).
[Back in a little while.]
Your entry into Home will be to index.php?route=common/home -- it will land at its own topside. Your entries into portions of it will be to index.php?route=common/home#_____ (where _____ is a sectional A name) -- it will land at the sections targeted. Then your single Welcome will be targetable section by section.
If you aim at categorical sections (you seem to be tinkering with that or it just happened), then your links would be to index.php?route=product/category&path={59, 60, 61, 62, 63, your categorical id numbers, one by one] instead. Then your sections separated into different category descriptions will be targetable individually. Using the categories, if you suddenly wonder how to get back to landing Home, the breadcrumbs will take care of that (you might axe them and not know it, just bring them back).
By simply enabling/disabling EITHER the Welcome module or the Categories (each with its own sectional Description), you can see how it goes both ways. One Welcome will be simpler, if you want the original complete page that you had, at least as a landing.
By enabling BOTH the Welcome module and the Categories, it can land on Welcome and then selectably go to the segments comprising one or another Category's Description.
Where you insert the <A NAME="_____"> you can in most html omit the </A> right after it but inside a Welcome module that </A> is harmless and you MAY actually need the </A> to counteract implicit calls to .css that would carry into ensuing text (making wrong colors, etc.). (Generally, if the module layout went nuts insert that </A>.) In links the </A> must be there (or everything following it will be part of the link's text).
Be sure to back up your header.tpl as you go, so that you can backtrack, and for the same purpose you can use SelectAll in the Welcome module to copy/paste versions of that into an ascii editor on your own machine (Notepad or better) while you're in Source mode in the Description box. Since Welcome modules and Category descriptions (59, 60, etc.) reside in the database, back that up, too, when you reach interim plateaus (at least make the copy/paste backups into Notepad or better).
[Back in a little while.]
i have the link made thus far. at the end of index.php?route=common/home#____ i have each anchor name:
index.php?route=common/home#fs
index.php?route=common/home#sf
index.php?route=common/home#fsdoneright
index.php?route=common/home#4in1
index.php?route=common/home#madeincolor
index.php?route=common/home#wholepack
Now i need to put these links into place where the category links are currently, correct? This is where i am confused a bit Here is the menu section of my header.tpl
I am unsure of what to exactly do next. Do i place the div:
"<div id="CUSTOMIZE_ID" style="width:20px;height:20px;"> </div>" (coming from the video's author's code he listed in the video above)?
i did this in my header i am modifying, is this correct? (again under the menu section):
look at the 5th line from the BOTTOM. is that how i should do it?
index.php?route=common/home#fs
index.php?route=common/home#sf
index.php?route=common/home#fsdoneright
index.php?route=common/home#4in1
index.php?route=common/home#madeincolor
index.php?route=common/home#wholepack
Now i need to put these links into place where the category links are currently, correct? This is where i am confused a bit Here is the menu section of my header.tpl
Code: Select all
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div id="notification"></div>
"<div id="CUSTOMIZE_ID" style="width:20px;height:20px;"> </div>" (coming from the video's author's code he listed in the video above)?
i did this in my header i am modifying, is this correct? (again under the menu section):
Code: Select all
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
<li><a href="index.php?route=common/home#fs">THE-footstretcher™</a></li>
</ul>
</div>
<?php } ?>
<div id="notification"></div>Novice Web"master" though i wouldn't say master at all.
(A) Okay on targets:
index.php?route=common/home#fs
index.php?route=common/home#sf
index.php?route=common/home#fsdoneright
index.php?route=common/home#4in1
index.php?route=common/home#madeincolor
index.php?route=common/home#wholepack
(B) To load Welcome from menu crossbar, as well as to reload it from for example a "TOP" button, either way sending it to its top, this will suffice to land it there:
<a href="index.php?route=common/home">THE-footstretcher™</a>
and without a target="_self".
[Covers that 5th line up from bottom in your box.]
(C) On OTHER links in menu crossbar put
<a href="index.php?route= in front of each of the target entries above,
and optionally put TARGET="_self" after each one (index.php will go to itself, so _self precludes an adjacent tab),
followed by the >[target title]</A>, such as
<a href="index.php?route=index.php?route=common/home#s" target="_self">Dance Improvement</a>
<a href="index.php?route=index.php?route=common/home#fsdoneright" target="_self">Done Right</a>
<a href="index.php?route=index.php?route=common/home#4in1" target="_self">Four in One</a>
<a href="index.php?route=index.php?route=common/home#madeincolor" target="_self">Made in Color</a>
<a href="index.php?route=index.php?route=common/home#wholepack" target="_self">Whole Pack</a>
(D) Then Enable Welcome, Disable the several Categories. (Wait to fire it.)
(E) Change the linkage blocks in the menu crossbar. Back up header.tpl first, change backup's name to header_menu_cats.tpl to note what is in it. First pass here is for keeping everything obvious. In header.tpl highlight this block (which explains why I saw empty categories this morning while Welcome was awol):
<?php if ($categories) { ?>
<div id="menu">
<ul>
[...]
</ul>
</div>
<?php } ?>
and lop/axe/delete it. Leave the line of <div id="notification"></div> below it. Lopping avoids wrinkles, such as additionally (further) silencing php's ? and other oddments.
Replace that block with your new one:
<div id="menu">
<ul>
<li><a href="index.php?route=common/home">THE-footstretcher™</a></li>
<li><a href="index.php?route=index.php?route=common/home#sf" target="_self">Dance Improvement</a></li>
<li><a href="index.php?route=index.php?route=common/home#fsdoneright" target="_self">Done Right</a></li>
<li><a href="index.php?route=index.php?route=common/home#4in1" target="_self">Four in One</a></li>
<li><a href="index.php?route=index.php?route=common/home#madeincolor" target="_self">Made in Color</a></li>
<li><a href="index.php?route=index.php?route=common/home#wholepack" target="_self">Whole Pack</a></li>
</ul>
</div>
The main full landing link should ideally go left rather than right, people look left for going home, and it is the most fully informative (we read left to right).
(F) Fire it.
[Wait a moment, I need to see this outside the edit box.] [Okay.]
index.php?route=common/home#fs
index.php?route=common/home#sf
index.php?route=common/home#fsdoneright
index.php?route=common/home#4in1
index.php?route=common/home#madeincolor
index.php?route=common/home#wholepack
(B) To load Welcome from menu crossbar, as well as to reload it from for example a "TOP" button, either way sending it to its top, this will suffice to land it there:
<a href="index.php?route=common/home">THE-footstretcher™</a>
and without a target="_self".
[Covers that 5th line up from bottom in your box.]
(C) On OTHER links in menu crossbar put
<a href="index.php?route= in front of each of the target entries above,
and optionally put TARGET="_self" after each one (index.php will go to itself, so _self precludes an adjacent tab),
followed by the >[target title]</A>, such as
<a href="index.php?route=index.php?route=common/home#s" target="_self">Dance Improvement</a>
<a href="index.php?route=index.php?route=common/home#fsdoneright" target="_self">Done Right</a>
<a href="index.php?route=index.php?route=common/home#4in1" target="_self">Four in One</a>
<a href="index.php?route=index.php?route=common/home#madeincolor" target="_self">Made in Color</a>
<a href="index.php?route=index.php?route=common/home#wholepack" target="_self">Whole Pack</a>
(D) Then Enable Welcome, Disable the several Categories. (Wait to fire it.)
(E) Change the linkage blocks in the menu crossbar. Back up header.tpl first, change backup's name to header_menu_cats.tpl to note what is in it. First pass here is for keeping everything obvious. In header.tpl highlight this block (which explains why I saw empty categories this morning while Welcome was awol):
<?php if ($categories) { ?>
<div id="menu">
<ul>
[...]
</ul>
</div>
<?php } ?>
and lop/axe/delete it. Leave the line of <div id="notification"></div> below it. Lopping avoids wrinkles, such as additionally (further) silencing php's ? and other oddments.
Replace that block with your new one:
<div id="menu">
<ul>
<li><a href="index.php?route=common/home">THE-footstretcher™</a></li>
<li><a href="index.php?route=index.php?route=common/home#sf" target="_self">Dance Improvement</a></li>
<li><a href="index.php?route=index.php?route=common/home#fsdoneright" target="_self">Done Right</a></li>
<li><a href="index.php?route=index.php?route=common/home#4in1" target="_self">Four in One</a></li>
<li><a href="index.php?route=index.php?route=common/home#madeincolor" target="_self">Made in Color</a></li>
<li><a href="index.php?route=index.php?route=common/home#wholepack" target="_self">Whole Pack</a></li>
</ul>
</div>
The main full landing link should ideally go left rather than right, people look left for going home, and it is the most fully informative (we read left to right).
(F) Fire it.
[Wait a moment, I need to see this outside the edit box.] [Okay.]
You're still firing categories instead (and each, of course, says, "There are no products to list in this category."), so your menu crossbar is not ready, yet. In Portable her aspect ratio is off, she appears to have diddybopped between a bus and a wall at an inopportune moment but is still smiling, so either widen her width: or lower her height: to reinflate her.
Sweet! gaining some ground on it!
If you notice if you click any of the links in the menu crossbar, you get an error at the very bottom of the page. It says "The page you requested cannot be found!" How do i get rid of that?
Also, here is what i put in my menu section of the header: basicaly exactly what you told me but i added one thing
I added the last link to go to my orders page i had, but i forgot that deleting the category deleted the link.. I have the source code for the order page (I backed it up in notepad before i deleted the categories), and dont know how to go about getting back to the page (ie, making a new link to the page)
Also i just have to get the scrolling to work now!
Thanks again for all your time and help! i GREATLY appreciate it.
If you notice if you click any of the links in the menu crossbar, you get an error at the very bottom of the page. It says "The page you requested cannot be found!" How do i get rid of that?
Also, here is what i put in my menu section of the header: basicaly exactly what you told me but i added one thing
Code: Select all
<div id="menu">
<ul>
<li><a href="index.php?route=common/home">THE-footstretcher™</a></li>
<li><a href="index.php?route=index.php?route=common/home#sf" target="_self">Safety First</a></li>
<li><a href="index.php?route=index.php?route=common/home#fsdoneright" target="_self">Stretching Right</a></li>
<li><a href="index.php?route=index.php?route=common/home#4in1" target="_self">Massage & Roll</a></li>
<li><a href="index.php?route=index.php?route=common/home#madeincolor" target="_self">Colors</a></li>
<li><a href="index.php?route=index.php?route=common/home#wholepack" target="_self">Excercise and Workouts</a></li>
<li><a href="http://improvedance.com/index.php?route=product/category&path=66">Order</a></li>
</ul>
</div>Also i just have to get the scrolling to work now!
Thanks again for all your time and help! i GREATLY appreciate it.
Novice Web"master" though i wouldn't say master at all.
You're almost there.
1/ In menu crossbar you have 7 targets and 6 links (excluding ordering on the right end). The 404 is being thrown over the target between 4-in-1 and colors -- the target portable (you have reinflated her back to correct aspect ratio). Each 404 is showing as what it just loaded, so portable within it is awol. Before mopping up the wordings to fit space crosswise (maybe just call that one 4-in-1 at the top, what it is will be obvious when it lands), reinsert portable between 4-in-one and colors.
2/ In menu crossbar ordering that you added on in the far right is fine. The target is summoned (the category part is missing so it can't load for the moment but the page itself lands with correct formats). The link for ordering is correct, as I recall from earlier it is supposed to be &path=66 as-is.
3/ Probably just resetting the category for orders back to Enabled will suffice to make it appear where it belongs. If need be just stuff what is in the Notepad file back into the particular category Description, and Save, both in Source mode.
4/ Below each one the Continue is below the screen on many monitors, and visitors who don't know that it is OC may not think to drop a little bit for that and return to the top. If you place dead center right under each image the TOP link a few posts above, that will be obvious and nested where there is room for it. It just needs to be one word, "TOP" to be understood and to take up minimal vertical space. That link just needs to say this:
<a href="index.php?route=common/home">TOP</a>
as it will be linkage text. If it needs format (being outside Menu itself), that can be inserted but first try it without that. Keeping the Continue button, too, is just as well, in keeping with returning topside elsewhere in OC.
5/ What I'm seeing in Firefox 23.0.1 is smooth. The main landing needs a TOP link (see 4/) just below the bottom image (or you could insert one after eachmage). The menu crossbar links and the returns topside are meant to work instantly, with minimal need to scroll much of anywhere. That they do (for the moment Continue is the one that goes back up to the top of Home). The TOP will do the same.
6/ If you add the missing link (1/), fully arm ordering (2/, 3/), add obvious but small instant returns to TOP (4/), and run it through its paces (5), you'll be there.
Okay . . .
1/ In menu crossbar you have 7 targets and 6 links (excluding ordering on the right end). The 404 is being thrown over the target between 4-in-1 and colors -- the target portable (you have reinflated her back to correct aspect ratio). Each 404 is showing as what it just loaded, so portable within it is awol. Before mopping up the wordings to fit space crosswise (maybe just call that one 4-in-1 at the top, what it is will be obvious when it lands), reinsert portable between 4-in-one and colors.
2/ In menu crossbar ordering that you added on in the far right is fine. The target is summoned (the category part is missing so it can't load for the moment but the page itself lands with correct formats). The link for ordering is correct, as I recall from earlier it is supposed to be &path=66 as-is.
3/ Probably just resetting the category for orders back to Enabled will suffice to make it appear where it belongs. If need be just stuff what is in the Notepad file back into the particular category Description, and Save, both in Source mode.
4/ Below each one the Continue is below the screen on many monitors, and visitors who don't know that it is OC may not think to drop a little bit for that and return to the top. If you place dead center right under each image the TOP link a few posts above, that will be obvious and nested where there is room for it. It just needs to be one word, "TOP" to be understood and to take up minimal vertical space. That link just needs to say this:
<a href="index.php?route=common/home">TOP</a>
as it will be linkage text. If it needs format (being outside Menu itself), that can be inserted but first try it without that. Keeping the Continue button, too, is just as well, in keeping with returning topside elsewhere in OC.
5/ What I'm seeing in Firefox 23.0.1 is smooth. The main landing needs a TOP link (see 4/) just below the bottom image (or you could insert one after eachmage). The menu crossbar links and the returns topside are meant to work instantly, with minimal need to scroll much of anywhere. That they do (for the moment Continue is the one that goes back up to the top of Home). The TOP will do the same.
6/ If you add the missing link (1/), fully arm ordering (2/, 3/), add obvious but small instant returns to TOP (4/), and run it through its paces (5), you'll be there.
Okay . . .
butte - take a look at it now! exactly what my business partner wanted. I just added a script to scroll to the correct position on the page using the anchors you taught me how to use. My only problem is after you click onto the order page, then click on the menu bar link, they dont take you back to the index page. That i have to figure out next.
Thanks for all your help butte!
Thanks for all your help butte!
Novice Web"master" though i wouldn't say master at all.
Almost there! (And you're quite welcome.) Looks good, the only difference in adding the script is that it does not instantly go to positions, it diddybops instead. The little "TOP" links just below each image will take it back up to the top, firmly against the top itself, where the Menu crossbar is in plain view. As-is a visitor must manually scroll to go back up.
When you hit Order and then hit Continue low right on it, the return is to topside Home. When you hit Order and it sits there, at the moment you'll see the smaller Order (the Menu link) and to its right the larger Order (page title). Then the Menu crossbar links all seem to say "improvedance.com/#" -- which goes nowhere known (thought but not known). On the Order page, which seems to be separate, find the ""improvedance.com/#" and change it to match the Menu crossbar links (the ul and li set). Order itself is "index.php?route=category&path=68" -- it's a category page. On it you may need "index.php?route=home" to send it back. You'll be editing that category's Description, so remember, toggle into Source mode to edit and Save.
Where in the Menu crossbar Order trails on the next line seen in Firefox 23.0.1 on a 1280 wide screen, you'll need to fiddle with the texts that say,
THE-footstretcher�
Safety First
Stretching Right
Massage & Roll
Portable
Colors
Excercise & Workouts
Orders
in order to get them onto one line. Three ways easily get there, (a) make some shorter (Exercise & Workouts is the sore thumb, either word suffices, and Stretching will work by itself, and " & " can be cut to "/"); (b) reduce margin: right; and margin:left, as well as padding:right and padding:left values a little bit for those links; or (c) make their font a bit smaller than it is. The diamond question mark I'm seeing owes to character encoding, possibly just to how my machine stays set (western [ISO-8859-1]), and you don't have complete control over that. I forget what was legibly there before, but if that is standing in for the TM symbol or a registered trademark symbol, [then handling those as ™ for superscript TM; or ® or ® for (R); or &trade as a variant; © or © for (c); etc.,] may change the odds. [Edited: ISO and specific character codes added.]
What you're seeing is fixed width that accommodates desktop 1024 wide. If you reset master widths to about 95% for very modest margins (so as not to kiss the sides), then autoresizing to user screens will still not crimp desktops, after you get the second Menu line occupied only by Orders squared away [to one line only].
When you hit Order and then hit Continue low right on it, the return is to topside Home. When you hit Order and it sits there, at the moment you'll see the smaller Order (the Menu link) and to its right the larger Order (page title). Then the Menu crossbar links all seem to say "improvedance.com/#" -- which goes nowhere known (thought but not known). On the Order page, which seems to be separate, find the ""improvedance.com/#" and change it to match the Menu crossbar links (the ul and li set). Order itself is "index.php?route=category&path=68" -- it's a category page. On it you may need "index.php?route=home" to send it back. You'll be editing that category's Description, so remember, toggle into Source mode to edit and Save.
Where in the Menu crossbar Order trails on the next line seen in Firefox 23.0.1 on a 1280 wide screen, you'll need to fiddle with the texts that say,
THE-footstretcher�
Safety First
Stretching Right
Massage & Roll
Portable
Colors
Excercise & Workouts
Orders
in order to get them onto one line. Three ways easily get there, (a) make some shorter (Exercise & Workouts is the sore thumb, either word suffices, and Stretching will work by itself, and " & " can be cut to "/"); (b) reduce margin: right; and margin:left, as well as padding:right and padding:left values a little bit for those links; or (c) make their font a bit smaller than it is. The diamond question mark I'm seeing owes to character encoding, possibly just to how my machine stays set (western [ISO-8859-1]), and you don't have complete control over that. I forget what was legibly there before, but if that is standing in for the TM symbol or a registered trademark symbol, [then handling those as ™ for superscript TM; or ® or ® for (R); or &trade as a variant; © or © for (c); etc.,] may change the odds. [Edited: ISO and specific character codes added.]
What you're seeing is fixed width that accommodates desktop 1024 wide. If you reset master widths to about 95% for very modest margins (so as not to kiss the sides), then autoresizing to user screens will still not crimp desktops, after you get the second Menu line occupied only by Orders squared away [to one line only].
Thanks for those codes and letting me know that order was on the second line of the menu bar. It wasnt on safari and google chrome but was on firefox. Thanks for the heads up.
Check out what i just added (here comes another question im hoping you can help with), i just put on a sticky menu bar that scrolls with you as you use the auto scroll feature (which i intend to make faster). My problem is that the script i wrote only give the ability to scroll down, and not up. I would like it so that, for example, i was at the color picture - if i clicked Safety First, it would then take me back to the correct location on the page.
here is the script i wrote:
and here are my menu links
What i think i need to add is add a function like scrollTop, but it isnt necessarily scrolling to the top, instead it is scrolling to the location where the anchor is on the page. Im gonna look into how to do it on youtube and read up on it, but i havent found anything that is helping me further my knowledge in this stuff.
EDIT: actually after looking at it, i think i would just add another if statement saying something like:
Basically i just changed the math signs of currentY < to currentY > and +distance to -distance and add it? gonna see if it works.
Check out what i just added (here comes another question im hoping you can help with), i just put on a sticky menu bar that scrolls with you as you use the auto scroll feature (which i intend to make faster). My problem is that the script i wrote only give the ability to scroll down, and not up. I would like it so that, for example, i was at the color picture - if i clicked Safety First, it would then take me back to the correct location on the page.
here is the script i wrote:
Code: Select all
<script type="text/javascript">
var scrollY = 0;
var distance = 40;
var speed = 24;
function autoScrollTo(el) {
var currentY = window.pageYOffset;
var targetY = document.getElementById(el).offsetTop;
var bodyHeight = document.body.offsetHeight;
var yPos = currentY + window.innerHeight;
var animator = setTimeout('autoScrollTo(\''+el+'\')',speed);
if(yPos > bodyHeight){
clearTimeout(animator);
} else {
if(currentY < targetY-distance) {
scrollY = currentY+distance;
window.scroll(0, scrollY);
} else {
clearTimeout(animator);
}
}
}
</script>Code: Select all
<div id="menu">
<ul>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('fs');">THE-footstretcher™</a></li>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('sf');">Safety First</a></li>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('fsdoneright');">Stretching Right</a></li>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('4in1');">Massage & Roll</a></li>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('bringeverywhere');">Portable</a></li>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('madeincolor');">Colors</a></li>
<li><a href="#" onclick="return false;" onmousedown="autoScrollTo('wholepack');">Excercise & Workouts</a></li>
<li><a href="http://improvedance.com/index.php?route=product/category&path=68">Order</a></li>
</ul>
</div>What i think i need to add is add a function like scrollTop, but it isnt necessarily scrolling to the top, instead it is scrolling to the location where the anchor is on the page. Im gonna look into how to do it on youtube and read up on it, but i havent found anything that is helping me further my knowledge in this stuff.
EDIT: actually after looking at it, i think i would just add another if statement saying something like:
Code: Select all
else {
if(currentY > targetY-distance) {
scrollY = currentY-distance;
window.scroll(0, scrollY);
} else {
clearTimeout(animator);Novice Web"master" though i wouldn't say master at all.
Who is online
Users browsing this forum: No registered users and 19 guests
