Scripts

Here is a Script I want to use with my 7.1.4 site- But where would I put the Script and associated html anchor .

When a Page is opened, Home Page for example, the Script causes the page to Auto-Scroll Down to a certain point within the page, without any click of a link on the page.

Here is a link to an example I coded that does what I'm looking for.

http://www.primoskateboardsusa.com/

Here is the Script.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

(function($) {

    $(document).ready(function() {

         $('html, body').animate({

           'scrollTop':   $('#nameofanchor').offset().top

         }, 5000);

    });

})(jQuery);

</script>

Here is the html anchor point

<a id="nameofanchor"></a>

You can put the script in the template's _header.html file.  The anchor depends on where on your page you want it to be located.

Also note: This line in your script....

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Is NOT to be included. It is the Jquery library which dolphin already includes. Adding it again causes conflicts which break other javascript functions throughout the site.

I would like the anchor to more than likely located on the Profile page & Home page for starters.

Also, I'm guessing I only have to put the Script one time in the template's _header.html file, and then the anchor html on whichever pages I want the script to be activated????? 

Okay, to the elimination of the ajax script line!!!!

Thanks, Skip

 
Yes, but where on that page is the question. The script slowly scrolls from the top of the page to the ancor point when the page loads. So the position of that anchor is important.


If you have any html blocks on that page, it becomes easy. All you would have to do is insert <a id="nameofanchor"></a> at the top or the bottom of the block.

If not you can also add <a id="nameofanchor"></a> to the language key of one of the blocks headers language text in front of or after the text.

Oooops.

The first and only thing I did was paste the script into the templates/base/_header.html file.

Then my site got trashed, see attachment.

The header.html file was empty prior to my pasting the script. 

I uploaded a backup _header.html file to my site with no luck.

Any advise to recover from this?

Skip

 
Should not have been empty. Get a fresh copy of it from a dolphin zip file matching your dolphin version.

No, that header file was not empty.  You can grab an original copy from the Dolphin zip for your version.

You most likely placed it in the wrong location; I guess we should have been more specific with you.

In the _header.html file (and by the way, always backup the file first by renaming it, you can use a new extension such as .php.bak or .html.bak) find the </head> tag.  Just before that tag place your script including the <script> and </script> tags.

It will look this way when you are finished:

<script type="text/javascript">

(function($) {

    $(document).ready(function() {

         $('html, body').animate({

           'scrollTop':   $('#nameofanchor').offset().top

         }, 5000);

    });

})(jQuery);

</script>

</head>

Oh, and another thing, only edit Dolphin files using a pure text editor; there are many free ones;  the most popular ones mention here are Notepad ++ and PsPad.

Also, since that is a template file, you may need to go into your admin -> tools -> cache and clear the cache a couple of times and you may have to clear your browser cache as well to force a reload of the page.  Any time you make changes to your template; and you really should copy the UNI to a new template file if you are going to be making a lot of changes to the template so that future updates don't overwrite the files, you will probably need to clear caches.

I hate to be the one to tell you this, but that scrolling thing in your example is annoying as hell.  Why do you want to do this?

 i think his home page idea is good. He can put the anchor where he want to highlight. e.g on top latest video, then pictures then outline. so by this script the user will get the idea that home page have other content with out scrolling and will land exactly on outline, which should be the main focus.

I agree with HL, it really is not a good idea.  If the person finds the site interesting, they will scroll on their own.  I would find that scroll thing rather annoying, maybe not as annoying as videos that auto play, but still annoying.

Hey GG/Deano

Thanks for all the help = WORKING PERFECTLY!!

Hi HL

Agree, but in my case my home page (not dolphin)  has a Div at the top which is a part of the template for all pages and or other sites with images/links etc that take up unnecessary screen space once the page loads, but is needed to move from site to site or page to page. So I set the auto scroll feature to scroll quickly but it's seen long enough so that the user will remember it's there when navigation is desired. The Div in my site is only 90px in height so scrolling is minimal unlike the example site I posted for viewing in the forum which scrolled about 900px I'm guessing,

 Thanks for your thoughts though, your delivery made me laugh my a** off!, and it was needed!

Thanks again for your help, Skip

Okay, I take it back, working yes, but not perfectly, now my site is  ANNOYING me, lol.

My goal was to have the homepage when loaded auto scroll once to hide the Top Menu Div. I created and stay, not reload and scroll every time something is clicked. 

But it scrolls every time I click anything in my dolphin site, photo's, profile, etc.

Is this possible to code the script to scroll once and hide Top Menu Div. no matter what the user selects ?? 

Did you put the anchor tag only on the pages where you want the scrolling to occur?  Is it scrolling on pages that don't have the anchor tag?

I put the anchor tag in the templates/base/_sub_header.html ONLY where my html code resides for the custom top menu.

I have not placed the anchor tag anywhere else. 

My html code for custom top menu is global on all pages as desired. But once the auto scroll does its job I want the custom top menu to stay hidden on all pages and not be seen unless the user decides to scroll up to view it in order to go to other webpages that are not a part of dolphin.

Assuming the above has been done correctly, I was thinking I could place a JUMP script & Anchor tag on all the other pages in my site, but what a hassle that would be, not sure even how to do it!

Hope it can be done an easier way.

Well then, now you know why it is doing it everywhere.

This is what Deano told you:

Yes, but where on that page is the question. The script slowly scrolls from the top of the page to the ancor point when the page loads. So the position of that anchor is important.


If you have any html blocks on that page, it becomes easy. All you would have to do is insert <a id="nameofanchor"></a> at the top or the bottom of the block.

If not you can also add <a id="nameofanchor"></a> to the language key of one of the blocks headers language text in front of or after the text.

If you don't understand what Deano was telling you then ask.

There is actually a better approach to what you want to accomplish than using this scroll thingy.  Think about it.

I actually knew the script would scroll on every page reload. I also expected you would find it quite annoying.

There is nothing in the script to remember that it has already done it once and not do it again. That is something that will have to be added.

But i still suggest you drop that idea and figure out something else.

Hi GG -  I understood what Deano had conveyed in his earlier post, maybe you did not take a look at my sample site link in the beginning of my post where I had coded the scroll. I just did not know where to put the code when it came to dolphins hierarchy of many many pages. It was fairly easy in a new stand alone html page.  You said, "There is actually a better approach to what you want to accomplish than using this scroll thingy. Think about it.". I did and I'm at a loss, share your thoughts so I can ponder if it will work for me.

Deano, are you suggesting there is code that could be added to the existing script where it lies that would cause it to scroll once and stick until user wants to scroll up to view it? I don't mind hunting around the net for it, but don't want to waist time searching for something that may not exist.

Thank You, Skip

Your auto scrolling idea to hide a menu is an awful idea.  Why don't you just use some horizontal slide out menu.

HL provided a solution; or you can hid the menu and let it slide down vertically instead of horizontally.  You would look at the divisions holding the top section and menu of your site and have it so the members can click to unhide/hide the menu.  Go out and look for jquery solutions and you will find several.