Welcome Guest, Not a member yet? Register   Sign In
On link click - progress bar
#1

[eluser]petrosg[/eluser]
Hello,

I just started modifying an eshop, made with CodeIgniter, for a friend. I have basic knowledge of php mysql, and good knowledge of html, css.

What i need to do, is add a loading gif (a progress circle gif, that i ve founded), that shows everytime a specific link is pressed, until moving to the next page.

I have no idea how to do it, so i would really appreciate some help. If you have a specific code, please guide me where to implement, since i am not yet familiar with the framework.

Thank you very much in advance
Petros
#2

[eluser]TheFuzzy0ne[/eluser]
Welcome to the CodeIgniter forums!

Do you know how to use Javascript? If not, now would be a pretty good time to learn. Smile

jQuery is very useful, and very straightforward to use. You can pinpoint elements with CSS selectors, and hook into events such as onclick, onchange, onsubmit, and so on. You will be needing to use the 'click' event, so that when a URL is clicked, your spinner appears.

There are lots of good tutorials available online.

You can include the jQuery script direct from the CDN in your main template, and also include a script that contains the logic, or you can place the script inline.

However, you've not given much information.

Where is the spinner to appear when you click a link? Should clicking any link display the spinner?

There's two potential problems you need to take into account. If someone holds SHIFT (to open a new window), or CTRL (to open a new tab), the spinner will appear on the page indefinitely.

Also, if the link contains a URL hash which points to the current page, the spinner will appear indefinitely.
#3

[eluser]petrosg[/eluser]
Hi there, and thanx very much for the quick response :-)

Actually, i need something simple, for specific links, not every. When clicked, a spinner should show in the middle of the screen, while the background could get darker, just until it went to the page that would open by the link.

Also, i dont yet know CDN....

Is there a really simple way to do it, like some css, a js file and an id that would do the trick?

Thanks again!
#4

[eluser]petrosg[/eluser]
anyone?
#5

[eluser]TheFuzzy0ne[/eluser]
This is not from existing code, but I've taken the time to write enough code to get you started.

In between the head tags, throw the following:
Code:
<style type="text/css">
    .blockUI img {
        vertical-align: middle;
        padding: 0px 0px 10px 20px;
    }
</style>
<$cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></$cript>
<$cript type="text/javascript" src="https://raw.github.com/malsup/blockui/master/jquery.blockUI.js"></$cript>
<$cript type="text/javascript">
    $(document).ready(function() {
        $('.show_waitscreen').click(function(){
            $.blockUI({
                message : '<span>Please Wait...</span><img src="http://www.dontbeatourist.co.uk/images/loading-spinner.gif" />',
                css : {
                    border: 'none',
                    padding: '15px',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    'border-radius' : '10px',
                    opacity: .5,
                    fontSize : '180%'
                }
            });
        });
    });
</$cript>

For any links where you want to show your spinner when it's clicked, you need to assign a the class "show_waitscreen".

From my example, you should be able to tweak the CSS to make it how you want it. Please be sure to at least change the link to the spinner. Ideally the spinner and the BlockUI script should be hosted on your own Web site.

The first script is a [url="http://en.wikipedia.org/wiki/Content_delivery_network"]CDN[/url] run by Google.
#6

[eluser]petrosg[/eluser]
Thank you very very much! :-) I ll give it a try!




Theme © iAndrew 2016 - Forum software by © MyBB