Javascript code to open a url on click in the same window - javascript

Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?

Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?

Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.

Related

Trying to load HTML into a div with a button

I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.
The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});

Copy and paste text from a div to another [jQuery]

I am trying to do a thing that seems easy to me but I'm not very familiar with javascript language and I can't find any documentation to do what I want.
Let's say I have a code like this:
<div id="sourceA">Text</div>
<div id="sourceB">Another</div>
<div id="destination"></div>
Let's say I click on the "sourceA" div, the text contained in it should go in the "destination" div.
Unfortunately, I have no idea how to do it. Can you help me? And maybe also suggest me somewhere I can go and learn something more about this code?
Read more about JavaScript and jQuery events. What you need here is a .click() event on sourceA to handle your behaviour as follows:
$("#sourceA").click(function() {
$("#destination").html($(this).html());
});
HTML:
<div id="sourceA" class="source">Text</div>
<div id="sourceB" class="source">Another</div>
<div id="destination"></div>
JS:
$('.source').click(function(e) {
$('#destination').text($(e.currentTarget).text())
});
Take a look at this example
var copyContentToDestinationClickHandler = function(event) {
$('#destination').empty();
$('#destination').append($(event.target).text());
}
$('#sourceA').click(copyContentToDestinationClickHandler);
$('#sourceB').click(copyContentToDestinationClickHandler);
https://jsfiddle.net/7v5a6bsu/

javascript click event onload page href whatsapp

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"

Newbie to jQuery and get function

I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp

Can I assign an action from javascript dynamically?

Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.

Categories