Menu
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).
then when I navigate to the orders page, it looks like this:
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.
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>
828
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:
DISCLAIMER: Haven't tested any of them, just Googled for some example for you.
Let me know how it goes.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
