Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to navigate to home page change screen size in Angular 4?

Tags:

html

css

angular

I'm building a website with angular 4 and asp.net.

When you enter the website, you can see the home page fit to mobile size (which is what I want).

home page

then when I navigate to the orders page, it looks like this:

orders page

orders page

menu: select orders page

but when I navigate back to the home page again from the orders page, it changes the screen and does not fit to mobile at all.

menu: select home page

home page doesn't fit to mobile screen any more

Code:

app.component.html

<app-nav_mobile></app-nav_mobile>
<app-header></app-header>
<app-navbar></app-navbar>
<router-outlet> </router-outlet>
<app-footer></app-footer>

nav_mobile.component.html

    <div id="preloader" class="signature-dierk">
    <div id="status"></div>
</div>
<!-- end : preloader -->
<!-- mobile only navigation : starts -->
<nav class="mobile-nav signature-dierk">
    <ul class="slimmenu">
        <li><a [routerLink]="['/home']">Home page</a></li>
        <li><a [routerLink]="['/order']">orders</a></li>
        <li><a href="checkout.html">checout </a></li>
        <li><a href="products.html">producst</a></li>
        <li><a href="gallery.html">gallery</a></li>
        <li><a href="about.html">about</a></li>
    </ul>
</nav>
<!-- mobile only navigation : ends -->

home.component.html

<section class="mastwrap signature-dierk">
<div class="inner-wrap">

    <section class="intro07 signature-dierk">

        <div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullscreen-container">
            <!-- START REVOLUTION SLIDER 4.6.5 fullscreen mode -->
            <div id="rev_slider_3_1" class="rev_slider fullscreenbanner">
                <ul>
                    <!-- SLIDE  -->
                    <li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off">
                        <!-- MAIN IMAGE -->
                        <img data-no-retina alt="" title="" src="/dist/assets/images/bg1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption featured-caption-one font3bold black lft ltb tp-resizeme"
                             data-x="center" data-hoffset="0"
                             data-y="center" data-voffset="0"
                             data-speed="600"
                             data-start="600"
                             data-easing="easeInOutQuad"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="800"
                             data-endeasing="easeInOutQuad">
                            <span class="font3bold black">logo </span>
                        </div>
                    </li>
                    <!-- SLIDE  -->
                    <li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off">
                        <!-- MAIN IMAGE -->
                        <img data-no-retina alt="" title="" src="/dist/assets/images/bg2.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption featured-caption-two font3light white lft ltb tp-resizeme"
                             data-x="center" data-hoffset="0"
                             data-y="center" data-voffset="0"
                             data-speed="600"
                             data-start="600"
                             data-easing="easeInOutQuad"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="800"
                             data-endeasing="easeInOutQuad">
                            <span class="font3light color-bg white">לחץ להזמנת תור</span>
                        </div>
                    </li>
                    <!-- SLIDE  -->
                    <li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off">
                        <!-- MAIN IMAGE -->
                        <img data-no-retina alt="" title="" src="/dist/assets/images/bg3.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption featured-caption-three font3bold white lft ltb tp-resizeme text-center"
                             data-x="center" data-hoffset="0"
                             data-y="center" data-voffset="0"
                             data-speed="600"
                             data-start="600"
                             data-easing="easeInOutQuad"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="800"
                             data-endeasing="easeInOutQuad">
                            הודעות ועדכונים<span class="font3 color">המספרה סגורה בראשון הקרוב</span>
                        </div>
                    </li>
                </ul>
                <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
            </div>
        </div>
    </section>

</div>
<!-- end : inner-wrap -->
<!--footer-->

Part of my router module:

  RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'order', component: OrderComponent },
        { path: '**', redirectTo: 'home' }
    ])

slider call in _layour.cshtml

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Baber_App</title>
    <base href="~/" />
    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />

    <!-- design css files - start -->
    <link href="~/dist/assets/stylesheets/animatedheaders.css" rel="stylesheet" />

    <!-- Favicon
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="icon" type="image/png" href="~/dist/assets/images/favicon.png"/>


    <!-- FONT
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600%7CMontserrat:400,700%7COpen+Sans:400,300,700,800' rel='stylesheet' type='text/css'>

    <!-- ICON FONTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="~/dist/assets/stylesheets/ionicons.min.css">        
    <link rel="stylesheet" href="~/dist/assets/fonts/fonts.css">

    <!-- CSS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="~/dist/assets/stylesheets/bootstrap.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/isotope.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/venobox.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/sinister.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/animatedheaders.css">
    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="~/dist/assets/rs-plugin/css/settings.css" media="screen" />
    <link rel="stylesheet" href="~/dist/assets/stylesheets/featured.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/slimmenu.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/main.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/main-bg.css">
    <link rel="stylesheet" href="~/dist/assets/stylesheets/main-responsive.css">







    <!-- design css files - end -->



