I have 3 html files. Index.html invokes chat.html. Chat.html body contains a DIV which I want to populate with Div of a third HTML file (star.html) which resides in the same folder as chat.html.
chat.html -
<body>
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header text-center">
Chat - Group Menu
</div>
</nav>
<!-- Begin page content -->
<div class="container" id="chatDiv">
<div class="page-header">
<h1>Mobile Layout</h1>
</div>
<p class="lead">Chat stuff to appear here</p>
</div>
</div>
<div id="testDIV"></div>
<div id="footer">
//some DIV content here
</div>
</body>
star.html -
<body>
<p> hello all </p>
</body>
jquery code I am using (in an external .js file) is -
$(document).ready(function() {
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
$("#testDIV").load('star.html');
});
});
Here, the alert is displayed. But the content is not moving to chat.html Div.
What am I missing here?
Seeing as how you are opening a new window for chat, you need to address that window in order to manipulate that DOM. You may also need to add jQuery to the chat.html page if you haven't already
$('#loginBtn').click(function() {
$(this).validateEmail();
$(this).validatePassword();
var window.popup = window.open("html/chat.html");
});
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
window.popup.document.$("#testDIV").load('star.html');
});
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.
I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!
I have tried everything when is online, for example:
$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset
None of this is working, it always returns 0!
Edit:
I can't modify any of the HTML apart from what is between the comments.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap" class="parallax">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
here is a codepen showing the various examples not working
https://codepen.io/anon/pen/RgPrQv
You are looking for
$(window).scroll(function() {
$(window).scrollTop();
});
I have a template wit three sections one is the top navigation followed by left navigation and the content section which is the right div or element
<nav>top navs goes here </nav>
<div class="container>
<div class="row">
<div class="col-md-3" id="left-nav">
left navs goes here
</div>
<div class="col-md-9" id="content">
<!--Content goes here-->
<router-outlet></router-outlet>
</div>
</div>
The problem i am having right now is the <router-outlet></router-outlet> which is supposed to replace the HTM inside the div with an id of content doesn't do so. instead it grabs all the HTML of the same template and place it inside <div class="col-md-9" id="content">Content goes here</div>. Why duplicate the same template is this the normal behavior or there is something wrong with my implementation?
If you are changing just one part of your page one router-outlet is enough.
On the place that router-outlet is, component is injected. What component is injected is defined by your routing configuration.
Also change:
<div class="col-md-9"> id="content">
to
<div class="col-md-9" id="content">
I am working in website,I have 2 page index.html and product.html,In product.html
i have 2 div element with different ID,Now when i click the anchor tag in index.html which navigate to product.html but it should navigate to particular ID which holding different content in product.html need help
In index.html page i have anchor tag
<a href=products.html>Building</a>
<a href=products.html>Infrastructure</a>
In product.html page i got 2 div
<div id=#Building>
<div class="container">
</div>
<div>
<div id=#Infrastructure>
<div class="container">
</div>
<div>
when i click the anchor tag i should navigate to particular ID like if i click Infrastructure anchor tag it should directly navigate to product.html infrastructure div
just add that id to your href.
like product.html#divid
index.html
<html>
<body>
<a href='products.html#Building'>Building</a>
<a href='products.html#Infrastructure'>Infrastructure</a>
</body>
</html>
products.html
<div id='Building'>
<div class="container">
building<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div>
<div id='Infrastructure'>
<div class="container">
Infrastructure
</div>
<div>
create inedx.html and products.html files and paste above code.
it working as expected.
I need to get the HTML from a sourrounding DIV, and at the same time get the correct (raw?) HTML from the multiple DIVs with the inline tinyMCE4.
I have managed to get all the HTML by using :
jQuery("#ForSaving").html(jQuery(".Editable").html());
But this gets the wrong HTML from the tinyMCE. In stead of a output of for instance <iframe>, I get a <img class="mce-object mce-object-iframe" etc.
I have tried to use tinyMCE's getContent(), but have not succeeded to get the correct from all tinyMCE instances in one go.
It is important to me that I don't only get the content from inside the tinyMCE DIVs, but also the surrounding DIVs and code. I need that to further process the HTML.
Here is an example of my pure HTML:
<html>
<head>
<script type="text/javascript">
tinymce.init({
selector: "div.tinyeditor",
inline: true,
theme: "modern",
</script>
</head>
<body>
<div id="ForSaving"></div>
<div id="Editable">
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
</div> <!-- end of div#editable -->
</body>
</html>
I need to get ALL the HTML content from within the DIV #Editable, but with the (raw?) correct HTML output from the tinyMCE instances. Hopefully at once.
I need to get a HTML looking like this:
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
</div>
Is there a simple way to do this?
I solved this by doing some changes:
1) I used jquery each() to run a loop through each div.contentwrap
2) I first got the contentwrap's true ID
3) Then built the usin var contentwrapstart = (and using HTML + the ID here)
<div class="contentwrap" id="area_(randnumb)">
4) Then got the tinyMCE content for that specific tinyeditor. (Had to add a ID to that div too)
5) Then built < to end the wrapping
6) Added each to a var result += (values here)
7) Did this for each
8) Stored var result = outside the loop
9) Got the HTML I needed from var result later.
And this worked well :-)