I'm trying to create an <a> link in html page 1 that takes the user to html page 2. After html page 2 loads, I want a drop down function to execute. Essentially it is a link from html page 1 to drop down in html2.
I am not very good with javascript, but I've tried anything I could find so far and nothing works. The link between the pages works, but I cannot get the drop down function to execute on load of html page 2.
Any help would be greatly appreciated
HTML Page 1
<a class="link2index" href="index2.html#test" onclick ="f();return false;">Read more about technology hubs in South Africa</a>
<script>
function f(){
testwindow = window.load("index2.html#test"); //this is working to load but not to load the dropdown
//testwindow.addEventListener('click', myFunction38()); not working
//window.onload = myFunction38 ()
//testwindow.addEventListener('load', myFunction38()){
//document.getElementById("myDropdown38").classList.toggle("show");}; not working
//window.open('index2.html');
//window.somefunction = myFunction38(){
//document.getElementById("myDropdown38").classList.toggle("show");} not working
}
</script>
HTML Page 2 to where I'm targeting
<div class="dropdown">
<button id="test" onclick="myFunction38()" class="dropbtn">Cape Town</button>
<div id="myDropdown38" class="dropdown-content">
<a href="#">
<img src="media/capetown.jpg" alt="South Africa">
Cape Town-based Labsorganises digital and entrepreneurship bootcamps, and provides an investment of up to $20,000 for every social enterprise developed through their program.
</a>
</div>
</div>
<script>
function myFunction38() {
document.getElementById("myDropdown38").classList.toggle("show");
}
</script>
Basically you can use the window.onload function to run some JavaScript to dynamically add html to your body and show a "drop-down".
But since html2 can be reached in other ways(like bookmark or copy/paste into browser) and not just through hyperlink inside html1, you could also append some query string or fragment in html2 when it is loaded from html1 (append it to the href of a tag). Inside the onload function you can then check if the same exists and decide whether or not to show drop-down.
I will not be giving a code since the functionality is vaguely defined in the question. But this should help you solve it on your own.
Related
I have two html webresources in my customer form, one contains a multitab and second contains some tiles, designed using bootstrap and JQuery for events. Want to initiate a Click event of tab exist on first webresource on the click of tiles exist on second webresource.
I have prepared the script on simple html page first all code is working there but not on crm form.
How can I access the tab controls using JQuery from first webresource?
I have written some scripts on each html webresources, can I use the same script/function from another html webresource?
Webresource_1
//html
<div class="row">
<ul id="tab_container_01" class="nav nav-tabs">
<li id="tab_cases"><a id="ahref_cases" href="#">Cases</a></li>
</ul>
</div>
//script
//Following script is working fine on the same page
<script type="text/javascript">
$("ul.nav-tabs").on("click", "li", function () {
var selectedTabText = ($(this).find("a").text());
var tabs = window.parent.Xrm.Page.ui.tabs;
//Some toggle script
});
</script>
Webresource_2
//html
<div class="panel">
<div> Open Cases </div>
</div>
//script
<script type="text/javascript">
$(".panel").on("click", "div", function () {
// following not working on crm form
$("#tab_cases").addClass('active');
$("#tab_cases").parent().siblings().removeClass('active'); //length 0, id not detecting
//window.parent.$("#tab_cases").parent().siblings().removeClass('active');
/* trigger click event on the li */
//trying to use function written on webresource_1 script
$("#tab_cases").closest("ul.nav-tabs li").trigger('click'); //*Not Triggering*
});
</script>
Although, technically since you are all within CRM, and you won't have any Cross Domain Scripting issues, this may be a little over kill, you could use Window.Post Message from Frame1, to communicate to the CRM form, and then have it communicate to Frame 2. This would also mean that your scripts wouldn't have to be dependent on the DOM of each, other subscribe to the same interface for posting/receiving messages.
List item
I am using the following code to hide a div and show the other.
page1
<a id="show" href="2#dk" onclick='document();'>mylink</a>
<a id="show1" href="2#dh" onclick='document();'>mylink</a>
page 2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("dk").show();
$("dh").hide();
});
$("#show1").click(function(){
$("dh").show();
$("dk").hide();
});
});
</script>
</head>
<body>
<div id="dk">mylink</a>
<div id="dh">mylink</a>
</body>
</html>
This works on one page but not after the anchor tag loads up another page.
PREMISE
I have pages:-
first
second
I want links on on page and divs on second page
frist page links
divs
OBJECTIVE
If the page is first page, links need to be on this page
If the page is second page, then I wish to hide the divs that are not link to the link thats clicked
you can see here what i mean even i will put account detials that ppl can look at code and try if they want
http://testscripten.enjin.com/login
username:testscripten
password:test12345
go to admin and then edit
page layout and next to text will a pencil to change html or java
I think you can use window.location.href to get the link of the page you're currently on and then accordingly hide/show your buttons.
JAVASCRIPT
var pageName = window.location.href;
$(document).ready(function(){
if(pageName === "dh"){
$("#show").show();
$("#show1").hide();
} else if(pageName === "dk") {
$("show1").show();
$("show").hide();
}
});
HTML
<a id="show" href="dk">mylink</a> <!--No need for onclick if you're using jQuery-->
<a id="show1" href="dh">mylink</a> <!--No need for onclick if you're using jQuery-->
I am not sure of "dk" and "dh" being real links, if you have kept those as placeholders then this should work.
Simply show/hide based upon the path name containing the strings you specify:
$(document).ready(function(){
$('div.toShowOnFirstPage').toggle(location.pathname.indexOf("first")!== -1);
$('div.toShowOnSecondPage').toggle(location.pathname.indexOf("second")!== -1);
});
use AngularJS and SPA model to avoid page reload.
You can use also variables in url
If you need to reload page and have values on different pages you have to set cookie or webStorage http://www.w3schools.com/html/html5_webstorage.asp
Why don't you use php?
Describing a scenario:
I am going through the code mentioned below.B asically I am trying to figure out how to program so that
when a user clicks on "Use Template" button , it gets inserted into an editor.
Page 1:
There are lot of templates present
When a user clicks on the "Use Template" button on , it gets inserted into an editor that is present in
the next page (Page 2).
Please find the code snippet below for the first two templates I am going through:
<div id="templatesWrap">
<div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templateone&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
</a>
</span>
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
</div>
</div>
<div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
</a>
</span>
<div class="templateName">Template TWO</div>
<p>
Use Template
</p>
</div>
</div>
And so on ....
How does the link "https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" is inserting the template into the editor which is located on the next page? I haven't understood the token part and lot's of ID's present in the link
which I think are thereason behind inserting the template.
Has anyone come across such link before? Please advise.
Thanks
MORE CLARIFICATIONS:
Thanks for your answer.It did help me somewhat. I have few more questions:
Basically, I am using TinyMCE 4.0.8 version as my editor. The templates, I am using are from here:
https://github.com/mailchimp/email-blueprints/blob/master/templates/2col-1-2-leftsidebar.html
Some questions based on "Tivie" answer.
1) As you can see in the code for "2col-1-2-leftsidebar.html " it's not defined inside <div> tags unlike you defined it in <div> tags. Do you think that I can still
use it using "2col-1-2-leftsidebar.html " name?
2)I believe,for explanation purpose, you have included
`"<div contenteditable="true" id="myEditor">replaced stuff</div>`
and
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
in the same page. Am I right? ( I understand you were trying to make an educated guess here, hence
just asking :) )
In my case, I have a separate page, where I have written code for buttons just like you wrote in editor.html like the following:
<button id="btn">Load TPL</button>. My button is defined inside <div class="templateContainer">.
Also, my templates are defined in a separate folder. So, I will have to grab the content(HTML Template), from
that folder and then insert into TinyMCE 4.08 editor. (Looks like two step process). Could you elaborate
on how should I proceed here?
More Question As of Dec 27
I have modifier my code for the template as follows:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
Please note, I have added an additional id attribute for the following purpose.
If I go by the answer mentioned in the Tivia's post, is the following correct?
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
My editor is defined like the following on Page 2 (Editor Page).
<div class="field">
<textarea id="sTextBody" name="sTextBody" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>
I am confused, like, the script tag I have defined is in Page 1 where I have defined all the template related code
and the Page 2(Editor) page is a different page. It's simply taking me to Editor page (Page 2) and hence not working.
Please advise where I am wrong.
Thanks
MORE QUESTIONS AS of Jan 2
The problem Iam facing is as follows. Basically, for first template , I have the following code.
Code Snippet #1 where "Use "Template" button is present:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
And the function suggested in the answer is as follows:
Code Snippet #2 where Editor is present:
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
Since, I believe I first need to reach to that page after user clicks on "Use Template" button, where the editor is located, I have defined Code Snippet #1 on Page 1 and have defined the Code Snippet #2 and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> as the very first two script tags in the Page 2 ( Editor Page). But still when I click on "User Template" button on Page 1, it's just letting me to next page and not loading the template into the editor.
Am I doing something wrong here? Please advise.
P.S. The problem I feel is somehow the click function on Page 2 is not getting activated with the temp1 id button mentioned on Page 1.
Thanks
Well, one can only guess without having access to the page itself (and it's source code). I can, however, make an educated guess on how it works.
The URL params follows a pattern. First you have a token that is equal in all templates. This probably means the token does not have any relevance to the template mechanism itself. Maybe it's an authentication token or something. Not relevant though.
Then you have the template identification (templateOne, templateTwo, etc...) followed by a HubId that is empty. Lastly you have a goalComplete=200 which might correspond to the HTTP success code 200 (OK).
Based on this, my guess would be that they are probably using AJAX on the background, to fetch those templates from the server. Then, via JScript, those templates are inserted into the editor box itself.
Using JQuery, something like this is trivial. here's an example:
template.html
<div>
<h1>TEST</h1>
<span>This is a template</span>
</div>
editor.html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" id="myEditor">
replaced stuff
</div>
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
</body>
</html>
Edit:
1) Well, since those templates are quite complex and include CSS, you probably want to keep them separated from you editor page (or the template's CSS will mess up your page's css).
However, since you're using TinyMCE, it comes with a template manager built in, so you probably want to use that. Check this link here http://www.tinymce.com/wiki.php/Configuration:templates for documentation.
2) I think 1 answers your question but, just in case, my method above works for any page in any directory, provided it lives on the same domain. Example:
<script>
$("#btn").click(function() {
$("#myEditor").load("someDirectory/template.html");
});
</script>
I recomend you check this page for the specifics on using TinyMCE http://www.tinymce.com/wiki.php/Configuration:templates
EDIT2:
Let me explain the above code:
$("#btn").click(function() { });
This basically tells the browser to run the code inside the brackets when you click the element with an id="btn"
$("#myEditor").load("someDirectory/template.html");
This is an AJAX request (check the documentation here). It grabs the contents of someDirectory/template.html and places them inside the element whose id="myEditor"
I'm new to stackoverflow and I came here because I couldn't find clear answers to my problems with html and javascript.
I'm wanting to display an HTML page with 3 buttons and the buttons will execute 3 scripts onClick. I need tab#1 to talk to tab#2 to execute the code but I'm stuck on how I go about doing that - here's my HTML code:
<!DOCTYPE html>
<html>
<body>
<!-- START STAGE 1 -->
<script>
function stage1()
{
// Here I want to open up a new tab so I'd do:
window.open('http://webpage.com', '_blank');
}
</script>
<!-- START STAGE 2 -->
<script>
function stage2()
{
// From here, I want to execute some JavaScript to the new tab I've opened
}
</script>
<!-- START STAGE 3 -->
<script>
function stage3()
{
// Again, I want to execute another script on the new tab I've opened
}
</script>
<button type="button" onClick="stage1()">STAGE1</button>
<hr />
<button type="button" onClick="stage2()">STAGE2</button>
<hr />
<button type="button" onClick="stage3()">STAGE3</button>
</body>
</html>
I'd be very appreciated if someone could re-write this code and leave a space in the 3 's for my code to go to be executed on tab#2 from tab#1.
Thank you in advance! - Sorry, I'm a bit of a noob haha.
Cheers,
Declan Land
It won't be straightforward, but I think you could do it with a "proxy" page that displays the intended site (Twitter) in an iframe and runs the scripts you need when you pass a parameter in the address (e.g., proxy.htm?action=step2 ) or even use a separate dedicated proxy page (proxy2.htm) for each step.
But in order for this to work, I believe you need to use a custom name for the target of your anchor links (a target="proxy_twitter"), so all links open in the same tab.
A possible issue would be that the 2nd tab would reload the proxy page on each click, but maybe this can be avoided by changing the parameters to be hashtags (proxy.htm#action=step2).
I myself don't have any experience with this mechanism, but I've seen it used on some sites.
The code I want to run upon triggeting the redirect, is to go to another web page (or local html file, either is possible in this situation), however pass some javascript to run on that page, as that page works off embeding content in Iframes. This needs to be done to allow me to specify the content in the iframe upon redirect.
To put it simpler. How can I make it so when you go to website.com/about/, it redirects to website.com/ with the content for /about/ loaded in an iframe?
<head>
<title> CodeBundle </title>
<script>
function home() {document.getElementById("loadedpage").src="home.html";}
function about() {document.getElementById("loadedpage").src="about.html";}
function reviews() {document.getElementById("loadedpage").src="reviews.html";}
function tutorials() {document.getElementById("loadedpage").src="tutorials.html";}
function blog() {document.getElementById("loadedpage").src="blog.html";}
</script>
</head>
<body>
<header>
<br><hr><font size=27><a onClick="home();">Code Bundle</a></font><br><hr>
<div ALIGN=RIGHT>
<font size=6> | <a onClick="about();">About</a> | <a onClick="reviews();">Reviews</a> | <a onClick="tutorials();">Tutorials</a> | <a onClick="blog();">Blog<a> |</font> <hr>
</div>
<iframe id="loadedpage" src=home.html width=100% height=100% frameborder=0>Iframe Failed to Load</iframe>
</header>
</body>
</body>
this is my index.html for website.com/
I want to write a page so that when you go to website.com/about/ it redirects to website.com/ running the javascript function about(), so as to display the about page.
You will have to either pass some data using a query parameter or a fragment identifier.
See:
http://en.wikipedia.org/wiki/Query_string
http://en.wikipedia.org/wiki/Fragment_identifier
In either case you will have something present in the url and it will look like:
http://www.example.com/?page=about
or:
http://www.example.com/#about
or - this would be best:
http://www.example.com/#!/about
because it could let you make the website crawlable. See:
Making AJAX Applications Crawlable
Now after reading your comment to the answer by theredled that you "add new content regularly and loading that in embeded iframes is quicker than writing new html every time" I have to ask this: aren't you using a templating system in your website?
Keep in mind that making AJAX-loaded content and using fragment identifiers to display the right content is not done because the page creation is easier (it isn't) but because the user experience is faster and more responsive. See for example the website for the SoundJS library:
http://www.createjs.com/#!/SoundJS
When you click the link to PreloadJS at the top you go to:
http://www.createjs.com/#!/PreloadJS
The content is reloaded, the address bar changes, but the page is actually not reloaded. (You can see that it is properly crawlable because it shows in the results if you google for ReloadJS.)
Pass content by a user session ?
However, it's a quite dirty case, maybe you already know that :)