dynamically changing background razor and javascript - Templates, (partial) views and macros

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Magnus Szatkowski 28 posts 149 karma points

Mar 09, 2017 @ 08:43

Dynamically changing background - Razor and JavaScript

Templates, (partial) views and macros

Umbraco 7

Hi guys and girls

I have spent too many hours looking at this code now.. Can anyone help me see what i am doing wrong here.

I need this piece of code to work - and it is so close - however, the content that I feed to the imageUrls array, doesnt have quotationmarks around them, so the code can't read them as real entries.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    if(Umbraco.TypedContentAtRoot().First().HasValue("vaelgMappe")){
    var mappen = Umbraco.TypedContentAtRoot().First().GetPropertyValue("vaelgMappe");
    var selection = Umbraco.Media(@mappen).Children;
    var urlSelection = new List<string>();
        foreach(var l in selection){
            urlSelection.Add(l.Url);
        }
    var imageUrls = @String.Join(", ", urlSelection.ToArray());

    <script type="text/javascript">
        $(document).ready(function() {
            $("body").backgroundCycle({
                imageUrls: [@imageUrls],
                fadeSpeed: 2000,
                duration: 10000,
                backgroundSize: SCALING_MODE_COVER
            });
        });
    </script>

} 
}

It is live on my development server here: http://dev.kravspecifikation.dk/ - you can see it if you inspect and open the last script of the tag.

I hope someone can help me!

Kind regards, Magnus Szatkowski

Copy Link

Michael Latouche 504 posts 819 karma points MVP 3x c-trib

Mar 09, 2017 @ 10:19
1
Hey Magnus,

Maybe you could add the quotes when you add the urls in your urlSelection list? Something like:
```
foreach(var l in selection){
        urlSelection.Add(string.Format("'{0}'", l.Url);
    }
```
That way they should get through when you build your imageUrls array.

Hope it helps.

Cheers,

Michael.
Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Mar 09, 2017 @ 10:22
1
Hi Magnus

Did you try to use JavaScriptSerializer?
```
JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
string jsonobj = jsSerializer.Serialize(urlSelection);
```
Hope it will help.

Thanks,

Alex
Copy Link

Magnus Szatkowski 28 posts 149 karma points

Mar 09, 2017 @ 10:38

Hey Alex and Michael,

Both good suggestions. However, Alex' code gets this results in this code being printed:

        $(document).ready(function() {
            $("body").backgroundCycle({
                imageUrls: [&quot;/media/1002/bg2.jpg&quot;,&quot;/media/1003/bg3.jpg&quot;,&quot;/media/1004/bg4.jpg&quot;,&quot;/media/1005/bg5.jpg&quot;,&quot;/media/1014/nyt1.jpg&quot;],
                fadeSpeed: 2000,
                duration: 10000,
                backgroundSize: SCALING_MODE_COVER
            });
        });

and Michaels code results in:

        $(document).ready(function() {
            $("body").backgroundCycle({
                imageUrls: [&#39;/media/1002/bg2.jpg&#39;, &#39;/media/1003/bg3.jpg&#39;, &#39;/media/1004/bg4.jpg&#39;, &#39;/media/1005/bg5.jpg&#39;, &#39;/media/1014/nyt1.jpg&#39;],
                fadeSpeed: 2000,
                duration: 10000,
                backgroundSize: SCALING_MODE_COVER
            });
        });

Do you have any idea if we can get rid of the "&quot" or "'" and print the quoatation mark instead?

Kind regards,

Copy Link

Michael Latouche 504 posts 819 karma points MVP 3x c-trib

Mar 09, 2017 @ 10:41
101
Try using Html.Raw:
```
$("body").backgroundCycle({
            imageUrls: [Html.Raw(imageUrls)],
            fadeSpeed: 2000,
```
Cheers,

Michael.
Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Mar 09, 2017 @ 10:42

Mangus, try to decode result:

    <script type="text/javascript">
        $(document).ready(function() {
            $("body").backgroundCycle({
                imageUrls: [@HttpUtility.HtmlDecode(imageUrls)],
                fadeSpeed: 2000,
                duration: 10000,
                backgroundSize: SCALING_MODE_COVER
            });
        });
    </script>

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Mar 09, 2017 @ 10:55

1

Extreme programming with Michael and Magnus :)

Copy Link
Magnus Szatkowski 28 posts 149 karma points

Mar 09, 2017 @ 10:56

0

Thank you guys!

I got Michaels code to work, but i am sure your's would work too Alex!

Thank you so much :)

Kind regards, Magnus

Copy Link
Michael Latouche 504 posts 819 karma points MVP 3x c-trib

Mar 09, 2017 @ 10:59

0

@Magnus: Great!

@Alex: Indeed ;-)

Cheers,

Michael.

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Mar 09, 2017 @ 11:02

1

Guys, have a great day! #h5yr

Copy Link
Magnus Szatkowski 28 posts 149 karma points

Mar 09, 2017 @ 11:04

1

I love this community :-D

Great day to you too! #h5yr

Copy Link
Michael Latouche 504 posts 819 karma points MVP 3x c-trib

Mar 09, 2017 @ 11:25

1

Thanks and have a great day as well ;-) #h5yr

Copy Link
is working on a reply...

Please Sign in or register to post replies