I've been trying to automatically go to the bottom of the web page upon page load. On the get AND the post, in fact, no matter how the view has been called, it has to go automatically to the bottom of the page.
I want to do it with javascript.
Seemed like something simple, something I could find in here easily. Well this looks like it :
Set page scroll position on page load of MVC app
There is only one problem... The answer doesn't put the javascript solution in context. And without context... I have no idea where to put these line, no matter what I try...
I won't play all day to know how to accomplish this, so HERE'S A CONTEXT :
#model WhateverModelYouWant
#{
ViewBag.Title = "Formulaire de reprise";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
document.getElementById("ImportantStuff").scrollIntoView();
</script>
<h2> TITLE OF THE VIEW <h2>
<div> Lots of content here </div>
<div> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
<input type="submit" value="ImportantButton" >
Needless to say this doesn't make the page scroll anywhere... Thanks in advance.
ERROR :
In your example nothing can be scrolled anyway because everything is in the visible area. Apart from that mituw16 already gave you the right solution. Here is an example how to use the scrollIntoView function.
<script type="text/javascript">
function scrollToImportantStuff() {
document.getElementById('ImportantStuff').scrollIntoView()
}
window.onload = scrollToImportantStuff;
</script>
<h2> TITLE OF THE VIEW <h2>
<input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />
<div style="height:500px;"> Lots of content here </div>
<div style="height:500px;"> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
This doesn't really have anything to with MVC. It is accomplished with javascript.
document.getElementById("ImportantStuff").scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
Related
Whats wrong with this code?
Index.cshtml -- has
$(document).ready(function() {
$("#main").load('CallScreen.cshtml #content');
});
<div id="main">
Content Will be here.
</div>
CallScreen.cshtml -- has
<div id="content">
</div>
What I would like to do here is display my content on <div id=main"> and then display it inside <div id="content"> from another page CallScreen.cshtml. Am I missing something here?
For one - I assume you know this but the javascript needs to go into a
<script>
$(document).ready(function() {
$("#main").load('CallScreen.cshtml #content');
});
</script>
tag
Also - make sure you remove the extra space so that 'CallScreen.cshtml #content' is 'CallScreen.cshtml#content'
Your code will inject #content into #main.
In my application I have an index.html file where i have loaded all the required scripts and the body contains am empty ng-view whose content will update based on the route url.
The first page is a landing page where I'am showing a button to the user, clicking on which am showing Login Page, by changing the path value of $location.
On Successful login a dashboard page should come where header, sidebar footer area is going to be fixed and only the center area is going to be changed based on the menu clicks which is there in header section, by changing the route value
so the center area i declared as
when am trying to load the dashboard.html page it is going to infinite loop and when am removing the center div which is nothing but an empty view , my view is rendering fine. So the problem is with using the
Can anyone suggest me whether my understanding is corect ??
If yes please suggest me how to achieve my requirement...
index.html
<div class="row">
<div data-ng-view=""></div>
</div>
dashBoard.html
<div class = "row">
<header div here>
<div>
<sidebar div>
**<div data-ng-view = ""></div>** which is not working
</div>
<footer div here>
</div>
I have provided the html code
Thanks
What you're trying to do is not supported by the default router. You can try ui-router which supports multiple and nested views. You can see an example here http://plnkr.co/edit/7FD5Wf?p=preview. The index.html contains the main view.
<body ng-controller="MainCtrl" class="container">
<div ui-view></div>
</body>
Inside contacts.html there is another view
<h1>My Contacts</h1>
<div ui-view></div>
Try checking the difference between route provider and state provider.
Here's a link to ease your search.
I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
Lets see if I can describe my setup here...
I'm designing an angular app, as of now everything is all one page. Basically, when the user clicks a button, the controller sets which
"<ng-include>"
tag is visible. So my html looks something like this.
<html ng-app= "myApp">
<head>
<!-- header stuff -->
<!-- all the includes and everything -->
</head>
<body>
<div>
<!-- page nav bar, its a lot of html but it works -->
</div>
<!-- content area -->
<div ng-show= "showHome">
<ng-include= "home.html">
</div>
<div ng-show= "showProfile">
<ng-include= "profile.html">
</div>
<!-- etc... -->
</body>
</html>
And then in my controller, I'm just setting the proper "showHome", "showProfile", etc... as appropriate. My question is, this seems like a terrible way to scale, and this is my first attempt at an app like this.
So to reiterate. I want to give the user the appearance of a single page app, while swapping in html templates. Any ideas? Multiple pages would be ok, but I want to keep the same navbar at the top of every page.
I'd use ui-router instead.
It is a popular alternative for ngRoute and supports nested templates really well.
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");