This is a migrated thread and some comments may be shown as answers.

Help with changing background image within app

2 Answers 286 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 1
Allan asked on 23 Jan 2014, 05:49 PM
I currently have 4-5 views in my app, I use a flat scheme, and I use same background image which I set in CSS:

.km-flat .km-view .km-content {
    background-image: url(../styles/images/background11.png);
    background-size: cover;
    background-repeat: no-repeat;
}

I want to have a function where a user can choose another background image.  I've implemented a listview, where I get the item the user selects and then I implement a switch case as follows. 

 switch(text1)
                {
                    case "1":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background11.png')");
                        break;
                     case "2":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background12.png')");
                        break;
                     case "3":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background13.png')");
                        break;
                     case "4":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/ background14.png')");
                        break;     
                }

However I am not getting the desired results.Sometimes the image only switches for 1-2 view instead of all views.  I also get an ugly screen flash when I navigate between views.  It's as if every time I pick a new view, the new background image keeps being reset/updated which results in the screen flash

Can someone help me resolve these bugs?

2 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 27 Jan 2014, 10:03 AM
Hello Allan,

Using this approach you are only changing the background-image for the views that have been initialized. If a view have never been navigate to it does not have content container in it, so you are practically not changing its background image. 

An alternative approach would be to use the data-init event of a view to set its background-image to, so you will make sure that the view has all its containers initialized, and you can actually set their background image.

Regards,
Kiril Nikolov
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Kevin
Top achievements
Rank 1
answered on 20 Feb 2014, 12:32 AM
What I would do is make a function that you execute in each view's show event. Store your chosen background in localstorage when they select it then have the show method check it, and set the background using that value. That way anytime anybody navigates to the view it'll check what the bg is supposed to be and set it. I'd also google some javascript image preloading code to implement on app start so there won't be any waiting time to load each bg when you switch
Tags
General Discussions
Asked by
Allan
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or