I have 2 htm files: a.htm and b.htm. In b.htm I have 2 divs, in one is a link to a.htm which I would like to open in second div but it opens as new page in new tab. I'm not good in javascript but I looked many examples so I believe I'm very close to solution but obviously have some error somewhere. Please help!
So, in a.htm I have this:
<html>
<body>
TEST
</body>
</html>
In b.htm I have this:
<html>
<head>
<script language="JavaScript">
function url2div(url,target){
document.getElementById(target).innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
}
</script>
</head>
<body>
<div id="menu" style="background-color:#FFD700;height:100px;width:100px;float:left;">
Click
</div>
<div id="content" style="background-color:#EEEEEE;height:100px;width:400px;float:left;">
Original content
</div>
</body>
</html>
Store your link inside the function instead of the href attribute:
Click
Change JS to this:
function url2div(url, element) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', url);
element.appendChild(iframe);
}
JSFiddle Demo #1
if you want to open the link in the same iframe, store the link in any other property other than href. Then, use your current function and it should work fine!
Click
JSFiddle Demo #2
I think this isn't as complicated as you're making it. Also, the previous answer isn't quite doing what the OP is asking...so here's my stab at it:
First, I assume html5, so you don't need the "javascript" as part of your script tags. Secondly, I don't think you need to pass around all those variables. Your anchor tag should reference
<a href=b.htm#content onclick="url2div();"<\a>
and your javascript should be
otherPageText = "<iframe src=\"HtmlPage2.html\" width=\"200\" height=\"200\"></iframe>";
document.getElementById("content").innerHTML = otherPageText;
After that, if you need variables, carefully try to pass them in one at a time.
Part of the original problem is that you're passing "this" which references the new page, not the old one, but by the time that happens you're on the new page and not bringing over the one you want back to the first page. Part of why I stayed away from it.
PS Sorry for the bad formatting. This is all very new to me...
Related
First of all I'm using wordpress with elementor plugin and the accordion feature.
I've got a code of video player:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
}; LEADNETWORK_generuj_player(ustawienia);</script>
I need to put in on several places on the same page. When I tried just multiple copy->paste, only in one place is showing. Is it possible? Any advices?
Please take a look at first line:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
It says basically that the video is put into a div with id=player_div due to element_id:"player_div". If you change the first line to something like:
<div id="my_second_video_placeholder"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"my_second_video_placeholder",
it's highly probable that it would work.
If you copy and paste this code in multiple locations you will load the code and declare the same variables twice, which for Javascript won't work. The "ustawienia" variable is also pointing to the player_div, and with HTML id's this will only find the first one.
<script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><!-- only include once -->
<div id="player_div1"></div> <!-- div for first video -->
<div id="player_div2"></div> <!-- div for second video -->
<script>
var video1 = {element_id:"player_div1",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
var video2 = {element_id:"player_div2",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
LEADNETWORK_generuj_player(video1);
LEADNETWORK_generuj_player(video2);
</script>
Now I've not used the lead network video player, but this should work without issue. For each new video, you would need to create a new target DIV tag and a new video variable in the script section.
Hope this helps.
I am having anchor tag in my page. I like to trigger click event onload . Which means I wanna open this link "whatsapp://send?text=test&phone=+123456789" go to whatsapp. The link is working if you manually click, but not working onload page. Same result with jquery. Is there anyway to do this?
This is what I have:
<body onload="document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
To clarify this, there is no problem for the link with http://, its working. Just not working for whatsapp:// maybe?
Firstly, don't use inline JS. It's just not right.
Now coming to the solution. Why don't you try something like
document.body.onload = function(){
window.location.href = "whatsapp://send?text=test&phone=+123456789";
}
If you still want to stick to inline JS, I'd suggest prefix your code with javascript: since some browsers otherwise ignore inline JS.
So now your code would become
<body onload="javascript:document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
Maybe location.href is a good solution for you.
<body onload="location.href = 'whatsapp://send?text=test&phone=+60123456789">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
</body>
try something like this
<href="intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end">
what is happening when u click on the link ? any error or blank page ?
You can use, $(window).load(function() {}) or even $(document).ready(function() {})
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
Run this snippet, it is working
If you want to run it on load then why you are not using :
window.location = "whatsapp://send?text=test&phone=+123456789"
I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});
In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html
I am working on a project where I need to create an embeddable button. I just want to give some code to the clients and ask them to put it where they want the button to appear on their websites. What is the best approach to it? As an example please see the following image:
I will be really thankful if someone can provide some example code.
The simplest form would be to provide a hyperlink:
Do Something
Or you could use an image button:
<a href="http://mysite.com/dosomething" title="DoSomething">
<img src="http://mysite.com/images/a.jpg" alt="DoSomething" />
</a>
These both remove dependencies on CSS and JS.
Or you can do it like suggested in your question:
<script src="http://mysite.com/scripts/embedbutton.js">
document.write('<link rel="stylesheet" href="http://mysite.com/css/embedbutton.css" />');
document.write('<div id="mybutton" onclick="DoSomething(event);">DoSomething</div>');
function DoSomething()
{
/* action code here */
}
</script>
I think that the javascript solution is the one thtat you need.
Create an javascript that will write the HTML of your button. Put the code in public/js/mybutton.js for example.
var link = 'http://yoursite.com';
var text = '<div><a href="' + link + '"><img src="'
+ link
+ '/public/images/image.png" alt="Some alt text for the image" /></a></div>';
document.write(text);
Then provide a script tag in your page for the users to embed your butscriptton.
<script src="http://yoursite.com/public/js/mybutton.js"></script>
The result will be a image with link to your site, rendered right after the script. You can use inline styling also.
I belive that this is good option when you want prevent your button styling modifications.
You could use a simple link:
Blah
and then ask your clients to embed this code into their sites. Obviously depending on the information you need to exchange between the client site and your site there could be additional parameters, javascript code, ...