HTML split code in different files - html

I want to remove 2 lines of my HTML code and put them in another html file (ex: index2.html), but those 2 lines must be before </body> ends.
How can I put those 2 lines in another html file and keep it working as they was never removed?
The code that I want to move is a popup window.
The code that I move is the line that connects with another site and gives me the popup.
<script type="text/javascript" src="https://thesite.com/script.php?id=21940"></script>
And the line that I want to remain in original index.html calls that popup from a button:
onclick="call_window();"

Related

Reloading a div removes it and does not show anything

When I try this line of code:
$("#topleft").load(location.href + " #topleft");
it removes the topleft div instead of reloading it.
I am executing the code above in a typescript file (specification.ts) but the HTML that contains topleft (view.html) is connected to a different typescript file (view.ts). Is this the reason why my div does not get reloaded?
Since the div you are trying to reload is in a different location, you will need to use the location that you are trying to reload from (in this case view.html) so the load function will look like this
$("#topleft").load("view.html #topleft");
location.href refers to the page executing the script, so this effectively will do nothing (since reloading the div from the same page will result in the same content).

Replacing a div with a command

i've got a site with a lot of phone models, but the code is originally from another part of the site, where the mobiles are only shown when you click on the box, but for this part of the site, I want the mobiles to be shown at anytime, so how do i make this div
<div class="submit_filter ans_div" style="display: table;"></div>'
into something that just shows without a click?
The site url are www.findaphone.dk/mobiler
And as you see, right now there is a big box at the top of the site you have to click on.
Thanks in advance!!
The JavaScript for this click event is at line 620 of your source code. CTRL+F to find it, it looks like this:
$(document).on('click','.submit_filter',function () {
Right now, the line is waiting for a click event on that large button (.submit_filter) before executing the code. Replace the line above with this, and the code in that function will trigger on document ready (when the page loads):
$(document).ready(function () {

Make HTML change image name to directory name

I have many different directories which are named SOMECITY-STATE.
Each of these directories has one and the same index.html, with only one difference, the header image is different in every one of them.
Now I have a separate header-image folder in which the images are named all the same like SOMECITY-STATE.JPG
What I want to do is, to put some code in html file to make it automatically read the directory name e.g. NEW-YORK-NY and make the page display the ../banners/new-york-ny.jpg as it's header image.
<div class="header-image"> <img src="banners/new-york-ny.jpg"> </div>
Where mydomain.com/directory1 should display the image ../banners/directory1.jpg and mydomain.com/directory2 should display the image ../banners/directory2.jpg
Is this possible?
It is indeed.
Just before the ending </body> tag inside each index.html file, include this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
$('.header-image img').attr('src', '../banners/' + dir + '.jpg');
</script>
What's happening?
The first line adds the jQuery library to your webpage, which makes what you're trying to do much easier.
Next, I put some code inside <script> tags, so the browser knows it's going to be Javascript.
The first line inside the <script> grabs the folder that your index.html file is in, but it looks like "/new-york-ny/" right now.
The next line takes "/new-york-ny/" and takes off the last slash, so it's just "/new-york-ny".
The last line of code selects the image within the div with the header-image class, and sets its src attribute to "/new-york-ny", but also adds "../banners" and ".jpg" to it at the same time, making it "../banners/new-york-ny.jpg", which is hopefully what you want.
(credit to Ryan Kinal on this question for some of the code)
I hope it helps!

html element whose text can be dynamically changed also an onclick action to point to a function NOT button

currently I am using a button whose 'value' i am able to change so that text written over button changes but I see that text is centered inside button & not big enough . Can I get something like +,- we see in windows explorer which enables to fold & expand folder in tree view.
i do not want to use any external file (img etc.) as I am creating a single self-sufficient webpage.
Please suggest.
you can use this code for displaying + sign
----Firstly put this code in the head of your html.
<script type="text/javascript">
function function_Name()
{
alert('hi');
}
</script>
Then call the above function from this link here below, onclick event here call the above declared function:
+

Content Loading

I am creating new Page with two divs.This Page Loading within Iframe.
First Div get contents from Database then load.Second Div contains Save and Cancel Button Only.
At the Time of loading Save and Cancel Button (Second Div) comes first.How to avoid this??
Hide the second div via CSS.
Then add some javascript which unhiddes the div when the loading from the DB is finished
Have the first document load the second document when it's ready. With a onload handler on the first document that sets the location of the second iframe.
Let's say your iframes have 2 ids: "iframe1" and "iframe2". You load the database content in iframe1, and an empty page in iframe2.
Here is a sample code for the document loaded in iframe1 :
<html>
<head>
<script>
function init () {
frameElement.ownerDocument.getElementById("iframe2").contentWindow.location = "/someurl/document2.html";
}
</script>
</head>
<body onload="init()">
<!-- iframe1 content -->
</body>
</html>
Dynamically load the content using something like JQuery or Prototype to control when and how divs load.