html - How to navigate to home page change screen size in Angular 4? -
i'm building website angular 4 , asp.net.
when enter website, can see home page fit mobile size (which want).
then when navigate orders page, looks this:
orders page
but when navigate home page again orders page, changes screen , not fit mobile @ all.
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 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 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 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 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>
the main problem here mixing jquery plugins angular without wrapper.
the first time app loaded works because onready last srcipt run (remember browser executes tags synchronously top bottom).
as visit orders page angular modifies dom , slider cease exist.
when browse homepage angular generates corresponding html (inc. slider) never executes script configures slider.
there 2 possible solutions here, 1 fix technically wrong, , 1 right way it.
quick wrong: copy inside jquery(document).ready(function () { }); new function named, example, slidersetup(). implement angular ngonready method in home component , invoke slidersetup() there.
angular way: search angular implementation of slider. 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 of them, googled example you.
let me know how goes.
Comments
Post a Comment