</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)

    <script src="~/dist/assets/javascripts/libs/common.js"></script>
    <script src="~/dist/assets/javascripts/libs/bootstrap.min.js"></script>
    <script src="~/dist/assets/javascripts/libs/animatedheaders.js"></script>
    <script src="~/dist/assets/javascripts/custom/main.js"></script>
    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="~/dist/assets/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="~/dist/assets/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript">


         /******************************************
           - PREPARE PLACEHOLDER FOR SLIDER  -
         ******************************************/


         jQuery(document).ready(function () {
             jQuery('#rev_slider_3_1').show().revolution(
                 {
                     dottedOverlay: "none",
                     delay: 9000,
                     startwidth: 1200,
                     startheight: 500,
                     hideThumbs: 0,

                     thumbWidth: 100,
                     thumbHeight: 50,
                     thumbAmount: 3,


                     simplifyAll: "off",

                     navigationType: "bullet",
                     navigationArrows: "none",
                     navigationStyle: "round",

                     touchenabled: "on",
                     onHoverStop: "on",
                     nextSlideOnWindowFocus: "off",

                     swipe_threshold: 75,
                     swipe_min_touches: 1,
                     drag_block_vertical: false,



                     keyboardNavigation: "off",

                     navigationHAlign: "right",
                     navigationVAlign: "center",
                     navigationHOffset: 20,
                     navigationVOffset: 0,

                     soloArrowLeftHalign: "left",
                     soloArrowLeftValign: "center",
                     soloArrowLeftHOffset: 20,
                     soloArrowLeftVOffset: 0,

                     soloArrowRightHalign: "right",
                     soloArrowRightValign: "center",
                     soloArrowRightHOffset: 20,
                     soloArrowRightVOffset: 0,

                     shadow: 0,
                     fullWidth: "off",
                     fullScreen: "on",

                     spinner: "spinner0",

                     stopLoop: "off",
                     stopAfterLoops: -1,
                     stopAtSlide: -1,

                     shuffle: "off",


                     forceFullWidth: "off",
                     fullScreenAlignForce: "off",
                     minFullScreenHeight: "",
                     hideTimerBar: "on",
                     hideThumbsOnMobile: "off",
                     hideNavDelayOnMobile: 1500,
                     hideBulletsOnMobile: "off",
                     hideArrowsOnMobile: "off",
                     hideThumbsUnderResolution: 0,

                     fullScreenOffsetContainer: "#pseudo-header",
                     fullScreenOffset: "",
                     hideSliderAtLimit: 0,
                     hideCaptionAtLimit: 0,
                     hideAllCaptionAtLilmit: 0,
                     startWithSlide: 0
                 });
         }); //ready

    </script>          
</body>
</html>
like image 828
Manspof Avatar asked Aug 18 '17 08:08

Manspof


1 Answers

The main problem here is that you are mixing Jquery plugins with Angular without a wrapper.

The first time the app is loaded it works because the onready is the last srcipt to run (remember that the browser executes the tags synchronously from top to bottom).

As soon as you visit the orders page Angular modifies the DOM and the slider cease to exist.

When you browse back to the homepage Angular generates the corresponding HTML (inc. the slider) but it never executes the script that configures the slider.

There are two possible solutions here, the one that will fix this quickly but it is technically wrong, and the one that is the right way to do it.

Quick but wrong: Copy all inside jQuery(document).ready(function () { }); to a new function named, for example, sliderSetup(). Implement Angular ngOnReady method in the Home Component and invoke sliderSetup() from there.

Angular way: Search for an Angular implementation of a slider. For example:

  • https://www.npmjs.com/package/angular2-carousel-simple
  • https://www.npmjs.com/package/ng2-owl-carousel
  • https://www.npmjs.com/package/angular2-useful-swiper

DISCLAIMER: Haven't tested any of them, just Googled for some example for you.

Let me know how it goes.

like image 199
Martin Avatar answered Oct 29 '22 13:10

Martin